ワードプレスサイトにX(ツイッター)のスライドショーを追加する方法
ホーム ブログ ワードプレスサイトにX(ツイッター)のスライドショーを追加する方法

ワードプレスサイトにX(ツイッター)のスライドショーを追加する方法

WordPressサイトにTwitterスライドショーを追加する方法 (1)

WordPressのウェブサイトでTwitterのスライドショーを表示する簡単な方法をお探しですか?

ウェブサイトにTwitterのフィードを表示することで、訪問者に関連するソーシャルメディアコンテンツを見せることができます。さらに、ブランド露出と顧客エンゲージメントを高める爽快な方法でもあります。

しかし、ツイッターではフィードのレイアウトをカスタマイズすることはできない。また、開発者を雇わずにツイッターのコードをカスタマイズするのは少々厄介だ。

そこで、技術に詳しくない方でも簡単にTwitterスライドショーをサイトに追加する方法をご紹介します。

まず、Twitterのスライドショーを埋め込む最も簡単な方法を見てみましょう。

あるいは、ここをクリックして直接チュートリアルに飛ぶこともできる。

X(ツイッター)のスライドショーを表示する最も簡単な方法

必要であれば、手動でTwitterフィードをサイトに埋め込むこともできるが、この方法にはいくつかの困難とリスクが伴う:

  • 設定が難しい: コーディングが苦手な人は、手動でたくさんのコードを埋め込んだり、異なるウェブページを切り替えたりしなければならないので、設定が簡単ではない。
  • 時間がかかる: コードの一行を見落とした?あるいは何か間違ったことをした?何がいけなかったのか理解するのに多くの時間が必要だ。
  • 混乱しやすく、エラーを起こしやすい:手作業で埋め込むため、小さなミスが原因で誤ってサイトを壊してしまう危険性がある。
  • カスタマイズの選択肢がない:ツイッターのスライドショーを見せたい?できません。手動でフィードをWordPressに追加する場合、フィードのレイアウトやスタイルを自由にカスタマイズすることはできません。
  • フィルターなし:フィードの内容をフィルタリングすることもできません。そのため、フィードに表示するツイートを控えめにしたい場合でも、それは不可能です。

このような場合、WordPressにTwitterスライドショーを埋め込む最良の方法は何でしょうか?WordPress用の最も評価の高いTwitterフィードプラグインを使用することです:Twitter Feed Proです。

ツイッター・フィード・プロ ホームページ

この非技術系プラグインを使えば、WordPressでTwitterスライドショーを簡単に作成できる。

Twitter Feed Proを使ってウェブサイトにTwitterスライドショーを追加すれば、次のような機能を楽しむことができる:

  • セットアップは超簡単: 一度インストールすれば、すべての設定とTwitterフィードの表示が簡単にできます。ITに詳しくない方でも大丈夫です。
  • 豊富なフィードタイプ: Twitterフィード、ユーザータイムライン、Twitterリスト、検索結果などにハッシュタグを付けることができます。
  • 時間節約で効率的:シンプルなガイドフローで、わずか5分以内にTwitterスライドショーフィードを表示できます!
  • ユーザーフレンドリー: コードをいじったり、誤ってサイトを壊してしまうリスクはありません。数回クリックするだけで、Twitterフィードをカスタマイズし、表示するツイートをコントロールできます。
  • カスタマイズの選択肢が豊富横長のTwitterフィードをスライドショー形式で表示したいですか?このプラグインのライブフィードエディタを使えば、ワンクリックでできます。
  • コンテンツをコントロールこのプラグインでは、ツイートをフィルタリングすることができるので、表示したいフィードだけを表示することができます。これは、コンバージョンを増加させるための社会的証明を使用するために、ソーシャルメディアでの証言を表示したい場合に特に役立ちます。

そして、一番の魅力は何でしょうか?Twitter Feed Proを購入すると、WordPressのエキスパートによるフレンドリーで迅速なサポートチームにアクセスできます。

助けが必要だと感じたら、彼らにメッセージを送ってください。

その結果、このプラグインは4.9/5つ星という確かな評価を得ており、15万人以上のユーザーに推奨されている。

WordPressサイトにX/Twitterスライドショーを追加する方法

あなたの魅力的なTwitterフィードを表示することにより、Twitterのフォロワーを増やす準備はできましたか?スライドショーにTwitterフィードを埋め込むためのステップバイステップのチュートリアルをご覧ください:

ステップ1:Twitter Feed Proプラグインをインストールして有効化する

まず、こちらからTwitter Feed Proプラグインを入手してください。その後、WordPressウェブサイトにプラグインをインストールし、有効化します。

どうすればいいのかわからない?あなたのウェブサイトにWordPressプラグインをインストールする方法についてのユーザーフレンドリーなチュートリアルをチェックしてください

ステップ2:新しいTwitterフィードを作成する

このステップでは、Twitter Feed Proのガイド付きフローを使って、ウェブサイトに新しいフィードを作成します。

WordPressのダッシュボードエリアから、Twitterフィード " すべてのフィードメニューに移動して開始します。

