初期にパターンが登録される

PHPをパターンで使用する際は、パターンのブロックマークアップが実際にコンパイルされるタイミングと、レンダリングされるタイミングを理解することが重要です。

パターンの登録は、initフックで行われます。この時点で、WordPressはパターンの内容をコンパイルし、それをHTMLベースのブロックマークアップとして保存します。これにより、エディターとフロントエンドの両方で使用できるようになります。この登録プロセス中に、パターンはPHPコードを実行できます。

パターンのブロックマークアップは、エディターまたはフロントエンドで使用されるまで実際にはレンダリングされません。ただし、レンダリングされる時点では、ブロックマークアップはプレーンHTMLです。

実際のレベルでは、これはinitの登録プロセス中に多くのデータが利用できないことを意味します。あなたのパターンは、グローバルクエリや投稿のようなものにアクセスできません。また、それらのデータに関連する関数も使用できません。したがって、is_home()、is_single()、get_post()などのWordPress関数は、単にまだ準備ができていないのです。

例えば、このPHPはパターン内で正しく実行されません: 

  1. <?php if ( is_page() ) : ?>
  2.     <!-- wp:paragraph -->
  3.     <p><?php the_title(); ?></p>
  4.     <!-- /wp:paragraph -->
  5. <?php endif; ?>
  2. クラシックテーマの構築に慣れている場合、これは非常に直感的でないと感じるかもしれません。特に、PHPベースのパターンをクラシックなPHPベースのテンプレートパーツと同等に考えていた場合はなおさらです。  
  4. レンダリング時にPHPを実行するための他の方法もあります。たとえば、[https://developer.wordpress.org/news/tag/block-bindings/]の[ブロックバインディングAPI]を使用することです。しかし、それらの方法はパターンのドキュメントの範囲外です。  
  6. あなたには、幅広く素晴らしいPHP関数と多くのWordPress関数が利用可能です。そして、この記事の今後のセクションで、あなたが*使用できる*ものについてさらに学ぶことができます。  
  7.  <a name="an-example-pattern"></a>
  9. ## 例のパターン
  11. この記事の残りの部分では、主にHTMLで始まる単一のパターンを使用します。その後、PHPを追加してその一部を動的に処理する方法を説明します。  
  13. テーマ内に新しいファイル`````patterns/hero.php`````を作成し、次のコードを入力します:  
  16. ``````bash
  17. <?php
  18. /**
  19.  * Title: Hero
  20.  * Slug: themeslug/hero
  21.  * Categories: featured
  22.  */
  23. ?>
  24. <!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"align":"full"} -->
  25. <div class="wp-block-cover alignfull">
  26.     <span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span>
  27.     <div class="wp-block-cover__inner-container">
  29.         <!-- wp:heading {"textAlign":"center"} -->
  30.         <h2 class="wp-block-heading has-text-align-center">Welcome to My Site</h2>
  31.         <!-- /wp:heading -->
  33.         <!-- wp:paragraph {"align":"center"} -->
  34.         <p class="has-text-align-center">This is my little home away from home.</p>
  35.         <!-- /wp:paragraph -->
  37.         <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
  38.         <div class="wp-block-buttons">
  39.             <!-- wp:button {"className":"wp-block-button is-style-outline"} -->
  40.             <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Button A</a></div>
  41.             <!-- /wp:button -->
  42.             <!-- wp:button {"className":"wp-block-button is-style-outline"} -->
  43.             <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button">Button B</a></div>
  44.             <!-- /wp:button -->
  45.         </div>
  46.         <!-- /wp:buttons -->
  48.     </div>
  49. </div>
  50. <!-- /wp:cover -->
  51. `

エディターにパターンを挿入すると、次のように表示されるはずです:

黒い背景に白いテキストで「Welcome to My Site」というメッセージが表示されているWordPress投稿エディター。カバー ブロックにラップされています。

パターン内のテキストの国際化

ブロックパターンの主な使用ケースの1つは、テキストの国際化（翻訳の準備をすること）です。たとえば、テンプレートやテンプレートパーツにテキストがある場合、そのテキストを国際化する唯一の方法は、パターンに移動することです。これにより、PHPに完全にアクセスできます。

パターンファイルは単なるPHPであるため、WordPress内の国際化関数を使用できます。以下の例では、esc_html_e()を使用して、テキストをセキュリティのためにエスケープし、翻訳者の準備をします。

あなたのヒーローパターンの見出しブロックを見てみましょう: 

  1. <!-- wp:heading {"textAlign":"center"} -->
  2. <h2 class="wp-block-heading has-text-align-center">Welcome to My Site</h2>
  3. <!-- /wp:heading -->

見ての通り、見出しブロックの「Welcome to My Site」というテキストは国際化されていません。世界中のさまざまな言語を話すユーザーにテーマを提供する際には、このテキストが翻訳可能であることを確認することが重要です。

見出しブロックのテキストを国際化するには、それを国際化関数（この場合はesc_html_e()）でラップする必要があります。したがって、ブロックマークアップを次のように変更します: 

  1. <!-- wp:heading {"textAlign":"center"} -->
  2. <h2 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Welcome to My Site', 'themeslug' ); ?></h2>
  3. <!-- /wp:heading -->

これらの変更を行うべき他の3つの場所があります。最初は段落ブロックのテキスト、次に2つのボタンブロックです。新しいpatterns/hero.phpファイルは次のようになります: 

  1. <?php
  2. /**
  3.  * Title: Hero
  4.  * Slug: themeslug/hero
  5.  * Categories: featured
  6.  */
  7. ?>
  8. <!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"align":"full"} -->
  9. <div class="wp-block-cover alignfull">
  10.     <span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span>
  11.     <div class="wp-block-cover__inner-container">
  13.         <!-- wp:heading {"textAlign":"center"} -->
  14.         <h2 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Welcome to My Site', 'themeslug' ); ?></h2>
  15.         <!-- /wp:heading -->
  17.         <!-- wp:paragraph {"align":"center"} -->
  18.         <p class="has-text-align-center"><?php esc_html_e( 'This is my little home away from home.', 'themeslug' ); ?></p>
  19.         <!-- /wp:paragraph -->
  21.         <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
  22.         <div class="wp-block-buttons">
  23.             <!-- wp:button {"className":"wp-block-button is-style-outline"} -->
  24.             <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Button A', 'themeslug' ); ?></a></div>
  25.             <!-- /wp:button -->
  26.             <!-- wp:button {"className":"wp-block-button is-style-outline"} -->
  27.             <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Button B', 'themeslug' ); ?></a></div>
  28.             <!-- /wp:button -->
  29.         </div>
  30.         <!-- /wp:buttons -->
  32.     </div>
  33. </div>
  34. <!-- /wp:cover -->

画像やその他のアセットの使用

画像やその他のアセットの動的URLを追加することは、パターンのもう1つの重要な機能です。PHPにアクセスできるため、get_theme_file_uri()のような関数を使用して、テーマにバンドルされた画像URLを出力できます。

「ヒーロー」パターンのカバーブロックに画像の背景を追加してみてください。画像が必要な場合は、WordPressのフォトディレクトリから取得してみてください（以下の例では、このNepal night scene photoを使用しています）。

画像をダウンロードして、テーマの/assets/imagesフォルダー（または任意のフォルダー）に保存し、hero-background.jpgという名前を付けます。

次に、エディターでパターンを開き、ヒーローパターンのカバーブロックの背景として画像をアップロードします。次のように表示されるはずです:

夜の都市の背景画像を持つカバーブロックのあるWordPress投稿エディター。背景に重なっているウェルカムメッセージとボタンがあります。

パターンを構成するブロックをコピーすると、パターンコード内に画像URLの2つのインスタンスがあることに気付くでしょう。それは次のようなハードコーディングされたURLになります: 

  1. http://localhost/wp-content/uploads/2023/10/hero-background.jpg

これらのインスタンスの両方を変更して、テーマの/assets/imagesフォルダーにある画像を指すようにする必要があります。これには、次の2つのことを行う必要があります:

  • get_theme_file_uri()のような関数を使用して正しいURLを取得します。
  • esc_url()を使用して、出力に安全なようにURLをエスケープします。

ハードコーディングされた画像URLを次のように変更します: 

  1. <?php echo esc_url( get_theme_file_uri( 'assets/images/hero-background.jpg' ) ); ?>

最終的なパターンコードは次のようになります（この例には、前のセクションで説明した国際化されたテキストが含まれています）: 

  1. <?php
  2. /**
  3.  * Title: Hero
  4.  * Slug: themeslug/hero
  5.  * Categories: featured
  6.  */
  7. ?>
  8. <!-- wp:cover {"url":"<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-background.jpg' ) ); ?>","id":3838,"dimRatio":50,"overlayColor":"contrast","align":"full"} -->
  9. <div class="wp-block-cover alignfull">
  10.     <span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim"></span>
  11.     <img class="wp-block-cover__image-background wp-image-3838" alt="" src="<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-background.jpg' ) ); ?>" data-object-fit="cover"/>
  12.     <div class="wp-block-cover__inner-container">
  14.         <!-- wp:heading {"textAlign":"center"} -->
  15.         <h2 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Welcome to My Site', 'themeslug' ); ?></h2>
  16.         <!-- /wp:heading -->
  18.         <!-- wp:paragraph {"align":"center"} -->
  19.         <p class="has-text-align-center"><?php esc_html_e( 'This is my little home away from home.', 'themeslug' ); ?></p>
  20.         <!-- /wp:paragraph -->
  22.         <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
  23.         <div class="wp-block-buttons">
  24.             <!-- wp:button {"className":"wp-block-button is-style-outline"} -->
  25.             <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Button A', 'themeslug' ); ?></a></div>
  26.             <!-- /wp:button -->
  27.             <!-- wp:button {"className":"wp-block-button is-style-outline"} -->
  28.             <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Button B', 'themeslug' ); ?></a></div>
  29.             <!-- /wp:button -->
  30.         </div>
  31.         <!-- /wp:buttons -->
  33.     </div>
  34. </div>
  35. <!-- /wp:cover -->

foreach() ループ

ほぼすべてのPHP関数と機能にアクセスでき、テーマを構築する際に多くのものが間違いなく役立ちます。しかし、foreach()ループは、あなたがしばしば手を伸ばす機能の1つである可能性が高いです。 

  3. ``````bash
  4. <!-- wp:button {"className":"wp-block-button is-style-outline"} -->
  5. <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Button A', 'themeslug' ); ?></a></div>
  6. <!-- /wp:button -->
  8. <!-- wp:button {"className":"wp-block-button is-style-outline"} -->
  9. <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php esc_html_e( 'Button B', 'themeslug' ); ?></a></div>
  10. <!-- /wp:button -->
  11. `

