Builderの基本：ブロックパターンを作成する方法

公開: 2022-02-24

先月のBuilderの基本記事では、ブロックパターンについて説明しました。ブロックパターンとは何か、どのように使用できるかです。ブロックパターンは、特定のレイアウトを形成するブロックの事前定義されたコレクションにすぎないことを学びました。パターンの力を紹介し、それらが現代のWordPressテーマ開発の基礎である方法について説明しました。今日は、独自のパターンを設計、共有、登録する方法を学びます。

この記事では、すべての例で22のテーマを使用していることに注意してください。 このブロックベースのテーマはWordPress5.9と一緒にリリースされ、60を超えるブロックパターンを備えた素晴らしいリソースです。

パターンデザイン

ブロックパターンを作成する上で最も難しいのは、どのように見えるかを決めることです。比較的単純なものから始めましょう：アイテムのグリッド、3つの2行。このデザインを使用して、さまざまなビジネスサービスや製品機能を紹介することができます。

クイックヒント：パターンは、サードパーティのブロックを含む任意のブロックから構築できます。ただし、パターンを幅広い対象者に配布する場合は、コアのWordPressブロックのみを使用してみてください。そうすれば、ユーザーはデザインを使用するために追加のプラグインをインストールする必要がありません。

私にとって、パターンデザインはエディターから始まります。パターンは手動でコーディングできますが、視覚的に行う方がはるかに簡単です。まず、グリッドの最初の行に3つの列を持つColumnsブロックを追加します。次に、Heading、Paragraph、およびButtonsブロックを各列に追加します。 Columnsブロックを複製して、2番目のグリッド行を作成します。最後に、いくつかのスタイリング構成を適用し、両方のColumnsブロックを背景色のGroupブロックでラップします。結果は次のようになります。

上のスクリーンショットで、このデザインを構成する33個のブロックを見ることができます。

グリッドの代替の「ダーク」バージョンを作成したい場合は、元のデザインを複製してスタイリングを微調整する必要があります。

どちらのデザインも比較的シンプルですが、最初から作成するのは面倒です。これらのブロックパターンを共有および/または保存できると、多くの時間を節約できます。

デザインの共有

パターンデザインの共有は簡単です！デザインを自分のWebサイトの別のページ、またはおそらく別のWebサイトに完全に移動したいとします。ブロックマークアップをコピーして貼り付けるのと同じくらい簡単です。これを実現するには複数の方法があります。

パターンデザインがGroup、Cover、Columnsブロックなどの「container」ブロックに含まれている場合は、最も外側のコンテナーを選択し、ツールメニューを使用して「Copy」を選択します。ブロックマークアップはクリップボードにコピーされ、好きな場所に貼り付けることができます。

2番目のオプションは、[オプション]パネルからアクセスできるコードエディタを使用することです。

コードエディタは、現在のページまたは投稿のすべてのブロックマークアップを視覚的に表現します。コピーされているコードを正確に確認するのは簡単なので、この方法が好きです。

パターンの登録

ブロックマークアップのコピーと貼り付けは簡単かもしれませんが、パターンデザインのより永続的なバージョンが必要になることがよくあります。そのために、PatternsAPIを使用してカスタムブロックパターンを「登録」します。これにより、WordPress内のインサーターとパターンエクスプローラーの両方でデザインを利用できるようになります。

パターンを登録するには、PHP関数register_block_pattern（）を使用します。この関数は、タイトルとプロパティの配列の2つのパラメーターを受け入れます。それぞれを説明する前に、例を見てみましょう。

register_block_pattern（

'example / feature-grid-light'、

配列（

'title' => __（'Feature Grid – Light'、'textdomain'）、

'description' => __（'明るい背景のグリッドに6つの注目アイテムを表示します。'、'textdomain'）、

'categories' => array（'featured'、'columns'）、

'keywords' => array（'feature'、'grid'）、

'viewportWidth' => 1400、

'blockTypes' => array（'core / columns'）、

'コンテンツ'=>'パターンコンテンツ'

）。

）;

ここでは、以前に設計したフィーチャーグリッドパターンを登録しています。タイトルは、名前空間/タイトルの命名規則に従います。同じプロジェクトに複数のパターンを登録する場合は、名前空間の一貫性を保つことをお勧めします。

技術的に必要なのは、プロパティ配列のタイトルとコンテンツのパラメータのみです。簡潔にするために、上記の例ではパターンコンテンツは除外されています。ただし、これは前のセクションでコピーして貼り付けたコードと同じです。カテゴリはカテゴリフィールドを使用して設定され、パターンは複数持つことができます。エディタでは、パターンはカテゴリ別に整理されています。残りのプロパティについては、ブロックエディタハンドブックに素晴らしい内訳が記載されています。

暗い背景でフィーチャーグリッドパターンを登録するには、登録コードを複製し、それに応じて更新します。最後に、両方の関数をそのようにラップし、すべてをテーマのfunctions.phpファイルに配置します。

関数my_pattern_library_register_block_patterns（）{

register_block_pattern（

'example / feature-grid-light'、

配列（ … ）

）;

register_block_pattern（

'example / feature-grid-dark、

配列（ … ）

）;

}

add_action（'init'、'example_register_block_patterns'）;

完全なコードは、GitHubのGistで入手できます。

コードが追加されると、新しく登録されたパターンがインサーターとパターンエクスプローラーに表示されます。

パターンカテゴリの登録

カスタムパターンを使用する場合は、カスタムカテゴリに配置すると便利なことがよくあります。 WordPressはregister_block_pattern_category（）でそれを簡単にします。この関数は、パターンの登録に使用した関数と似ています。あなたがする必要があるのは、カテゴリタイトルとプロパティの配列を提供することです。 WordPress 5.9の時点では、ラベルが唯一のサポートされているプロパティですが、将来的にはさらに増えると予想されます。

