WordPressのブロックパターン
公開: 2022-06-21ブロックパターンの導入以来、WordPressエコシステム内のブロックパターンに関する関心が急上昇しています。
グーテンベルクにブロックパターンを追加することは、WordPressユーザーにとって非常に有利です。 これは、Webサイトのデザイン中に既成のデザインを使用して、好みに合わせて調整できるようになったためです。 これは、サイトページを最初から設計する場合と比較して、時間を節約するのに役立ちます。
この記事では、これらのブロックパターンとは何か、それらを見つける場所、それらの使用方法、および再利用可能なブロックとの比較について説明します。
目次
ブロックパターンとは
既存のブロックパターンの使用
ブロックパターンと再利用可能なブロック
独自のブロックパターンを作成する方法
- 手動アプローチ
- パターンディレクトリ経由
カスタムブロックパターンプラグインを作成する方法
ブロックパターンの登録解除
ブロックパターンカテゴリの登録解除
結論
ブロックパターンとは
ブロックパターンは、事前に設計されたレイアウトを作成するために組み合わされたブロックのコレクションです。
たとえば、行動の呼びかけを設定したいWordPressユーザーは、見出し、段落、ボタンのブロックなど、ページにいくつかのブロックを追加することで設定できます。 ただし、好みのデザインレイアウトに一致するようにブロックをレイアウトすることは、特に初心者のWordPressユーザーにとってはそれほど簡単ではない場合があります。 このような場合、WordPressユーザーはCall To Actionブロックパターンを追加するだけなので、ブロックパターンは便利です。 次に、ブロックパターンを目的のビューに編集できます。
既存のブロックパターンの使用
WordPressは、従来のエディターの代わりとなるブロックエディター（Gutenberg）を統合しています。 エディター内で、ページや投稿にパターンを簡単に追加できます。 まず、ブロックインサーターをクリックする必要があります。
それをクリックしたら、以下に示す[パターン]タブに移動します。
次に、「探索」ボタンをクリックします
レンダリングされたポップアップで、さまざまなカテゴリに基づいてグループ化されたいくつかのパターンが表示されます。
ページまたは投稿にパターンを挿入するには、それをクリックするだけで、ページまたは投稿内にパターンがレンダリングされます。
これが完了したら、パターン内のブロックを好みに合わせてさらにカスタマイズできます。
また、wordpress.orgブロックパターンディレクトリからさらに多くのパターンを見つけることができます。
好みのパターンを見つけたら、目的のパターンにマウスオーバーイベントが発生したときに表示されるコピーボタンをクリックして、それをコピーする必要があります。
これを実行したら、ページまたは投稿内にパターンを貼り付ける必要があります。
ブロックパターンと再利用可能なブロック
再利用可能なブロックは、投稿またはページ内で後で使用できる1つ以上のブロックのコレクションです。
上記の定義によると、再利用可能なブロックは、投稿またはページ内に事前に作成されたブロックを追加するという意味で、ブロックパターンと非常によく似ています。 ただし、これら2つの項目には違いがあります。
再利用可能なブロックに関しては、これらのブロックはブロックパターンと比較してあまり柔軟ではありません。 再利用可能なブロックは、適用されるページまたは投稿に関係なく、単一のインスタンスを保持します。 つまり、再利用可能なブロックを複数のページに追加し、いずれかのページで再利用可能なブロックをカスタマイズすることにした場合、変更はすべてのページの再利用可能なブロックのすべてのインスタンスに適用されます。
一方、ブロックパターンについては、複数のページにブロックパターンを追加し、特定のページのブロックパターンをカスタマイズすると、残りのページのブロックパターンにはカスタマイズが適用されません。 したがって、ブロックパターンインスタンスは異なります。
再利用可能なブロックとは異なり、ブロックパターンはテーマまたはプラグインコード内に登録することもできます。
ブロックパターンは、複数のページまたは投稿に適用される特定のレイアウトを使用する場合に理想的です。そこから、個々のページまたは投稿でそれらをカスタマイズして、それぞれのページまたは投稿のコンテキストに一致させることができます。
一方、再利用可能なブロックは、ページ全体で正確なコンテンツを複製して使用するシナリオに最適です。 これは、たとえばバナー広告の場合です。
独自のブロックパターンを作成する方法
独自のブロックパターンを作成するには、さまざまな方法があります。 この記事では、次の2つの方法について説明します。
- 手動アプローチ
- パターンディレクトリ経由
手動アプローチ
このアプローチでは、最初にページまたは投稿内にブロックコレクションを作成し、後でそれをパターンとして登録する必要があります。
ブロックコレクションの作成
ブロックコレクションを設定するには、次の手順を実行する必要があります。
i）最初に新しいページまたは投稿を作成します
ii）投稿またはページ内にパターンまたはレイアウトを形成するための目的のブロックを追加します。 ここでは、メディアとテキストブロック、ボタンブロック、およびそれらにいくつかのスタイルを追加します。
以下は、ブロックの表示例です。
ブロックパターンの登録
ブロックコレクションをブロックパターンとして登録するには、次の手順を実行する必要があります。
i）ブロックコレクションがあるページまたは投稿内で、コードエディタに切り替えます。
ii）レンダリングされたすべてのコードをコピーして、メモ帳やSublimeTextなどの目的のテキストエディターに貼り付けます。
iii）次に、子テーマ内のfunctions.phpファイルに以下のコードを追加します。
function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => 'Fill in your copied code here' ) ); } add_action( 'init', 'reg_block_patterns' );「ここにコピーしたコードを入力してください」という内容を、上記の（ii）でコピーしたコードに置き換える必要があります。
以下は、私たちの側からの最終的なコードのサンプルです。
function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'featured' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' );これが完了すると、ページまたは投稿にアクセスして、パターンセクションに移動すると、以下に示すように、「注目」セクション内に新しいパターンが表示されます。
パターンカテゴリの登録
WordPressには、パターンの登録時に使用できるデフォルトのパターンカテゴリがいくつか用意されています。 これらには、ボタン、列、ギャラリー、ヘッダー、テキスト、クエリ、および注目が含まれます。
ブロックパターンを登録する際、より良いアプローチは、カスタムカテゴリにパターンを登録することです。 これを実現するには、最初にパターンカテゴリを登録する必要があります。
パターンカテゴリを登録するには、子テーマのfunctions.phpファイル内に次のコードを追加する必要があります。
function register_category_pattern() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_category_pattern' );カテゴリラベルをお好みのラベルに変更できます。 上記のコードサンプルでは、カテゴリラベル「カスタム」を使用しています。
カスタムパターンカテゴリをページまたは投稿に表示するには、それをパターンに関連付ける必要があります。 ここでは、このパターンカテゴリに対応するために元のパターン登録コードを変更します。 これを行うには、次のコード行を検索します。
'categories' => array( 'featured' ),次に、「機能」から「カスタム」に設定されているカテゴリを変更して、コードが次のようになるようにする必要があります。
'categories' => array( 'custom' ),この場合のパターンとパターンカテゴリを登録するための最終的なコードは、次のようになります。
function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );ページまたは投稿にアクセスしてパターンを追加してみると、以下に示すように、新しく登録された「カスタム」カテゴリにパターンがレンダリングされます。
パターンディレクトリ経由
WordPressエコシステムのすべての人がアクセスできるパターンを作成したい場合は、パターンディレクトリからこれを実現できるようになりました。
パターンディレクトリにアクセスしたら、次の手順を実行する必要があります。
i）パターンディレクトリにログインします。
ii）「新しいパターンの作成」リンクをクリックします。
iii）次の画面で、パターンタイトルを追加し、目的のブロックの追加を開始します。 少なくとも3つのブロックを追加する必要があります。
iv）ブロックの追加が完了したら、パターンをドラフトとして保存できます。
v）次に、パターンがここで概説されているガイドラインに違反していないことを確認します：パターンガイドライン。 すべて問題がなければ、パターンを送信できます。
ここに示されている「マイパターン」リンクをクリックすると、配置されているパターンを表示できます。
「マイパターン」セクション内にレンダリングされるパターンは、ドラフト、送信したパターン、およびレビュー待ちのパターンです。
vi）次に、新しいブロックをコピーして、ページまたは投稿に貼り付けることができます。
カスタムブロックパターンプラグインを作成する方法
パターンとカテゴリをfunctions.phpファイルに登録するコードを用意する代わりに、パターンとパターンカテゴリを追加するために使用できるカスタムプラグインを選択することもできます。 そのためには、次のことを実行する必要があります。
i）ホスティングパネルを介して、またはFilezillaなどのFTPソフトウェアを使用してFTPを介してWebサイトファイルにアクセスします
ii）wp-content>pluginsディレクトリパスに移動します
iii）pluginsディレクトリ内に、「custom-patterns」という名前のフォルダを作成します
iv）フォルダーに、custom-patterns.phpという名前のファイルを作成します
v）ファイル内に次のヘッダーコメントを追加します。
<?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */上記のヘッダーコメントをカスタマイズして、目的のプラグインの名前に一致させることができます。
vi）ヘッダーコメントの下に、パターンとカテゴリを登録するためのコードを追加します。 ここでは、以前に作成したコードを使用して、パターンとカスタムカテゴリを登録します。 したがって、最終的なコードは次のようになります。
<?php /** * Plugin Name: Custom Patterns * Description: Adds a custom block pattern and category * Version: 1.1.0 * Requires at least: 6.0 * Requires PHP: 7.4 * Author: John Chris * License: GPL v2 or later * Text Domain: custom-patterns */ function reg_block_patterns() { register_block_pattern( 'my-plugin/media-text-pattern', array( 'title' => __( 'Media and Text custom Pattern', 'my-event-pattern'), 'description' => _x( 'This pattern contains a media text block and button you can use for an event banner', 'event pattern' ), 'categories' => array( 'custom' ), 'content' => '<!-- wp:media-text {"mediaId":1219,"mediaLink":"http://localhost:10004/photo-of-people-standing-on-top-of-mountain-near-grasses-733162-jpg-2/","mediaType":"image","mediaSizeSlug":"full","imageFill":true,"backgroundColor":"very-dark-gray","textColor":"very-light-gray"} --> <div class="wp-block-media-text alignwide is-stacked-on-mobile is-image-fill has-very-light-gray-color has-very-dark-gray-background-color has-text-color has-background"><figure class="wp-block-media-text__media"><img src="http://localhost:10004/wp-content/uploads/2020/04/photo-of-people-standing-on-top-of-mountain-near-grasses-733162.jpg" alt="" class="wp-image-1219 size-full"/></figure><div class="wp-block-media-text__content"><!-- wp:paragraph {"placeholder":"Content…","textColor":"very-light-gray","fontSize":"small"} --> <p class="has-very-light-gray-color has-text-color has-small-font-size">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> <!-- /wp:paragraph --> <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"space-between"}} --> <div class="wp-block-buttons"><!-- wp:button {"gradient":"vivid-cyan-blue-to-vivid-purple","width":100} --> <div class="wp-block-button has-custom-width wp-block-button__width-100"><a class="wp-block-button__link has-vivid-cyan-blue-to-vivid-purple-gradient-background has-background" href="#">View Activity</a></div> <!-- /wp:button --></div> <!-- /wp:buttons --></div></div> <!-- /wp:media-text -->' ) ); } add_action( 'init', 'reg_block_patterns' ); function register_pattern_categories() { register_block_pattern_category( 'custom', array( 'label' => __( 'Custom', 'my-plugin' ) ) ); } add_action( 'init', 'register_pattern_categories' );vii）ダッシュボードのプラグインリスト内に、プラグインリストからプラグインが表示されるはずです。 プラグインをアクティブ化するには、プラグイン名の横にあるアクティブ化リンクをクリックします
viii）アクティブ化すると、以下に示すように、ブロックエディタ内にブロックパターンとカスタムカテゴリが表示されます。
ブロックパターンの登録解除
登録したブロックパターンを削除することができます。 たとえば、以前に登録した「my-plugin / media-text-pattern」ブロックパターンを削除する場合は、子テーマのfunctions.phpファイル内に次のコードを追加する必要があります。
function deregister_my_pattern() { unregister_block_pattern( 'my-plugin/media-text-pattern' ); } add_action( 'init', 'deregister_my_pattern' );上記のコードでは、「my-plugin/media-text-pattern」を登録したパターンの名前に置き換える必要があります。
ブロックパターンカテゴリの登録解除
パターンカテゴリの登録を解除し、パターン自体を保持する場合は、子テーマのfunctions.phpファイル内に次のコードを追加する必要があります。
function deregister_pattern_category() { unregister_block_pattern_category( 'custom'); } add_action( 'init', 'deregister_pattern_category');上記のコードは、以前に追加した「カスタム」カテゴリの登録を解除します。 「カスタム」を登録したカテゴリに置き換える必要があります。
結論
この記事では、ブロックパターンとは何か、それらの使用方法、およびブロックパターンとカテゴリの登録と登録解除について説明しました。 ブロックエディタを使用してWebサイトを設計する場合、ブロックパターンは非常に重要です。 彼らは少しの努力であなたのウェブサイトで動的なページと投稿をデザインするのを簡単にします。
この記事が、Webサイト内でブロックパターンを使用する方法に関する適切な洞察を提供することを願っています。 ご質問やご意見がございましたら、下のコメント欄にご記入ください。