ウェブサイトにX(ツイッター)のコンテンツを表示する簡単な方法をお探しですか?
Xウィジェットを追加することは、訪問者に新鮮で魅力的なXコンテンツを提供するための最も効果的な方法の一つです。WordPressにウィジェットを追加する方法は数多くあるため、どこから手をつければよいか迷ってしまうかもしれません。
この記事では、WordPressでXウィジェットを追加する2つの方法をご紹介します:
本題に入る前に、「Xウィジェット」という言葉が何を指すのか、明確にしておきましょう。
WordPress X(Twitter)ウィジェットとは?
ウィジェット」とは、サイトのサイドバーやフッターなどに追加できるコンテンツのブロックのことです。
ブログを見ていて、サイドバーにサインアップフォームやソーシャルボタンがあるのを見たことがあるだろうか?どちらもウィジェットです。それぞれのウィジェットは、コードを書くことなく、あなたのサイトに機能や特徴を追加します。

つまり、Xウィジェットとは、サイドバー領域に追加できるXコンテンツのブロックのことです。
Xウィジェットを使用すると、ウェブサイトにXのコンテンツを表示して、訪問者の関心を引き付けることができます。Xウィジェットを手動で追加するには、埋め込みコードを扱う必要があり、それがややこしく感じるかもしれません。

もっと簡単にするには、WordPressのプラグインを使えば、コードをいじる必要がなくなる。
WordPressにX(Twitter)プラグインを使うべきか?
埋め込みコードの扱いに慣れていない方や、ウィジェットを簡単にカスタマイズしたい方には、Xプラグインの利用がおすすめです。
そうすれば、コードを1行も書かずに、デザイナーを雇う必要もなく、ウェブサイト上でXのコンテンツを大量に簡単に表示することができます。

プラグインを使えば、Xウィジェットのデザインを微調整することも可能です。例えば、設定を数回クリックするだけで、ウィジェットをサイトのテーマやブランディングに合わせて調整できます。
また、ハッシュタグフィード、カスタム検索、ユーザーのタイムラインなど、特定のXウィジェットの例を表示するのにも役立ちます。
ご覧の通り、WordPress用のXプラグインを使えば、思い通りの見た目のXウィジェットを簡単に作成できるようになります。
WordPressでX(Twitter)ウィジェットを追加する方法
それでは、WordPressでXウィジェットを追加するさまざまな方法を見ていきましょう。
WordPressサイトにXウィジェットを追加するには、2つの方法があります:
- WordPressプラグインを使ってXウィジェットを追加する
- Xウィジェットを手動で追加してください
以下、この2つの方法を見てみよう:
プラグインを使ってWordPressにX(Twitter)ウィジェットを追加する方法
WordPressの投稿やページにXウィジェットを追加するには、Smash Balloonから「X (Twitter) Feed Pro」プラグインをダウンロードする必要があります。

WordPress向けXフィードプラグインの中で最高評価を誇るこのプラグインを使えば、Xのコンテンツをウェブサイトにシームレスに組み込むことができます。
美しいXフィードを作成できるよう、ライブフィードエディタも搭載されており、あらゆる設定を簡単にカスタマイズできます。ヘッダーやフィードのレイアウト、配色など、さまざまな設定を行うことができます。

さらに、このプラグインは軽量なので、Xの投稿をいくら埋め込んでも、サイトの読み込み速度はこれまでと変わらず高速です。サイトの読み込みが速くなれば、SEO効果も高まり、検索エンジンの検索結果でも上位に表示されるようになります。
美しく、カスタマイズ可能で、レスポンシブなフィードは、あなたのサイトのエンゲージメントを高め、貴重な社会的証拠を追加します。
その結果、「X(Twitter)Feed Pro」は4.9/5の星評価を獲得し、世界中から15万人以上のアクティブユーザー を集めています。

X(Twitter)Feed Pro を始めるには、こちらをクリックしてください。
それでは、このプラグインを使ってサイトにX個のウィジェットを追加する方法を見ていきましょう。
ステップ1:X(Twitter)Feed Proプラグインをインストールする
まず、こちらから「X(Twitter)Feed Pro」を入手し、ご自身のウェブサイトにインストールしてください。
方法がわからない?WordPressプラグインをあなたのウェブサイトにインストールするには、以下の手順に従ってください。
ステップ 2:新しい X(Twitter)ウィジェットを作成する
さあ、プラグインを使ってXウィジェットを作成しましょう。
WordPressのダッシュボードから、「X Feed」»「すべてのフィード」メニュー に移動し、「新規追加」ボタンをクリックしてください。

ここで、「X (Twitter) Feed Pro」は、ウェブサイトに表示したいXウィジェットの種類を選択するよう求めます。
これらのオプションから選ぶことができる:
- ユーザーのタイムライン:特定のXプロフィールを選択し、そのユーザーのX投稿を表示する
- ハッシュタグ: 特定のパブリックハッシュタグにフィルタリングされたコンテンツのフィード
- 検索:詳細なX検索の結果は、Xウィジェットに表示されます
- リスト: Xのリストを選択し 、そのリストに含まれる投稿を埋め込む
また、ここでは複数のオプションを選択して、1つのウィジェットに異なるXフィードの種類を組み合わせることもできます。
続行するには、Xのフィードタイプを選択し、「次へ」をクリックしてください。

