ディレクトリからパターンを追加する

patterns は、テーマに好きなだけ多くまたは少なくパターンをバンドルできるオプションのプロパティです。このプロパティはパターンスラグの配列を受け入れ、これらのパターンがパターンダイレクトリに存在する限り、WordPressエディターの Patterns インサーターに表示されます。

デフォルトの theme.json における patterns プロパティを見てみましょう: 

  1. {
  2.     "version": 2,
  3.     "patterns": []
  4. }

パターンダイレクトリからのパターンの一つを見てみましょう: 重なり合う画像のあるヒーローバナー。パターンのスラグを見つけるには、ブラウザのアドレスバーを確認する必要があります。これにより、次のURLが表示されるはずです: 

  1. https://wordpress.org/patterns/pattern/hero-banner-with-overlap-images/

スラグは、https://wordpress.org/patterns/pattern/ の後に続くURLの部分です。この場合、スラグは hero-banner-with-overlap-images です（最後のスラッシュは含まれません）。

このパターンをテーマに含めるには、theme.json の patterns 配列にスラグを渡すだけです: 

  1. {
  2.     "version": 2,
  3.     "patterns": [
  4.         "hero-banner-with-overlap-images"
  5.     ]
  6. }

基本がわかったので、他のいくつかのパターンを選んで theme.json の patterns 配列に追加しましょう: 

  1. {
  2.     "version": 2,
  3.     "patterns": [
  4.         "fullscreen-cover-image-gallery",
  5.         "hero-banner-with-overlap-images",
  6.         "mixed-shape-gallery"
  7.     ]
  8. }

これで、UIの Patterns インサーターに選択したパターンが表示されるはずです:

ギャラリーベースのパターンのリストを表示しているページ編集画面からのパターンインサーター

含めたパターンは、パターンダイレクトリで割り当てられたカテゴリの下に自動的に表示されます。これらは、WordPress内で登録された既存のパターンにマッピングされています。上記の例のコードからのパターンはすべて gallery パターンカテゴリを持っているため、インサーターの Patterns > Gallery タブの下に表示されます。