WordPressでの最新ツイート表示をカスタマイズする方法 / hirok-k.com

こん＊＊は、今年も葉桜の花見になりそうな@wine_and_webことhirok-kです。

昨年導入されたTwitter API 1.1により、それまではRSSで取得できたツイート一覧が取得できなくなりました。RSSで取得できれば、それを元にしてツイート表示を比較的楽にカスタマイズできたのですが、現在はそうもいかずに仕方なく標準のTwitterウィジェットでツイート表示をされている方も多いかと思います。それではブログのデザインにあわないなどの不満もでてきます。そんなときの不満の解決に役立つ情報をご紹介します。

標準のTwitterウィジェット（埋め込みタイムライン）以外を使用する際は、Twitte社の表示に関するガイドライン（英語）も参照ください。

目　次

1 使用するプラグイン
- 1.1 プラグインのインストール
- 1.2 ウィジェットの配置
2 Twitterアプリの登録方法
3 CSSでデザインを行う
4 使用にあたってのトラブルシューティング
5 まとめ

使用するプラグイン

カスタマイズしたツイート表示を行うには、My Twitter Widgetというプラグインを使用します。
最新版は現在1.6.1となっていますが、この最新版ではカスタマイズがほぼ行えないため、敢えて旧バージョンである1.5を使用します。

プラグインのインストール

こちらのMy Twitter Widgetダウンロードページから、旧バージョンである1.5をダウンロードします。

プラグイン＞新規追加＞アップロードから先ほどダウンロードしたmy-twitter-widget.1.5.zipをアップロードし、有効化します。
インストールできなかったり、有効化できない場合はトラブルシューティングの項目をご覧ください。

ウィジェットの配置

My Twitter Widgetをインストールし有効化すると、外観＞ウィジェットにあるウィジェット追加画面でMy Twitter Widgetというのがあるはずですので、追加したいサイドバーやフッターに配置します。

配置をすると次のような設定画面が表示されますが、その中にConsumer KeyやConsumer Secretなどという見慣れない入力項目があります。
これを取得するためには少々面倒ですが、Twitterアプリ登録を行う必要がありますので、次の項目で詳しくご紹介します。

Twitterアプリの登録方法

Twitterのアプリ登録は、こちらのアプリ登録ページで行います。
Twitterのユーザーネームとパスワードを入力し、ログインしましょう。

次の画面でCreate a new applicationをクリックして、新規アプリを作成します。

表示されている４つの入力項目をすべて入力し、Create your Twitter applicationボタンをクリック。

アプリ作成が成功すると、こちらの作成アプリ一覧ページに作成したアプリが登録されているので、さきほど新規に作成したアプリをクリックします。

タブにあるAPI Keysをクリックすると、ウィジェットの設定で必要な4つの入力値がみつけられるはずですので、それを別途コピーして保存しておきます。
なおConsumer keyはAPI Key、Consumer SecretはAPI Secretに名称が変更されているのでご注意ください。

ここでウィジェット追加画面にもどり、先ほど保存した

Consumer Key （新API Key）
Consumer Secret （新API Secret）
Access Token
Access Token Secret

をそれぞれ入力し、他の入力項目も記入し保存します。

この時点で最新ツイートが表示されているはずですが、これではやはり見栄えがよくないのでCSSでデザインを変えましょう。

CSSでデザインを行う

このウィジェットが吐き出すHTMLソースは、次のような構造になっています。

<div class="sub-widget widget_mytwitterwidget">
<h5>Latest Tweets</h5>
<ul class="my_twitter_widget">
<li>本文 <a href="" class="twitter-link" >リンク</a> <span class="twitter-timestamp" title="2014/04/01 00:40">10分 ago</span></li>
<li>本文 <a href="" class="twitter-link" >リンク</a> <span class="twitter-timestamp" title="2014/04/01 00:30">20分 ago</span></li>
<li>本文 <a href="" class="twitter-link" >リンク</a> <span class="twitter-timestamp" title="2014/04/01 00:20">30分 ago</span></li>
<li>本文 <a href="" class="twitter-link" >リンク</a> <span class="twitter-timestamp" title="2014/04/01 00:10">40分 ago</span></li>
<li>本文 <a href="" class="twitter-link" >リンク</a> <span class="twitter-timestamp" title="2014/04/01 00:00">50分 ago</span></li>
</ul>
<div class="mtw_link_user"><a href="http://twitter.com/@fetishstyleinfo" >Follow Fetish-Style.info on Twitter</a></div>
<br />
<center><div class="poweredby">By US: <a href="http://www.dallasprowebdesigners.com">Web Design Company</a></div></center>
</div>

