【ワードプレス】ブログにTwitterの投稿を埋め込む（Gutenberg）

こんにちは。

今わたしは、ワードプレスでブログを運営して、ブログの収入を増やせるかというチャレンジをおこなっています。

分からないこと、知らないことがたくさんあるので、その都度ネットで検索して調べていますが、答えが見つからないこともあって。

例えば今回、わたしが困ったことは、

ブログの記事内にTwitterの投稿を埋め込みたい

ということでした。

ネットで情報収集すると、

「テキストで貼り付ければいい」

という答えばかり出て来ます。

でも「テキスト」の意味がわからず、わかりやすい記事も見つからず、

「テキストって何？？？？？」

と行き詰まってしまいました。

で、結局何とか自力で解決策を見つけました。
なので、その方法を備忘録がてら残しておきます。

同じことで困っている方のお役に立てば幸いです。

投稿内にTwitterを埋め込む

わたしは「Cocoon」というテーマを適用していたので、

ネットで

「Cocoon　Twitter　埋め込む」

と検索しました。
すると次の投稿にぶつかります。

「Cocoon」を開発した偉大な「わいひら」さんの公式ホームページです。

※いつもお世話になってます。

上のリンクは、公式ホームページ内の質問コーナー（フォーラム）でのやり取りです。
その中で、

というコメントがあり、それで解決という流れに。

ただ、この「ビジュアル」「テキスト」というのは、ワードプレスの旧エディタの機能で、現在主流の新エディタ（Gutenberg）にはありません。

新エディタ（Gutenberg）はブロックエディタなので、色んな種類のブロックを使い分けて記事を作成していく形式です。

そしてそのブロックの中に「テキストブロック」というものはありません。

「段落ブロック」に普通に貼ってもダメ、
Cocoonブロックの中の「Twitter」を使ってもダメ、
「埋め込みブロック」に貼ってリンクに変えてもダメ。

最後に、

「カスタムHTMLブロック」に貼ってプレビューを確認してみると、

表示されました～～～～！！！！！

「カスタムHTMLブロック」は、フォーマットグループにあります。

「カスタムHTMLブロック」へのTwitterの貼り付け方

では早速、苦労して見つけた方法をご紹介していきます。

「ブロックの追加」をクリックします。

フォーマットグループから「カスタムHTMLブロック」を探し、クリックします。

「HTMLを入力」の部分に、別途取得したTwitterのコードを貼り付けます。

※Twitterのコード取得方法は、以下の記事でご紹介しています。

コードを貼り付けると下のような形になります。
プレビューをクリックすると、Twitterの投稿内容が確認できます。

投稿内にTwitterが埋め込めない事件で気づいたこと

今回気づいたこと。

今、ブログ界で著名な方々って、記事を書いた時は旧エディタしかなかったから、新エディタの記事があまりないんですね。

※新エディタ（Gutenberg）が登場したのは、確か2018年です。

逆にわたしは最近始めたので、最初から新エディタ（Gutenberg）派。

今後も、ネットで調べて答えが出ないことがたくさんありそうです。
幸い、ネットでわからない事を調べるのは苦じゃないので（あんまり見つからないと多少イライラしますが）、また何かわからない事を調べたら、記事にして共有していければと思います。

誰かのお役に立てば幸いです。
それでは。