WordPressパターンディレクトリについて知っておくべきこと

公開: 2021-08-26

昨年の終わりに、私はWordPressパターンとは何か、それらが何のためにあるのか、そしてWordPressブロックエディターでそれらを作成して使用する方法についての包括的なガイドを書きました。 WordPressコミュニティ全体の背後での作業のおかげで、半年余りで、ブロックパターンの開発が大きく進歩しました。 WordPress 5.8バージョンの公開後、その可用性と使用法が急速に成長していることがわかります。このため、WordPressパターンディレクトリを最新の状態に保つことは興味深いと思います。これは、将来のページやテーマの再設計に影響を与えるからです。

以前にコメントしたように、ブロックパターンは、ページや投稿の作成に使用できるブロックのグループで構成される事前定義されたセクションまたはフラグメントのセットです。これらのデザインは、2つのボタンを表示するセクションや、派手で複雑なデザインの価格セクションのような単純なものにすることができます。

ブロックパターンの挿入と編集

ブロックエディタからブロックパターンを挿入するのは、ブロックを追加するのと同じくらい簡単です。エディタの左上隅にある+アイコンをクリックすると、ポップアップダイアログが表示され、ブロック、パターン、またはその他の再利用可能な要素を追加できます。

WordPressエディターにブロックパターンを挿入する — WordPressエディターでブロックパターンを検索します。

[パターン]タブには、検索するパターンをカテゴリ別に選択できるドロップダウンがあります。見つけるパターンのいくつかはデフォルトでWordPressに付属しており、その他はインストールしたテーマに固有のものであり、一部はプラグインからのものです。実際、まったく新しい美しいパターンのセットを追加するプラグインがたくさんあります！

パターンを選択すると、それを構成するブロックのセットが投稿またはページに自動的に追加されます。あなたが今しなければならないのは、あなたが望むコンテンツを含むようにそれを微調整することです。

パターンを形成するブロックの1つを編集する — パターンを形成するブロックの1つを編集します。

WordPressパターンディレクトリからコピーアンドペースト

2021年4月下旬、WordPressはWordPress.orgでパターンディレクトリを公開しました。この投稿を書いている時点（2021年8月23日）では、WordPress.orgにこのページに直接移動するためのメニュー項目はありません。少なくとも、スペイン語に1つあるので、英語には何もありません。

一見、このディレクトリはテーマまたはプラグインディレクトリと同じように見えるかもしれませんが、任意の投稿またはページに任意のパターンを非常に簡単に追加する機能があります。

WordPress.orgパターンディレクトリでのブロックパターンの検索は、WordPressダッシュボードで利用できるものと非常によく似ています。キーワードで検索することも、検索を絞り込むための一連のカテゴリを用意することもできます。さらに、WordPress.orgにログインしている場合は、任意のパターンをブックマークできます。

パターンをダブルクリックすると、パターンが詳細に表示され、さまざまな画面サイズから選択して、それぞれのパターンがどのように表示されるかを確認できます。

WordPressチームのソーシャルカードのディレクトリパターン — WordPressディレクトリパターン：チームソーシャルカード

上の画像でわかるように、パターンをコピーできるボタンがあり、任意のページまたは投稿に貼り付けた後、ブロックのセット全体がすでにあるので、それらを適応させるために必要な変更を加えることができますあなたが好きなようにあなたのウェブサイト：

マリーマーティン
編集長

エリザベスリンデン
スタイルエディター

ジャネット・スミス
ファッションエディター

写真、テキスト、リンクを置き換えることで、ページに必要なものに完全に適合するブロックのセクションをすばやく作成できます。

ルース・ラベントス
最高経営責任者（CEO

アントニオ・ビジェガス
最高技術責任者

デビッド・アギレラ
チーフプロダクト＆クオリティオフィサー

簡単ですよね？

WordPressパターンディレクトリにパターンを追加する

パターンを作成してWordPressパターンディレクトリに送信するための最終的な環境はまだ作業中ですが、ディレクトリに公開する独自のパターンをアップロードするための呼び出しが開かれています。簡単な例でそれをどのように行うかを見てみましょう。

