WordPressでの最新ツイート表示をカスタマイズする方法


所要時間: 7

WordPressでの最新ツイート表示をカスタマイズする方法

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

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

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

使用するプラグイン

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

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

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

My Twitte Widget1.5のダウンロード

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

My Twitter Widget1.5のインストール

ウィジェットの配置

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

追加されたウィジェット

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

My Twitter Widgetの設定画面

Twitterアプリの登録方法

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

Twitterアプリ登録ページログイン画面

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

新規アプリを作成

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

Twitterアプリ作成時の入力項目

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

新規作成されたTwitterアプリ

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

API Keyなどを取得した画面

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

  • Consumer Key (新API Key)
  • Consumer Secret (新API Secret)
  • Access Token
  • Access Token Secret

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

ウィジェットの設定項目詳細

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

CSSでデザインを行う

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

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

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

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

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

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

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

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

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

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

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

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

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

My Twitter Widgetのデバッグオプション

Twitter API制限

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

これを回避するには

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

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

まとめ

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

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

コメントを書いてみませんか?