その後、上部にある新規追加 ボタンをクリックする。

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

その後、作成したいTwitterフィードのタイプを指定することができます。

Twitterフィードプロでは、以下のフィードタイプからお選びいただけます:

  • ユーザーのタイムライン自分のTwitterタイムラインのツイートを表示
  • ハッシュタグ:特定のハッシュタグが付いたツイートを埋め込む
  • 検索高度なTwitter検索の結果に基づいてツイートを表示します。
  • リスト特定のTwitterリストからのツイートを表示

この例では、ハッシュタグフィードタイプを使用しています。

Twitterフィードの種類を選んだら、「次へ 」をクリックして次に進みます。

ウィジェットのツイッターフィードタイプを選択します。

ステップ3:Twitterアカウントに接続する

Twitterアカウントと連携することで、Twitterのコンテンツをウェブサイトに表示することができます。

まず、ポップアップの接続 ボタンをクリックして開始する。

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

そうすると、プラグインがあなたのTwitterアカウントに読み取り専用アクセス権を与えるかどうか尋ねてきます。

Twitter Feed Proがそのアクセスを使って変更を加えることはできないので、完全に安全です。

プラグインに読み取り専用アクセス権を与えるには、Authorize appボタンをクリックします。

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

そうすると自分のウェブサイトに戻り、そこでツイッターフィードのソースを選択できる。

そのためには、ユーザーアカウント、ハッシュタグ、検索ワード、その他サイトに表示したいソースの種類を入力すればよい。

ポップアップにTwitterのソースを記入し、「次へ」をクリックする。

例として、ツイッターのハッシュタグに "#KEEB_PD "を使っています。

ツイッターフィードのハッシュタグを選択する

ステップ4:Twitterスライドショー・フィード・テンプレートを選択する

Twitterアカウントとプラグインの接続が完了しましたか?素晴らしい!

Twitter Feed Proは、使用するフィードテンプレートを選択するように指示します。

スライドショーで一度にたくさんのツイートを表示したい場合は、シンプル・カルーセル・テンプレートを 選び、「次へ」をクリックします。

カルーセルオプションを選択 ツイッターフィード

ツイッターのスライドショーに一度に1つのツイートだけを表示させたい場合は、代わりにショーケースのカルーセルを クリックしてください。

次に、Nextボタンをクリックして進みます。

ショーケースのカルーセルレイアウトを選ぶ

このように、あなたのウェブサイトにツイッターのスライドショー・フィードができました。

さらに、新しいフィードは、あなたのウェブサイトのデザインを自動的にコピーするので、箱から出してすぐに見栄えが良くなります。

シンプルなカルーセルテンプレートの例

ステップ5:Twitterスライドショー・フィードをカスタマイズする

Twitter Feed Proプラグインを使えば、ユーザーフレンドリーなライブフィードエディターでTwitterフィードを簡単にデザインできます。

ここでは、左側のパネルにすべてのカスタマイズオプションを見つけることができます。これらを使って、フィードテンプレート、レイアウト、色、サイズ、ヘッダースタイル、投稿数、フィードサイズなどを変更することができます。

ライブフィードエディタ twitterフィードプロ ビジュアルプレビュー

右側には、あなたのTwitterフィードのリアルタイムプレビューが表示され、あなたの変更を簡単に追跡することができます。

カスタマイズを開始するには、フィードレイアウトオプションを クリックします。

フィードレイアウトオプションを選択し、Twitterフィードを作成する

ここから、Twitterフィードでのツイートの表示方法を変更できます。ツイートをリストやギャラリーとして表示することもできます。

Twitterスライドショーのオプションを変更するには、左側をスクロールダウンして「カルーセル設定」 セクションを探します。

Twitterスライドショーのナビゲーション矢印、ページネーションドット、自動再生の有効/無効を選択できます。

さらに、行数、ループのタイプ、スライドショーの高さ、インターバル時間なども変更できる。

ツイッターの水平フィードオプションをカスタマイズする

Twitterスライドショーの設定が完了したら、「保存 」をクリックして変更を保持します。

次に、上部にあるカスタマイズ ボタンをクリックして、Twitterフィードのデザインを続けます。

メインメニューに戻る ライブフィードエディター

次に、配色 オプションをクリックして、Twitterスライドショーの色を設定します。

配色を選ぶ twitterフィード

Twitter Feed Proを使えば、配色を選ぶだけで、Twitterフィードの色を一度に変更することができます。

4つの配色から選ぶことができる:

  • テーマから継承: ウェブサイトと同じ色を使う
  • 明るい:暗い文字色とともに明るい背景を表示する。
  • Dark:暗い背景でフォントを明るい色で表示する。
  • カスタム Twitterフィードの色を手動で選択
ツイッターフィードの配色オプション

Twitterスライドショーの配色を選択したら、[保存]をクリックして変更を確定します。

ご覧のように、ライブフィードエディタを使ってTwitterフィードの残りの部分をカスタマイズするのはとても簡単です。

いくつかのボタンをクリックするだけで、あなたのフィードが思い通りに表示されます。つまり、わかりにくいコードに悩まされたり、開発者を雇ったりする必要がないのです。