開発の基本原則の1つはDRY（Don’t Repeat Yourself）です。このコードはその原則を破っています。単一のforeach()ループを使用することで、ブロックマークアップを1回作成し、それをループすることができます。

まず、ループするアイテムの配列が必要です。それはボタンのコンテンツ自体です。patterns/hero.phpファイルの閉じる?>タグの前に、ラベルの配列を追加します: 

  1. $buttons = array(
  2.     __( 'Button A', 'themeslug' ),
  3.     __( 'Button B', 'themeslug' )
  4. );

次に、2つのボタンブロックのマークアップをこのコードに置き換えます: 

  1. <?php foreach ( $buttons as $button ) : ?>
  2.     <!-- wp:button {"className":"wp-block-button is-style-outline"} -->
  3.     <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php echo esc_html( $button ); ?></a></div>
  4.     <!-- /wp:button -->
  5. <?php endforeach; ?>

あなたの完全なpatterns/hero.phpファイルは次のようになります（これは、以前の国際化されたテキストと動的画像の例コードの両方を含んでいます）: 

  1. <?php
  2. /**
  3.  * Title: Hero
  4.  * Slug: themeslug/hero
  5.  * Categories: featured
  6.  */
  8. $buttons = array(
  9.     __( 'Button A', 'themeslug' ),
  10.     __( 'Button B', 'themeslug' )
  11. );
  13. ?>
  14. <!-- wp:cover {"url":"<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-background.jpg' ) ); ?>","id":3838,"dimRatio":50,"overlayColor":"contrast","align":"full"} -->
  15. <div class="wp-block-cover alignfull">
  16.     <span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim"></span>
  17.     <img class="wp-block-cover__image-background wp-image-3838" alt="" src="<?php echo esc_url( get_theme_file_uri( 'assets/images/hero-background.jpg' ) ); ?>" data-object-fit="cover"/>
  18.     <div class="wp-block-cover__inner-container">
  20.         <!-- wp:heading {"textAlign":"center"} -->
  21.         <h2 class="wp-block-heading has-text-align-center"><?php esc_html_e( 'Welcome to My Site', 'themeslug' ); ?></h2>
  22.         <!-- /wp:heading -->
  24.         <!-- wp:paragraph {"align":"center"} -->
  25.         <p class="has-text-align-center"><?php esc_html_e( 'This is my little home away from home.', 'themslug' ); ?></p>
  26.         <!-- /wp:paragraph -->
  28.         <!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
  29.         <div class="wp-block-buttons">
  30.             <?php foreach ( $buttons as $button ) : ?>
  31.             <!-- wp:button {"className":"wp-block-button is-style-outline"} -->
  32.             <div class="wp-block-button is-style-outline"><a class="wp-block-button__link wp-element-button"><?php echo esc_html( $button ); ?></a></div>
  33.             <!-- /wp:button -->
  34.             <?php endforeach; ?>
  35.         </div>
  36.         <!-- /wp:buttons -->
  38.     </div>
  39. </div>
  40. <!-- /wp:cover -->

この時点で、あなたのパターンは完全に動的です。パターン開発に深く入るにつれて、PHPを使用するためのさらに多くのユースケースが見つかるでしょう。この文章を、あなたが構築するための基盤として考えてください。