WordPress の再利用可能なブロックとパターンの完全ガイド 

WordPress の再利用可能なブロックとパターンの完全ガイド

WordPress の再利用可能なブロックは、Gutenberg ブロック エディターの強力な機能です。コンピューター ファイルから以前に保存した再利用可能なコンテンツ スニペットをコピーして貼り付ける必要はもうありません。代わりに、毎回カスタマイズすることなく、Web サイトのどこでも同じコンテンツ ブロックを簡単に再利用できます。

その効率性にもかかわらず、多くのユーザーはこの時間節約テクニックに気付いておらず、不必要に時間と労力を無駄にしています。そのため、WordPress の再利用可能なブロックに関する詳細な記事を作成しました。

WordPress の再利用可能なブロックの作成、使用、設定方法やその他の重要なヒントを学びます。

読み進めてみましょう。

Quick Overview
This WordPress reusble block documentation will highlight the differences between regular blocks and reusable blocks along with:

How to create a reusable block in WordPress

  • パターンの作成.
  • Configure pattern settings.

Set up blocks in posts or pages

  • Open a page
  • Click “+” icon そして navigate to Patterns タブ。
  • Hit to add selected pattern.

How to convert WordPress reusable blocks to regular block

  • select reusable block.
  • Click three dots.
  • Press “Detach.

How to manage WordPress reusable blocks

  • 案内する Appearance > Editor.
  • Click Patterns タブ。
  • Select pattern.
  • Edit, duplicate, delete, and export to manage pattern.

How to import/export reusable blocks

  • Update latest WordPress version
  • 案内する 外観 > エディター > デザイン > パターン
  • 選択する pattern category
  • クリック “Export as JSON”

WordPress の再利用可能なブロック (パターン) とは何ですか?

WordPress reusable blocks are like regular content blocks that users can create and save for repeated use across any part of their website within the block editor. The process includes grouping multiple WordPress reuse blocks like patterns and importing them anywhere on your website.

この機能の一般的な使用例としては、 同じCTAやソーシャルメディアボタン、フォーム、プロモーションバナーを一貫して使用する ウェブサイト全体にわたって。したがって、同じものを繰り返しカスタマイズする必要はありません。 

最も良い点は、変更がウェブサイトのすべてのページと投稿に自動的に適用されることです。すべての側面を個別に変更する必要はありません。さらに、再利用可能なテンプレートをエクスポートして別のウェブサイトにインポートすることもできます。

再利用可能なブロックと通常のブロックの違い

WordPress の再利用可能なブロックと通常のブロックの主な違いをいくつか紹介します。

再利用可能なブロック通常のブロック
ウェブサイトのさまざまなインスタンスで作成、保存、再利用します。単一の投稿またはページに対してのみ作成して使用します。
編集とカスタマイズはウェブサイト全体で自動的に更新されます。カスタマイズは、Web サイトの特定のインスタンスにのみ影響します。
一元的な場所から簡単に管理できます。投稿またはページ内で個別に管理する必要があります。
インポートおよびエクスポート機能が利用可能です。一元的な場所から簡単に管理できます。

WordPressの再利用可能なブロックはいつ使用する必要がありますか 

WordPressの再利用可能なブロックを使用することで本当に興味深いことの1つは、サイト全体の変更が簡単になることです。たとえば、 ウェブサイトのフッターを更新する プロモーションバナーの割引を調整したり、 すべての投稿やページで手動で変更する必要はありません

再利用可能なブロックの設定にアクセスするだけで、数回クリックするだけで更新できます。 集中管理により設計の一貫性も確保されます 完全なウェブサイトで。さらに、これらのブロックはブロック エディターの専用セクションに保存されるため、簡単にアクセスできます。つまり、この機能はチームでの共同作業に役立ちます。

前にも触れましたが、再利用可能なブロックは異なるウェブサイト間で共有することもできます。 再利用可能なブロックをさまざまなウェブサイトに簡単にエクスポートおよびインポートできますWP 再利用可能ブロックも変換可能です。

How to Create Reusable Blocks (Pattern) in WordPress Gutenberg Editor

いつものように新しいページまたは投稿を作成します。次に、 「+」 ページの左上隅にあるアイコンをクリックすると、利用可能なすべてのブロックが表示されます。そして、再利用可能なブロックとして作成するブロックをブロック エディター ダッシュボードにドラッグ アンド ドロップします。 

このチュートリアルでは、すべてのソーシャルチャンネルを表示するための再利用可能なブロックのパターンを作成します。デザインには、 GutenKit 見出しブロック そして GutenKit ソーシャルアイコンブロック.

ご了承ください 両方のブロックをコンテナ ブロック内に追加しているので、コンテナ ブロックを再利用可能なブロックにします。ただし、同じプロセスに従って、個別のブロックを再利用可能なブロックまたはパターンとして作成することもできます。

WordPress Gutenberg reusable blocks