Twitterフィードの外観に満足したら、保存 ボタンをクリックします。

ステップ6:TwitterスライドショーのフィードをWordPressに表示する

これでTwitterスライドショー・フィードの作成方法とカスタマイズ方法がわかりました。素晴らしい!最後のステップは、あなたのウェブサイトに表示する方法です。

Twitter Feed Proでは、2つの方法があります:

  • Twitterのスライドショー・フィードをWordPressのページに追加する
  • Twitterスライドショーのフィードをサイドバーやフッターにウィジェットとして追加できます。

どっちがいいかわからない?ご心配なく。下記で両方の方法をチェックできます:

TwitterスライドショーのフィードをWordPressページに追加する

ライブフィードエディタを使えば、簡単なクリック操作でTwitterスライドショーを埋め込むことができます。

まず、上部の埋め込み ボタンをクリックしてください。

埋め込みライブ・フィード・エディター twitterをクリック

すると、ポップアップがツイッターフィードをどこに埋め込むかを聞いてきます。

ツイッターのスライドショーをワードプレスのページに表示するので、「ページに 追加」ボタンをクリックします。

ページに追加する

その後、ポップアップがあなたのサイトのWordPressページのリストを表示します。このリストからページを選択し、「追加 」をクリックしてフィードの埋め込みを開始します。

新しいページにツイッターフィードを追加する

Twitter Feed ProはWordPressエディターでそのページを開きます。プラス(+)アイコンをクリックして、新しいWordPressブロックを追加できます。

新しいワードプレスブロックを追加する

次に、検索ボックスに「twitter feed」と入力し、検索結果からTwitter Feedブロックをクリックする。

ワードプレスサイトにツイッターフィードを埋め込む

最後に、PublishまたはUpdateを クリックして変更を保存すると、Twitterスライドショーがオンラインになります。

これでウェブサイトを開いて、どのように見えるかを確認できる。

ウェブサイト上の横型ツイッターフィードの例

このように、Twitter Feed ProはTwitterのコンテンツを簡単に埋め込むことができます。

それでは、ツイッターのスライドショー・フィードをサイトに表示する2つ目の方法を見てみましょう。

Twitterスライドショーのフィードをサイトのサイドバーやフッターに追加する

Twitterスライドショーのフィードをウェブサイトのサイドバーやフッターに埋め込むには、ライブフィードエディタを使用します。

まず、管理画面のダッシュボードからTwitterフィード " すべてのフィードメニューを開き、Twitterスライドショーフィードをクリックします。

オープン・ハッシュタグ

これで再びライブフィードエディターが表示される。

このTwitterフィードの埋め込みを開始するには、右上隅にある埋め込み ボタンをクリックします。

埋め込みライブ・フィード・エディター twitterをクリック

ポップアップを使って、新しいTwitterスライドショー・フィードの場所を選ぶことができます。

ウィジェットエリアに埋め込むので、ウィジェットに追加 ボタンをクリックします。

ウィジェットにtwitterフィードを追加

Twitter Feed Proを使うと、ウェブサイトのウィジェットページに移動し、Twitterフィードをウィジェットとして埋め込むことができます。

サイドバーにTwitterスライドショーを表示したい場合は、サイドバーパネルを クリックしてください。

サイドバーパネルを開く

フッターにTwitterスライドショーウィジェットを埋め込むには、代わりにフッターパネルを クリックしてください。

このガイドでは、WordPressのフッターにフィードを埋め込みます。

フッターパネルを開く

新しいウィジェットを作成するには、下部にあるプラスアイコン(+)をクリックします。

オプションからTwitterフィードウィジェットを クリックして、Twitterスライドショーのフィードを埋め込みます。

ワードプレスにツイッターフィードウィジェットを追加

最後に「更新」 ボタンをクリックして、新しいTwitterウィジェットを保存すれば完了です!

ウェブサイトを開くと、このようにサイドバーやフッターエリアにツイッターのスライドショー・フィードが表示されます:

フッターにTwitterフィードを埋め込む例

これで完成だ。

このステップ・バイ・ステップのガイドを読めば、WordPressサイトにTwitterスライドショー・フィードを追加する方法がお分かりいただけたと思います。

これで、Twitterのフォロワーを簡単に増やし、魅力的なコミュニティを築き、長期的にビジネスを成長させることができます。

Twitterスライドショーを埋め込む準備はできましたか?今すぐTwitter Feed Proを使い始めましょう

関連記事として、今すぐあなたのビジネスを成長させることが証明されている最高のツイートの種類についてのこの記事もご覧ください。

この記事を楽しんでいただけたなら、ツイッターや フェイスブックでもっと役立つチュートリアルをご覧ください。

著者アバター
リアン・ラロヤ コンテンツマーケティングマネージャー
リアンヌはスマッシュバルーンでコンテンツマーケティングマネージャーを務め、WordPressコンテンツ、ソーシャルメディアマーケティング、ユーザー生成コンテンツ(UGC)、検索エンジン最適化(SEO)において12年以上の経験を持つ。

コメントを追加する

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