このチュートリアルでは、ハッシュタグ X ウィジェットを紹介します。
ステップ3:X(ツイッター)アカウントに接続する
「X (Twitter) Feed Pro」を使えば、XアカウントをWordPressに簡単に連携でき、ウィジェットが自動的に更新されます。
開始するには、ポップアップの接続 ボタンをクリックします。

その操作を行うと、プラグインがXを開き、アカウントへの読み取り専用アクセス権を要求する画面が表示されます。
このアクセス権限を使用する場合、「X (Twitter) Feed Pro」はあなたの情報を閲覧するのみであり、いかなる変更も行うことはできません。
つまり、このプラグインを使っても全く問題ないということだ。
ここでAuthorize appの ボタンをクリックするだけで、読み取り専用アクセスを確認することができます。

その操作を行うと、X(Twitter)Feed Pro によって再びご自身のウェブサイトに戻されます。
ハッシュタグ、ユーザーのタイムライン、Xリスト、検索キーワードを追加することで、Xウィジェットに表示する内容を指定できるようになりました。
このガイドでは、ウィジェットにハッシュタグを追加します。
ソースを追加したら、「Next」をクリックします。

ステップ4:新しいX(Twitter)ウィジェットをカスタマイズする
カスタマイズをとても簡単に行うために、新しいXウィジェットのテンプレートを選択するだけで済みます。
フィードテンプレートは7種類あり、それぞれユニークなデザインになっている:
- デフォルト
- 石工
- シンプルなカルーセル
- シンプルなカード
- ショーケース・カルーセル
- 最新のXの投稿
- ウィジェット
Xウィジェットに適したオプションを選択したら、「次へ」をクリックして次に進んでください。

これで、ライブフィードエディタを使って、新しいXフィードウィジェットのデザインをカスタマイズできるようになりました。
左側には、フィードのレイアウト、色、ヘッダーのデザイン、Xの投稿ボックスのスタイル、ライトボックスの設定など、さまざまなカスタマイズオプションが用意されています。

変更内容を把握しやすいよう、右側にXフィードのリアルタイムプレビューが表示されています。
それでは、カスタマイズを始め、Xウィジェットのレイアウトを設定していきましょう。
そのためには、左からフィードレイアウトオプションを 選択するだけです。

「X (Twitter) Feed Pro」では、3種類のフィードレイアウトから選択できます:
- リスト
- 石工
- カルーセル

まず、「リスト」オプション を選択すると、Xの投稿が1列で表示されます。そうすることで、Xの投稿をより広々と表示できるようになります。

Xウィジェットで、Xの投稿を一度にたくさん表示したいですか?
「Masonry」レイアウト を選択すると、Xの投稿が複数の列に並んで表示されます。

また、「カルーセル」レイアウト を選択して、Xの投稿を美しいスライドショー形式のカルーセルとして表示することもできます。
そうすることで、訪問者はXウィジェットを操作して、さらに多くのコンテンツを閲覧できるようになります。

Xウィジェットに合ったフィードレイアウトを選択したら、「保存」ボタンを クリックしてください。
ここから、上部にある小さなカスタマイズ ボタンをクリックして、メインのオプションに戻ることができます。

新しいXウィジェットの色を選びませんか?
次に左側の配色 オプションをクリックします。

ウィジェットの色を選択するには、単に配色を選択することができます。
「X (Twitter) Feed Pro」では、配色に4つのオプションが用意されています:
- テーマからの継承: テーマの色を自動的にコピー
- 「Light」:Xウィジェットの見た目を明るいものに設定してください
- ダーク:代わりにダークカラーとライトフォントを使用
- カスタム: すべての色を手動で選択

お好みの配色を選択し、再度「保存」ボタンをクリックして変更を確定します。
ライブフィードエディタを使用すれば、Xの投稿ボックススタイル、Xのヘッダー、「もっと見る」ボタン、フィードのサイズなど、さまざまな項目を自由にカスタマイズできるようになりました。
Xウィジェットの見た目に満足したら、もう一度 「保存 」をクリックすることをお忘れなく。
ステップ5:WordPressにX(Twitter)ウィジェットを追加する
ライブフィードエディタを使えば、Xウィジェットの埋め込みはとっても簡単です。さらに、ウィジェットを埋め込む方法は2つあります:
- WordPressのページにXウィジェットを追加する
- Xウィジェットをサイドバーまたはフッターに追加する
以下、この2つの方法について見ていこう。
ライブフィードエディターから、上部の埋め込み ボタンをクリックして開始します。

これにより、Xウィジェットを埋め込む場所を尋ねるポップアップが表示されます。
ページに追加 オプションをクリックするだけで、WordPressのページに埋め込むことができます。

