サイトアイコン A1 Style

[WordPress] Simplicityによるサイドバーへのツイート表示方法

前回はJetpackのウィジェットを使用しましたが、今回は、テキストウィジェットを使用して、Twitterのツイートをサイドバーに表示する方法を紹介します。

iPhoneなどでスクロールの操作中に、ウィジェット内でクルクルとスクロールしてしまうことありますよね?

気づいて指二本スクロールにすれば脱出できますが、ちょっと面倒です。

Simplicityには「パソコン用テキストウィジェット」が用意されていて、モバイルからのアクセスには、ウィジェットを表示させないことができます。

ホント、Simplicityは便利ですね(^^)

逆に「モバイルの場合も表示させたいな」という場合は、標準のテキストウィジェットを使用すればOKですので、お試しください。

Twitterからウィジェット用のコードを取得

WebブラウザからTwitterにログインした状態で、アバターのアイコンから[設定]をクリックします。表示された画面の左のサイドバーから[ウィジェット]をクリックします。

次のような画面が表示されたら、ウィジェットの[新規作成]ボタンをクリックして「ユーザータイムライン」を選択してください。

ボックスにTwitterのURLを入力して、[→]をクリックします。

[set customization option]と書かれたリンクをクリックして、コードをサイドバー用にカスタマイズします。

高さ、幅、言語を入力します。入力合わせて、下のプレビューが変化するので、確認しながら入力しましょう。

入力が終わったら、[Update]ボタンをクリックします。

カスタマイズされたコードが生成されました。

[Copy Code]をクリックして、コードをクリップボードにコピーしておいてください。

コピーできると下の確認メッセージが表示されます。右上の[×]で閉じてください。

サイドバーにSimplicityのウィジェットを追加

Simplicityを有効にされている方は、外観 > ウィジェット に「[S] パソコン用テキストウィジェット」が表示されていると思います。

クリックして、サイドバーにウィジェットを追加します。

「モバイルの場合も表示させたいな」という方は、ここで「テキストウィジェット」を選択してください。

タイトル欄には「Twitter」など見出しにしたい文字を入力します。

テキスト欄には、さきほどコピーしたウィジェットのコードを貼り付けます。

入力が終わって、最後に右下の[保存]ボタンをクリックすれば完成です。

Simplicityのウィジェットによる表示結果

早速、ツイートがどのように表示されているか、確認してみましょう。

Jetpackのウィジェットを使用した場合とほぼ同じですが、上の方の「〇〇さんのツイート」と表示されているところがちょっと違いますね。

また今回は、Simplicityの「[S] パソコン用テキストウィジェット」を使用したので、モバイルからのアクセスには、Twitterのウィジェットを表示しないようにもできました。

モバイルバージョンを終了