[WordPress] 外掛分享: Tweets Widget

首頁外掛目錄 › Tweets Widget
20+
安裝啟用
★★★★★
5/5 分(1 則評價)
3491 天前
最後更新
問題解決
WordPress 3.5.1+ v1.0 上架:2016-08-26

內容簡介

此外採用匿名的 Loklak API,或是連結您的 Twitter 帳號至這個外掛,這個小工具會顯示您在 Twitter 上最新的張貼。

這個外掛相容於新的 Twitter API 1.1,可透過 WordPress 的管理後台進行 OAuth 認證。

短碼

您可以透過 WordPress 的短碼「[tweets]」在文章內建立嵌入式的推文。

要嵌入別的使用者的時間線,請新增「user」屬性。
要重載預設的 5 條推文,請新增「max」屬性,例如:

[tweets max=10 user=KhoslaSopan]<h3>Theming</h3>

對於初學者,您可以透過 WordPress 內建功能調整 HTML。
請參考小工具氾濫
以及小工具的佈景主題

CSS

這個外掛本身不含有 CSS,目的是要讓您可以視情況自行設計風格。

這個外掛會將推文以列表樣式呈現,您可以利用各種鈎子進行設計。以下是一個簡單範本:

.tweets {
/* 設計推文列表 */
}
.tweets h3 {
/* 設計標頭 */
}
.tweets ul {
/* 設計列表 */
}
.tweets li {
/* 設計項目 */
}
.tweets .tweet-text {
/* 設計主要的推文 */
}
.tweets .tweet-text a {
/* 設計連結、主題標籤及提及 */
}
.tweets .tweet-text .emoji {
/* 設計內嵌在推文中的表情符號圖片 */
}
.tweets .tweet-details {
/* 設計推文日期時間及連結 */
}

自訂 HTML

如果您想要覆蓋推文的預設標記,以下的鈎子也提供了額外功能:

在小工具標題和推文之間新增標題,可使用 tweets_render_before
透過 tweets_render_date 個人化繪製日期時間戳記
透過 tweets_render_text 個人化繪出單一推文的 HTML
透過 tweets_render_tweet 以個人化方式繪製每個複合推文
覆蓋推文的無序列表,可使用 tweets_render_list
在小工具結束前新增页脚,可使用 tweets_render_after

以下是在佈景主題的 functions.php 檔案中使用以上功能的範例:

add_filter('tweets_render_date', function( $created_at ){
$date = DateTime::createFromFormat('D M d H:i:s O Y', $created_at );
return $date->format('d M h:ia');
}, 10 , 1 );

add_filter('tweets_render_text', function( $text ){
return $text; // <- 使用預設值
}, 10 , 1 );

add_filter('tweets_render_tweet', function( $html, $date, $link, array $tweet ){
$pic = $tweet['user']['profile_image_url_https'];
return '<p class="my-tweet"><img src="'.$pic.'"/>'.$html.'</p><p class="my-date"><a href="'.$link.'">'.$date.'</a></p>';
}, 10, 4 );

add_filter('tweets_render_after', function(){
return '<footer><a href="https://twitter.com/me">More from me</a></footer>';
}, 10, 0 );<h3>暫存</h3>

Twitter API 的回應預設會暫存 5 分鐘。這代表您的新推文不會在實時顯示於您的網站上。

這是為了效能而刻意而為之,同時也是為了避免 Twitter 程式嚴格執行的 15 分鐘內限制發出 15 個請求的規定。

您可以使用其他外掛或獨立的快取基礎設施,以提升效能並減少如此頻繁的 API 求取。

外掛標籤

開發者團隊

⬇ 下載最新版 (v1.0) 或搜尋安裝

① 下載 ZIP → 後台「外掛 › 安裝外掛 › 上傳外掛」
② 後台搜尋「Tweets Widget」→ 直接安裝(推薦)
📦 歷史版本下載

原文外掛簡介