ポップアップで、ウィジェットを表示したいページを選択してください。
次に、 下の追加 ボタンをクリックします。

WordPressのブロックエディタでそのページが開いているのが確認できるはずです。そこで、Xウィジェットを埋め込むことができます。
そのためにはまず、エディターのプラス(+)アイコンをクリックしてコンテンツブロックを追加する。

検索バーを使って「twitter feed」と検索し、その下の「X Feed」ウィジェットをクリックしてください。
これで、ページにXウィジェットが追加されました。

最後に、「公開」または「更新」ボタンを クリックすると、Xウィジェットがすべてのユーザーに公開されます。
実際、ウェブサイトを開いて、どのように見えるかをチェックすることができる。

サイドバーやフッターにウィジェットを追加したいですか?
ライブフィードエディターから簡単にできます。
管理ダッシュボードから、「Xフィード」»「すべてのフィード」メニューに移動し、Xフィードウィジェットをクリックしてください。

これにより、ライブフィードエディタにXウィジェットが表示されます。
ウィジェットの埋め込みを開始するには、右上の埋め込み ボタンをクリックしてください。

ポップアップで、今度は「ウィジェットに追加 」ボタンをクリックできます。
これを実行すると、WordPressウェブサイトのウィジェットページに移動します。

このページでは、Xフィードウィジェットを埋め込みたい場所を選択できます。
サイドバーに埋め込むには、サイドバーパネルを クリックしてください。

代わりにフッターを使いたいですか?フッターパネルを クリックしてください。

新しいWordPressウィジェットを追加するには、パネルの下部にあるプラスアイコン(+)を クリックします。
次に、表示されるすべてのオプションの中から「X Feed」ウィジェットを選択してください。

最後に、「更新」ボタンを クリックすると、Xウィジェットがウェブサイトのサイドバーに表示されます。

もしフッターを選択した場合は、ウェブサイトの最下部に「X」ウィジェットが表示されます。

それでは、ウェブサイトにXウィジェットを埋め込む従来の方法を見てみましょう。
X(Twitter)のウィジェットを手動で追加する方法
最後の方法は、X Publishツールを使用してWordPressにウィジェットを追加する方法です。この方法の欠点は、ウィジェットがサイト上でどのように見えるかをコントロールできないことです。
この方法でXフィードを追加するには、XPublishのウェブサイトにアクセスし、埋め込みたいコンテンツの種類を選択してください。
ここではProfileオプションを使用する。

次に、表示したいプロフィールのURLを貼り付け、「次へ」 アイコンをクリックします。

ここで下にスクロールすると、このXウィジェットの表示方法を選択できます。
お好きなボタンデザインを選んでください。今のところ、埋め込みタイムラインの オプションにします。

次のステップは、WordPressサイトに挿入できるコードをコピーすることです。
右の「コードをコピー 」ボタンをクリックしてください。

その後、WordPressで新しい投稿やページを作成することができます。
コードを埋め込むには、エディターのプラス(+)アイコンをクリックして新しいコンテンツブロックを追加します。

次に、上部の検索バーで「カスタムHTML」を検索し、カスタムHTMLブロックをクリックして続行します。

次に、埋め込みコードをブロックに直接貼り付け ます。

新しいページをプレビューすると、Xウィジェットは以下の例のように表示されます:

この方法を使えば、サイドバーのウィジェットにフィードを埋め込むことができる。
まず、外観 " ウィジェットに移動し、ウェブサイトのウィジェット管理を開始します。

そうしたら、サイドバーパネルを クリックしてウィジェットを埋め込んでください。

フッターにXウィジェットを追加したいですか?その場合は、「フッター 」をクリックしてください。

最後に、プラス(+)アイコンをクリックしてウィジェットを追加し、カスタムHTMLウィジェットをクリックします。

そして、先ほどと同じようにウィジェット内に埋め込みコードを貼り付けます。

最後に、上部にある更新 ボタンをクリックします。
あなたのウェブサイトのフロントに移動すると、フィードは以下の例のように表示されます:

これで完成だ。
これで、WordPressにXウィジェットを追加する方法がわかりました。重要な点は、3つ目の方法では、Xフィードのデザイン、レイアウト、コンテンツに対する制御が制限されるということです。
「X (Twitter) Feed Pro」プラグインを使えば、たった数回の簡単なクリックでこれらすべてを行うことができます。HTML、JavaScript、CSS、あるいはいかなる種類のコーディングも必要ありません。
Xのウィジェットを埋め込む準備はできましたか?今すぐ「X (Twitter) Feed Pro」を入手しましょう。
ソーシャル・メディア・プラットフォームであなたのブランドを宣伝する他の方法については、ソーシャル・メディア・マーケティングを向上させる方法に関するこのガイドに従ってください。
この記事が気に入っていただけましたら、ぜひXやFacebookで当アカウントをフォローして、その他のソーシャルメディアマーケティングのチュートリアルをご覧ください。
