Builderの基本：ブロックパターンの調査

公開: 2022-01-20

WordPressの最新バージョンは、月末の1月25日に到着します。おそらくこれを読んでいる時点で、バージョン5.9はすでに世界にリリースされています。これ以上興奮することはできませんでした。数え切れないほどの拡張機能と新機能があり、その多くは今後の記事で取り上げますが、今日のトピックはブロックの「パターン」です。

WordPressは初めてではありませんが、バージョン5.9で有効になっている機能、特にブロックベースのテーマにより、パターンは多くの新鮮な注目を集めています。パターンは急速にWordPress自体の基本的なコンポーネントになりつつあり、Webサイトを設計および構築する方法を再構築する準備ができているようです。では、実際にブロックパターンとは何か、そしてそれらをどのように使用できるかを調べるのに最適な時期は何でしょうか。

基礎

ブロックパターンに飛び込む前に、基本から始めて、いくつかの用語を確立しましょう。 WordPressは過去数年でかなり変化しました。私たち全員が同じページにいることを確認するのは良いことです。

ブロック

ブロックは、WordPressのコンテンツの基本的な「単位」です。テキストの段落から画像のギャラリーまで、ブロックはほとんどすべての形式をとることができます。私はレゴの単一の部分を想像するのが好きです。各ブロックは異なって見えるか、独自の機能を果たしますが、それらはすべてうまく調和してWebページのコンテンツを作成します。

パターン

ブロックパターンは、特定のレイアウトを形成するブロックの事前定義されたコレクションです。パターンは、単一のブロックにすることも、複数のブロックで構成することもできます。後で説明するように、パターンを使用すると、複雑なページレイアウトを簡単に楽しく作成できます。

編集者

Editorは、ブロックからページや投稿を作成するために使用するユーザーインターフェイスです。 2018年にWordPress5.0で導入されて以来、エディターは多くの名前で呼ばれてきました。これらには、グーテンベルク、グーテンベルクエディター、ブロックエディターなどが含まれます。この記事では、単に「エディター」という用語を使用します。

インサーター

エディタ内では、インサータを使用してブロックとパターンをページに追加します。エディターの左上隅にある青い（+）記号をクリックすると、インサーターにアクセスできます。

以下のスクリーンショットは、定義された用語を示しています。

なぜパターンをブロックするのですか？

Editorを使用すると、単純なブログ投稿であろうと、手の込んだランディングページであろうと、ブロックから実質的にすべてのデザインを構築できます。この記事を例として使用してみましょう。あなたが今読んでいるのは段落ブロックです。上の見出しは見出しブロックであり、スクリーンショットは単なる画像ブロックです。これらのコンテンツ要素をページに追加するのは簡単でした。インサーターを開き、適切なブロックを見つけてクリックして挿入しました。

クイックヒント： slashコマンドを使用してブロックを挿入することもできることをご存知ですか？「/」キーで新しい段落を開始すると、使用可能なブロックのリストが表示されます。追加の文字を入力すると、検索結果が微調整されます。試してみる！

もう少し複雑なものはどうですか？次の価格表を検討してください。これは、Webサイトで製品やサービスを紹介するために一般的に使用されるデザインです。

よく見ると、このレイアウトを作成するために使用された個々のブロックを認識できる場合があります。ベースは、3つの等間隔の列を持つColumnsブロックです。各Columnブロック内には、Separator、Heading、Paragraph、Buttons、およびSpacerブロックがあります。いくつ見つけられましたか？

実際、この価格表は25の個別のブロックで構成されています。 WordPressのスキルレベルに関係なく、このレイアウトを最初から複製するのは面倒で少し難しいでしょう。

ここで、この25ブロックのグループがすでに構成されているかどうかを想像してみてください。ワンクリックで、完全な価格表を挿入し、個々のニーズに合わせて微調整することができます。さらに良いことに、あなたの指先に膨大な数のデザインのコレクションがあり、それぞれがあなたのテーマの美学に一致しているとしたらどうでしょうか？クリエイティブな画像とテキストのレイアウト、召喚状、ヘッダー、フッター、さらにはフルページレイアウトを考えてみてください。このタイプの「スターターコンテンツ」を使用すると、多くの時間を節約でき、新しいWordPressユーザーがエディターにアクセスしやすくなります。

ここでブロックパターンが登場します。上記の価格表は、実際には、WordPress5.9と一緒にリリースされる次の22のテーマに含まれているパターンです。

この小さな演習で、ブロックパターンの可能性にとても興奮している理由がわかるといいのですが、実際にどのように使用するのでしょうか。

パターンの使い方

ブロックと同じように、インサーターを使用してパターンをページに追加できます。インサーターを開いた状態で、「パターン」タブに移動します。このタブには、カテゴリ別にセグメント化された使用可能なすべてのパターンが表示されます。自分に合ったレイアウトを選択し、クリックして挿入します。次に、他のブロックと同じように、パターンを構成する個々のブロックを編集できます。挿入できるパターンの数に制限はありません。組み合わせて、ユニークなページデザインを作成します。

