Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
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.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

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.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

4件のコメント返信を残す

  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.

      管理者

  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.

      管理者

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。