WordPressで作成したサイトにおいて、サイドバーにX(Twitter)のタイムラインを載せる方法をご紹介します。
![X(Twitter)の表示イメージ](https://ym-life.com/wp-content/uploads/2024/06/image-57-1024x700.png)
![](https://ym-life.com/wp-content/uploads/2021/02/*バストアップ3(丸)-150x150.png)
SWELLをお使いの方はもちろん、WordPress利用者の方は同様の方法で設置可能です!
X(Twitter)をサイドバーにタイムラインを表示させる方法【SWELL】
これを行う手順は2ステップです。
- 専用サイトから貼り付け用のコードを取得する
- WordPressにコードを貼り付ける
2つ合わせて5分もあればできますよ。
専用サイトから貼り付け用のコードを取得する
まずは、Twitterにログインし、プロフィールページを開いておきましょう。
次に、下の「X Publish」にアクセスしてください。
「What would you like to embed?(何を埋め込みたいですか?)」のところに、自身のXのプロフィールURLを入力し、「→」をクリックします。
![専用サイトから貼り付け用のコードを取得する手順1](https://ym-life.com/wp-content/uploads/2024/06/image-58-1024x439.png)
![専用サイトから貼り付け用のコードを取得する手順1](https://ym-life.com/wp-content/uploads/2024/06/image-58-1024x439.png)
「Here are your display options(表示オプションは次の通りです)」と表示された画面で、左側の「埋め込まれたタイムライン」を選択します。
![専用サイトから貼り付け用のコードを取得する手順2](https://ym-life.com/wp-content/uploads/2024/06/image-59.png)
![専用サイトから貼り付け用のコードを取得する手順2](https://ym-life.com/wp-content/uploads/2024/06/image-59.png)
「That’s all we need, unless you’d like to set customization options.」と表示されるので、「set customization options.」をクリックし、細かなカスタマイズをしていきましょう。
![専用サイトから貼り付け用のコードを取得する手順3](https://ym-life.com/wp-content/uploads/2024/06/image-62-1024x586.png)
![専用サイトから貼り付け用のコードを取得する手順3](https://ym-life.com/wp-content/uploads/2024/06/image-62-1024x586.png)
この画面で、表示サイズやデザインなどを指定できます。
![専用サイトから貼り付け用のコードを取得する手順4](https://ym-life.com/wp-content/uploads/2024/06/image-63-956x1024.png)
![専用サイトから貼り付け用のコードを取得する手順4](https://ym-life.com/wp-content/uploads/2024/06/image-63-956x1024.png)
- 高さと横幅の設定:希望サイズを入力(※当サイトでは、高さ400×横幅300)
- デザインの設定:「ライト(白)」or「ダーク(黒)」から選択(※当サイトはライトを選択)
- 言語の設定:表示したい言語を選択(※日本のサイトなのでJapanese)
全ての項目を入力したら「Update」をクリックします。
「Copy Code」をクリックすると、作成したコードをコピーできます。
![専用サイトから貼り付け用のコードを取得する手順5](https://ym-life.com/wp-content/uploads/2024/06/image-65-1024x754.png)
![専用サイトから貼り付け用のコードを取得する手順5](https://ym-life.com/wp-content/uploads/2024/06/image-65-1024x754.png)
WordPressにコードを貼り付ける
次に、先ほど作ったコードをサイドバーに埋め込む手順です。
「外観」→「ウィジェット」をクリックします。
「共通サイドバー」に、「テキスト」をドラッグ&ドロップして入れます。
![WordPressにコードを貼り付ける手順1](https://ym-life.com/wp-content/uploads/2024/06/image-66-903x1024.png)
![WordPressにコードを貼り付ける手順1](https://ym-life.com/wp-content/uploads/2024/06/image-66-903x1024.png)
「テキスト」タブに切り替え、先ほどコピーしたコードを貼り付けます。
![WordPressにコードを貼り付ける手順2](https://ym-life.com/wp-content/uploads/2024/06/image-67.png)
![WordPressにコードを貼り付ける手順2](https://ym-life.com/wp-content/uploads/2024/06/image-67.png)
「タイトル」にはサイドバーに表示したい文言を追加し、「保存」します。
保存できたら、実際にサイトを確認してみましょう。
サイドバーへの設置が確認できるはずです。
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ8(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ8(丸)-150x150.png)
![](https://ym-life.com/wp-content/uploads/2021/04/バストアップ8(丸)-150x150.png)
設定お疲れ様でした!
![](https://ym-life.com/wp-content/uploads/2024/04/e9136e399fdb0ae5f9cd29945e87aca3-300x169.jpg)
![](https://ym-life.com/wp-content/uploads/2024/04/e9136e399fdb0ae5f9cd29945e87aca3-300x169.jpg)
コメント