WordPress 5.0のブロックページエディタ(Gutenberg)でプラグインを使用できますか?

はい。ブロックエディタに「カスタムFacebookフィード」ブロックを追加し、正しいフィードを指定する方法について教えてください。

WordPressのブロックエディタを使って、ページに「カスタムTwitterフィード」または「カスタムFacebookフィード」のフィードを追加してみませんか?

このガイドでは、「Twitterフィード」ブロックと「Facebookフィード」ブロックを使用してフィードを追加する方法について順を追って説明します。

作業を始める前に、お使いのサイトに「Custom Twitter Feeds」がインストールされ、有効化されていることを確認してください。Facebookフィードの場合は、「Custom Facebook Feed」がインストールされ、有効化されている必要があります。また、少なくとも1つのフィードがすでに作成されている必要があります。

フィードブロックの追加

まず、フィードを表示したいページまたは投稿を開きます。次に、「+」ボタンをクリックしてブロックを追加します。

検索ボックスに、フィードタイプの名前を入力します。「カスタム Twitter フィード」の場合は「Twitter フィード」を検索し、「カスタム Facebook フィード」の場合は「Facebook フィード」を検索します。その後、ブロックをクリックしてページに追加します。

検索ボックスに「Twitterフィード」と入力され、Twitterフィードブロックを指し示す矢印が付いたブロックインサーター

Facebookフィードブロックも同様に表示されます。

検索ボックスに「Facebookフィード」と入力され、Facebookフィードブロックを指し示す矢印が付いたブロックインサーター

注:「Custom Twitter Feeds」などのプラグイン名で検索しても、そのブロックは見つかりません。「Twitter Feed」などのブロック名で検索すると見つかります。

まだフィードを作成していない場合、このブロックには「Facebookフィードを作成」ボタン、または「Xフィードを作成」ボタンが表示されます。このボタンは、次のセクションで説明する「フィードを選択」ドロップダウンの代わりに表示されます。このボタンをクリックするとフィードビルダーが開き、そこで最初のフィードを作成してから、このページに戻ることができます。

まだフィードがないページ上の「Facebookフィード」ブロックに、「Facebookフィードを作成」ボタンが表示されている

フィードを用意できたら、それをブロックに追加する準備が整いました。

フィードの選択

ページにブロックが表示されたら、それをクリックして選択します。右側のブロック設定で、「フィード設定」を開きます。次に、「フィードを選択」ドロップダウンから、表示したいフィードを選択します。

「フィードを選択」ドロップダウンが特定のフィードに設定され、そのフィードを指す矢印が表示されているブロック設定

フィードを選択すると、すぐにブロックに設定され、その投稿がエディタのプレビューに表示されます。適用するための個別のボタンはありません。Facebookフィードブロックも同様に機能します。

Twitterフィードブロック内で、選択したフィードの投稿を表示するエディタプレビュー

内容に問題がなければ、「公開」または「保存」をクリックしてページを保存してください。

フィードを含むページが保存されました。

ブロックからフィードカスタマイザーを開く

フィードの表示を変更するには、ページを離れる必要はありません。ブロックを選択した状態で、ブロックツールバーにあるブラシアイコンをクリックしてください。このアイコンには「カスタマイザー」と表示されています。

「カスタマイザー」のブラシアイコンを指し示す矢印が付いたブロックツールバー

そのフィードのカスタマイズ画面は、新しいブラウザタブで開きます。現在のページはエディタ内で開いたままになります。

ショートコードを使ってフィードを追加する

お好みであれば、フィードのショートコードをショートコードブロックに貼り付けることもできます。WordPressの管理画面のサイドバーから、次の場所へ移動してください。 Twitterフィード » すべてのフィード または Facebookのフィード » すべてのフィード. 各フィードのショートコードは、 ショートコード 列。「カスタムTwitterフィード」の場合、次のような表示になります。 [custom-twitter-feeds feed=1](この数字はフィードのIDです)。「カスタムFacebookフィード」の場合は、次のような形式になります。 [custom-facebook-feed feed=1].

「All Feeds」ページで、フィードが「Shortcode」列にショートコードとともに一覧表示されている

Elementor を使ってフィードを追加する

Elementorを使ってページを作成する場合、ブロックエディタはまったく必要ありません。当社の「Smash Balloon Elementorウィジェットガイド」では、Elementorでのフィードの追加方法について解説しています。

これで完了です!ブロックエディタを使ってフィードを追加できました。次は、Xのフィードから特定の投稿を非表示にする方法について学びましょう。

よくある質問

以下では、ブロックエディタでのプラグインの使用に関して、よく寄せられる質問のいくつかにお答えします。

プラグイン名で検索してもそのブロックが見つかりません。どこにあるのでしょうか?

ブロックの名前は「Twitter Feed」と「Facebook Feed」です。代わりにこれらの名前で検索してください。「Custom Twitter Feeds」や「Custom Facebook Feed」で検索しても、どちらのブロックも表示されません。上記のフィードブロックの追加手順では、この検索方法について詳しく説明しています。

このブロックでフィードの作成を求められています。なぜ私のフィードが表示されないのでしょうか?

このブロックには、すでに作成済みのフィードのみが表示されます。まだフィードが存在しない場合は、ドロップダウンの代わりに「Facebookフィードを作成」または「Twitterフィードを作成」ボタンが表示されます。上記の「フィードブロック」の追加方法では、そのボタンの機能について説明しています。

ショートコード用のフィード番号はどこで確認できますか?

フィード番号が含まれたショートコードは、「Twitterフィード」»「すべてのフィード」または「Facebookフィード」»「すべてのフィード」の「ショートコード」列に記載されています。「ショートコードを使用したフィードの追加」では、その使用方法について説明しています。

サポート

ドキュメントに答えが見つからない?

サポート