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

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

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

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

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

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

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

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

• WordPressパターンをインポートおよびエクスポートする理由
• WordPress Gutenbergブロックのインポート/エクスポート方法
• Method 1: Import/Export Blocks With a Classic Theme
• Method 2: Import/Export Blocks With a Block Theme
• Gutenbergブロックのインポート/エクスポートに関するよくある質問
• WordPressブロックに関する追加リソース

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

WordPressのブロックエディターは、ユニークなレイアウトを作成するのに優れています。たとえば、特別なボタンと配色スキームを使用してカスタムのコールトゥアクションをデザインすることができます。

デザインを再利用する予定がある場合は、パターンとして保存できます。パターンには同期済みと非同期済みの2種類があることを知っておくことが重要です。

同期されていないパターン：同期されていないパターンがページまたは投稿に挿入されると、通常のブロックセットとして機能します。その特定のインスタンスに加えられた編集は、サイトの他の場所にある同じパターンの他のインスタンスには影響しません。

同期済みパターン（以前は再利用可能なブロックとして知られていました）：同期済みパターンを編集すると、変更はウェブサイト全体でそのパターンのすべてのインスタンスに自動的に適用されます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

次に、「新しいパターンの追加」ボタンをクリックします。ドロップダウンメニューが表示され、そこから「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でもフォローできます。