WordPress 6.0 PlatoBlockchain Data Intelligence でブロックテーマパターンを作成する方法。垂直検索。あい。

WordPress6.0でブロックテーマパターンを作成する方法

タイムスタンプ：1年2022月11日30:XNUMX AM

ブロックパターン、しばしばとも呼ばれる セクション、で紹介されました WordPressの5.5 ユーザーが事前定義されたブロックレイアウトを構築して共有できるようにする パターンディレクトリ。 このディレクトリは、WordPressコミュニティによって設計されたさまざまなキュレートされたパターンのホームです。 これらのパターンは単純なコピーアンドペースト形式で利用でき、コーディングの知識を必要としないため、ユーザーにとって大幅な時間の節約になります。

パターンに関する多くの記事にもかかわらず、最新の拡張機能をカバーするパターン作成に関する包括的で最新の記事が不足しています。 この記事は、登録なしでパターンを作成するなどの最近の拡張機能に焦点を当ててギャップを埋めることを目的とし、初心者や経験豊富な作成者向けのブロックテーマでパターンを作成して使用するための最新のステップバイステップガイドを提供します。

の発売以来 WordPressの5.9 と 二十二十二 （TT2）デフォルトのテーマ、ブロックテーマでのブロックパターンの使用が急増しています。 私は大ファンです ブロックパターン そして、私のブロックテーマでそれらを作成して使用しました。

新しい WordPressの6.0 オファー XNUMXつの主要なパターンは、作成者の機能強化を特徴としています:

  • を介してパターン登録を許可する /patterns フォルダ（に似ています /parts, /templates, /styles 登録）。
  • を使用してパブリックパターンディレクトリからパターンを登録する theme.json.
  • 新しいページを作成するときにユーザーに提供できるパターンを追加します。

入門で WordPress6.0ビデオの探索、Automattic製品リエゾンのAnn McCathyは、いくつかの新しく強化されたパターン機能（15:00から開始）を強調し、将来のパターン強化計画について説明します。 セクショニング要素としてのパターン、オプションを提供する ページ作成時にパターンを選択、パターンディレクトリ検索の統合など。

前提条件

この記事は、読者がWordPressフルサイト編集（FSE）インターフェイスとブロックテーマの基本的な知識を持っていることを前提としています。 ザ ブロックエディタハンドブック & フルサイト編集 Webサイトでは、この記事で説明するブロックテーマやパターンなど、すべてのFSE機能を学習するための最新のチュートリアルガイドを提供しています。

セクション1：ブロックパターンを作成するための進化するアプローチ

ブロックパターンを作成する最初のアプローチでは、カスタムプラグインとして、または直接登録されたブロックパターンAPIを使用する必要がありました。 functions.php ブロックテーマにバンドルするファイル。 新しくリリースされたWordPress6.0では、パターンやテーマを操作するいくつかの新機能と拡張機能が導入されました。 /patterns フォルダと ページ作成パターンモーダル.

背景として、最初に、パターン登録ワークフローが、登録パターンAPIの使用から、登録なしで直接ロードするように進化した方法を簡単に概説します。

ユースケースの例1：XNUMX

デフォルト XNUMXのテーマ （TT1）と TT1ブロックのテーマ （TT1の兄弟）ブロックパターンをテーマに登録する方法を紹介します functions.php。 TT1ブロックの実験テーマでは、このシングル ブロックパターン.php を含むファイル 8 ブロックパターンがに追加されます functions.php として include ここに示すように.

カスタムブロックパターン 登録する必要があります register_block_pattern XNUMXつの引数を受け取る関数— title （パターンの名前）と properties （パターンのプロパティを記述する配列）。

これは、これから単純な「HelloWorld」段落パターンを登録する例です。 テーマシェイパーの記事:

register_block_pattern( 'my-plugin/hello-world', array( 'title' => __( 'Hello World', 'my-plugin' ), 'content' => "<!-- wp:paragraph -->n<p>Hello World</p>n<!-- /wp:paragraph -->", )
);

