Webサービス WordPress

Twitterを表示するWordPressプラグイン

今回はWordPressのプラグインを使ってTwitterのフィードを表示させてみます。

 

プラグインをセットアップ

使用するプラグインはSmash BalloonのCustom Twitter Feedsです。

Smash Balloonではほかにも、FacebookやInstagramのフィードを表示するプラグインをリリースしていて、人気も高いようです。

WordPress Twitterフィードプラグイン

Custom Twitter Feedプラグイン

 

プラグインの設定を開くと、"Configure”タブが現われます。

5つのタブがありますが、最低このタブだけ設定すれば利用可能です。

Custom Twiiter Feed 基本設定

Twitterと連携させる

 

Twitterとの連携を承認する

Configurationタブの青いボタンをクリックすると、Twitterのページに切り替わってアカウント承認画面が表示されます。

すでにPC上でTwitterアカウントにログインしておくとスムーズに作業が進みます。

[連携アプリを認証]ボタンをクリックします。

Twitter連携承認画面

Twitterとプラグインの連携を承認

 

承認が終わり、プラグイン設定画面に戻ると、Access TokenAccess Token Secretのふたつと、Feed Typeに設定が書き込まれています。

このうちFeed Typeは”User Timeline”が選択され、連携したTwitterのユーザー名が入ります。

Custom Twitter Feed トークン設定

トークンが自動的に設定される

これで最低限の設定は終わり。

 

ショートコードを記述する

”Display Your Feed”タブに切り替えて、先頭にあるショートコードをコピーします。

Custom Twitter Feed ショートコード

ショートコードをコピーする

 

 

下のほうにあるテーブルには、いろいろなオプションを使う場合のショートコードが書かれています。

固定ページをElementorで開き、HTML要素をページ上に配置して、先ほどのショートコードをペーストします。

Elementor画面

Elementorの画面でショートコードをペースト

 

ページをプレビューすると、無事タイムラインが表示されました。

フィードの表示例

プレビューで表示を確認

 

表示サイズの調整

”Configure”タブの初期設定では、フィードの表示数が5になっています。

このままだと5件分のツイートすべて表示するのですが、ツィートによってそのつど文字量が違うので、すべてを表示していたら、Webページのレイアウトに合わないことが多いでしょう。

 

そこで設定画面の”Customize”タブに切り替えて、フィードの幅と高さを指定します。

初期設定では、Widthが100%、Heightのほうは空欄です。

ここでは高さを500pxに設定してみました。

Custom Twitter Feed 表示サイズの指定

高さを500pxにしてみた

 

ちなみに、その下のはフィードのレイアウトオプションがありますが、無料版で使えるのはふつうのリスト形式だけです。

再びプレビューを見ると、高さが制限された代わりにスクロールバーが表示されています。

Custom Twitter Feed 500pxでの表示例

高さを制限したことでスクロールバーが出現

 

その他のオプション

Generalタブ

”General”タブではTwitterとの連携やタイムラインの表示数のほかに、タイムラインの更新頻度を指定できます。

初期設定では3時間です。

 

Customizeタブ

Show/Hideオプションでは、ツィートに関する表示を細かく指定できます。

アバターやツイッターロゴなどの画像、Likeやリツイートなどのボタンなどを非表示化できるようです。

また”Show Header”でヘッダを非表示化できます。

Custom Twitter Feed

Customizeタブのオプション

 

Styleタブ

ツィート部分やヘッダ部分の背景色などを指定したり、ヘッダ用のテキストを登録できます。

Custom Twitter Feed スタイルオプション

Styleオプションのカラー指定

 

さらに細かい指定として、日付の書式、投稿者名やツイート本文などのテキストサイズ/文字色を指定したり、リンクを無効化することができます。

Custom Twitter Feed スタイル指定2

リンクやアイコンなどもカスタマイズできる

 

ショートコードは?

これらのオプションを変更しても、設置したショートコードはそのままでいいようです。

”Display Your Feed”タブには標準以外のショートコードがたくさん書かれていますが、より細かい設定が可能ということでしょうか・・・

 

機能は豊富だがあえて使うまでもない?

Twitter専用のプラグインだけあって、かなり細かい設定が可能なので、Webページのデザインに凝りたい方にはいいのではないでしょうか。

ただし、前回紹介した、パブリッシュしたコードを貼り付ける方法に比べると、なにかややこしいなという印象があります。

設定画面が日本語化されていないのもその一因でしょう。

ふつうにフィードを表示するだけだったら、あえてこのプラグインを使うまでもないかという印象を受けました。

-Webサービス, WordPress
-

© 2021 Windowsパソコン 使えるツール&テクニック