<h5>Latest Tweets</h5>

</ul>

<div class="mtw_link_user"><a href="http://twitter.com/@fetishstyleinfo" >Follow Fetish-Style.info on Twitter</a></div>

<br />

<center><div class="poweredby">By US: <a href="http://www.dallasprowebdesigners.com">Web Design Company</a></div></center>

</div>

これを見ていただくとお分かりいただけるかと思いますが、要所要所にclassが設定されているため、外観＞テーマ編集からstyle.cssへCSSを追加することで思い通りのデザインが行えます。

例えばですが、次のようなCSSをこのブログでは使用しています。

/*My Twitter Widget*/
.my_twitter_widget li {
font-size:12px;
margin-left: 0;
margin-bottom: 10px;
padding-left: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #4b4b4b;
}
.my_twitter_widget li:before {
font-family: 'genericons'; /*ツイートの前にアイコンフォントを使用しています*/
color: #e10707;
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
padding-right: 5px;
top: 4px;
font-size: 14px;
position: relative;
line-height: 0px;
content: '\f202';
}
.my_twitter_widget a {
text-decoration: underline;
}
.mtw_link_user {
font-size:12px;
float:right;
}

/*My Twitter Widget*/

.my_twitter_widget li {

font-size:12px;

margin-left: 0;

margin-bottom: 10px;

padding-left: 5px;

padding-bottom: 5px;

border-bottom: 1px solid #4b4b4b;

}

.my_twitter_widget li:before {

font-family: 'genericons'; /*ツイートの前にアイコンフォントを使用しています*/

color: #e10707;

speak: none;

font-weight: normal;

font-variant: normal;

text-transform: none;

line-height: 1;

-webkit-font-smoothing: antialiased;

padding-right: 5px;

top: 4px;

font-size: 14px;

position: relative;

line-height: 0px;

content: '\f202';

}

.my_twitter_widget a {

text-decoration: underline;

}

.mtw_link_user {

font-size:12px;

float:right;

}

アイコンフォントGenericonについては、こちらのサイトを参照ください。

使用にあたってのトラブルシューティング

旧バージョンのインストールに失敗

WordPressの構成によっては、My Twitter Widgetの旧バージョンのインストールは行えても有効化できない場合があります。その際は、次の方法で回避が可能です。

一旦最新版である1.6.1をインストールし有効化
FTPでプラグインディレクトリへアクセスし、my-twitter-widgetディレクトリ内のファイルを全て削除
my-twitter-widget.1.5.zipを解凍し、その構成ファイルを空となったmy-twitter-widgetディレクトリ内にすべてアップロード
WordPressのプラグイン管理画面をリロード

これで1.5がインストールされ有効化された状態になるはずです。

ツイートが表示されない、表示がおかしい

設定を行ったにも関わらずツイート表示が行われない場合は、次の２項目をチェックしましょう。

登録したアプリのチェック
Consumer Key（新API Key）, Consumer Secret（新API Secret）, Access Token, Access Token Secretの値のチェック

それでもダメな場合は、Debug optionsのErase cached dataをONにする、またはForce UTF8 EncodeをONにすることで回避できる場合がありますので、お試しください。

Twitter API制限

Twitter API 1.1では使用制限がかかっています。ここでご紹介している方法を始めとしてAPIを使用する場合全般にかかる制限で、1時間あたり使用回数350回までと定められています。
そのため、アクセスの多いサイトではAPI切れと呼ばれるツイートが取得できない現象が発生する可能性があります。

これを回避するには

標準ウィジェットを使用する
キャッシュプラグインを使用し、APIの使用回数を減らす

いずれかの方法がありますが、後者の場合ですとQuick Cache新旧版の選び方とその設定で紹介したQuick Cacheなどを使用することをおすすめします。

まとめ

いかがでしたでしょうか。以前は
　RSS取得→ツイートを表示→CSSで整形
が可能だったのが新API導入により不可能となったため
　Twitterアプリ登録→各種キーを取得→ツイート一覧を取得→ツイートを表示→CSSで整形
とかなり煩雑とはなりましたが、一応は可能ですのでご紹介しました。

お役に立てれば幸いです。