登録後、 register_block_pattern() 関数は、に接続されたハンドラーから呼び出す必要があります init 説明されているようにフック こちら.

 function my_plugin_register_my_patterns() { register_block_pattern( ... ); } add_action( 'init', 'my_plugin_register_my_patterns' );

ブロックパターンが登録されると、ブロックエディタに表示されます。 より詳細なドキュメントはこれにあります ブロックパターン登録。

ブロックパターンのプロパティ

必須に加えて title & content プロパティ、 ブロックエディタハンドブック 次のオプションをリストします パターンプロパティ:

  • title （必須）：パターンの人間が読めるタイトル。
  • content （必須）：パターンのHTMLマークアップをブロックします。
  • description （オプション）：インサーターでパターンを説明するために使用される視覚的に非表示のテキスト。 説明はオプションですが、タイトルがパターンの機能を完全に説明していない場合は、説明を強くお勧めします。 説明は、ユーザーが検索中にパターンを発見するのに役立ちます。
  • categories （オプション）：ブロックパターンをグループ化するために使用される登録済みパターンカテゴリの配列。 ブロックパターンは、複数のカテゴリで表示できます。 ここで使用するには、カテゴリを個別に登録する必要があります。
  • keywords （オプション）：ユーザーが検索中にパターンを発見するのに役立つエイリアスまたはキーワードの配列。
  • viewportWidth （オプション）：インサーターでパターンの拡大縮小されたプレビューを可能にするために、パターンの意図された幅を指定する整数。
  • blockTypes （オプション）：パターンが使用されることを意図したブロックタイプの配列。 各値は宣言されたブロックである必要があります name.
  • inserter （オプション）：デフォルトでは、すべてのパターンがインサーターに表示されます。 プログラムでのみ挿入できるようにパターンを非表示にするには、 inserter 〜へ false.

以下は、引用パターンプラグインのコードスニペットの例です。 ワードプレスのブログ.

