DiviのWordPressサイトにX(Twitter)フィードを追加する方法
ホーム ブログ DiviのWordPressサイトにX(Twitter)フィードを追加する方法

DiviのWordPressサイトにX(Twitter)フィードを追加する方法

Divi WordPressにTwitterフィードを追加する方法

DiviのウェブサイトにX(Twitter)のフィードを追加してみたいと思ったことはありませんか?

Diviを使って美しいウェブサイトを作成したら、そのサイトをより魅力的なものにする簡単な方法として、X(Twitter)のフィードを追加するのがおすすめです。

そうすることで、関連性の高いX(Twitter)のコンテンツを表示し、訪問者の関心を高め、ソーシャルメディアのフォロワーを増やし、さらにはコンバージョン率を向上させることさえ可能です。

また、すぐに使い始められるよう、DiviにX(Twitter)のコンテンツを追加する最も簡単な方法をご紹介します。

その前に、DiviサイトにX(Twitter)のコンテンツを表示することが、どのようなメリットがあるか見てみましょう。

あるいは、WordPressでX(Twitter)のフィードを表示させる簡単な方法もあります。

なぜDiviのウェブサイトにX(Twitter)のフィードを追加するのですか?

Diviは、美しいウェブサイトを簡単に作成できる人気のWordPress用ページビルダーです。

しかし、ただ見た目が美しいウェブサイトを持つだけでは不十分かもしれない。結局のところ、訪問者の大半はサイトを離れて二度と戻ってこないのだから。

"ここに厄介な事実があります:あなたのウェブサイトに到達した訪問者の95%は、二度と戻ってくることはありません。"それはあなたのペール缶の4分の1サイズの穴ではなく、クレーターです。

- ジョシュ・スタージョン、EmberTribe共同創設者

ジョシュ・スタージョン

サイト訪問者の関心を引くための優れた方法の一つは、ウェブサイトにX(Twitter)のコンテンツを表示することです。そうすることで、魅力的なコンテンツを提示し、訪問者をサイト内に留めることができます。 

  • 魅力的なソーシャル・メディア・コンテンツがあれば、人々があなたのサイトでより多くの時間を過ごすことができる。そうすれば、あなたのサイトはより良いSEOを獲得し、さらに多くの人々に簡単にリーチすることができます。
  • 自分のアカウントのX投稿を埋め込むことで、ウェブサイトのトラフィックをエンゲージメントや新しいX(Twitter)のフォロワーへと、手軽に転換できます。
  • twitterフィードを使えば、最新の製品リリース、ニュース、お知らせ、セールなどを人目を引く方法で紹介することができます。
  • X(Twitter)のレビューや体験談を商品ページに埋め込むことができます。こうした「ソーシャルプルーフ」を活用すれば、見込み客を顧客へと転換するのが格段に容易になります。

WordPressでX(Twitter)のフィードを表示させる簡単な方法

DiviにX(Twitter)のフィードを手動で追加するには、埋め込みコードを生成し、コードを調整してから、ウェブサイトに追加する必要があります。

さらに、この方法を使うと、X(Twitter)のコンテンツはウェブサイトのデザインを反映しないだけでなく、Xの投稿がブランドのイメージと食い違うことさえあります。

良いニュースは?

コードを1行も書かずに、X(Twitter)の投稿を表示する、もっと良い方法があります。さらに、Divi Marketplaceで拡張機能をいちいち探す必要もありません。

「X (Twitter) Feed Pro」プラグインを使えばいいだけです。

ツイッターフィード埋め込みプラグイン

「X (Twitter) Feed Pro」を使えば、WordPressのエキスパートでなくても、サイトにX (Twitter)のフィードを表示して、訪問者の関心を維持するのがとても簡単です。