次に、ポップアップツールバーの3つのドットアイコンをクリックして追加の設定を表示し、「パターンを作成する” オプション。 

WordPressの再利用可能なブロック

そうすると、再利用可能なブロックの名前とカテゴリを尋ねるポップアップと、このブロックを複数の場所で同期するためのトグルボタンが表示されます。これで完了です。 "追加" ボタン。 

That’s it! You have successfully created a pattern or reusable block on your Gutenberg website. You will find the WordPress block pattern in your assigned category. Next, we’ll learn about using it on posts or pages.

💡初心者向けガイドも読んでください WordPressでGutenbergを使用する方法

WordPress の投稿やページで再利用可能なブロックを設定する方法

There isn’t any hurdle for setting up WordPress Gutenberg reusable blocks in your WordPress website. Start with accessing an existing page or post or creating a new one. Click the “+” (ブロックの追加)アイコンをこれまでと同じようにクリックします。ただし、ここでは「パターン" タブ。 

WordPressの再利用可能なブロック

再利用可能なブロックのカテゴリーにアクセスし、見つかったらクリックします。再利用可能なブロックが投稿またはページに追加されます。たとえば、上の画像では、「ソーシャルチャンネル” パターンまたは再利用可能なブロックを「ボタン” カテゴリーです。それだけです。 

再利用可能なブロックやパターンを追加した後、カスタマイズすることができます。これを行うには、「オリジナルを編集” option under the block toolbar. You will see a new screen to edit the WordPress block pattern. However, customizing it will also affect other aspects of the website where you use it.

WordPressの再利用可能なブロックを特定の投稿用に変換する方法

WordPress の再利用可能なブロックを使用する上でのもう 1 つの重要な部分、つまり、Web サイトでのブロックの他の用途を変更せずにパターンまたは再利用可能なブロックをカスタマイズする方法について学びましょう。このためには、WordPress の再利用可能なブロックを通常のブロックに変換する必要があります。 

WordPressの再利用可能なブロック

再利用可能なブロックを選択し、ツールバーメニューの右側にある縦に並んだ3つの点をクリックします。「切り離す” オプションを選択してクリックします。これにより、再利用可能なブロックが通常のブロックに変換されます。その後、そのブロックに自由に変更を加えることができます。

WordPress エディター内で再利用可能なブロック (パターン) を管理する方法

You may have multiple WordPress reusable content blocks and patterns and you want them to manage from a centralized location. No worries! You have this advantage too. Navigate to the WordPress dashboard, and follow 外観 > エディター

新しいページに移動しますので、左側のサイドバーから 「パターン」 オプション "デザイン" タブ。すべてのパターン カテゴリが表示されますので、お好みのカテゴリを選択してください。

WordPressの再利用可能なブロック

右側には再利用可能なブロックが表示されます。編集、複製、削除、エクスポートして別の WordPress ウェブサイトで使用することができます。 

WordPressで再利用可能なブロック(パターン)をインポート/エクスポートする方法

WordPress の再利用可能なブロックを使用する利点は、Web サイト全体で使用できるだけでなく、他の Web サイトにエクスポートおよびインポートできることです。開発者にとって、これは時間の節約になります。

WordPressの再利用可能なブロック

最新の WordPress バージョンをインストールしている場合は、管理ダッシュボードから、上記のようにナビゲートします。 外観 > エディター > デザイン > パターン.

WordPressの再利用可能なブロック

再利用可能なブロックまたはパターンをエクスポートするには: パターンカテゴリを選択し、エクスポートしたいパターンの縦に3つの点が並んだアイコンをクリックします。「JSONとしてエクスポート」をクリックし、JSON ファイルをデバイスに保存します。

WordPressの再利用可能なブロック

再利用可能なブロックまたはパターンをインポートするには: パターンページに移動したら、「新しいパターンを追加” オプションを選択し、”JSONからパターンをインポートする” をクリックして、コンピューターから JSON ファイルをアップロードします。

よくある質問

再利用可能なブロックは、「wp_block」と呼ばれるカスタム投稿タイプとして WordPress データベースに保存されます。

高度な再利用可能なブロック設定の「」タブ。フィールドのタイトルは「追加の CSS クラス”そのために。

WordPressサイトから再利用可能なブロックを削除するには、 外観 > エディター > デザイン > パターン 3 つのドットが縦に並んだアイコンをクリックすると、削除オプションが表示されます。

再利用可能なブロックは、 外観 > エディター > デザイン > パターン.

まとめ!

結局のところ、WordPressのユーザーとして、あなたは自分の仕事を楽にしてくれるものを求めています。そしてWordPressは、取得可能なブロックなど、さまざまな便利で時間を節約する新機能を継続的に開発してきました。

WordPress の再利用可能なブロックの使用方法と管理方法を知っていれば、繰り返しの作業を避けて多くの時間を節約できます。また、このブログが WordPress の再利用可能なブロックと通常のブロックの違いを理解するのに役立つことを願っています。




コメント

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です