パターン

Topics

ブロックパターンは、ユーザーにユニークでカスタマイズされた編集体験を提供する、最良の方法の一つです。

任意の投稿タイプのスターターパターンの優先付け

ユーザーが新しいコンテンツを作成すると、投稿タイプに関係なく空のキャンバスが表示されます。しかしこのユーザー体験は改善できます。新しいコンテンツの作成時に、特定の投稿タイプでパターンを優先付けするオプションがあります。core/post-content ブロックタイプのサポートを宣言するパターンがウェブサイトにあると、ユーザーが新しいアイテムを作成するたびにモーダル画面が表示されます。デフォルトでは WordPress にはこれらのパターンが含まれていないため、こうした投稿コンテンツパターンが少なくとも2つ追加されていなければ、モーダル画面は表示されません。

オプトインするには、パターンの「Block Types」に core/post-content を含めます。これで「Post Types」オプションを使用して、パターンが表示される投稿タイプを制御できます。以下の新しい投稿を作成すると表示されるパターンの例を参照してください。

<?php
 /**
  * Title: New Event Announcement
  * Slug: twentytwentytwo/new-event-announcement
  * Block Types: core/post-content
  * Post Types: post
  * Categories: featured, text
  */
?>

<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
<h2>Details</h2>
<!-- /wp:heading -->

<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
<h2>Directions</h2>
<!-- /wp:heading -->

<!-- wp:heading {"lock":{"move":false,"remove":true}} -->
<h2>RSVP</h2>
<!-- /wp:heading -->

<!-- wp:paragraph {"lock":{"move":true,"remove":true}} -->
<p>To RSVP, please join the #fse-outreach-experiment in Make Slack. </p>
<!-- /wp:paragraph -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"lock":{"move":true,"remove":false}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button">Learn more</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons -->

<!-- wp:cover {"useFeaturedImage":true,"dimRatio":80,"overlayColor":"primary","contentPosition":"center center","align":"full"} -->
<div class="wp-block-cover alignfull"><span aria-hidden="true" class="wp-block-cover__background has-primary-background-color has-background-dim-80 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write titleā€¦","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size">We hope to see you there!</p>
<!-- /wp:paragraph --></div></div>
<!-- /wp:cover -->

この機能の詳細については、WordPress 6.0 Dev Note のページ作成パターンを参照してください。ただし、WordPress 6.1ではすべての投稿タイプにこの機能が追加されたことに注意してください。

Top ↑

テンプレート作成時のスターターパターンの優先付け

新しい投稿やページに対してパターンを優先付けできるのと同じようなユーザー体験を、テンプレート作成プロセスにも追加できます。パターンが templateTypes プロパティのサポートを宣言すると、指定に一致するテンプレートが作成されるたびに、空白の状態から開始するか、テンプレートの現在のフォールバックを使用するかのオプションとともに、パターンが表示されます。デフォルトの WordPress にはこれらのパターンは含まれません。

これをオプトインするには、パターンに templateTypes プロパティを指定する必要があります。ここには、テンプレートを含む配列を指定し、パターンは完全なコンテンツとして使用されます。以下は404テンプレートの作成時に表示されるパターンの例です。

register_block_pattern(
  'wp-my-theme/404-template-pattern',
  array(
      'title'         => __( '404 Only template pattern', 'wp-my-theme' ),
      'templateTypes' => array( '404' ),
      'content'       => '<!-- wp:paragraph {"align":"center","fontSize":"x-large"} --><p class="has-text-align-center has-x-large-font-size">404 pattern</p><!-- /wp:paragraph -->',
  )
);

この機能の詳細については、WordPress 6.3開発ノートの新規テンプレート作成モーダル上のパターン を参照してください。

Top ↑

パターンのロック

上の Locking API セクションで述べたように、パターン自体の領域をロックして、設計の重要な部分を保持できます。こちらは、さまざまなブロックがさまざまな方法でロックされた例です。これらのパターンはロックオプションの追加も含め、エディターそのものの中で構築でき、ドキュメントに従って登録します。

Top ↑

パターンディレクトリからの特定のパターンの優先付け

WordPress 6.0からテーマは、theme.json を通してパターンディレクトリからパターンを登録できます。このためにテーマは theme.json の新しい patterns トップレベルキーを使用する必要があります。このフィールドで、テーマはパターンディレクトリから登録するパターンを列挙できます。patterns フィールドはパターンディレクトリからのパターンスラッグの配列です。パターンスラッグは、パターンディレクトリの単一のパターンビューの URL から抽出できます。例: URL https://wordpress.org/patterns/pattern/partner-logos のスラッグは partner-logos です。

{
    "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ]
}

コンテンツ作成者は、インサーターの「パターン」タブ内の、パターンディレクトリのカテゴリと一致するカテゴリ内でそれぞれのパターンを見つけられます。

Top ↑

その他の情報

原文

最終更新日: