WordPressサイトにTwitterウィジェットを追加したいですか？数回のクリックで、WordPressにTwitter（現X）のフィード、投稿、またはボタンを表示できます。これにより、サイトを常に最新の状態に保ち、エンゲージメントを促進し、訪問者がサイトを離れることなくフォロワーを増やすことができます。
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ページビルダープラグインでTwitterウィジェットを追加する
まず、ページビルダープラグインを使用してWordPressにTwitterウィジェットを追加する方法を説明します。
ページビルダーを使用すると、コードなしでWordPressサイトを視覚的にカスタマイズできます。また、複数のWordPressプラグインをインストールしたり、開発者を雇ったりすることなく、サイトのデザインと機能を強化する優れた方法です。
本日使用するプラグインはSeedProdです。これはWordPress向けの最高のウェブサイトビルダーです。ドラッグアンドドロップのページビルダーが含まれており、カスタムWordPressテーマ、ランディングページ、柔軟なレイアウトをすばやく簡単に作成できます。
SeedProdには、Twitterフィード、投稿埋め込み、フォローボタン、ツイートボタンなど、何百もの既製のテンプレートとカスタマイズ可能なコンテンツ要素があります。また、サインアップフォーム、お問い合わせフォーム、価格表、ソーシャルプルーフなどのリードジェネレーション要素をサイトに追加することもできます。
SeedProdを使用してWordPressにTwitterウィジェットを追加するには、次の手順に従ってください。
ステップ1. SeedProdのインストールと有効化
まず、SeedProdプランを開始し、プラグインをコンピューターにダウンロードする必要があります。その後、プラグインをWordPressウェブサイトにアップロードしてアクティブ化します。
この手順でヘルプが必要な場合は、WordPressプラグインのインストールに関するこの記事を参照してください。
注意: SeedProdには無料ライセンスがありますが、高度な機能を使用するためにプレミアムバージョンを使用します。
SeedProdをインストールしたら、SeedProd » 設定に移動し、ライセンスキーを入力します。キーは、SeedProdウェブサイトの[アカウント]の[ダウンロード]セクションで見つけることができます。
ステップ2. WordPressテーマまたはランディングページの作成
SeedProdを使用してWordPressサイトをカスタマイズするには、2つの方法があります。
すべてのテンプレートパーツとページでカスタムWordPressテーマを構築し、ビジュアルエディターで各パーツをカスタマイズするか、既存のWordPressテーマでランディングページを構築するかを選択できます。
このチュートリアルでは、カスタムSeedProd WordPressテーマのサイドバーテンプレートを使用します。SeedProdを使用してカスタムWordPressテーマを作成するためのすべての手順については、この記事を参照してください。
ランディングページを使用したい場合は、WordPressでランディングページを作成する方法に関するこの記事に従ってください。
どちらの記事も、テンプレートの選択からテーマまたはランディングページのカスタマイズ準備までの手順を説明しています。Twitterコンテンツを追加する準備ができたら、このチュートリアルのステップ3に進んでください。
ステップ3. SeedProd TwitterブロックをWordPressに追加する
カスタムテーマまたはランディングページを作成したら、SeedProdのドラッグアンドドロップページビルダーでデザインを編集できます。
ランディングページを編集している場合は、SeedProd » Landing Pages に移動し、カスタマイズしたいページで「編集」をクリックします。
ただし、このガイドではカスタムWordPressテーマのサイドバーテンプレートを編集します。そのために、SeedProd » Theme Builder ページに移動し、関連するテンプレートにカーソルを合わせて「デザインを編集」リンクをクリックします。
デザインを開くと、SeedProdのビジュアルエディターに表示されます。ブロックとセクションは左側に、ライブプレビューは右側にあります。
プレビューの任意の要素をクリックして設定を編集できます。これにより、左側のパネルにカスタマイズオプションが開きます。
Advanced ブロックセクションまでスクロールダウンすると、デザインに追加できるさまざまなコンテンツ要素が表示されます。WordPressサイトにTwitterウィジェットを追加するために焦点を当てるブロックは次のとおりです。
- Twitterツイートを埋め込む
- Twitterツイートボタン
- Twitterフォローボタン
Twitterツイートを埋め込む
Twitter Embed Tweetブロックを使用すると、数回クリックするだけで任意のTwitter投稿を埋め込むことができます。ブロックをライブプレビューにドラッグし、クリックして設定を表示するだけです。
設定パネルでは、埋め込みたい特定のツイートのIDを貼り付けることができます。また、ライトとダークの配色を選択したり、ツイートの会話を非表示にしたり、写真、動画、Twitterカードを非表示にしたり、ブロックの配置を調整したりすることもできます。
Advanced タブは、ブロックのスペーシングと属性を制御し、モバイルまたはデスクトップで非表示にすることができます。
Twitter TweetおよびFollow Buttonブロック
SeedProdの最後の2つのTwitterウィジェットは、ツイートボタンとフォローボタンブロックです。これらは投稿とフィードの埋め込みと似ていますが、Twitterコンテンツを表示する代わりに、訪問者がカスタムメッセージをツイートしたり、Twitterでプロフィールをフォローしたりできるようになります。
フォローボタンの設定では、Twitterのスクリーンネームを入力し、フォロワー数を表示し、配置、言語、スペーシング、デバイスの表示をカスタマイズできます。
Tweetボタンの設定では、訪問者に共有してほしいURL、ツイートコンテンツ、ハッシュタグを追加できます。また、@メンションや関連アカウントを追加するフィールドもあります。
どちらのボタンも、小または大のボタンサイズから選択でき、モバイルおよびデスクトップ画面にどのように表示されるかを制御できます。
SeedProdのTwitterブロックのさまざまな組み合わせを試してから、右上隅のSaveボタンをクリックして変更を保存します。
ステップ4. WordPressでTwitterウィジェットを公開する
次のステップは、TwitterコンテンツをWordPressサイトで公開することです。カスタムSeedProd WordPressテーマを使用しているため、SeedProd » Theme Builder に移動し、Enable SeedProd Theme トグルを「On」の位置に切り替えるだけです。
これで、Twitterコンテンツを含むページをプレビューして、どのように表示されるかを確認できます。
2. WordPress Twitter FeedプラグインでTwitterウィジェットを埋め込む
次に紹介する方法は、WordPressウィジェットをサイトに追加するためにTwitterフィードプラグインを使用することです。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 Feed » All Feedsページに移動し、Add Newボタンをクリックしてください。
次のページで、追加したいフィードの種類を選択できます。以下のオプションが表示されます：
- ユーザータイムライン：Twitterの任意のユーザーのツイートのタイムライン
- ハッシュタグ：特定のハッシュタグを含む公開ツイート
- ホームタイムライン：Twitterアカウントのタイムライン
- 検索：特定のTwitter検索用語に一致するツイートのフィード
- メンション：Twitterハンドルに言及しているツイート
- リスト：公開Twitterリストからのツイート
このガイドでは、ユーザータイムラインオプションを選択します。次のステップに進む準備ができたら、Nextボタンをクリックしてください。
ステップ3：Twitterアカウントの接続
次の画面で、Twitterからデータを取得してウェブサイトに表示できるように、読み取り専用アクセス用にTwitterアカウントを接続するように求められます。
Connectボタンをクリックした後、Authorize Appを選択すると、Twitterフィード作成プロセスに戻ります。
ユーザータイムラインフィードを追加しているため、次のステップは、表示したいTwitterハンドルを入力することです。ユーザー名を入力して、Nextボタンをクリックするだけです。
ステップ4：Twitterウィジェットのカスタマイズ
これで、Twitterウィジェットの7つの異なるテンプレートから選択できます：
- デフォルトフィード
- メーソンリーカード
- シンプルなカルーセル
- シンプルなカード
- ショーケースカルーセル
- 最新ツイート
- ウィジェット
あなたのウェブサイトに最適なテンプレートをクリックし、次に次へボタンをクリックしてください。
次の画面では、ライブエディターを使用してTwitterウィジェットをカスタマイズできます。
左側のパネルには、フィードレイアウト、配色、ヘッダーデザイン、ツイート、ライトボックスオプションなどを変更するためのオプションがあります。右側で変更をプレビューすることもできます。
フィードレイアウトタブでは、リスト、マソンリー、またはカルーセルレイアウトから選択できます。
配色タブでは、ダーク、ライト、またはカスタムカラーを選択できます。WordPressテーマから配色を継承するオプションもあります。
ヘッダータブでは、標準やテキストなど、いくつかのヘッダーカスタマイズオプションが用意されています。ヘッダーセクションを無効にして、Twitterのプロフィールを非表示にすることもできます。
すべてが満足のいく外観になるまでウィジェットの外観を調整し続けてください。さらに、保存ボタンをクリックして設定を保存してください。
ステップ5. TwitterウィジェットをWordPressに追加する
Smash Balloonを使用すると、TwitterウィジェットをWordPressサイトに簡単に埋め込むことができます。画面上部にある埋め込みボタンをクリックするだけです。
ポップアップが表示され、次の埋め込みオプションが表示されます。
- ショートコード：Twitterフィードのショートコードを任意のページ、投稿、またはウィジェットに貼り付けます
- WordPressブロック：組み込みのWordPressブロックを使用して、投稿、ページ、またはウィジェットにフィードを追加します。
このガイドでは、ウィジェットに追加オプションを選択します。
そのオプションをクリックすると、WordPressウィジェット設定が自動的に開きます。そこから、追加ブロックアイコンをクリックし、カスタムTwitterフィードブロックを探します。
ブロックをウィジェットエリアに追加したら、更新ボタンをクリックして変更を保存します。次に、サイトにアクセスして、Twitterウィジェットが機能していることを確認してください。
3. WordPressにTwitterウィジェットを手動で追加する
最後の方法は、Twitter Publishツールを使用して、プラグインなしでTwitterウィジェットをWordPressサイトに手動で追加することです。このオプションでは、ツイート、タイムライン、またはフォローボタンを埋め込むことができます。
この方法では、ウィジェットのデザインや表示できるコンテンツの種類をあまり制御できません。ただし、WordPressにプラグインを追加したくないユーザーにとっては便利なソリューションです。
この方法を使用するには、Twitter Publishツールウェブサイトにアクセスし、使用したい埋め込みの種類を選択します。このガイドでは、埋め込みタイムラインオプションを使用します。
次の画面で、表示したいTwitterプロフィールの完全なURLを入力し、プレビューボタンをクリックする必要があります。
Twitterは、ウェブサイトに埋め込むことができるタイムラインのショートコードを生成します。コピーボタンをクリックしてコードをクリップボードに保存し、WordPressサイトに戻ります。
埋め込みコードは、任意のWordPress投稿、ページ、またはウィジェットエリアに追加できます。タイムラインをサイドバーウィジェットとして埋め込むには、WordPressダッシュボードから外観 » ウィジェットに移動します。
次に、追加アイコンをクリックしてサイドバーに新しいブロックを追加し、カスタムHTMLブロックを探します。Twitterからコピーした埋め込みコードをHTMLブロックに貼り付け、更新ボタンをクリックします。
ライブウェブサイトにアクセスすると、Twitterウィジェットはこの例のように表示されます。
WordPressにTwitterウィジェットを追加することに関するFAQ
このステップバイステップガイドが、WordPressにTwitterウィジェットを追加する方法を学ぶのに役立ったことを願っています。ついでに、WordPressにFacebookイベントを埋め込む方法に関するガイドも気に入るかもしれません。
SeedProdでWordPressにTwitterウィジェットを追加する準備はできましたか？
お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。
