ワードプレス(WordPress)にエックス(旧ツイッター【Twitter】)を埋め込みする方法を解説!

ワードプレス(WordPress)にエックス(旧ツイッター【Twitter】)を埋め込みするには複数のアプローチが存在します。

これらの手法は比較的簡単ですが、リプライの含有、フィードの全表示、タイムラインの組み込みの有無など、カスタマイズの細かい点について知らない方もいるでしょう。

この記事では、ワードプレス(WordPress)にエックス(旧ツイッター【Twitter】)を埋め込みする基礎的な方法と手順を、初心者でも理解しやすい形で詳細に説明します。

さらに、プラグインを使わずにエックス(旧ツイッター【Twitter】)を埋め込みを自由にカスタマイズする方法についてもご紹介します。

ワードプレス(WordPress)への「エックス(旧ツイッター【Twitter】)の埋め込み」について

エックス(旧ツイッター)の組み込みは、エックス(旧ツイッター)での投稿(ツイート)をワードプレス(WordPress)のブログ記事に直接表示させるプロセスを指します。

Webサイトにツイートを表示させる際、投稿のテキストのみを採用することも、画像やビデオなどを含めることも可能で、用途に応じた柔軟な表示方法が選べます。

ワードプレス(WordPress)に表示できるエックス(旧ツイッター)のツイートは公に公開されているものならどれでも使用できます。

投稿者をフォローしていない場合でも組み込みが可能で、フォロワーである必要もありません。

ワードプレス(WordPress)に組み込めるエックス(旧ツイッター)コンテンツ

ワードプレス(WordPress)で組み込めるエックス(旧ツイッター)コンテンツには、個別のツイートとタイムラインが含まれます。

ツイートは特定のアカウントからの個々の投稿を指し、タイムラインはそれらのツイートが時間順に並べられた形式です。

例えば、「ConoHa」に関する記事を作成する際、単一の話題に焦点を当てるなら個別のツイートを取り込む、アカウント全体を紹介する場合にはタイムラインを組み込むといった使い分けが効果的です。

WordPressへのTwitter埋め込み_埋め込めるコンテンツの種類(ツイートとラタイムライン)

ツイートやタイムラインの組み込みにはプラグインを用いる必要がなく、手軽なステップでワードプレス(WordPress)に取り込むことができます。

ワードプレス(WordPress)に「エックス(旧ツイッター【Twitter】)を埋め込みするメリット

エックス(旧ツイッター)は個々の意見を共有するプラットフォームであり、多くのユーザーによる口コミが見受けられます。

この特性を利用し、ワードプレス(WordPress)での商品やサービスの紹介記事にエックス(旧ツイッター)の投稿を組み込むことは大きな利点となります。

例えば、製品やサービスの紹介文中に実際の利用者のツイートを挿入することで、読者に対し生のユーザー体験や評価を伝えることが可能です。

直接的な利益関係のない実際の利用者からの体験談は、記事の作者が推奨する内容よりも読者の信頼を得やすく、結果として販売促進に繋がる可能性があります。

ワードプレス(WordPress)内の機能のみでエックス(旧ツイッター【Twitter】)を埋め込む方法

ワードプレス(WordPress)へのエックス(旧ツイッター)組み込みは、エックス(旧ツイッター)のURLを直接コピペする方法と、エックス(旧ツイッター)の埋め込みブロック機能を利用する方法の二通りがあります。

  1. エックス(旧ツイッター)のURLを直接貼り付ける方法
  2. エックス(旧ツイッター)の埋め込みブロック機能を使用する方法

最終的な表示結果はどちらも同様ですが、組み込みのプロセスが異なるため、各手法について理解しておくことが重要です。

方法①:エックス(旧ツイッター)のリンクを直接貼り付ける

WordPressへのTwitter埋め込み_リンクを直接貼り付ける_URLを入力する部分

ワードプレス(WordPress)の投稿にエックス(旧ツイッター)のリンクを挿入するのは、コピー&ペーストだけで完了する非常に簡単な方法です。

エックス(旧ツイッター)で表示したいツイートを開き、そのURLをコピーして、ワードプレス(WordPress)の記事中の好きな場所にペーストするだけで済みます。

WordPressへのTwitter埋め込み_リンクを直接貼り付ける_URLを入力し表示された

URLを挿入すると、ツイートの内容が直ちに表示される仕組みになっています。

方法②:エックス(旧ツイッター)の埋め込みブロックを使う

