パターンとは何ですか?

基本的に、パターンとは、事前に設定された1つ以上のブロックに過ぎず、エンドユーザーに提示されます。それらを再利用可能なブロックのグループと考えてください。

それだけです。本当に。 パターンは単なるブロックのグループです。

それらは、ユーザーが投稿やページのコンテンツに挿入するための出発点として理想的ですが、テンプレート内で使用する際にも便利です。

ユーザーは、サイトエディターからテンプレートに直接挿入したり、投稿エディターからコンテンツに挿入したりできます:

パターン挿入パネルが開いているWordPressエディター。ページサブパネルが開いており、ページパターンのリストが表示されています。

再利用可能なブロックのための類似機能であるテンプレートパーツと比較すると、パターンはテーマ内にバンドルするときにPHPにアクセスできることもあります。これは、テキストを国際化したり、画像を含めるために動的にURLを追加したりすることができることを意味します。そして、この章を通じてこれらのことについてもっと学ぶことができます。

ユーザーは、管理画面の外観 > エディター > パターン画面からカスタムパターンを作成および管理できます。この画面を使用して、開発インストールで自分のパターンを管理することもできます:

利用可能なすべてのパターンの4列グリッドを表示するWordPressサイトエディターのパターンライブラリ。

クラシックテーマを構築している場合、この画面は利用できません。しかし、WordPress 6.5以降は、外観 > パターン画面を通じてパターンにアクセスできます。

パターンの種類

基本的に、パターンには2種類あります:

  • 同期済み: ウェブサイト上で何度使用されても、どこで使用されても変更されないパターン。これらは以前のWordPressのバージョンでは「再利用可能ブロック」と呼ばれていました。注:これらはWordPress管理画面からのみ作成および管理できます。
  • 非同期: ブロックエディターを介して挿入されたときに、パターンのブロックの新しいインスタンスを作成するパターン。挿入されたブロックに加えられた変更は、パターンの他の使用には影響しません。将来のパターンの変更も、以前の使用には影響しません。

パターンシステムの仕組みの性質上、テーマによって登録されたすべてのパターンは非同期タイプです。テーマ登録パターンの同期に関するオープンチケットがありますが、現在は不可能です。

WordPress管理画面でのパターン管理

テーマを構築する際にも、テーマ自体からバンドルして登録する前に、管理画面から直接パターンを構築することがよくあります。これは、テーマに含める準備が整ったと満足するまで、ローカルでパターンを保存および管理する良い方法でもあります。

ユーザーがパターンとどのように対話するかを把握するための良い練習でもあります。

WordPress管理画面の外観 > エディター画面にアクセスし、サイドバーのパターン項目をクリックすることで、パターンを管理できます。

カスタムパターンの作成

パターン画面で、パターンを作成ボタン(+アイコン)をクリックする必要があります。これにより、いくつかのオプションを作成する選択肢が表示されます:

  • パターンを作成
  • テンプレートパートを作成
  • JSONからパターンをインポート

パターンを作成オプションを選択すると、次のようなオーバーレイモーダルが表示されます:

画面にオーバーレイされている「パターンを作成」モーダルを持つWordPressパターンライブラリ。名前、カテゴリ、および同期フィールドがあります。

3つのフィールドを入力する必要があります:

  • 名前: 作成しているパターンの名前を決定します。
  • カテゴリ: パターンが適合する1つ以上のカテゴリを追加します。
  • 同期: パターンを同期するかどうかを決定します。このパターンをテーマと一緒に出荷する予定がある場合は、このオプションをオフに切り替えて、テーマから来た場合と同じように動作させるべきです。

作成ボタンをクリックすると、パターンエディターに移動します。そこからは、WordPressの他のエディターと同様に機能します。パターンに追加したいブロックを追加し、それらの設定やスタイルをニーズに合わせて調整します。

基本的な「ウェルカムヒーロー」パターンの例は次のとおりです:

黒い背景とコンテンツエリアに白いデモテキストを持つ基本的なカバーブロックを表示するWordPressパターンエディター。

必ず保存ボタンを押してください。そこからは、サイト上の他のパターンと同様にパターンを使用できます。

サイドバーのパターン > マイパターンセクションを介して、作成したカスタムパターンを表示および編集することもできます:

ユーザーによって作成された単一のパターンを表示する「マイパターン」サブパネルが選択されたWordPressパターンライブラリ。

マイパターンセクションは、WordPress管理画面に表示されるユーザー作成パターンが常に表示される場所です。また、すべてのパターンセクションや、割り当てられた他のカテゴリにも表示されます。

テーマにパターンをコピーする

エディターインターフェースは、パターンを作成するための簡単で便利な方法です。しかし、これはテーマハンドブックですので、作成したパターンをテーマにバンドルする方法を知りたいと思っているでしょう。

そのためには、パターンコード自体をコピーする必要があります。この章のパターンの登録記事で、パターンコードの扱い方を学びます。

パターンコードをコピーする方法はいくつかありますが、最も簡単な方法は、エディターの上部にあるオプションボタン(アイコン)をクリックし、ドロップダウンメニューからすべてのブロックをコピーオプションを選択することです:

コンテンツエリアに黒い背景と白いテキストを持つカバーブロックのシンプルなパターンを表示するWordPressパターンエディター。エディターオプションのドロップダウンメニューが表示されており、「すべてのブロックをコピー」メニュー項目が強調表示されています。

スクリーンショットに表示されている特定のパターンでは、次のブロックマークアップが得られます:

  1. <!-- wp:cover {"overlayColor":"contrast","align":"full"} -->
  2. <div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"style":{"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"constrained","wideSize":"%","contentSize":"75%"}} -->
  3. <div class="wp-block-group"><!-- wp:heading {"textAlign":"center"} -->
  4. <h2 class="wp-block-heading has-text-align-center">Welcome to My Site</h2>
  5. <!-- /wp:heading -->
  6. <!-- wp:paragraph {"align":"center"} -->
  7. <p class="has-text-align-center">This is my little home away from home. Here, you will get to know me. I'll share my likes, hobbies, and more. Every now and then, I'll even have something interesting to say in a blog post.</p>
  8. <!-- /wp:paragraph -->
  9. <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
  10. <div class="wp-block-buttons"><!-- wp:button {"className":"is-style-outline"} -->
  11. <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">See My Popular Posts →︎</a></div>
  12. <!-- /wp:button --></div>
  13. <!-- /wp:buttons --></div>
  14. <!-- /wp:group --></div></div>
  15. <!-- /wp:cover -->

パターンの登録ドキュメントでは、そのブロックマークアップを取得し、テーマと一緒にパターンとしてバンドルする方法を学びます。

テーマにバンドルされたパターンの管理

現在、テーマ作者が自分のパターンを管理したり、上記のプロセスを経ずに直接テーマに移行したりするための標準はありません。

現時点では、パターン管理をワークフローに統合する方法を決定するのは完全にあなた次第です。考慮すべきいくつかの点:

  • 管理UIからテーマにパターンのブロックマークアップを手動でコピーして貼り付ける必要があります。
  • パターンのブロックマークアップに変更を加える必要がある場合、テーマ内のパターンと管理画面で構築したバージョンを同期させる方法はありません。

これらは、使用する最良の方法を決定する際に直面する課題です。パターン管理を探求する公式のCreate Block Themeプラグインに関するオープンディスカッションがあり、他のテーマ作者と最良の進むべき道について議論するのに最適な場所です。