【WordPress】カスタムしてツイッターをブログで表示させる方法

現在、WordPressを使っていて、ツイッターを表示させたい。

だけどどうやって表示させればいいのかわからない。

そのような方のために、今回はWordPressにツイッターを表示させる方法を簡単に解説します。

ツイッターは今やブログのアクセスupには欠かせないツールなので、ぜひこの機会に自身のブログにツイッターを表示させてみましょう。

カスタムも簡単なので試してみてくださいね。

 

目次

ツイッターのタイムラインをウィジェットを使って埋め込む方法

SNSボタンを埋め込む方法

ツイッターのタイムラインをウィジェットを使って埋め込む方法

まずご自身のツイッターに飛んでいただき、アイコンをクリックし、「設定とプライバシー」をクリックしてください。

 

その後、ウィジェットを選択します。すると以下のような画面になります。

「publish.twitter.com」をクリックします。

 

すると以上のような画面に飛んだと思います。

この入力欄にご自身のツイッターのURLを入力しenterを押してください。

この左の「Embedded Timeline」を選択します。

「Copy Code」をクリックすると、埋め込みコードがコピーできます。「set customization options」で埋め込みの幅などのカスタマイズができるので、今回はこちらを選択します。

実際カスタマイズをしないと、タイムラインが長く表示されすぎてしまうなどのデメリットがあります。

お好きな高さ、幅、色などを指定し、「update」を押します。

すると、先ほどの画面にもう一度戻りますので、「Copy Code」をクリックします。

今回は横350px、縦500px、色をdarkにしてみました。

 

ウィジェットに貼り付け

次にウィジェットに貼り付ける作業をしていきます。

まずは管理画面を開いてください。

外観の「ウィジェット」をクリックします。すると様々なウィジェットが表示されたと思います。

このウィジェット一覧の中に「カスタムHTML」ウィジェットがあります。

今回はフッターの右側のウィジェットににツイッターを埋め込んでいきます。

この「カスタムHTML」ウィジェットを「フッター(右)」の中にドラッグアンドドロップします。別のやり方として、「カスタムHTML」をクリック→「フッター(右)」選択→「ウィジェットを追加」をクリックでもできます。

「タイトル・内容」に入力項目が表示されます。「内容」がHTMLタグを入力する範囲なので、ここに先ほど「Copy Code」でコピーした内容を貼り付けます。

こうなりました。いい感じですね。

 

「カスタムHTML」ウィジェットの使い方はこちらの記事も参考になると思います。

https://netemolonge.net/profile-custom-html/

SNSボタンを埋め込む方法

以上の解説で述べたツイッターのタイムラインを埋め込む方法とほぼほぼ変わりません。

ツイッターのタイムラインを埋め込む方法で解説した手順通り以上の画面までいきましたら「Twitter Buttons」を選択し、「Copy Code」をクリックし、SNSボタンを入れたい場所に貼り付ければ終わりです。こちらもツイッターのタイムライン同様、カスタムができるの試してみてくださいね。

試しに記事内にフォローボタン入れみました。カスタムして少しボタンがデフォルトよりも大きくなっています。

こんな感じです。

解説は以上になります。

 

まとめ

今回はツイッターのタイムラインをウィジェットを使って埋め込む方法とSNSボタンを埋め込む方法を解説しました。

ぜひこの機会にブログとツイッターを連携させ、魅力的なブログを作っていきましょう。