WordPressへのTwitter埋め込み_ブロックを使う_ブロックを新規追加

ワードプレス(WordPress)の新しいエディターには、投稿編集時に役立つ「ブロック」という機能が装備されています。

投稿を編集する際には、画面左上のツールバーにある「+」アイコンをクリックして、ブロック機能を開くことができます。

WordPressへのTwitter埋め込み_ブロックを使う_Twitterブロックを追加「Twitter」というキーワードを検索窓に入力するか、ブロックリストを下にスクロールしてエックス(旧ツイッター)のブロックを選んでください。

WordPressへのTwitter埋め込み_ブロックを使う_ツイートのURLを貼り付ける

表示されたブロックのテキストフィールドに、組み込みたいツイートのURLをペーストし、「埋め込み」ボタンをクリックすれば設定が完了します。

「Twitter Publish」ツールでワードプレス(WordPress)にエックス(旧ツイッター【Twitter】)を埋め込む方法

次に、ワードプレス(WordPress)でエックス(旧ツイッター)を組み込む際に「Twitter Publish」という便利なツールの使用方法について解説します。

「Twitter Publish」というツールについて

WordPressへのTwitter埋め込み_Twitter Publish

このツールでは、エックス(旧ツイッター)のURLを入力するだけで、埋め込み用のコードを生成できます。これが「Twitter Publish」の主な機能です。

ツイートやタイムラインをワードプレス(WordPress)に容易に組み込むことができるだけでなく、表示の背景色や言語設定などをカスタマイズすることも可能な利点があります。

「Twitter Publish」を利用することで、自分の好みに合わせてエックス(旧ツイッター)の組み込みをより自由に行うことができます。

ワードプレス(WordPress)でエックス(旧ツイッター)を組み込む際に「Twitter Publish」という便利なツールの使用方法について具体的に見ていきましょう。

貼り付けるコードを取得

WordPressへのTwitter埋め込み_Twitter PublishにツイートのURLを入力する

「Twitter Publish」のウェブサイトにアクセスし、ワードプレス(WordPress)に組み込みたいツイートのURLを、上の画像の赤い枠部分に入力し、実行してください。

WordPressへのTwitter埋め込み_Twitter Publishで埋め込みコードを取得

ページを下にスクロールすると、表示オプションが出現します。ここで「埋め込まれたタイムライン」を選び、「コードをコピーする」ボタンをクリックすると、必要なコードを取得することができます。

リプライを表示か、または非表示に設定

WordPressへのTwitter埋め込み_Twitter Publishでリプライの有無を選択

 

「Twitter Publish」を使用すると、リプライの表示を簡単に選択できます。

リプライは、ツイートに対するコメントや返信を指し、Twitter上での直接的なコミュニケーションを可能にする機能です。

「カスタマイズオプションを表示する」をクリックすることで、リプライの表示設定を変更できます。

リプライを表示させたくない場合は、「会話を隠す」にチェックを入れて更新ボタンを押してください。

もしリプライを表示しても構わない場合は、チェックを入れずに更新ボタンを押します。

ワードプレス(WordPress)の投稿に挿入する

WordPressへのTwitter埋め込み_Twitter PublishのコードをWordPressに埋め込む

続いて、コピーしたコードをワードプレス(WordPress)の記事に組み込みます。

最初に、ブロック機能の検索で「カスタムHTML」を選択し、表示されたフィールドにコードをペーストします。

組み込まれた内容がどのように見えるかは、「プレビュー」ボタンをクリックすることでチェックできます。

会話の一部のみを埋め込む場合

WordPressへのTwitter埋め込み_Twitter Publishで元ツイートだけを表示させる

例えば、リプライのセクションが長過ぎて全てを組み込みたくない場合、特定のツイートの一部だけを組み込むこともできます。

最初に、組み込みたいツイートを選び、そのURLをコピーします。次に「Twitter Publish」を使って必要なコードを生成します。

その後、WordPressの「カスタムHTML」ブロックにこのコードを貼り付けると、選んだツイートと元のツイートのみが表示されます。

これにより、リプライの数が多くても記事がすっきりとした印象になります。

「Twitter Publish」を使ってタイムラインの埋め込む方法

ここからは、「Twitter Publish」を活用して、WordPressにタイムラインを組み込む手順を紹介します。

コードを収得

WordPressへのTwitter埋め込み_Twitter Publishでタイムラインを埋め込む

