WordPress Gutenbergブロックのインポート/エクスポート方法（2つのステップ）

同じGutenbergブロックレイアウトを何度も再作成することになることに気づいたことはありませんか？

あなたはそれらを知っています – 完璧なコールトゥアクションセクション、お気に入りの証言レイアウト、または実際に訪問者をコンバージョンさせる製品ショーケース。

複数のWordPressサイトを管理している場合、これはさらに時間がかかるようになります。しかし、実際にはこれに対処するための、はるかにスマートな方法があります。

WordPressには、ブロックまたはブロックのグループをインポート/エクスポートして、さまざまなウェブサイトで即座に再利用できる組み込み機能があります。これは、どこへ行くにも持ち運べる自分専用のデザインライブラリを持っているようなものです。

数十のWordPressサイトを管理した後、この簡単な2ステップのプロセスが、あなたの働き方を完全に変えることができることを学びました。

このガイドでは、Gutenbergブロックを簡単にインポート/エクスポートし、すべてのサイトでデザインの一貫性を保つ方法を説明します。

このガイドで説明する内容の概要を以下に示します。

WordPressパターンをインポートおよびエクスポートする理由

WordPressブロックパターンをインポートおよびエクスポートすると、ページ、投稿、さらには異なるウェブサイト間でデザインを再利用でき、時間を節約し、レイアウトの一貫性を保つことができます。

簡単な内訳は次のとおりです。

• 同期されていないパターン：同期されていないパターンがページまたは投稿に挿入されると、通常のブロックセットとして機能します。その特定のインスタンスに加えられた編集は、サイトの他の場所にある同じパターンの他のインスタンスには影響しません。
• 同期済みパターン（以前は再利用可能なブロックとして知られていました）：同期済みパターンを編集すると、そのパターンはウェブサイト全体にあるすべてのインスタンスに自動的に適用されます。

最も良い点は、これらのパターンを他のWordPressサイトで使用するためにエクスポートできることです。複数のウェブサイトを管理している場合や、クライアントのためにサイトを構築している場合は、これにより大幅な時間の節約になります。

それでは、Gutenberg WordPressブロックをインポート/エクスポートする方法を見てみましょう。

WordPress Gutenbergブロックのインポート/エクスポート方法

まず、移動したいコンテンツをパターンとして保存する必要があります。

パターンを保存したら、インポートとエクスポートの手順は、クラシックテーマを使用しているか、モダンなブロックテーマを使用しているかによって異なります。

両方の方法を以下で説明します。まず、クラシックテーマの手順から始めます。

方法1：クラシックテーマでブロックをインポート/エクスポートする

クラシックテーマを使用している場合、特別な画面からパターンを管理できますが、それは投稿エディターからアクセスします。

クラシックテーマでのブロックのエクスポート

まず、任意の投稿またはページを開きます。

右上隅にある3つのドットのメニューアイコンをクリックし、ドロップダウンから「パターンの管理」を選択します。

これにより、作成したすべてのパターンのリストが表示されるパターン管理画面に移動します。

エクスポートしたいパターンにカーソルを合わせると表示される「JSONとしてエクスポート」リンクをクリックします。

WordPressは、パターンをJSONファイルとしてコンピューターにすぐにダウンロードします。

クラシックテーマでのブロックのインポート

新しいサイトにパターンをインポートするには、パターンを「管理」画面に移動するのと同じ手順に従います。ページの上部にある「JSONからインポート」ボタンをクリックします。

ポップアップウィンドウで、「ファイルを選択」をクリックし、以前にダウンロードしたJSONファイルを選択します。「インポート」をクリックして完了すると、パターンが使用できるようになります。

方法2：ブロックテーマでのブロックのインポート/エクスポート

ブロックテーマを使用している場合、フルサイトエディターを使用するため、プロセスは少し異なります。

ブロックテーマでのブロックのエクスポート

開始するには、WordPress管理サイドバーから外観 » エディターに移動します。

エディター内で、左側のメニューから「パターン」を選択します。これにより、サイトのパターン管理エリアに移動します。

「パターン」の見出しの横にある3点ドットのメニューアイコンをクリックし、「JSONとしてエクスポート」を選択します。

これにより、カスタムパターンすべてを含む単一のJSONファイルがダウンロードされます。

ブロックテーマでのブロックのインポート

次に、フルサイトエディターを使用してこれらのブロックを別のウェブサイトにインポートするには、FSEを開き、「パターン」タブに移動します。

