WordPressサイトにTwitterウィジェットを追加してみませんか？数回クリックするだけで、Twitter（現在はX）のフィード、投稿、ボタンをWordPressに表示できます。これにより、サイトの鮮度を保ち、エンゲージメントを促進し、訪問者がウェブサイトを離れることなくフォロワーを増やすことができます。
WordPressにTwitterウィジェットを追加する最も簡単な3つの方法をご紹介します：
- ページビルダーを使う SeedProdのTwitterブロックを使って、ツイート、タイムライン、フォローボタンをサイト上のどこにでも追加できます。
- プラグインをインストールする：Custom Twitter Feeds (Smash Balloon)のようなプラグインを使って、カスタマイズ可能なTwitterフィードを作成する。
- 手動で埋め込む：公式Twitter Publishツールから埋め込みコードをコピーし、ブロックやウィジェットエリアに貼り付けます。
このガイドでは、それぞれの方法を順を追って説明するので、あなたのサイトに最適なオプションを選ぶことができる。
| 方法 | 最適 | 長所 | 短所 |
|---|---|---|---|
| SeedProdページビルダー | デザインを完全にコントロールしたい方 | ドラッグ＆ドロップ編集 🔹ツイート、タイムライン、ボタン 🔹テーマに合わせたスタイル | 高度な機能を利用するにはプレミアム・バージョンが必要 |
| Twitterフィードプラグイン | 複数のフィードやハッシュタグ表示が必要な企業 | 🔹 レディメイドレイアウト 🔹 リアルタイム更新 🔹 速度のためのフィードキャッシュ | 管理するための追加プラグイン |
| マニュアルの埋め込み | 単発ツイートやシンプルなタイムライン | 🔹 プラグイン不要 🔹 簡単なコピーペースト設定 | 限定スタイリング 手動配置のみ |
WordPressのTwitterウィジェットとは？
WordPressのTwitterウィジェット（またはXウィジェット）は、サイトのサイドバー、フッター、ページレイアウトに追加できる小さなコンテンツブロックです。タイムライン、シングルツイート、フォローボタンなど、Twitter/Xのライブコンテンツを表示します。
このようなウィジェットは、コードを書くことなく、あなたのサイトを常に新鮮でインタラクティブなものにするために作られています。一度接続すれば、新しいツイートが公開されるたびに自動的に更新されるため、サイトは常に最新の状態に保たれます。
- Twitter/Xの完全なフィード（タイムライン）を埋め込む
- 単一のツイートを表示する
- ハッシュタグやリストからのツイートを表示する
- フォローまたはツイートボタンを追加する
SeedProdのようなページビルダー、Twitterフィードプラグイン、またはTwitter Publishツールから埋め込みコードを貼り付けることで、WordPressにTwitterウィジェットを追加できます。
WordPressにTwitterコンテンツを追加する理由
WordPressサイトにTwitterのコンテンツを表示することは、新しいコンテンツでサイトを更新する優れた方法です。多くのツールがTwitterフィードやウィジェットを自動的に更新するため、手動でコンテンツを追加する必要がなく、時間を節約し、サイトを常に新鮮で魅力的なものに保つことができます。
フォローボタンやシェアボタンを含むTwitterウィジェットは、ソーシャルメディアのフォロワーを増やすのに役立ちます。Twitterアカウントを表示するためにサイトを離れる代わりに、ユーザーはTwitterであなたをフォローし、あなたのサイトから直接関連するコンテンツを共有することができます。
ここまでで、Twitterウィジェットとは何か、なぜWordPressにTwitterコンテンツを追加するのが良いのかがお分かりいただけたと思います。それでは、魅力的なTwitterコンテンツをサイトに追加する方法を見ていきましょう。
WordPressにTwitterウィジェットを簡単に追加する方法
WordPressにTwitterウィジェットを追加する3つの異なる方法を見ていこう。ページビルダーとWordPress Twitterプラグインを使った最も簡単な方法から始め、最後に手動で行う方法を紹介する。
1.WordPress Page BuilderプラグインでTwitterウィジェットを追加する
まず、ページビルダープラグインを使ってWordPressにTwitterウィジェットを追加する方法を紹介する。
ページビルダーを使用すると、コードなしで WordPress サイトを視覚的にカスタマイズできます。また、複数のWordPress プラグインをインストールしたり、開発者を雇ったりすることなく、サイトのデザインと機能性を向上させる優れた方法でもあります。
今日使用するプラグインは、WordPressのための最高のウェブサイトビルダーであるSeedProdです。このプラグインには、カスタムWordPressテーマ、ランディングページ、柔軟なレイアウトを素早く簡単に構築できるドラッグ＆ドロップ式のページビルダーが含まれています。
SeedProdには、Twitterフィード、投稿埋め込み、フォローボタンやツイートボタンなど、何百もの既成テンプレートやカスタマイズ可能なコンテンツ要素があります。また、サインアップフォーム、コンタクトフォーム、価格テーブル、ソーシャルプルーフなどのリードジェネレーション要素をサイトに追加することもできます。
SeedProdを使ってWordPressにTwitterウィジェットを追加するには、以下の手順に従ってください。
ステップ1.SeedProdのインストールとアクティベート
まず、SeedProdのプランを開始し、プラグインをコンピュータにダウンロードする必要があります。その後、WordPressウェブサイトにプラグインをアップロードし、有効化します。
このステップで助けが必要な場合は、WordPressプラグインのインストールに関するガイドを参照してください。
注：SeedProdには無料ライセンスがありますが、高度な機能のためにプレミアム版を使用します。
SeedProdをインストールした後、SeedProd " Settingsにアクセスし、ライセンスキーを入力してください。ライセンスキーは、SeedProdウェブサイトのお客様のアカウントの「ダウンロード」セクションにあります。
ステップ2.WordPressテーマまたはランディングページを作成する
SeedProdを使用してWordPressサイトをカスタマイズする方法は2つあります。
すべてのテンプレートパーツとページでカスタムWordPressテーマを構築し、ビジュアルエディタで各パーツをカスタマイズすることができます。または、既存のWordPressテーマを使ってランディングページを構築することもできます。
このチュートリアルでは、SeedProdのカスタムWordPressテーマのサイドバーテンプレートを使用します。SeedProdでカスタムWordPressテーマを作成するすべての手順については、こちらのガイドを参照してください。
ランディングページを使用したい場合は、WordPressでランディングページを作成するためのガイドに従ってください。
どちらのガイドも、テンプレートを選び、テーマやランディングページをカスタマイズできるようにするまでの手順を説明します。Twitterコンテンツを追加する準備ができたら、このチュートリアルのステップ3に進んでください。
ステップ3.WordPressにSeedProd Twitterブロックを追加する
カスタムテーマまたはランディングページを作成したら、SeedProdのドラッグ＆ドロップページビルダーでデザインを編集できます。
ランディングページを編集する場合は、SeedProd " ランディングページに移動し、カスタマイズしたいページの「編集」をクリックしてください。
このガイドでは、カスタムWordPressテーマのサイドバーテンプレートを編集します。そのためには、SeedProd " Theme Builder ページに行き、関連するテンプレートにカーソルを合わせ、"Edit Design "リンクをクリックします。
デザインを開くと、SeedProdのビジュアルエディタに表示されます。ブロックとセクションは左側に、ライブプレビューは右側にあります。
プレビュー上の任意の要素をクリックして、その設定を編集することができます。そうすると、左側のパネルにカスタマイズオプションが開きます。
詳細ブロックのセクションまでスクロールすると、デザインに追加できるさまざまなコンテンツ要素が表示されます。ここでは、WordPressサイトにTwitterウィジェットを追加するためのブロックを紹介します：
- ツイッター埋め込みツイート
- ツイッター・ツイート・ボタン
- ツイッターフォローボタン
ツイッター埋め込みツイート
Twitter Embed Tweetブロックを使えば、数回のクリックでTwitterの投稿を埋め込むことができます。ライブプレビューにブロックをドラッグしてクリックするだけで、設定が表示されます。
設定パネルでは、埋め込みたいツイートのIDを貼り付けることができます。また、明るい色と暗い色の配色を選択したり、ツイートの会話を非表示にしたり、写真、ビデオ、Twitterカードを非表示にしたり、ブロックの配置を調整したりすることもできます。
詳細」タブでは、ブロックの間隔と属性を制御し、モバイルまたはデスクトップで非表示にすることができます。
ツイッターのツイートとフォローボタンのブロック
SeedProdの最後の2つのTwitterウィジェットは、ツイートとフォローボタンブロックです。これらは投稿やフィードの埋め込みと同様に機能しますが、Twitterのコンテンツを表示する代わりに、訪問者がカスタムメッセージをツイートしたり、Twitterであなたのプロフィールをフォローしたりできるようにします。
フォローボタンの設定では、Twitterのスクリーンネームを入力したり、フォロワー数を表示したり、配置、言語、間隔、デバイスの可視性をカスタマイズすることができます。
ツイートボタンの設定では、訪問者にシェアしてもらいたいURL、ツイート内容、ハッシュタグを追加できる。また、言及や関連アカウント経由で@を追加する欄もある。
どちらのボタンも、ボタンのサイズを大小から選択でき、モバイル画面とデスクトップ画面での表示方法をコントロールできます。
SeedProdのTwitterブロックの組み合わせをいろいろ試して、右上の保存ボタンをクリックして変更を保存してください。
ステップ4.WordPressでTwitterウィジェットを公開する
次のステップは、TwitterのコンテンツをWordPressサイト上に表示させることです。SeedProdのカスタムWordPressテーマを使っているので、SeedProd " Theme Builderに行き、Enable SeedProd Themeトグルを "On "にするだけです。
これで、Twitterのコンテンツを含むページをプレビューし、どのように見えるかを確認することができます。
2.WordPressのTwitterフィードプラグインでTwitterウィジェットを埋め込む
次に紹介するのは、Twitter Feedsプラグインを使ってWordPressウィジェットをサイトに追加する方法です。ここでは、Smash Balloonの Custom Twitter Feeds Proプラグインを使用します。
Custom Twitter Feedsプラグインは、WordPress用のトップクラスのTwitterフィードプラグインです。数回クリックするだけで、あなたのウェブサイトにTwitterフィードを表示することができます。
ビジュアルフィードエディタを使ってリアルタイムでTwitterのライブフィードをカスタマイズしたり、ビジネスのニーズに合わせて複数のフィードタイプから選ぶことができます。
Smash Balloonを使ってWordPressにTwitterフィードを追加するには、以下の手順に従ってください。
ステップ1.Twitter Feeds Pro プラグインをインストールする
まず、Twitter Feeds Proプラグインを入手し、WordPressサイトにインストールする。
プラグインを有効化した後、Twitter Feed " Settingsにアクセスし、ライセンスキーの詳細を入力してください。
ライセンスキーを確認したら、最初のTwitterウィジェットを追加する準備ができました。
ステップ2.カスタムTwitterウィジェットを作成する
新しいTwitterウィジェットを追加するには、Twitterフィード " すべてのフィードページに行き、新規追加ボタンをクリックします。
次のページで追加したいフィードの種類を選択できます。以下のオプションが表示されます：
- ユーザータイムライン：Twitter上のあらゆるユーザのツイートのタイムライン
- ハッシュタグ：特定のハッシュタグを含む公開ツイート
- ホーム タイムライン:ツイッターアカウントのタイムライン
- 検索：特定のTwitter検索ワードにマッチしたツイートのフィード
- メンションあなたのTwitterハンドルネームに言及したツイート
- リスト公開Twitterリストからのツイート
このガイドでは、ユーザータイムラインオプションを選択します。次のステップに進む準備ができたら、Nextボタンをクリックしてください。
ステップ3.Twitterアカウントに接続する
次の画面では、Twitterアカウントと接続し、Twitterからデータを取得してウェブサイトに表示できるようにするための読み取り専用アクセスが求められます。
Connectボタンをクリックした後、Authorize Appを選択すると、Twitterフィードの作成プロセスに戻ります。
ユーザータイムラインフィードを追加するので、次のステップは表示したいTwitterハンドルを入力することです。ユーザー名を入力し、「次へ」ボタンをクリックします。
ステップ4.Twitterウィジェットをカスタマイズする
Twitterウィジェットのテンプレートを7種類から選べるようになりました：
- デフォルトフィード
- 石工カード
- シンプルなカルーセル
- シンプルなカード
- ショーケース・カルーセル
- 最新ツイート
- ウィジェット
あなたのウェブサイトに最も適したテンプレートをクリックし、[次へ]ボタンをクリックします。
次の画面では、ライブエディタを使ってTwitterウィジェットをカスタマイズできます。
左側のパネルには、フィードのレイアウト、カラースキーム、ヘッダーデザイン、ツイート、ライトボックスオプションなどを変更するオプションがあります。また、右側で変更をプレビューすることができます。
フィードレイアウトタブでは、リストレイアウト、メイソンレイアウト、カルーセルレイアウトから選択できます。
配色タブでは、ダークカラー、ライトカラー、カスタムカラーを選択できます。また、WordPressテーマから配色を継承するオプションもあります。
ヘッダー]タブでは、[標準]や[テキスト]など、いくつかのヘッダーカスタマイズオプションがあります。また、ヘッダーセクションを無効にしたり、Twitterのバイオを非表示にすることもできます。
すべての外観に満足するまで、ウィジェットの外観を微調整し続けます。さらに、保存ボタンをクリックして設定を保存します。
ステップ5.WordPressにTwitterウィジェットを追加する
Smash Balloonを使えば、WordPressサイトにTwitterウィジェットを簡単に埋め込むことができます。画面上部の埋め込みボタンをクリックするだけです。
以下の埋め込みオプションのポップアップが表示されます：
- ショートコード:Twitterフィードのショートコードをページ、投稿、ウィジェットに貼り付けます。
- WordPressブロック：投稿、ページ、またはウィジェットにフィードを追加するには、組み込みのWordPressブロックを使用します。
このガイドでは、ウィジェットに追加オプションを選択します。
このオプションをクリックすると、WordPressウィジェットの設定が自動的に開きます。そこからブロックの追加アイコンをクリックし、カスタムTwitterフィードブロックを探してください。
ウィジェットエリアにブロックを追加したら、更新ボタンをクリックして変更を保存します。あなたのサイトにアクセスして、Twitterウィジェットの動作を確認してください。
3.手動でWordPressにTwitterウィジェットを追加する
最後の方法は、Twitter Publishツールを使って、プラグインを使わずに手動でWordPressサイトにTwitterウィジェットを追加する方法です。このオプションでは、ツイート、タイムライン、フォローボタンを埋め込むことができる。
この方法は、ウィジェットのデザインや表示できるコンテンツのタイプをあまりコントロールできない。しかし、WordPressにプラグインを追加したくないユーザーには便利なソリューションです。
この方法を使うには、Twitter Publishツールのウェブサイトに行き、どのタイプの埋め込みを使うかを選択します。このガイドでは、埋め込みタイムラインのオプションを使用します。
次の画面で、表示したいTwitterプロフィールの完全なURLを入力し、プレビューボタンをクリックします。
Twitterがあなたのウェブサイトに埋め込めるタイムラインのショートコードを生成します。コピーボタンをクリックしてコードをクリップボードに保存し、WordPressサイトに戻りましょう。
埋め込みコードをWordPressの投稿、ページ、ウィジェットエリアに追加できます。サイドバーウィジェットとしてTimelineを埋め込むには、WordPressダッシュボードから「外観 " ウィジェット 」にアクセスしてください。
ブロックの追加アイコンをクリックしてサイドバーに新しいブロックを追加し、カスタムHTMLブロックを探します。Twitterからコピーした埋め込みコードをHTMLブロックに貼り付け、更新ボタンをクリックします。
ライブのウェブサイトにアクセスすると、Twitterウィジェットはこの例のように表示されます：
WordPressにTwitterウィジェットを追加する際のFAQ
このステップバイステップのガイドが、WordPressにTwitterウィジェットを追加する方法を学ぶのに役立てば幸いです。WordPressにFacebookのイベントを埋め込む方法については、こちらのガイドがお勧めです。
SeedProdを使ってWordPressにTwitterウィジェットを追加する準備はできましたか？
お読みいただきありがとうございました！あなたのご意見をぜひお聞かせください。YouTube、X、Facebookで、あなたのビジネスを成長させるために役立つアドバイスやコンテンツを提供していますので、お気軽に会話にご参加ください。
