WordPress で Gutenberg ブロックをエクスポートおよびインポートする方法
当初、WordPress ユーザーは WordPress ブロックベースのビルダーに対して苦い関係を持っていました。そして、Gutenberg のガイドで発見したように、新しいエディターには、美しいコンテンツを簡単かつ楽しく作成できる素晴らしい機能が備わっています。さて、エディターが物足りない人もいます。
Gutenberg は、コードを書かずに注目に値するページや投稿を作成するための十分な機能を提供します。追加したいコンテンツが何であれ、Gutenberg にはブロックだけが用意されています。
各コンテンツ ブロックを広範囲に変更してスタイルを設定したいですか? Gutenberg は、豊富なカスタマイズ オプションのおかげであなたをサポートします。デフォルトのエディターで利用できるものよりもさらに多くのブロックが必要ですか? Gutenberg アドオン プラグインはたくさんあります。
だからこそ、多くのユーザーが Gutenberg の優れた機能の 1 つである再利用可能なブロックについて知らないのは悲しいことです。何を言っているのかわからない方のために説明すると、再利用可能なブロックとは、 単にコンテンツを自由に作成、保存、 再利用できるブロックです。
各投稿またはページの最後に、CTA、お礼状、署名、フォームなどを追加したいとします。
以前は、機能をコンピュータ上のテキスト ファイルに保存する必要がありました。必要な場合は、それをコピーして投稿またはページに貼り付けます。 Gutenberg はこの問題を軽減しました。これで、毎回テキスト ファイルを使用したり、同じブロックを最初から作成したりする必要がなくなります。
再利用可能な単一のブロックを作成し、投稿やページだけでなく、他の WordPress Web サイトでも使用できます。
多数の Web サイトを作成する場合でも、各投稿/ページに特別なコンテンツを追加する必要がある場合でも、Gutenberg の再利用可能なブロックは時間を大幅に節約するのに役立ちます。
そして今日の投稿では、WordPress で再利用可能な Gutenberg ブロックを作成してエクスポートする方法を正確に説明します。私たちの目的は、複数の投稿/ページ/WordPress Web サイト上でカスタム コンテンツ ブロックを簡単に移動および再利用できるようにすることです。
余談: たとえば、Getwid や Ultimate Blocks などのプラグインを使用してブロックを作成した場合、そのブロックを再利用したい他の WordPress サイトにプラグインをインストールする必要があります。また、ブロックの外観はテーマごとに若干異なる場合がありますが、Gutenberg には多くのカスタマイズ機能があるため、問題ありません。
邪魔にならないので、コーヒーを飲みながら読書をお楽しみください。
まず、再利用可能なブロックが必要です
残念ながら通常のブロックをエクスポートまたはインポートすることはできません。 Gutenberg ブロックをエクスポートおよびインポートするには、 まず再利用可能なブロックを作成する必要があります。
説明のために、 公開するすべての投稿の最後に追加する感謝状を作成します。投稿にメモを追加する必要があるたびにメモを書き直す必要はありません 🙂
私のお礼状は複雑なものではありません。 Twitter と Facebook へのリンクを含む単純な段落ブロックです。ブロックには、バナー広告、画像スライダー、引用、リスト、最新の投稿、MailChimp フォームなど、何でもできることに注意してください。
後で、メモ (読み取り、ブロック) を 2 番目の WordPress Web サイトにエクスポートする方法を説明します。いいですね？いいですね、始めましょう。
再利用可能なブロックを作成する方法
再利用可能なブロックの作成は非常に簡単です。 [投稿] > [新規追加] に移動して、Gutenberg エディタを起動します。
次に、[ブロックの追加（+）] アイコンをクリックし、コンテンツ ブロックを選択します。この例では、次の図に示すように段落ブロックを追加しました。
その後、必要に応じてブロックをカスタマイズし、スタイルを設定します。テキスト、ソーシャルメディアリンク、背景色を追加しました。新しいブロック、別名感謝状 が私のGutenberg エディターでどのように表示されるかは次のとおりです。
とても素敵なジョン・ドゥ。非常に素晴らしい。これからは、ソーシャルメディアであなたのブログをフォローすることになるでしょう 🙂 早速進めていきます。
現時点では、上記のメモは通常のブロックです。これをエクスポートおよびインポートできる再利用可能なブロックに変換する必要があります。これを行うには、以下に示すように、[その他のオプション] アイコンをクリックし、[再利用可能なブロックに追加] をクリックします。
次に、以下に示すように、再利用可能なブロックに名前を付け、保存 ボタンを押します。
これで、最初の再利用可能なブロックが作成されました。さすがアミーゴ。
再利用可能なブロックの使用方法
作成した再利用可能なブロックを投稿やページに追加するのは非常に簡単です。投稿またはページに必要なコンテンツを追加したら、ブロックの追加 (+) アイコンをクリックし、再利用可能なブロック タブまでスクロールして、ブロックを選択します (ありがとうございます)以下に示すように、この場合は注意してください)。
再利用可能なブロックを投稿またはページに追加した後、[プレビュー/公開] ボタンを押して、フロントエンドで結果を表示します。私が得たものは次のとおりです。
私のテスト サイトは Twenty Twenty テーマを実行しています。
最も良い点は、お礼状ブロックを最初から作成しなくても、いつでも再利用できることです。 Gutenberg ブロックをサポートするすべての投稿タイプに追加できます。
再利用可能なブロックを作成して使用する方法がわかったので、次はこれらのブロックを別の WordPress Web サイトにエクスポートする方法について学びましょう。混乱を避けるために、先ほど作成したのと同じブロックを使用します。
WordPress で Gutenberg ブロックをエクスポートする方法
再利用可能な Gutenberg ブロックのエクスポートは 4 年生の内容で、すぐに完了します。
何をすればよいですか?
以下に示すように、Gutenberg エディタ内で [その他のツールとオプション] アイコンをクリックし、すべての再利用可能なブロックを管理 をクリックします。
これにより、[ブロック] 画面が表示され、再利用可能なすべてのブロックを表示および管理できます。
感謝状 ブロックのみがありますが、さらに作成すると上の画面が表示されます。エクスポートするには、タイトルの上にマウスを置き、表示される [JSON としてエクスポート] リンクをクリックします。下の画像を参照してください。
次に、JSON ファイルをコンピューターに保存します。
コンピューター上に JSON ファイルができたので、次はブロックを 2 番目のテスト サイトにインポートします。
WordPress に Gutenberg ブロックをインポートする方法
再利用可能なブロックのインポートは、A、B、C と同じくらい簡単です。まず、Gutenberg エディターを開きます。次に、以下に示すように、[その他のツールとオプション] アイコンをクリックし、すべての再利用可能なブロックを管理します。
次の [ブロック] 画面で [JSON からインポート] をクリックし、前にダウンロードしたファイルを選択して、インポート ボタンを次の順序で押します。
以上です！このようにして、再利用可能な Gutenberg ブロックを 2 番目の WordPress サイトにインポートすることができました。
それは簡単ではありませんでしたか？その後、2 番目の Web サイトで Gutenberg ブロックを何度でも使用および再利用できます。
Gutenberg ブロックをエクスポートするプラグインはありますか?
そうそう、評判の良い WordPress 開発者である ThemeIsle によるものを見つけました。これは、Blocks Export Import として知られる無料のプラグインです。基本的に、プラグインを使用すると、このチュートリアル全体をスキップできます。はい、そのとおり;再利用可能なブロックを作成する必要さえありません。
プラグインをインストールしてアクティブ化し、Gutenberg エディターを開きます。必要に応じてブロックをデザインし、[その他のオプション] アイコンをクリックします。次に、以下に示すように、[JSON をエクスポート] をクリックします。スクリーンショットは次のとおりです。
これにより、JSON ファイルがコンピューターにダウンロードされます。プラグインを使用して JSON ファイルをインポートするには、Gutenberg エディターを開きます。次に、ブロックの追加アイコンをクリックし、ウィジェットタブのJSON からブロックをインポートします。
その後、[ファイルを選択] をクリックしてコンピュータからファイルを選択し、アップロード ボタンを押します。
プラグイン方式の唯一の問題は、ブロックが WordPress サイトに保存されないことです。 WordPress データベースにブロックを保存するには、手動の方法を使用する必要があります。もしかしたら将来的には変わるかもしれません。
残念ながら、別のプラグインは見つかりませんでした。それでも、Web サイト上で再利用可能なブロックを保存することに関心がない場合、プラグインを使用すると時間を大幅に節約できます。ブロックは JSON ファイルとしてコンピューター上に保存されます。
再利用可能な Gutenberg ブロックは救世主です。これらを使用すると、最初から開始する必要がないため、テンプレートと機能を迅速に複製できます。多数の投稿、ページ、Web サイトを作成する場合は、Gutenberg ブロックをエクスポートする方法を学ぶと便利です。
Gutenberg ブロックについて質問や提案がありますか?以下のコメント欄でお知らせください。