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エディターでは、コンテンツをカスタムブロックとして保存し、別のWordPressサイトにエクスポートすることができます。複数のサイトを所有している場合や、クライアントのサイトを作成している場合は、時間を大幅に節約できます。

WPBeginnerでは、コンテンツエディターブロックのエクスポートとインポートが非常に役立っています。私たちはカスタマイザーのブロックを他のブランドと共有し、生産性とコンテンツのワークフローを改善しています。

この投稿では、WordPress Gutenbergブロックを簡単にエクスポートし、他のサイトで使用するためにインポートする方法を紹介します。

How to export your Gutenberg blocks

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

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

そして、背景色を変えたり、文字を大きくしたりすることで、そのボタンを目立たせることができる。このコンテンツを再度使用する予定がある場合は、WordPressで再利用ブロックとして保存することができます。

Creating a reusable block in WordPress

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

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

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

まだであれば、エクスポートしたいコンテンツを再利用ブロックとして保存する必要があります。保存が完了したら、WordPressのコンテンツエディターで「+」ボタンをクリックします。

The WordPress content editor

表示されたパネルで、「再利用可能」アイコンを選択する。

次に「再利用ブロックの管理」をクリックします。

Managing reusable WordPress blocks

再利用ブロックがすべて表示される画面になります。

エクスポートしたいブロックにマウスオーバーし、「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ファイルを選択することができます。

その後、『インポート』をクリックする。

Importing a block as a JSON file

WordPressは再利用ブロックをインポートします。

これで、インポートしたブロックを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.