次に、「新しいパターンの追加」ボタンをクリックします。ドロップダウンメニューが表示され、そこから「JSONからパターンをインポート」ボタンを選択できます。

ダウンロードしたファイルを選択してブロックをインポートしてください。

これが完了したら、インポートしたパターンを WordPress ウェブサイトで簡単に使用できます。

WordPressブロックパターンの管理に関するベストプラクティス

Gutenbergブロックパターンのインポートとエクスポートを最大限に活用するために、これらの簡単なヒントに従ってください。

これらは、特に複数のサイトやクライアントプロジェクトで作業する場合に、整理整頓、時間節約、および頭痛の種を回避するのに役立ちます。

• パターンに明確な名前を付ける：「CTA – ダーク背景」または「お客様の声カルーセル – 3列」のように、コンテンツまたは目的を表す名前を使用します。明確な名前は、後でパターンを見つけて管理しやすくします。
• パターンを定期的にバックアップする：カスタムパターンをJSONファイルとしてエクスポートし、安全な場所に保存します。これにより、問題が発生した場合やパターンが誤って削除された場合にバックアップとして機能します。
• プラグインの依存関係に注意する：パターンがフォームビルダーや高度なブロックプラグインなどの特定のプラグインを使用している場合は、それを書き留めてください。これにより、パターンを別のサイトに移動する際の時間を節約できます。
• インポートしたパターンをテストする：新しいサイトでインポートしたパターンを常に確認し、特にメディアやプラグインに依存するブロックが正しく表示され、正しく機能することを確認してください。
• 同期済みと未同期のどちらかを選択する：パターンが同期されるべきか（すべてに自動的に更新される）、それとも同期されないべきか（編集はそのインスタンスにのみ影響する）を事前に考えます。この選択により、将来のメンテナンスが容易になります。

これらのベストプラクティスに従うことで、WordPressパターンを整理し、再利用可能で、いつでも使用できる状態に保つことができます。

Gutenbergブロックのインポート/エクスポートに関するよくある質問

このプロセスについて、まだ疑問があるかもしれません。それらを解決するために、WordPressでのブロックのインポートとエクスポートに関する最もよくある質問のリストを作成しました。

JSONファイルとは何ですか？

JSONはJavaScript Object Notationの略です。データを保存および転送するためのシンプルでテキストベースの形式です。

この場合、JSONファイルは、コンテンツ、フォーマット、設定を含め、WordPressにブロックを再構築する方法を指示する設計図のように機能します。

この方法では、画像やメディアファイルもインポートされますか？

いいえ、エクスポートプロセスではブロックの構造とテキストコンテンツのみが保存されます。ブロック内で使用されている実際の画像またはメディアファイルはエクスポートされません。

インポートされたブロックが正しく表示されるようにするには、メディアファイルを新しいサイトのメディアライブラリに手動でアップロードする必要があります。

特定のプラグインを必要とするブロックをインポートできますか？

はい、できます。ただし、インポートされたブロックは、新しいウェブサイトに同じプラグインがインストールされ、有効化されている場合にのみ機能します。

例えば、WPFormsからフォームブロックをエクスポートした場合、新しいサイトでもそのフォームをレンダリングするためにWPFormsがインストールされている必要があります。

ウェブサイト全体を移動するにはどうすればよいですか？ブロックだけではありません。

ブロックのインポートとエクスポートは、個々のコンテンツピースには最適です。しかし、ウェブサイト全体を移動する必要がある場合は、移行プラグインの方がはるかに良いソリューションです。

Duplicatorのようなプラグインの使用をお勧めします。これにより、すべてのコンテンツ、プラグイン、テーマを含むWordPressサイト全体を簡単に複製して新しい場所に移動できます。

WordPressブロックに関する追加リソース

WordPressブロックの使用と管理に関する、さらに役立つガイドはこちらです。

• WordPressブロックエディター（Gutenbergチュートリアル）の使い方
• カスタム WordPress ブロックを簡単に作成する方法
• WordPress向けの最高のGutenbergブロックプラグイン（非常に便利）
• WordPressでクラシックブロックをGutenbergに一括変換する方法
• 最適なGutenberg対応WordPressテーマ
• Ultimate Blocksレビュー：あなたにとって最適なブロックプラグインは？

この記事が、WordPressのGutenbergブロックを他のウェブサイトで使用するためにインポート/エクスポートする方法を学ぶのに役立ったことを願っています。また、WordPressでブロックを削除する方法とパディングとマージンの比較に関するガイドも参照することをお勧めします。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。