Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressのGutenbergブロックをインポート/エクスポートする方法(2ステップ)

私たちは複数のWordPressサイトを管理しているため、同じGutenbergブロックを何度も作り直すことがどれほど面倒か知っています。より良い方法を見つけるまでは、サイト間でコンテンツをコピー&ペーストして時間を浪費していました。

長年WordPressに携わり、WPBeginnerを通じて初心者を支援してきた結果、Gutenbergブロックのインポートとエクスポートは、WordPressで最も活用されていない時間節約機能の1つであることがわかりました。

サイト間でGutenbergブロックを転送するためのシンプルな2ステッププロセスをご紹介しましょう。この方法は、コンテンツを再利用したいブロガーでも、複数のクライアントのサイトを管理する代理店でも、完璧に機能します。

How to export your Gutenberg blocks

なぜWordPress Gutenbergブロックをインポート/エクスポートするのか?

WordPressのブロックエディターでは、コンテンツをブロックとして追加し、そのブロックをカスタマイズすることができます。例えば、Buttonsブロックを使ってコールトゥアクションを作成することができます。

そして、背景色を変えたり、文字を大きくしたりして、そのボタンを目立たせることができる。このコンテンツをまた使う予定があるなら、WordPressでパターンとして保存しておくことができる。

Create a pattern in WordPress

しかし、これらの再利用ブロックをエクスポートして、他のサイトで使用することもできます。複数のサイトを所有している場合や、クライアントのサイトを制作するWordPress開発者の場合は、時間と労力を大幅に節約できます。

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

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

まだであれば、再利用可能なブロックまたはパターンとしてエクスポートしたいコンテンツを保存する必要があります。保存が完了したら、WordPressダッシュボードから外観 ” パターンのページにアクセスしてください。

WordPressサイトで再利用可能なパターンをすべて簡単に管理できる新しいページが表示されます。

ここでは、ブロックの編集、削除、インポート、他のサイトへのエクスポートができます。エクスポートしたいブロックの上にマウスオーバーし、「JSONとしてエクスポート」リンクが表示されたらクリックするだけです。

Exporting a WordPress block as a JSON file

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

ブロックを別のWordPressブログやウェブサイトにインポートするには、そのサイトにログインし、コンテンツエディターを開きます。その後、上記と同じ手順でブロック管理画面を開きます。

今回は、代わりに「Import from JSON button」をクリックする。表示されるポップアップで、’Choose file’を選択する。

Choose file to import block in Gutenberg

先ほどダウンロードしたJSONファイルを選択することができます。

その後、「インポート」をクリックします。WordPressが再利用ブロックをインポートします。

ただし、ブロックテーマを使用している場合は、少し手順が異なります。その場合は、WordPress管理画面のサイドバーから外観 ” エディターのページにアクセスしてください。

サイトエディターが開きますので、左カラムの’カラム’タブをクリックして展開してください。

Choose Patterns tab

新しい画面で、「マイパターン」タブに切り替え、下のチェックボックスを使って作成した再利用ブロックをすべて選択する。

その後、「JSONとしてエクスポート」リンクをクリックして、これらのブロックをエクスポートする。

Click Export as JSON

さて、これらのブロックをフルサイトエディターを使って別のサイトにインポートするには、FSEを開き、「パターン」タブに向かいます。

次に、「新規パターンを追加」ボタンをクリックします。するとドロップダウンメニューが開き、そこから「Import Pattern From JSON」ボタンを選択することができます。

ダウンロードしたファイルを選択し、再利用ブロックをインポートします。

Click Import Pattern as JSON

これで、インポートしたブロックをWordPressサイトで、他の再利用ブロックとまったく同じように使うことができます。

WordPressブロックに関するその他のリソース

WordPressブロックの使用と管理に関する便利なガイドをいくつかご紹介します:

この投稿が、WordPress Gutenbergブロックを他のサイトで使用するためにインポート/エクスポートする方法を学ぶのにお役に立てば幸いです。また、WordPressでブロックを削除する方法や、パディングとマージンの比較もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

4件のコメントLeave a Reply

  1. Thomas

    Exactly where IS the ‘Block Management Screen?” I can’t find it anywhere.

    • WPBeginner Support

      It should be visible when you click the + icon to add a new block.

      Admin

  2. Alan

    Hello,

    Great information. Thanks for sharing.

    I have a question…
    Is it possible to export an entire page made up of many blocks? I can do this in Elementor and use this feature all the time.

    Thanks in advance

    • WPBeginner Support

      You could export a page using Tools>Export and import it on to a new site if that’s what you mean.

      Admin

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.