インサーターはブロックパターンへの簡単なアクセスを提供しますが、各パターンのプレビューは非常に小さく、すべてが1つの列に積み重ねられていることに気付くでしょう。レイアウトを視覚化して比較するのは難しい場合があり、適切なレイアウトを選択するのが難しくなります。

この問題に対処するために、WordPress5.9にはパターンエクスプローラーが含まれています。このエキサイティングな新機能には、[パターン]タブの[カテゴリ]ドロップダウンの横にある[探索]ボタンをクリックしてアクセスできます。

Explorerは、グリッドに表示されたパターンで強化されたブラウジングエクスペリエンスを提供するモーダルウィンドウを開きます。また、カテゴリで簡単に検索またはフィルタリングすることもできます。

上のスクリーンショットは、パターンエクスプローラーの最初の反復です。将来のWordPressリリースでは、Explorerの機能が拡張される予定です。現在の実験では、モバイル/タブレットのプレビューと、グリッドレイアウトではなく、パターンを個別にデモするオプションが追加されています。何も確認されていませんが、2022年半ばに向けたWordPress6.0の追加の機能強化に注目してください。

パターンについてのこのすべての議論で、あなたはそれらが実際にどこから来ているのか疑問に思うかもしれません。

それらを見つける場所

現在のテーマ、サードパーティのプラグイン、またはパターンディレクトリを介したWordPress自体のいずれかを介して、3つの方法のいずれかでパターンを登録します。それぞれの方法を見ていきましょう。

テーマ

あなたのテーマは、パターンがあなたのウェブサイトで利用可能になる最も直接的な方法である可能性があります。上記の価格表で見たように、多くのブロックベースのテーマには、独自のオーダーメイドのパターンコレクションが含まれています。これは、テーマを差別化するためのもう1つの方法であり、強力なレイアウトオプションのセットはユーザーにとって大きなメリットになります。これを書いている時点で、22のテーマは60以上で出荷されます！

パターンディレクトリ（WordPress）

WordPress 5.9のリリース以降、WordPressはパターンディレクトリを通じて独自のパターンを提供します。

パターンディレクトリは、WordPressプラグインやテーマリポジトリによく似た、コミュニティ主導のパターンのリポジトリであり、5.9リリースまでに公開されます。送信および承認されたすべてのパターンは、パターンエクスプローラーから直接参照および挿入できるようになります。これは、WordPressユーザーが数千とまではいかなくても数百のブロックパターンにアクセスできることを意味します。

クイックヒント：一部のテーマでは、WordPressに含まれるパターンがパターンディレクトリから無効になる場合があります。これは、テーマ開発者が独自のパターンコレクションを含め、より厳選されたユーザーエクスペリエンスを提供したい場合によく行われます。

サードパーティのプラグイン

最後に、プラグインがあります。パターンは何年も前から存在しているため、GenesisBlocksやReduxなどの多くのサードパーティプラグインが広範なパターンライブラリを作成しています。多くの場合、これらのライブラリは、パターンエクスプローラーなどの機能と直接統合されておらず、WordPressコアにはないカスタムブロックを備えています。また、独自のパターン挿入方法を使用する傾向がありますが、時間の経過とともに、多くの人がWordPressの新しい標準化されたアプローチに準拠し始めると思います。

パターンディレクトリが成熟し続けている間にニッチなブロックとレイアウトを探している場合、または独自のパターンを持つテーマを使用していない場合は、サードパーティのプラグインが提供するものを調べることを強くお勧めします。

パターンの未来

WordPress 5.9は、ブロックパターンに多くの機能拡張をもたらします。すでに説明したように、パターンエクスプローラーを使用すると、Webサイトに適したデザインを簡単に選択できます。パターンディレクトリを使用すると、テーマにシームレスに統合されるコミュニティで構築されたパターンの膨大なコレクションにアクセスできます。

個々のブロックからいつでもユニークなデザインを作成することができますが、私たちのほとんどはパターンエクスプローラーに直接向かうと思います。テーマまたはディレクトリから提供されたレイアウトを選択し、必要に応じて微調整します。私はそうすることを知っています。

さらに、新しいブロックベースのテーマは、組み込みのブロックパターンのコレクションがどれだけ広範囲に及ぶかによって判断されることが期待できます。 100を超えるパターンを持ち、すべてがきちんと分類され、幅広いユースケースをカバーするテーマが標準になる可能性があります。テーマの美学は重要ですが、美しいWebページを簡単に作成するために必要なツールをユーザーに提供することが最も重要です。

パターンはWordPressの未来であり、未来は明るいです。

まとめ

この記事では、ブロックパターンとは何か、それらをどのように使用できるか、そしてなぜそれらがWordPressWebサイトの構築方法を根本的に変えるのかを確認しました。次のBuilderの基本記事では、もう少し深く掘り下げて、実際に独自のパターンを作成する方法を説明します。

では、パターンについてどう思いますか？あなたはあなたのウェブサイトでそれらを使用していますか？この記事で取り上げられていない質問がありますか？コメントで教えてください。