/*
Plugin Name: Quote Pattern Example Plugin
*/ register_block_pattern( 'my-plugin/my-quote-pattern', array( 'title' => __( 'Quote with Avatar', 'my-plugin' ), 'categories' => array( 'text' ), 'description' => _x( 'A big quote with an avatar".', 'Block pattern description', 'my-plugin' ), 'content' => '<!-- wp:group --><div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --><!-- wp:image {"align":"center","id":553,"width":150,"height":150,"sizeSlug":"large","linkDestination":"none","className":"is-style-rounded"} --><div class="wp-block-image is-style-rounded"><figure class="aligncenter size-large is-resized"><img src="https://blockpatterndesigns.mystagingwebsite.com/wp-content/uploads/2021/02/StockSnap_HQR8BJFZID-1.jpg" alt="" class="wp-image-553" width="150" height="150"/></figure></div><!-- /wp:image --><!-- wp:quote {"align":"center","className":"is-style-large"} --><blockquote class="wp-block-quote has-text-align-center is-style-large"><p>"Contributing makes me feel like I'm being useful to the planet."</p><cite>— Anna Wong, <em>Volunteer</em></cite></blockquote><!-- /wp:quote --><!-- wp:separator {"className":"is-style-default"} --><hr class="wp-block-separator is-style-default"/><!-- /wp:separator --></div></div><!-- /wp:group -->', )
);

テンプレートファイルでのパターンの使用

パターンが作成されると、次のブロックマークアップを使用してテーマテンプレートファイルで使用できます。

<!-- wp:pattern {"slug":"prefix/pattern-slug"} /-->

からの例 このGitHubリポジトリ の使用法を示していますfooter-with-background」パターンスラッグと「tt2gopherTT2Gopherブロックテーマのプレフィックス。

ブロックテーマとグーテンベルクプラグインの初期の採用者は、古典的なテーマのパターンも利用していました。 デフォルト 二十二 と私のお気に入りのEksellテーマ（ デモサイト ここ）は、古典的なテーマにパターン機能を追加する方法を示す良い例です。

ユースケースの例2：XNUMX

テーマに含まれるパターンが少ない場合、開発と保守はかなり管理しやすくなります。 ただし、TT2テーマのように、ブロックテーマに多くのパターンが含まれている場合は、 pattern.php ファイルが非常に大きくなり、読みにくくなります。 バンドルされているデフォルトのTT2テーマ 60つ以上のパターン、リファクタリングされたパターン登録ワークフローを紹介します 構造 読みやすく、保守も簡単です。

TT2テーマの例を取り上げて、この簡略化されたワークフローがどのように機能するかを簡単に説明しましょう。

2.1：パターンカテゴリの登録

デモンストレーションの目的で、TT2の子テーマを作成し、ダミーのコンテンツを使用してローカルのテストサイトに設定しました。 TT2に続いて登録しました footer-with-background 次のパターンカテゴリの配列リストに追加されました block-patterns.php ファイルにソフトウェアを指定する必要があります。

/**
* Registers block patterns and categories.
*/
function twentytwentytwo_register_block_patterns() { $block_pattern_categories = array( 'footer' => array( 'label' => __( 'Footers', 'twentytwentytwo' ) ), 'header' => array( 'label' => __( 'Headers', 'twentytwentytwo' ) ), 'pages' => array( 'label' => __( 'Pages', 'twentytwentytwo' ) ), // ... ); /** * Filters the theme block pattern categories. */ $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( 'footer-default', 'footer-dark', 'footer-with-background', //... 'header-default', 'header-large-dark', 'header-small-dark', 'hidden-404', 'hidden-bird', //... ); /** * Filters the theme block patterns. */ $block_patterns = apply_filters( 'twentytwentytwo_block_patterns', $block_patterns ); foreach ( $block_patterns as $block_pattern ) { $pattern_file = get_theme_file_path( '/inc/patterns/' . $block_pattern . '.php' ); register_block_pattern( 'twentytwentytwo/' . $block_pattern, require $pattern_file ); }
}
add_action( 'init', 'twentytwentytwo_register_block_patterns', 9 );

このコード例では、 $block_patterns = array() によって呼び出されます foreach() 機能する機能 requireの patterns 次のステップで追加する配列にリストされたパターン名を持つディレクトリファイル。

2.2：パターンファイルをに追加する /inc/patterns フォルダ

次に、リストされているすべてのパターンファイルを $block_patterns = array()。 これは、パターンファイルのXNUMXつの例です。 footer-with-background.php:

/** * Dark footer wtih title and citation */
return array( 'title' => __( 'Footer with background', 'twentytwentytwo' ), 'categories' => array( 'footer' ), 'blockTypes' => array( 'core/template-part/footer' ), 'content' => '<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|background"}}},"spacing":{"padding":{"top":"var(--wp--custom--spacing--small, 1.25rem)","bottom":"var(--wp--custom--spacing--small, 1.25rem)"}}},"backgroundColor":"background-header","textColor":"background","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-background-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:var(--wp--custom--spacing--small, 1.25rem);padding-bottom:var(--wp--custom--spacing--small, 1.25rem)"><!-- wp:paragraph {"align":"center"} --> <p class="has-text-align-center">' . sprintf( /* Translators: WordPress link. */ esc_html__( 'Proudly powered by %s', 'twentytwentytwo' ), '<a href="' . esc_url( __( 'https://wordpress.org', 'twentytwentytwo' ) ) . '" rel="nofollow">WordPress</a> | a modified TT2 theme.' ) . '</p> <!-- /wp:paragraph --></div> <!-- /wp:group -->',
);

のパターンを参照してみましょう footer.html テンプレート部分：

<!-- wp:template-part {"slug":"footer"} /-->

これは、テンプレートファイルに見出しまたはフッターパーツを追加するのと似ています。

パターンは同様にに追加することができます parts/footer.html 参照するように変更してテンプレート slug テーマのパターンファイルのfooter-with-background):

<!-- wp:pattern {"slug":"twentytwentytwo/footer-with-background"} /-->

ここで、ブロックエディターのパターンインサーターにアクセスすると、 Footer with background 私たちが使用できるようにする必要があります：

背景のあるフッターのパターンのスクリーンショット。
WordPress6.0でブロックテーマパターンを作成する方法

次のスクリーンショットは、フロントエンドに背景パターンを持つ新しく作成されたフッターを示しています。

サイトにレンダリングされたように見えるフッターの背景のスクリーンショット。
WordPress6.0でブロックテーマパターンを作成する方法

パターンがブロックテーマの不可欠な部分になったので、多くのパターンがブロックテーマにバンドルされています。 平方, シードレット, メイランド, 動物学者, 地質学者 —上記のワークフローに従います。 Quadratテーマの例を次に示します /inc/patterns のフォルダ ブロックパターン登録 ファイルと ファイルのリスト コンテンツソースと必要なパターンヘッダー付き 以内 return array() function.

セクション2：登録なしでパターンを作成してロードする

この機能を使用するには、サイトにWordPress6.0またはGutenbergプラグイン13.0以降をインストールする必要があることに注意してください。

この WordPress6.0の新機能 標準のファイルとフォルダを介したパターン登録を可能にします– /patterns、のような同様の規則をもたらす /parts, /templates, /styles.

このプロセスは、 このWP居酒屋 記事には、次のXNUMXつのステップが含まれます。

  • テーマのルートにパターンフォルダを作成する
  • プラグインスタイルのパターンヘッダーを追加する
  • パターンソースコンテンツ

この記事から抜粋した典型的なパターンヘッダーのマークアップを以下に示します。

<?php
/**
* Title: A Pattern Title
* Slug: namespace/slug
* Description: A human-friendly description.
* Viewport Width: 1024
* Categories: comma, separated, values
* Keywords: comma, separated, values
* Block Types: comma, separated, values
* Inserter: yes|no
*/
?>

前のセクションで説明したように、 Title & Slug フィールドは必須であり、他のフィールドはオプションです。

最近リリースされたテーマの例を参照して、パターン登録をリファクタリングしました このTT2Gopherブロック デモテーマ、準備 CSSに関する以前の記事-トリック.

次の手順では、 footer-with-background.php パターン PHPに登録 で使用されます footer.html テンプレートがリファクタリングされます。

2.1：作成する /patterns テーマのルートにあるフォルダー

最初のステップは、を作成することです /patterns TT2 Gopherテーマのルートにあるフォルダーを移動し、 footer-with-background.php パターンファイルから /patterns フォルダとリファクタリング。

2.2：ファイルヘッダーにパターンデータを追加する

次に、以下のパターンヘッダー登録フィールドを作成します。

<?php
/**
* Title: Footer with background
* Slug: tt2gopher/footer-with-background
* Categories: tt2gopher-footer
* Viewport Width: 1280
* Block Types: core/parts/footer
* Inserter: yes
*/
?>
<!-- some-block-content /-->

パターンファイルには、PHPコメントとして記述されたトップタイトルフィールドがあります。 続いて ブロックコンテンツ HTML形式で書かれています。

2.3：パターンコンテンツをファイルに追加する

コンテンツセクションでは、内のコードスニペットをコピーしましょう 一重引用符 （例えば、 '...'）のコンテンツセクションから footer-with-background そして、 <!-- some-block-content /-->:

<!-- wp:group {"align":"full","style":{"elements":{"link":{"color":{"text":"var:preset|color|foreground"}}},"spacing":{"padding":{"top":"35px","bottom":"30px"}}},"backgroundColor":"background-header","textColor":"foreground","className":"has-foreground","layout":{"inherit":true}} --> <div class="wp-block-group alignfull has-foreground has-foreground-color has-background-header-background-color has-text-color has-background has-link-color" style="padding-top:35px;padding-bottom:30px"><!-- wp:paragraph {"align":"center","fontSize":"small"} --> <p class="has-text-align-center has-small-font-size">Powered by WordPress | TT2 Gopher, a modified TT2 theme</p> <!-- /wp:paragraph --></div>
<!-- /wp:group -->

のコードスニペット全体 patterns/footer-with-background.php ファイルを表示できます ここGitHubで.

ことに注意してください /inc/patterns & block-patterns.php 　 エクストラ、WordPress 6.0では必須ではなく、デモ目的でのみ含まれています。

2.4：テンプレートのパターンスラッグを参照する

上記のリファクタリングを追加 footer-with-background.php パターンに footer.html テンプレートは、前のセクション（セクション1、2.2）で説明したものとまったく同じです。

これで、サイトのフッター部分をブロックエディターで表示するか、サイトのフロントエンドをブラウザーで表示すると、フッターセクションが表示されます。

パターンのカテゴリとタイプ登録（オプション）

ブロックパターンを分類するには、パターンのカテゴリとタイプをテーマに登録する必要があります functions.php ファイルにソフトウェアを指定する必要があります。

の例を考えてみましょう ブロックパターンカテゴリの登録 TT2Gopherテーマから。

登録後、パターンはコアのデフォルトパターンと一緒にパターンインサーターに表示されます。 パターンインサーターにテーマ固有のカテゴリラベルを追加するには、テーマの名前空間を追加して以前のスニペットを変更する必要があります。

/**
* Registers block categories, and type.
*/ 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' ) ), // ...
); /**
* Filters the theme block pattern categories.
*/
$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 );