このプラグインには、サイトにX(Twitter)のフィードをこれまで以上に簡単に埋め込めるようにするための、豊富な機能が搭載されています:

  • X(Twitter)フィードの作成、カスタマイズ、埋め込みという一連のプロセスを、3ステップのガイドに従うだけで完了できます。プログラミングの知識は一切必要ありません。
  • X(Twitter)のフィードを作成すると、Diviウェブサイトのデザインが自動的に反映され、設定直後から素晴らしい仕上がりになります。
  • あらかじめデザインされたテンプレートをインポートすることも、ライブフィードエディタを使ってレイアウト、配色、ヘッダー、X投稿ボックス、フィードのサイズなどを変更することも可能です。
  • 一番の利点は?このプラグインを使えば、WordPressの専門家チームを手に入れることができる。ヘルプが必要なときや質問があるときは、彼らに助けを求めることができます。
  • 作成するすべてのX(Twitter)フィードは、軽量で超高速になります。また、ウェブサイトの表示速度が速くなることは、サイトのSEO対策にもつながります。
ツイッターフィードプロの例

総じて言えば、「X (Twitter) Feed Pro」は市場で最高のX (Twitter) フィードプラグインであり、オンラインビジネスにとって素晴らしい選択肢です。さらに、WordPressの専門家からなる定評のあるカスタマーサポートチームによるサポートも受けられます。

あなたのサイトのために、魅力的なX(Twitter)フィードを作成する準備はできましたか?今すぐ「X(Twitter)Feed Pro」を手に入れましょう!

DiviにX(Twitter)フィードを追加する方法(手順解説)

以下の簡単な手順に従うだけで、WordPressサイトにX(Twitter)のフィードを埋め込むことができます。さっそく始めましょう!

ステップ 1: X (Twitter) Feed Pro プラグインをダウンロードする

まず、こちらから「X (Twitter) Feed Pro」プラグインを入手し、お使いのパソコンにダウンロードしてください。

その後、WordPressサイトに「X (Twitter) Feed Pro」をインストールして有効化できます。

方法がわからない場合は、初心者向けのWordPressプラグインのインストール方法のチュートリアルをご覧ください。

ステップ2:X(ツイッター)フィードの作成

このプラグインを使えば、ガイドに従って手順を進めるだけで、X(Twitter)のフィードを作成することができます。

まず、WordPressのダッシュボードにアクセスし、「X(Twitter)フィード」»「すべてのフィード」メニュー を開きます。

新しいページで、新規追加 ボタンをクリックして開始します。

カスタムツイッターフィードを追加

その後、プラグインは、DiviウェブサイトにどのタイプのX(Twitter)フィードを表示するか尋ねてきます。ここでは3つのオプションから選択できます:

  • ユーザーのタイムライン:X(Twitter)のタイムラインを選択し、最新のX投稿を表示します。
  • ハッシュタグ:選択した特定のX(Twitter)のハッシュタグに基づいたフィードを表示します。
  • 検索:X(Twitter)の詳細検索の結果を表示します。

続行するには、フィードの種類を選択し、[Next]をクリックします。

フィードの種類

この例では、Diviサイトのユーザー・タイムラインを選んだ。

ステップ3:X(ツイッター)アカウントに接続する

Divi ウェブサイト上の X(Twitter)フィードに X の投稿を表示するには、X(Twitter)アカウントと連携させるだけで済みます。

開始するには、接続 ボタンをクリックします。

ツイッターアカウントをワードプレスに接続

その後、このプラグインがウェブブラウザでX(Twitter)を開き、X(Twitter)Feed Proに対して読み取り専用アクセスを許可できるようになります。

このアクセス権限を使用することで、フィードはX(Twitter)から情報を取得し、Xの投稿をウェブサイトに表示することができます。このプラグインでは一切の変更を行うことができないため、安心してご利用いただけます。

そのためには、ここでAuthorize app ボタンをクリックしてください。

ツイッターの読み取り専用アクセスを許可する.jpg

その操作を行うと、プラグインがウェブサイトを再度開きます。ここで、Divi X(Twitter)フィードのソースを選択できます。

ユーザーのタイムラインを埋め込むので、ここに「@starbucks」というX(Twitter)のハンドル名を追加します。

ソースを追加したら、Nextをクリックして続けます。

