Twitter(現X) のツイート(ポスト)をWordPressに埋め込む手順

SNS Twitter (現 X) のツイート(ポスト)のリンクを、オープンソースのブログソフトウェア・コンテンツ管理システム (CMS) WordPress で作成するページに、ブロックエディターのウィジェットであるカスタム HTML ブロックを使って、埋め込む手順を紹介します。

WordPress6.8 Twitter(現X)のツイート(ポスト)を投稿記事に埋め込む8

※ WordPress バージョン 6.8.1 を使用しています。
※ PHP バージョン 7.4.33 を使用しています。
※ テーマ Cocoon 2.8.5.3 を使用しています。
※ 子テーマ Cocoon Child 1.1.3 を使用しています。

ツイート(ポスト)の URL では埋め込めなくなっていました

以前は、 WordPress の編集ページに、そのツイート(ポスト)の URL を貼り付けると、自動的に埋め込まれていたと思ったのですが、以下のように失敗します。

WordPress6.8 Twitter(現X)のツイート(ポスト)を投稿記事に埋め込む9

ツイート(ポスト)の埋め込みコードを取得

例として、ゲーム向けのアセット「New Platformer Pack」を CC0 ライセンスで自由に利用できるように無料で公開された Kenney さんのツイート(ポスト)を埋め込みます。

そのツイート(ポスト)の右上の「…」ボタンを押して表示されるメニュー「ポストを埋め込む」を選択します。

WordPress6.8 Twitter(現X)のツイート(ポスト)を投稿記事に埋め込む1

埋め込む表示オプションとして、動画投稿の2つから選びます。
例では、投稿の埋め込み( Embedded Post ) を選択します。

WordPress6.8 Twitter(現X)のツイート(ポスト)を投稿記事に埋め込む2

埋め込みコードと、その結果が表示されるので Copy Code ボタンを押して、埋め込みコードをクリップボードにコピーします。

WordPress6.8 Twitter(現X)のツイート(ポスト)を投稿記事に埋め込む3

埋め込みコードのテキストをコピーできました。

WordPress6.8 Twitter(現X)のツイート(ポスト)を投稿記事に埋め込む4

WordPress のカスタム HTML ウィジェットで埋め込みコードを使用

次に、ツイート(ポスト)を埋め込みたい WordPress の編集ページを表示して、「カスタム HTML 」ブロックを追加します。

そのブロックを追加するには、編集ページの左上の「+」ボタンを押した後、表示されるリストの「ブロック」タブの「ウィジェット」セクションの「カスタム HTML 」をクリックします。

WordPress6.8 Twitter(現X)のツイート(ポスト)を投稿記事に埋め込む5

追加された「カスタム HTML」ブロックに、「HTML を入力」とプレースホルダーが書かれているテキストボックスに、先ほどコピーした埋め込みコードを Ctrl + V キーなどで貼り付けます。

WordPress6.8 Twitter(現X)のツイート(ポスト)を投稿記事に埋め込む6

埋め込みコードが貼り付けられました。

WordPress6.8 Twitter(現X)のツイート(ポスト)を投稿記事に埋め込む7

「HTML」の隣の「プレビュー」を選択すると、HTML の編集から、その結果を表示するプレビューに切り替わります。

WordPress6.8 Twitter(現X)のツイート(ポスト)を投稿記事に埋め込む8

以上で、Twitter (現 X) のツイート(ポスト)を、WordPress で作成するページに埋め込むことができました。

関連記事

Steam の商品ページのリンクを埋め込む手順は以下の記事を参照してください。

まとめ

今回は、SNS Twitter (現 X) のツイート(ポスト)のリンクを、オープンソースのブログソフトウェア・コンテンツ管理システム (CMS) WordPress で作成するページに、ブロックエディターのウィジェットであるカスタム HTML ブロックを使って、埋め込む手順を紹介しました。

参照サイト Thank You!

記事一覧 → Compota-Soft-Press

コメント

Ads Blocker Image Powered by Code Help Pro

お願い - Ads Blocker Detected

このサイトは広告を掲載して運営しています。

ポップアップを閉じて閲覧できますが、よろしければ

このサイト内の広告を非表示にする拡張機能をオフにしていただけませんか?

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.

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