　 footer-with-background パターンは、プレビューとともに挿入されたパターンに表示されます（選択されている場合）。

パターンインサーターに表示されるパターンカテゴリ（左パネル）と、エディターに表示される対応するデフォルトのフッターパターン（右パネル）を示すスクリーンショット。
WordPress6.0でブロックテーマパターンを作成する方法

このプロセスにより、ブロックテーマでのブロックパターンの作成と表示が大幅に簡素化されます。 Gutenbergプラグインを使用せずにWordPress6.0で利用できます。

パターン登録のないテーマの例

アーリーアダプターは、ブロックテーマでこの機能の使用をすでに開始しています。 から入手できるテーマのいくつかの例 テーマディレクトリ、登録なしの負荷パターンを以下に示します。

セクション3：ローコードでのパターンの作成と使用

　 公式パターンディレクトリ コミュニティが提供するクリエイティブなデザインが含まれており、コンテンツを作成するために必要に応じてコピーおよびカスタマイズできます。 ブロックエディタでパターンを使用することは、これまでになく簡単になりました。

増え続けるディレクトリのパターンを追加して、単純な「コピーアンドペースト」でテーマをブロックしたり、に含めることもできます。 theme.json それらのディレクトリを参照してファイル パターンナメクジ。 次に、非常に限られたコーディングでこれを簡単に実現できることを簡単に説明します。