twitterフィードを埋め込む

ステップ4:X(Twitter)のフィードをカスタマイズする

このプラグインは自動的にDiviのウェブサイトのデザインをコピーするので、フィードはすぐに美しく表示されます。

さらに、X(Twitter)のフィードのデザインも自由にカスタマイズできます。

すぐに使い始められるように、あらかじめレイアウトされた7種類のフィードテンプレートから選ぶことができます:

  • デフォルト
  • 石工カード
  • シンプルなカルーセル
  • シンプルなカード
  • ショーケース・カルーセル
  • 最新のX投稿
  • ウィジェット

X(Twitter)フィード用のDiviテンプレートを選択したら、「次へ」をクリックしてください。

フィードテンプレートを選択する

次に、プラグインがライブフィードエディタを開き、X(Twitter)のフィードを詳細にカスタマイズできるようになります。これにより、Diviテーマのデザインと完璧に調和させることができます。

左側には、Diviソーシャルメディアフィードのレイアウト、色、サイズ、ヘッダーデザインなどを設定できるカスタマイズパネルがあります。

ライブフィードエディタ

X(Twitter)のフィードをカスタマイズする際は、右側のライブプレビューを使って、変更内容を簡単に確認できます。

まず最初に、私はたいていXの投稿のレイアウトを変更します。これは、訪問者がフィードとどのように関わるかを変えるのに最適な方法です。

まず、「フィードレイアウト 」をクリックして、 Divi ウェブサイト上の X の投稿のレイアウトを設定できるようにします 。

フィードレイアウトオプション

X(Twitter)Feed Proには、フィードのレイアウトに関して、「リスト」、「メイソンリー」、「 カルーセル 」 の3つのオプションが用意されています。

以下、それぞれのレイアウトを見てみよう。

フィードレイアウトを選ぶ

まず、X(Twitter)の公式ウェブサイトのように、1列にX件の投稿を表示できるリストレイアウトがあります。

ツイッターフィードのレイアウト

Xの投稿を一度にたくさん表示したいですか?

「メゾニー」レイアウトを選択すると、X件の投稿を複数の列にまとめて表示することができます。

ワードプレスのツイッターフィード例

代わりにカルーセルレイアウトを選択すれば、Divi X(Twitter)フィードを美しいスライドショーに変えることができます。

そうすれば、ウェブサイトをよりインタラクティブにすることができる。

カルーセル・ツイッター・フィード

フィードレイアウトを選択したら、上部にある「保存」ボタンをクリックします。

フィードをさらにカスタマイズするには、左上のカスタマイズボタンをクリックします。

カスタマイズ・オプションのツイッターに戻る

次に、ライブフィードエディタを使って、X(Twitter)のフィードの色を設定できます。

そのためには、配色 オプションをクリックします。

配色オプション twitter feed pro

次に、このプラグインは、ソーシャルフィードの色を簡単に選択するために使用できる配色を表示します。

4種類の配色から選ぶだけ:

  • テーマからの継承: Diviウェブサイトと同じ色を使用
  • 明るい: 暗い文字色で明るい背景を表示する
  • Dark:明るい色のフォントとともに暗い背景を表示する。
  • カスタム: 手動ですべての色を選択

配色を選んだら、もう一度「保存」をクリックして変更を確定します。

ツイッターで配色を選ぶ

残りのオプションを使って、新しいフィードの見た目を変更できます。ライブフィードエディタを使えば、フィードのサイズ、もっと見るボタン、ライトボックスオプション、ヘッダースタイルなどを簡単に変更できます。

最後にSaveをクリックして変更を確認することを忘れないでください。

ステップ 5:Divi ウェブサイトに X(Twitter)フィードを埋め込む

フィードの埋め込みを開始するには、ライブフィードエディタを使用するのが最も簡単な方法です。

ライブエディターから、上部にある埋め込みボタンをクリックしてください。

ツイッターフィードを埋め込む

次に、新しく作成したフィードの埋め込みオプションがポップアップで表示されます。