Use anonymous Loklak API OR Connect your Twitter account to this plugin and the widget will display your latest tweets on your site.
This plugin is compatible with the new Twitter API 1.1 and provides full OAuth authentication via the WordPress admin area.
Shortcodes
You can embed tweets in the body of your posts using a WordPress the shortcode [tweets].
To specify a different user’s timeline add the user attribute.
To override the default number of 5 tweets add the max attribute, e.g:
[tweets max=10 user=KhoslaSopan]

Theming

For starters you can alter some of the HTML using built-in WordPress features.
See Widget Filters
and Widgetizing Themes
CSS
This plugin contains no default CSS. That’s deliberate, so you can style it how you want.
Tweets are rendered as a list which has various hooks you can use. Here’s a rough template:
.tweets {
/* style tweet list wrapper */
}
.tweets h3 {
/* style whatever you did with the header */
}
.tweets ul {
/* style tweet list*/
}
.tweets li {
/* style tweet item */
}
.tweets .tweet-text {
/* style main tweet text */
}
.tweets .tweet-text a {
/* style links, hashtags and mentions */
}
.tweets .tweet-text .emoji {
/* style embedded emoji image in tweet */
}
.tweets .tweet-details {
/* style datetime and link under tweet */
}

Custom HTML
If you want to override the default markup of the tweets, the following filters are also available:

Add a header between the widget title and the tweets with tweets_render_before
Perform your own rendering of the timestamp with tweets_render_date
Render plain tweet text to your own HTML with tweets_render_text
Render each composite tweet with tweets_render_tweet
Override the unordered list for tweets with tweets_render_list
Add a footer before the end of the widget with tweets_render_after

Here’s an example of using some of the above in your theme’s functions.php file:
add_filter('tweets_render_date', function( $created_at ){
$date = DateTime::createFromFormat('D M d H:i:s O Y', $created_at );
return $date->format('d M h:ia');
}, 10 , 1 );

add_filter('tweets_render_text', function( $text ){
return $text; // <- will use default }, 10 , 1 ); add_filter('tweets_render_tweet', function( $html, $date, $link, array $tweet ){ $pic = $tweet['user']['profile_image_url_https']; return '

'.$html.'

'.$date.'

';
}, 10, 4 );

add_filter('tweets_render_after', function(){
return '

';
}, 10, 0 );

Caching

Responses from the Twitter API are cached for 5 minutes by default. This means your new Tweets will not appear on your site in real time.
This is deliberate not only for performance, but also to avoid Twitter’s strict rate limits of 15 requests every 15 minutes.
You can override the 300 second cache by using the tweets_cache_seconds filter in your theme as follows:
This would extend the cache to 1 minute, which is the lowest value you should consider using on a live site:
add_filter('tweets_cache_seconds', function( $ttl ){
return 60;
}, 10, 1 );

This would disable the cache (not recommended other than for debugging):
add_filter('tweets_cache_seconds', function( $ttl ){
return 0;
}, 10, 1 );

Emoji

If you want to disable Emoji image replacement, you can filter the replacement callback function to something empty, e.g:
add_filter('tweets_emoji_callback', function( $func ){
return '';
} );

or to strip Emoji characters from all tweets, return your own replacement function that returns something else, e.g:
add_filter(‘tweets_emoji_callback’, function( $func ){
return function( array $match ){
return ‘‘;
};
} );
Credits
Screenshot taken with permission from http://stayingalivefoundation.org/blog

Portuguese translations by Leandro Dimitrio

German translations by Florian Felsing and David Noh
Russian translations by Andrey Yakovenko
Dutch translations by Daniel Wichers
Spanish translations by Pedro Pica

Notes
Be aware of Twitter’s display requirements when rendering tweets on your website.
Example code here uses PHP closures which require PHP>=5.3.0 and won’t work on older systems.

延伸相關外掛

文章
Filter
Apply Filters
Mastodon