パターンディレクトリからのパターンの追加とカスタマイズ

3.1：パターンをディレクトリからページにコピーする

ここで、私は使用しています このフッターセクションパターン パターンディレクトリからFirstWebGeekによって。 「パターンのコピー」ボタンを選択してパターンをコピーし、新しいページに直接貼り付けました。

3.2：必要なカスタマイズを行うs

フォントの色とボタンの背景に少しだけ変更を加えました。 次に、コード全体をからコピーしました コードエディタ クリップボードに。

変更されたパターン（左パネル）とコードエディターの対応するコード（右パネル）を示すスクリーンショット
WordPress6.0でブロックテーマパターンを作成する方法

コードエディタの使用に慣れていない場合は、オプション（右上のXNUMXつのドット）に移動し、[コードエディタ]ボタンをクリックして、ここからコード全体をコピーします。

3.3：/patternsフォルダーに新しいファイルを作成します

まず、新しいものを作成しましょう /patterns/footer-pattern-test.php ファイルを作成し、必要なパターンヘッダーセクションを追加します。 次に、コード全体を貼り付けます（上記のステップ3）。 パターンはフッターエリア（5行目）に分類されており、パターンインサーターに新しく追加されたものを見ることができます。

<?php /** * Title: Footer pattern from patterns library * Slug: tt2gopher/footer-pattern-test * Categories: tt2gopher-footer * Viewport Width: 1280 * Block Types: core/template-part/footer * Inserter: yes */
?> <!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"100px","bottom":"70px","right":"30px","left":"30px"}}},"backgroundColor":"black","layout":{"contentSize":"1280px"}} -->
<div class="wp-block-group alignfull has-black-background-color has-background" style="padding-top:100px;padding-right:30px;padding-bottom:70px;padding-left:30px"><!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"style":{"typography":{"fontStyle":"normal","fontWeight":"700","textTransform":"uppercase"}},"textColor":"cyan-bluish-gray"} -->
<h2 class="has-cyan-bluish-gray-color has-text-color" style="font-style:normal;font-weight:700;text-transform:uppercase">lorem</h2>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">One of the main benefits of using Lorem Ipsum is that it can be easily generated, and it takes the pressure off designers to create meaningful text. Instead, they can focus on crafting the best website data.</p>
<!-- /wp:paragraph --> <!-- wp:social-links {"iconColor":"vivid-cyan-blue","iconColorValue":"#0693e3","openInNewTab":true,"className":"is-style-logos-only","style":{"spacing":{"blockGap":{"top":"15px","left":"15px"}}}} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /--> <!-- wp:social-link {"url":"#","service":"twitter"} /--> <!-- wp:social-link {"url":"#","service":"instagram"} /--> <!-- wp:social-link {"url":"#","service":"linkedin"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"textTransform":"capitalize","fontStyle":"normal","fontWeight":"700","fontSize":"30px"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Contact Us</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1.2"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1.2">123 BD Lorem, Ipsum<br><br>+123-456-7890</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">sample@gmail.com</p>
<!-- /wp:paragraph --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px","lineHeight":"1"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px;line-height:1">Opening Hours: 10:00 - 18:00</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --> <!-- wp:column -->
<div class="wp-block-column"><!-- wp:heading {"level":4,"style":{"typography":{"fontSize":"30px","fontStyle":"normal","fontWeight":"700","textTransform":"capitalize"}},"textColor":"cyan-bluish-gray"} -->
<h4 class="has-cyan-bluish-gray-color has-text-color" style="font-size:30px;font-style:normal;font-weight:700;text-transform:capitalize">Newsletter</h4>
<!-- /wp:heading --> <!-- wp:paragraph {"style":{"typography":{"fontSize":"16px"}},"textColor":"cyan-bluish-gray"} -->
<p class="has-cyan-bluish-gray-color has-text-color" style="font-size:16px">Lorem ipsum dolor sit amet, consectetur ut labore et dolore magna aliqua ipsum dolor sit</p>
<!-- /wp:paragraph --> <!-- wp:search {"label":"","placeholder":"Enter Your Email...","buttonText":"Subscribe","buttonPosition":"button-inside","style":{"border":{"width":"1px"}},"borderColor":"tertiary","backgroundColor":"background-header","textColor":"background"} /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->

3.4：インサーターで新しいパターンを表示する

新しく追加されたものを表示するには Footer pattern from patterns library パターン、任意の投稿またはページに移動し、挿入アイコン（青いプラス記号、左上）を選択してから、「TT2 Gopher –Footer」カテゴリを選択します。 新しく追加されたパターンは、他のフッターパターンとそのプレビュー（選択されている場合）とともに左側のパネルに表示されます。

新しいフッターパターン（左パネル）とそのプレビュー（右パネル）を示すスクリーンショット。
WordPress6.0でブロックテーマパターンを作成する方法

パターンを直接登録する theme.json file

WordPress 6.0では、パターンディレクトリから任意のパターンを登録することができます。 theme.json 次の構文のファイル。 ザ 6.0開発ノートの状態、「パターンフィールドは[の配列ですパターンナメクジ]パターンディレクトリから。 パターンスラッグは、パターンディレクトリの単一パターンビューの[URL]で抽出できます。」

{ "version": 2, "patterns": ["short-text", "patterns-slug"]
}

この 短いWordPress6.0はビデオを備えています パターンがどのように登録されるかを示します /patterns フォルダ（3:53）で、パターンディレクターから目的のパターンを theme.json ファイル（3:13）。

次に、登録されたパターンがパターンインサーター検索ボックスに表示され、テーマバンドルパターンライブラリと同じように使用できるようになります。

{ "version": 2, "patterns": [ "footer-from-directory", "footer-section-design-with-3-column-description-social-media-contact-and-newsletter" ]
}

この例では、パターンスラグ footer-section-design-with-3-column-description-social-media-contact-and-newsletter 前の例 経由で登録されます theme.json.

ページ作成パターンモデル

の一環として "パターンのある建物」イニシアチブ、WordPress 6.0 パターンモーダルオプションを提供します テーマの作成者にページレイアウトパターンをブロックテーマに追加して、サイトユーザーがページの作成中にページレイアウトパターン（たとえば、概要ページ、連絡先ページ、チームページなど）を選択できるようにします。 以下はから取られた例です 開発ノート:

register_block_pattern( 'my-plugin/about-page', array( 'title' => __( 'About page', 'my-plugin' ), 'blockTypes' => array( 'core/post-content' ), 'content' => '<!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} --> <p class="has-white-color has-black-background-color has-text-color has-background">Write you about page here, feel free to use any block</p> <!-- /wp:paragraph -->', )
);

この機能は現在 ページ投稿タイプに限定 まだ「投稿投稿タイプ」ではありません。

　 ページ作成パターンモーダル すべてのパターンのポストコンテンツブロックタイプを削除して、完全に無効にすることもできます。 サンプルコードの例 ここに提供されています.

以下のリソースセクションにリストされているリンクから、GitHubのディスカッションをフォローして参加できます。

パターンディレクトリを使用してページを作成する

ディレクトリのパターンを使用して、ページビルダーと同様に、目的の投稿またはページレイアウトを作成することもできます。 The グーテンベルグハブ チームが作成しました 実験的なオンラインページビルダーアプリ ディレクトリから直接パターンを使用する（入門ビデオ）。 次に、アプリのコードをコピーしてサイトに貼り付けることができます。これにより、コーディングせずに複雑なページレイアウトプロセスを構築することが大幅に簡素化されます。

In この短いビデオ、Jamie Marslandは、（1:30に）アプリを使用して、ディレクトリの目的のページセクションを使用してページビルダーと同様のページレイアウト全体を作成する方法を示します。

包み込む

パターンを使用すると、ユーザーは一般的に使用されるコンテンツレイアウト（ヒーローページ、コールアウトなど）を任意のページで再作成し、以前はコーディングスキルがなければ不可能だったスタイルでコンテンツを表示する際の障壁を低くすることができます。 ちょうどのように プラグイン & テーマ ディレクトリ、新しい パターン ディレクトリは、パターンディレクトリから選択した幅広いパターンを使用し、コンテンツをスタイリッシュに記述および表示するためのオプションをユーザーに提供します。

確かに、 ブロックパターンはすべてを変更します そして確かにこれは ゲームチェンジャー WordPressテーマランドスケープの機能。 の可能性を最大限に発揮するとき パターンのある建物 努力が可能になり、これにより、ブロックテーマの設計方法が変わり、ローコードの知識があっても美しいコンテンツが作成されます。 多くのクリエイティブデザイナーにとって、パターンディレクトリは彼らを紹介するための適切な手段を提供するかもしれません 創造性.

リソース

WordPressの6.0

パターンの作成

パターンの強化（GitHub）

ブログ記事

WordPress6.0でブロックテーマパターンを作成する方法 最初に公開された CSSトリック。 あなたがすべき ニュースレターを入手する.

タイムスタンプ：

より多くの CSSトリック