WordPress 5.5は、ユーザーが事前定義されたブロックレイアウトを作成および共有できるブロックモード（一般に「ブロック」とも呼ばれる）を導入します。これらのレイアウトはスキーマディレクトリに保存され、WordPressコミュニティによって設計されたさまざまなスキーマが含まれています。これらのモードは、コーディングの知識なしに単純なコピーパステ形式を使用しているため、ユーザーの時間を大幅に節約できます。
パターンに関する記事はすでにたくさんありますが、最新の機能強化をカバーする包括的で最新のパターン作成記事が不足しています。この記事の目的は、このギャップを埋めることを目的としており、登録なしでパターンを作成するなどの最近の強化を強調し、特にブロックトピックでパターンを作成および使用するための段階的なガイドを新しい経験豊富な著者に提供します。
ブロックテーマでのブロックモードの使用は、WordPress 5.9および222（TT2）のデフォルトテーマのリリース以来急増しています。私は常にブロックパターンの大ファンであり、私のブロックテーマでそれらを作成して使用してきました。
WordPress 6.0は、著者に3つのメインモード機能の拡張機能を提供します。
入門ビデオ「WordPress 6.0の探索」で、Automattic製品リエゾンAnn McCathyは、新しい拡張モード機能の一部（15:00から始まる）を強調し、セクション要素としてモードを含む将来のモード拡張計画、ページ作成時のモード、統合モードディレクトリ検索などのモードを選択するオプションを含む将来のモード拡張計画について説明しました。
この記事は、読者がWordPressサイト全体の編集（FSE）インターフェイスとブロックテーマの基本的な知識を持っていることを前提としています。ブロック編集マニュアルとサイト全体の編集Webサイトは、この記事で説明したブロックトピックやパターンを含むすべてのFSE機能を学習するための最新のチュートリアルガイドを提供します。
ブロックパターンを作成する最初の方法では、ブロックパターンAPIを使用する必要があります。これは、カスタムプラグインとして使用するか、functions.phpファイルに直接登録してブロックテーマにバンドルできます。新しくリリースされたWordPress 6.0は、 /パターンフォルダー登録モードやページ作成モードモダリティなど、パターンとテーマで使用するためのいくつかの新しい機能を導入します。
背景として、レジスタスキーマAPIを使用して登録なしで直接ロードすることから、スキーマ登録ワークフローがどのように進化したかについての簡単な概要から始めましょう。
デフォルトの21のテーマ（TT1）とTT1ブロックテーマ（TT1姉妹テーマ）は、テーマのfunctions.phpでブロックモードを登録する方法を示しています。 TT1ブロックの実験トピックでは、以下に示すように、 8つのブロックパターンを含む単一のブロックパターン.phpファイルがinclusionファイルとしてfunctions.phpに追加されます。
2つのパラメーターを受信するRegister_block_pattern関数を使用してカスタムブロックパターンを登録する必要があります。タイトル（パターンの名前）と属性（パターンプロパティを説明する配列）を受信します。
以下は、テーマシェイパー記事に従って登録されている単純な「Hello World」段落パターンの例です。
Register_block_pattern（
「My-Plugin/Hello-World」、
配列（
'title' => __（ 'hello world'、 'my-plugin'）、
'content' => "\ n<p>こんにちは世界</p>\ n "、
））
）;登録後、以下に説明するように、register_block_pattern（）関数は、initフックに接続されたハンドラーから呼び出す必要があります。
関数my_plugin_register_my_patterns（）{
Register_block_pattern（...）;
}
add_action（ 'init'、 'my_plugin_register_my_patterns'）;ブロックモードを登録した後、それらはブロックエディターに表示されます。より詳細なドキュメントは、ブロックモードの登録に記載されています。
ブロックモードのプロパティ
必要なタイトルとコンテンツのプロパティに加えて、ブロックエディターマニュアルには、次のオプションモードプロパティもリストされています。
WordPressブログから取得した参照パターンプラグインコードスニペットの例を次に示します。
/*
プラグイン名：引用パターンの例プラグイン
*/
Register_block_pattern（
「My-Plugin/My-Quote-Pattern」、
配列（
'title' => __（「アバターとの引用」、「my-plugin」）、
「カテゴリ」=> array（ 'text'）、
'description' => _x（ 'アバターとの大きな引用 "。'、 'ブロックパターンの説明'、 'my-plugin'）、
'content' => ' <div><div>
<hr>
<div><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174183133237166.jpg" class="lazy" alt="" style="max-width:90%" style="max-width:90%"></div>
<blockquote>
<p> 「貢献することで、私は地球に役立つように感じます。」</p> <cite>- アンナ・ウォン、<em>ボランティア</em></cite>
</blockquote>
<hr>
</div></div>'、
））
）;テンプレートファイルでパターンを使用します
パターンを作成した後、次のブロックタグを使用してテーマテンプレートファイルで使用できます。
このGitHubリポジトリの例は、TT2 Gopherブロックテーマで「TT2Gopher」プレフィックスを備えた「フッター付き」パターンスラッグの使用を示しています。
ブロックテーマとグーテンバーグプラグインの早期採用者も、古典的なテーマのパターンを利用しました。デフォルトのTwenty Twentyと私のお気に入りのEksellテーマ（ここにデモサイトがあります）は、スキーマ機能を古典的なテーマに追加する方法を示す良い例です。
トピックに少数のパターンのみが含まれている場合、開発とメンテナンスはかなり簡単に管理できます。ただし、ブロックテーマにTT2テーマなどの多くのパターンが含まれている場合、pattern.phpファイルは非常に大きく読みにくくなります。デフォルトのTT2テーマには60を超えるスキーマがバンドルされており、読みやすく維持しやすいリファクタリングされたスキーマ登録ワークフロー構造を示しています。
TT2トピックを例にとると、この簡素化されたワークフローがどのように機能するかを簡単に説明しましょう。
2.1：登録モードカテゴリ
デモンストレーションのために、TT2サブトピックを作成し、仮想コンテンツを使用してローカルテストサイトにセットアップしました。 TT2のメソッドに従って、ブロックパターンのpatterns.phpファイルにフッター付きのフッターを登録し、次のスキーマカテゴリに追加しました。
/**
*レジスタパターンとカテゴリをブロックします。
*/
関数Twentytwentytwentwo_register_block_patterns（）{
$ block_pattern_categories = array（
'フッター' => array（ 'label' => __（ 'footers'、 'twentytwentytwo'））、
'header' => array（ 'label' => __（ 'headers'、 'twentytwentytwo'））、
'pages' => array（ 'label' => __（ 'pages'、 'twentytwentytwo'））、
// ...
）;
/**
*テーマブロックパターンカテゴリをフィルターします。
*/
$ block_pattern_categories = apply_filters（ 'twentytwentytwo_block_pattern_categories'、$ block_pattern_categories）;
foreach（$ block_pattern_categories as $ name => $ properties）{
if（！wp_block_pattern_categories_registry :: get_instance（） - > is_registered（$ name））{
Register_block_pattern_category（$ name、$ properties）;
}
}
$ block_patterns = array（
「フッターディフォー」、
「フッターダーク」、
「バックグラウンドのフッター」、
// ...
「ヘッダーディフォー」、
「ヘッダーとダーク」、
「ヘッダースモールダーク」、
'Hidden-404'、
「隠れた鳥」、
// ...
）;
/**
*テーマブロックパターンをフィルターします。
*/
$ block_patterns = apply_filters（ 'twentytwentytwo_block_patterns'、$ block_patterns）;
foreach（$ block_patterns as $ block_patterns）{
$ pattern_file = get_theme_file_path（ '/inc/patterns/'。$ block_pattern。 '.php'）;
Register_block_pattern（
'Twentytwentytwo/' $ block_pattern、
$ pattern_fileが必要です
）;
}
}
add_action（ 'init'、 'twentytwentytwo_register_block_patterns'、9）;このコードの例では、$ block_patterns = array（）にリストされている各パターンは、foreach（）関数によって呼び出されます。これには、アレイにリストされているスキーマ名を含むスキーマディレクトリファイルが必要であり、次のステップに追加されます。
2.2： /inc /patternsフォルダーにパターンファイルを追加します
次に、$ block_patterns = array（）にリストされているすべてのスキーマファイルを使用する必要があります。以下は、バックグラウンド付きのスキーマファイルフッターの例です。
/**
*ダークフッターWTIHタイトルと引用
*/
Arrayを返します（
'title' => __（「バックグラウンド付きフッター」、「Twentytwentytwo」）、
「カテゴリ」=>配列（ 'フッター'）、
'blocktypes' => array（ 'core/template-part/footer'）、
'content' => '
<div style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)">
<p>'。
sprintf（
/ *翻訳者：WordPressリンク。
esc_html __（ '誇らしげに％sを搭載している'、 'Twentytwentytwo'）、
「 <a href="'%20.%20esc_url(%20__(%20'https://wordpress.org',%20'twentytwentytwo'%20)%20)%20.%20'" rel="nofollow">WordPress</a> |。
）。</p>
</div>
'、
）;footer.htmlテンプレートパーツのパターンを参照しましょう。
これは、タイトルまたはフッターパーツをテンプレートファイルに追加することに似ています。
同様に、パターンをParts/footer.htmlテンプレートに追加することができます。テーマパターンファイル（フッター付きのフッター）を参照するように変更できます。
これで、ブロックエディターのモードインサルターにアクセスすると、「バックグラウンドを持つフッター」を使用できます。
次のスクリーンショットは、フロントエンドの背景を持つ新しく作成されたフッターパターンを示しています。
パターンがブロックテーマの不可欠な部分になった今、その多くは、Quadrat、Seed、Mayland、Zoologist、Geologistなどのブロックテーマにバンドルされています。これは、ブロックパターン登録ファイルと、return array（）関数にコンテンツソースと必要なパターンタイトルを含む一連のファイルを含むQuadrat Theme /Inc /Patternsフォルダーの例です。
この機能には、サイトにインストールするには、WordPress 6.0またはGutenbergプラグイン13.0以上が必要であることに注意してください。
この新しいWordPress 6.0機能により、標準のファイルおよびフォルダー登録モードが可能になり、 /パーツ、 /テンプレート、 /スタイルに似たコンベンションがもたらされます。
この記事で説明されているように、このプロセスには、次の3つのステップが含まれます。
記事から取得した典型的なパターンのタイトルは次のとおりです。
前のセクションで述べたように、タイトルとスラッグフィールドのみが必要であり、他のフィールドはオプションです。
最近公開されたトピックの例を参照して、CSS-Tricksに関する以前の記事で作成されたTT2 GOPHERS DEMOトピックのスキーマ登録をリファクタリングしました。
次の手順では、PHPに登録され、フッター.htmlテンプレートで使用されているフッター付きのフッターwith-background.phpパターンをリファクタリングする方法を調べましょう。
2.1：テーマのルートディレクトリにA /Patternsフォルダーを作成します
最初のステップは、TT2 GOPHERテーマのルートディレクトリにA /Patternsフォルダーを作成し、フッター付きBackground.phpパターンファイルを /パターンフォルダーに移動してリファクタリングすることです。
2.2：スキーマデータをファイルに追加します
次に、次のスキーマタイトル登録フィールドを作成します。
スキーマファイルには、PHPコメントとして書かれたトップタイトルフィールドがあります。その後、HTML形式で書かれたブロックコンテンツが続きます。
2.3：ファイルにスキーマコンテンツを追加します
コンテンツの部分については、コードスニペットを単一の引用符（たとえば、 '...'）でコピーし、バックグラウンドのフッターのコンテンツ部分から始めて、置き換えます。
<div style="padding-top:35px;padding-bottom:30px">
<p>WordPressを搭載しています|</p>
</div>パターン/フッター付きのフッターの完全なコードスニペットは、githubで表示できます。
/inc /patternsおよびblock-patterns.phpはエクストラであり、WordPress 6.0では必要ではなく、デモンストレーションのためにのみ含まれていることに注意してください。
2.4：テンプレートの参照パターンスラッグ
上記のリファクタリングされたフッターのフッターのフッター付きのフッターを追加するパターン。
これで、ブロックエディターまたはブラウザのサイトのフッター部分のサイトを表示すると、フッターパーツが表示されます。
ブロックパターンを分類するには、トピックのfunctions.phpファイルにスキーマカテゴリとタイプを登録する必要があります。
TT2 Gopherトピックからブロックパターンカテゴリを登録する例を考えてみましょう。
登録後、モードはコアデフォルトモードとともにモードインサートに表示されます。パターンInserterにトピック固有のカテゴリタグを追加するには、トピック名前スペースを追加して以前のコードスニペットを変更する必要があります。
/**
*レジスタカテゴリをブロックし、タイプします。
*/
function tt2gopher_register_block_pattern_categories（）{
$ block_pattern_categories = array（
'tt2gopher -header' => array（ 'label' => __（ 'tt2 gopher -headers'、 'tt2gopher'））、
'tt2gopher -footer' => array（ 'label' => __（ 'tt2 gopher -footers'、 'tt2gopher'））、
'tt2gopher -page' => array（ 'label' => __（ 'tt2 gopher -page'、 'tt2gopher'））、
// ...
）;
/**
*テーマブロックパターンカテゴリをフィルターします。
*/
$ block_pattern_categories = apply_filters（ 'tt2gopher_block_pattern_categories'、$ block_pattern_categories）;
foreach（$ block_pattern_categories as $ name => $ properties）{
if（！wp_block_pattern_categories_registry :: get_instance（） - > is_registered（$ name））{
Register_block_pattern_category（$ name、$ properties）;
}
}
add_action（ 'init'、 'tt2gopher_register_block_pattern_categories'、9）;フッター付きバックグラウンドモードは、モードInserterを使用してプレビュー（選択した場合）に表示されます。
このプロセスは、ブロックテーマのブロックパターンを作成および表示するプロセスを大幅に簡素化します。 Gutenbergプラグインを必要とせずに、WordPress 6.0で利用できます。
アーリーアダプターは、ブロックテーマでこの機能の使用を開始しました。登録なしでパターンをロードできるトピックディレクトリで提供されるトピック例のいくつかを以下に示します。
公式スキーマカタログには、コミュニティが提供する創造的なデザインが含まれており、必要に応じてコンテンツを作成するためにコピーしてカスタマイズできます。ブロックエディターでパターンを使用することはかつてないほど簡単になりました！
成長しているディレクトリのパターンは、単に「コピーして貼り付ける」またはそれらをThemis.jsonファイルに含めるだけでブロックテーマに追加することもできます。次に、非常に限られたコードでこれを簡単に実装する方法を簡単に説明します。
3.1：ディレクトリからページにモードをコピーする
ここでは、SchemaディレクトリのフッターパターンにFirstWebgeekを使用しています。コピーモードボタンを選択してモードをコピーし、新しいページに直接貼り付けます。
3.2：必要なカスタマイズを行います
フォントとボタンの背景の色にいくつかの変更を加えました。次に、コードエディターからクリップボードにコード全体をコピーします。
コードエディターを使用するのが初めての場合は、オプション（3つのドット、右上隅）に移動し、[コードエディター]ボタンをクリックし、ここからコード全体をコピーします。
3.3： /patternsフォルダーに新しいファイルを作成します
まず、new /patterns/footer-pattern-test.phpファイルを作成し、必要なスキーマタイトルセクションを追加しましょう。次に、コード全体を貼り付けます（ステップ3、上）。パターンはフッターエリア（5行目）に分類されており、パターンインサートに新しく追加されたパターンを表示できます。
<div style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"> <div> <div> <h2 style="font-style:normal;font-weight:700;text-transform:uppercase">ロレム</h2> <p style="font-size:16px">Lorem Ipsumを使用することの主な利点の1つは、簡単に生成できることです。また、デザイナーのプレッシャーをかけて、最適なWebサイトデータの作成に焦点を当てることができます。</p> <ul></ul> </div> <div> <h4 style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">お問い合わせ</h4> <p style="font-size:16px;line-height:1.2">123 Bd Lorem、Ipsum<br><br> 123-456-7890</p> <p style="font-size:16px;line-height:1">[保護された電子メール]</p> <p style="font-size:16px;line-height:1">営業時間：10：00-18：00</p> </div> <div> <h4 style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">ニュースレター</h4> <p style="font-size:16px">Lorem Ipsum dolor sit amet、condsetur ut laborer et dolore magna aliqua ipsum dolor sit</p> </div> </div> </div>
3.4：Inserterで新しいモードを表示します
パターンライブラリから新しく追加されたフッターモードを表示するには、任意の投稿またはページに移動し、挿入アイコン（左上隅の青色のサイン）を選択し、TT2 Gopher - フッターカテゴリを選択します。新しく追加されたモードは、左パネルに表示され、他のフッターモードと右側のプレビュー（選択した場合）が表示されます。
WordPress 6.0では、次の構文を使用して、thema.jsonファイルのスキーマディレクトリから必要なスキーマを登録できます。 6.0開発には、「パターンフィールドはスキーマディレクトリの[スキーマスラグ]の配列であることが示されています。パターンスラッグは、スキーマディレクトリの単一のスキーマビューで[URL]から抽出できます。」
{
「バージョン」：2、
「パターン」：[「ショートテキスト」、「パターンスラグ」]
}この短いWordPress 6.0機能ビデオは、 /パターンフォルダー（3:53）にパターンを登録する方法と、Thema.jsonファイル（3:13）のモードディレクトリにパターンを登録する方法を示しています。
登録モードは、モード挿入検索ボックスで使用でき、テーマバウンドモードライブラリのように使用できます。
{
「バージョン」：2、
「パターン」：["フッター・フロム・ディレクトリ"、「フッターセクション - デザインのwith-3-column-description-social-media-contact-and-newsletter "]]]
}この例では、前の例からのパターンスラッグフッターセクションデザインの-3-Column-description-description-description-social-media-contactとnewsletterはtheme.jsonを介して登録されています。
Buildを使用してBuildを使用してBuildの一部として、WordPress 6.0は、ページレイアウトモードをブロックするページレイアウトモードを追加するモーダルモーダルオプションをテーマに提供し、ページを作成するときにサイトユーザーがページレイアウトモード（例：ページ、連絡先ページ、チームページなど）を選択できるようにします。開発の指示から取られた例は次のとおりです。
Register_block_pattern（
「マイプラギン/ページ」、
配列（
'title' => __（ 'about page'、 'my-plugin'）、
'BlockTypes' => array（ 'Core/Post Content'）、
'content' => '
<p>ここにページについて書く、どんなブロックでも自由に使用してください</p>
'、
））
）;この機能は現在、ページの投稿タイプに限定されており、「投稿タイプ」には適用されません。
また、すべてのモードのコンテンツ後のブロックタイプを削除することにより、ページ作成モードのモダリティを完全に無効にすることもできます。サンプルサンプルコードはここで提供されています。
GitHubでのディスカッションに従って参加できます。ディスカッションリンクは、以下のリソースセクションにリストされています。
ページビルダーと同様に、ディレクトリのパターンを使用して、目的の投稿またはページレイアウトを作成することもできます。 Gutenberghubチームは、スキーマディレクトリのスキーマを使用して、実験的なオンラインページビルダーアプリケーション（入門ビデオ）を作成しました。その後、アプリケーションのコードをコピーしてサイトに貼り付けることができます。これにより、コーディングなしで複雑なページレイアウトを構築するプロセスが大幅に簡素化されます。
この短いビデオでは、Jamie Marslandは（1:30で）アプリケーションを使用して、ディレクトリの必要なページセクションを使用して、ページビルダーと同様のページレイアウト全体を作成する方法を示しています。
モードを使用すると、ユーザーは、一般的に使用されるコンテンツレイアウト（例：ヒーローページ、アクションへの呼び出しなど）を任意のページで再現し、コーディングスキルなしでスタイルコンテンツを提示できないことに対する障壁を減らすことができます。プラグインやテーマディレクトリと同様に、新しいスキーマディレクトリは、ユーザーがスキーマディレクトリからさまざまなスキーマを選択し、スタイルのコンテンツを書き込み、表示するオプションを提供します。
実際、ブロックモードはすべてを変更します。これは間違いなくWordPressテーマフィールドの変革的機能です。 「パターンビルドを使用する」作業の可能性が最大限に利用できる場合、これにより、テーマのブロックを設計する方法が変わり、低コードの知識だけでも美しいコンテンツが作成されます。多くのクリエイティブデザイナーにとって、パターンカタログは、創造性を実証する適切な方法を提供する場合があります。
以上がWordPress 6.0でブロックテーマパターンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