タイムラインを組み込む場合も、先述の方法でコードを取得するプロセスから始めます。

はじめに、WordPressに組み込みたいTwitterアカウントのURLをコピーします。

その後、「Twitter Publish」にアクセスし、提供された入力フィールドにそのURLを貼り付け、「→」ボタンをクリックします。

好みのサイズや色調にカスタマイズ

WordPressへのTwitter埋め込み_Twitter Publishで色やサイズをカスタマイズ

タイムラインの表示に関しては、お好みのサイズや色調にカスタマイズすることができます。

最初に、表示オプションの中から「埋め込まれたタイムライン」を選択します。

続いて、「カスタマイズオプションを設定する」をクリックし、サイズや色の設定に進みます。

WordPress記事内でのタイムラインの高さと幅をピクセル単位で調整し、背景色は白または黒から選んで設定してください。

最後に、「更新」ボタンをクリックします。

ちなみに、翻訳されたページでは背景色が「光」と「闇」で表現されていますが、これは背景色を白または黒に設定することを意味しています。

ページへ挿入する

WordPressへのTwitter埋め込み_Twitter Publishでカスタムしたコードを貼り付ける

カスタマイズを完了したら、生成されたコードをコピーしてWordPressに挿入します。

以前のステップと同様、「カスタムHTML」ブロックを選択し、そこに取得したコードをペーストします。

このプロセスは、固定ページでも投稿ページでも同様に行うことができます。

WordPressのサイドバーにTwitterのツイートを配置

WordPressへのTwitter埋め込み_Twitter PublishでサイドバーにTwitterを埋め込む

WordPressのサイドバーにTwitterのツイートを配置する際には、特別な操作は必要ありません。

以前の手順と同じく、「Twitter Publish」を使用してコードを生成し、サイドバー内のウィジェット領域にそれを貼り付けます。

ウィジェットを設定するには、ダッシュボードメニューから「外観」を選び、「ウィジェット」を選択します。WordPressへのTwitter埋め込み_Twitter Publishでサイドバーに埋め込む_カスタムHTMLを使用する

次に、「カスタムHTML」ウィジェットをサイドバーにドラッグアンドドロップして配置します。

WordPressへのTwitter埋め込み_Twitter Publishでサイドバーに埋め込む_カスタムHTMLを編集して完了する

カスタムHTMLをドラッグ&ドロップした後、右側にある「▼」アイコンをクリックすると、編集画面が開きます。ここで、好みのタイトルを入力し、取得したコードを内容欄にペーストします。これを保存すれば設定は完了となります。

Twitter Publishを使ってWordPressにフォローボタンの埋め込みをする方法

最後に、「Twitter Publish」を活用してWordPressにフォローボタンを組み込む手順をご説明します。

コードを取得

WordPressへのTwitter埋め込み_Twitter Publishでフォローボタンを埋め込む_アカウントURLを入力

まず、以前の手順に従って、組み込みたいTwitterアカウントのURLをコピーし、指定された赤い枠内に貼り付けて「→」ボタンをクリックします。

「フォローボタン 」か、「メンションボタン」を選択

WordPressへのTwitter埋め込み_Twitter Publishでフォローボタンを埋め込む_ボタンの種類を選択する

続いて、表示オプションの中から「Twitterボタン」を選ぶと、フォローボタンとメンションボタンの選択肢がポップアップとして現れます。ここで、追加したいボタンを選択してください。

WordPressへのTwitter埋め込み_Twitter Publishでフォローボタンを埋め込む_カスタマイズのオプションを設定

その後、表示オプション内の「Twitterボタン」を選択すると、フォローボタンとメンションボタンが選べるポップアップが表示されますので、追加したいボタンを選んでください。

必要に応じて設定を調整し、更新を行います。

最終的には、生成されたコードをコピーし、WordPressの投稿に挿入したい場所に貼り付けることで作業は完了します。

サイドバーにフォローボタンを組み込む方法

WordPressへのTwitter埋め込み_Twitter Publishでフォローボタンをサイドバーに埋め込む

WordPressのサイドバーにフォローボタンを組み込む方法は、以前に説明したタイムラインのサイドバーへの組み込みと同様です。

WordPressのダッシュボードにアクセスし、ウィジェットセクションを開いて、「カスタムHTML」を設定します。

タイトルを入力し、その後にコピーしたコードをペーストして「保存」ボタンをクリックすれば設定は完了します。

 

 

タイトルとURLをコピーしました