次の例では、「カスタム」カテゴリを「カスタム」というタイトルで登録します。このコードを、パターン登録の例と一緒にテーマのfunctions.phpファイルに配置します。

関数example_register_block_pattern_categories（）{

register_block_pattern_category（

'習慣'、

array（'label' => __（'Custom'、'textdomain'））

）;

}

add_action（'init'、'example_register_block_pattern_categories'）;

パターンカテゴリは、パターンが関連付けられている場合にのみエディタに表示されます。したがって、以前に登録した2つのフィーチャグリッドパターンにカスタムを追加すると、「カスタム」カテゴリは次のように表示されます。

パターンライブラリプラグインを作成する

前のセクションでは、テーマのfunctions.phpファイルにコードを配置して、パターンとパターンカテゴリを登録しました。これは機能しますが、長期的には理想的ではありません。テーマを更新する必要があるとしましょう。おそらく、別のWebサイトでパターンを使用したいですか？

WordPressは、カスタムパターン管理用のネイティブソリューションをまだ提供していないため、代替ソリューションを検討する必要があります。さらに、パターンをより移植性の高い形式にすることが望ましい場合がよくあります。

私が見つけた最善のアプローチは、カスタムパターンのコレクションを保存するためのシンプルなWordPressプラグインを作成することです。プラグインは最大限の汎用性を提供し、テーマに依存しません。次の手順で、独自のパターンライブラリプラグインを作成する方法を説明します。

クイックヒント：次の手順をスキップしたい場合は、完全な「マイパターンライブラリ」プラグインを用意しました。これは、独自のライブラリの優れた出発点となるはずです。コードはGitHubの要点として入手できます。

ステップ1：セットアップを取得する

プラグインの作成を開始する前に、WordPressの動作バージョンといくつかの種類のテキストエディタが必要になります。ローカルのWordPressインストールを作成するには、Localを強くお勧めします。これは、長年にわたって排他的に使用しています。私はテキスト編集にAtomを使用していますが、多くの優れたオプションがあります。オペレーティングシステムに付属している基本的なテキストエディタでもかまいません。

ローカルまたは同様のアプリケーションを使用して、ローカルのWordPressサイトをセットアップします。 WordPressがバージョン5.9以降に更新されていることを確認してください。パターンは5.5以降で機能しますが、可能な限り最新バージョンのWordPressを使用することをお勧めします。

ステップ2：プラグインを作成する

次に行う必要があるのは、プラグインの「ベース」を作成することです。プラグイン開発に不慣れな場合は、恐れることはありません。それはそれよりも気が遠くなるように聞こえます。

ローカルのWordPressインストールでwp-content→pluginsディレクトリに移動し、my-pattern-libraryという名前の新しいディレクトリを作成します。ディレクトリには任意の名前を付けることができます。以降のすべての手順で、「my-pattern-library」をカスタム名に置き換えるだけです。

新しいwp-content→plugins→my-pattern-libraryディレクトリ内に、my-pattern-library.phpという名前のPHPファイルを作成します。テキストエディタでファイルを開き、次のプラグインヘッダーコメントをファイルの先頭に追加します。先頭の<？phpを忘れないでください。このチュートリアルのヘッダーを簡略化したことに注意してください。

<？php

/ **

*プラグイン名：マイパターンライブラリ

*説明：ブロックパターンの単純なライブラリ。

*バージョン：0.1.0

*少なくとも：5.8が必要です

* PHPが必要：7.0

*著者：あなたの名前

*ライセンス：GPLv2以降

*テキストドメイン：my-pattern-library

* /

必要に応じて、ヘッダー情報を自由に変更してください。次に、ファイルを保存します。これで、完全に機能するWordPressプラグインができました。管理プラグインページに表示されていることを確認し、[アクティブ化]をクリックします。このようになります。

これでプラグインが機能しますが、実際には何も実行されません。それを変えましょう。

ステップ3：パターンとカテゴリーを登録する

この最後のステップでは、この記事の前半のパターンとパターンカテゴリの登録コードを新しいプラグインにコピーするだけです。以前、このコードをテーマのfunctions.phpファイルに配置しました。ここで、my-pattern-library.phpファイルのヘッダーコメントの下に貼り付けます。

ファイルを保存してから、WordPressのエディターに移動します。インサーターを開き、[パターン]タブをクリックして、[カスタム]カテゴリを選択します。プラグインによって登録された2つのパターンが表示されます。

これでパターンライブラリが機能します。新しいカスタムパターンまたはカテゴリが必要な場合は、プラグインに追加するだけです。完全なコード例は、GitHubの要点として入手できます。

まとめる前に、この例は個人的な使用を目的としていることに注意してください。プラグインを公開する場合は、より多くの機能を含めることをお勧めします。ローカリゼーションが思い浮かびます。とは言うものの、このチュートリアルは、カスタムブロックパターンを格納する単純なプラグインを作成することがいかに簡単であるかを示しています。

まとめ

この記事では、ブロックパターンを設計、共有、登録する方法を学びました。独自のパターンライブラリを格納するための単純なWordPressプラグインを作成する方法も学びました。ブロックパターンは現代のテーマ開発に不可欠であると強く信じており、将来がどうなるかを楽しみにしています。パターンの調査をまだ始めていない場合は、この記事があなたにそうするように勧めてくれることを願っています。 Learn WordPressは、追加学習のための素晴らしいリソースです。ご不明な点がございましたら、コメントでお知らせください。