Diviのウェブサイトにフィードを埋め込むには、こちらのコピーボタンをクリックしてください。

twitterフィードのショートコードをコピーする

次に、ダッシュボードエリアから「ページ」>「新規追加」メニュー に移動し、X(Twitter)のフィード用のページを作成してください。

続行するには、WordPressエディターの「Use The Divi Builder 」ボタンをクリックします。

diviに新しいページを追加する

代わりにWordPressの投稿を使用するには、ダッシュボードから投稿 " 新規追加 メニューを開きます。

次に、「Use The Divi Builder」をクリックして、Diviエディタでページを開きます。

diviに新しい投稿を追加する

Diviビルダーでは、ページや投稿のデザインを3種類の方法から選ぶことができます。

  • ビルド開始空白のテンプレートから構築を開始する
  • レイアウトを見る: あらかじめ作成されたレイアウトをインポートする
  • ページを選ぶ:ページを複製し、そのデザインを使用する。

ここでお好みのオプションを選択できる。

diviビルダーオプションを選択する

Start Buildingオプションを選ぶと、空白のページからすぐにページや投稿のデザインを始めることができます。

Diviエディタで構築開始

しかし、代わりに「レイアウトを参照」オプションを選択した場合は、事前に作成されたレイアウトのコレクションをチェックすることができます。

続行するには、お好みのレイアウトをクリックしてください。

ライブラリdiviからレイアウトパックを読み込む

選択したレイアウトの詳細がポップアップで表示されます。プレビューをご覧になりたい場合は、ライブデモを見るをクリックしてください。

レイアウトに問題がなければ、「このレイアウトを使用する」ボタンをクリックします。

Divi用インポート・レイアウト

Choose Page オプションで、Diviを使って作成したすべてのページをチェックできます。

続行するには、クローンしたいページをクリックするだけです。

ライブラリからDiviテーマを読み込む

その後、Diviページにコンテンツを追加し始めることができます。そこで、このページにX(Twitter)のタイムラインモジュールをさっと追加してみましょう。

そのためにはまず、緑のプラス・アイコン(+)をクリックし、欲しい行のタイプを選ぶ。

divi ウェブサイトに行を挿入する

新しいフィードのためのスペースができたので、黒いプラス(+)アイコンをクリックしてコンテンツを追加し始める。

その後、検索バーに"code "と 入力し、下のCodeモジュールをクリックしてください。

diviテーマ用コードモジュール

左側に、コードモジュールのオプションがあります。そこでコードフィールドを探し、ショートコードを貼り付けます。

最後に、チェックマークのアイコンをクリックして、X(Twitter)フィードのDiviへの追加を完了してください。

diviにtwitterフィードのショートコードを追加

その後、「公開」ボタンをクリックすると、新しいX(Twitter)フィードモジュールがDiviサイトで公開されます。

フィードがどのように表示されるかは、ウェブサイトを開いてご自分の目でお確かめください。

diviサイトでのtwitterフィードの例

それで終わりだ!

ご覧の通り、適切なツールを使えば、DiviのウェブサイトにX(Twitter)のフィードを追加するのはとても簡単です。そして、「X(Twitter)Feed Pro」を使えば、X(Twitter)をサイトに組み込むのがこれまで以上に簡単になります。

総じて言えば、これは間違いなく、サイトにX(Twitter)を埋め込むための最高のWordPressプラグインです。これを使えば、X(Twitter)を活用したマーケティングを簡単に強化することができます。

DiviにX(Twitter)の投稿を簡単に追加したいですか?こちらから「X(Twitter)Feed Pro」を入手しましょう!

ビジネスでX(Twitter)を活用したい場合は、当社が厳選したX(Twitter)向けマーケティングツールのリストをご覧ください。

その他のソーシャルメディア・マーケティング・ガイドとヒント

この記事が参考になった方は、X(Twitter)やFacebookでぜひフォローしてください。今後もソーシャルメディアマーケティングのヒントやコツをお届けしますので、お楽しみに。

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。