まず、独自のパターンを作成する必要があります。ホームページにあるものから以下に作成した紹介文のパターンの場合と同様に、ブロックエディタで直接作成できます。画像を含める場合は、商用利用のための無料ライセンスが必要です。

お客様の声

私たちの顧客は私たちを愛しています…

️️️️️
WOWこれは本当に機能します
このプラグインは、これまで使用した中で最高のツールです。すべてのクライアントは、このプラグインを使用して喜んでいます。使いやすく、優れたUI。

名前の名前–役職

次に、あなたは持っている必要がありますGithubアカウントを作成し、事前定義されたフォームに入力します。このフォームには、次のものを含める必要があります。

パターンの説明、
タイトル、
ディレクトリで利用可能なもののカテゴリ、
パターンのスクリーンショット、
含めた画像クレジット、および
ブロックマークアップ。これを行うには、パターンを形成するグループにマウスを置き、3つのドットのアイコンが付いたボタンをクリックし、[コピー]をクリックするだけです（Githubに貼り付けることができます）。

WordPressパターンディレクトリに新しいパターンを送信する — WordPressパターンディレクトリへの新しいパターンの送信を編集します。

以上です。 [プレビュー]タブに移動して結果を確認し、最後に[新しい問題を送信]ボタンをクリックします。

WordPressパターンディレクトリに送信されたパターンビュー — WordPressパターンディレクトリに送信されたパターンのビュー。

今、あなたはそれがWordPressパターンディレクトリで利用可能になるように誰かがそれをレビューするのを待つ必要があります。

ディレクトリニュース

前述したように、パターンを提出するプロセスはまだ開発中です。 GitHubから送信する必要がなく、WordPress.orgにログインするだけでよいように作業が行われています。

取り組んでいるアイデアは、https：//wordpress.org/patterns/new-pattern/（現在ページは空白です）から、WordPress.orgにログインすると、次の画像のようなページが表示されるというものです。 [パターンの作成]ボタンがあります。

新しいパターン作成ページの提案 — 新しいパターン作成ページのモックアップ（出典：Block Pattern Directory）。

パターンを作成するには、WordPressでホストされているブロックエディターのインスタンスを使用できます。このエディターは（ほとんどの場合）通常のブロックエディターと同じように機能しますが、いくつかの調整が加えられています。最初の変更は、パターンの作成と送信に焦点を合わせたエディターのウェルカムポップアップのカスタムバージョンを用意することです。

パターンエディタウェルカムポップアップモックアップ — パターンエディタのウェルカムポップアップモックアップ（ソース：WordPress.orgパターンディレクトリ。

一方、パターンの編集サイドバーには、タイトル、説明、カテゴリなど、パターンに関する情報も含まれます。

パターンエディタのサイドバーのモックアップ — パターンエディターのサイドバーのモックアップ（出典：WordPress.orgパターンディレクトリ）。

最後に、レビューするパターンを送信して、世界中の人々と共有するオプションがあります。

パターンディレクトリでのレビューと公開のためのパターンの提出のモックアップ — パターンディレクトリ（ソース：WordPress.orgパターンディレクトリ）でのレビューと公開のためのパターン提出のモックアップ。

要約

WordPressのブロックパターンは、ページや投稿のデザインで最もよく使用される要素になる可能性があります。これらは、ユニットとして完全に意味のあるセクションを追加するのに十分に役立ち、そのセクションを構成する各ブロックを1つずつ追加する必要がある場合よりもはるかに高速にページを作成できます。また、ディレクトリ内のパターンの検索は、プラグインやテーマと同様の方法で標準化されます。

個人的には、ディレクトリで利用可能なパターンを見ると、自分のWebサイトで直接使用するパターンを見つけるのはまだ難しいと感じています。しかし、私はこれが数日のうちに変わることを知っています。優れたデザイナーが提案を追加し始めると、すぐにデザインが爆発的に増え、ページをより速く更新できるようになります。

UnsplashのNickMorrisonによる写真。