グーテンベルクブロックパターンの完全ガイド（I）
公開: 2020-12-23先週、Matt Mullenwegは、毎年の伝統と同様に、彼のプレゼンテーション（この場合は仮想）であるState of the Wordを発表し、WordPressの現在の状態と新機能の簡単な要約を発表しました。
マットは、グーテンベルクのブロックエディターが提供する体験に私たちを夢中にさせることにこれまで以上に注力しています。 Mattが強調した新機能の1つは、WordPressバージョン5.5に付属しており、ブロックパターンです。 この完全なガイドを作成するのは面白いと思いました。
ガイドは3つの投稿に分かれており、次のトピックを見ていきます。
- ブロックパターンの概要
- ページにパターンを挿入する
- ディレクトリで利用可能な事前定義されたパターンおよびその他
- ディレクトリで利用可能なパターンをサイトに追加します
- パターンを最初から作成する方法
- 開発者でない場合のパターンの作成方法
- 再利用可能なブロックをブロックパターンに変換する方法
- ブロックパターンを使用したトピック
- 公式ドキュメント。
それで、さらに遅れることなく、始めましょう！
1.ブロックパターンの概要
グーテンベルクが到着したとき、WordPressで使用していた従来のエディターに関する大きな変更は、「ブロック」の概念の導入でした。 投稿のタイトル、段落、リスト、画像など、すべてがブロックであると想定されていました。それぞれがブロックであり、フォントサイズ、タイトル、配置などを設定するための独自のカスタマイズプロパティがあります。
ブロックはすぐに洗練され、今では画像ギャラリー、メディア/テキストブロック、さらには他のブロックを含むブロックがあります。
同時に、多くの開発者は、ページのデザインを改善できるように、独自の機能を備えたブロックの大規模なセットも提供しています。 たとえば、Nelioでは、単純なスライダーで2つの画像を比較するために、NelioCompareImagesを開発しました。
プラグインやテーマに見られるブロックが爆発的に増加しただけでなく、それらの機能もWordPressのさまざまなバージョンで進化してきました。 したがって、現在、再利用可能なブロックを作成でき、それらを使用して、ページまたは投稿テンプレートを作成することもできます。
すばやく簡単に再利用できる事前定義されたデザインを用意するというアイデアを継続し、WordPressバージョン5.5ではブロックパターンが登場しました。 ブロックパターンの考え方は非常に単純です。これらは、ページや投稿の作成に使用できるブロックのグループによって形成される事前定義されたセクションまたはフラグメントです。 これらのパターンは、2つのボタンを表示するセクションや、人目を引く複雑なデザインの価格セクションのような単純なものにすることができます。
2.ページにパターンを挿入します
基本から始めましょう。ページに新しいパターンをどのように挿入しますか？ 非常に簡単！ ブロックと同様に、パターンを挿入するには、エディターの左上にある[ + ]ボタンをクリックするだけで、ブロックを追加する代わりに、[パターン]タブを選択します。 選択できるパターンの種類、事前定義されたWordPressのパターン、インストールしたテーマのパターン、およびプラグインを使用してインストールしたその他のパターンの小さなドロップダウンが表示されます。
最も気に入ったパターンを選択し、それを構成するブロックのセットがページにどのように挿入されるかを確認します。
パターンを挿入した後、これまで行ってきたように各ブロックを変更できます。 また、そのパターンのブロックがグループ化されている場合は、グループ全体のプロパティを変更することもできます。 簡単ですよね？
3.サードパーティディレクトリからのデフォルトパターンおよびその他のパターン
WordPress 5.5のバージョンには、ページの作成に使用できる事前定義されたブロックパターンのセットが付属しています。 あなたのサイトで利用可能なパターンを見るには、私が上で述べた+ボタンをクリックする必要があります。
また、アクティブなテーマが独自のブロックパターンを定義する場合もあります。 たとえば、TwentySeventeenまたはTwentyTwenty-One WordPressテーマには、いくつかのブロックパターンが含まれています。また、いくつかの例を挙げれば、GoDaddyとGenesisBlocksも含まれています。
WordPress 5.0のリリース後、ブロックが爆発的に増加しました。ブロックパターンの場合も同じ結果が得られます。後で説明するように、ブロックとパターンをWebサイトにダウンロードしてインストールするのは非常に簡単です。 ここに、自由に使える2つのブロックとパターンのウェブがありますが、すぐにもっと増えると確信しています。
- Jeffrey CarandangによるShareablockパターン–大量のブロック、テンプレート、およびパターンを共有および取得して、サイトにダウンロードおよびインストールできる素晴らしいWebサイト。
- ムニールカマルのグーテンベルクハブ–たくさんのブロック、テンプレート、パターンもあります。
Redux Frameworkプラグインもあります。これは、1000を超えるサードパーティのブロック、テンプレート、およびパターン（上記のディレクトリで利用可能なものを含む）を含むライブラリを提供して、ページに挿入します。 プラグインを使用すると、最大5つの無料パターンをダウンロードしてから、有料バージョンにアップグレードできます。
4.ディレクトリで利用可能なパターンをサイトに追加します
すでに述べたように、Redux Frameworkプラグインを使用して、ShareablockとGutenbergHubからパターンを簡単に追加できます。 あなたがプロのWordPressウェブサイトデザイナーであるならば、あなたが非常に速く望むだけ多くのパターンを常に見つけることは確かに良いオプションです。 ただし、プレミアムプラグインを必要とせずに新しいブロックパターンを使用することもできます。 方法を見てみましょう。
Shareablockパターンを追加する
Shareablockの場合、パターン（およびもちろんブロックまたはテンプレート）をインストールするには、Webからパターンを選択し、[今すぐダウンロード]ボタンをクリックするだけです。
初めてユーザー名とパスワードを取得できるように、メールアドレスの入力を求められます。
電子メールには、彼らのWebサイトにログインするためのリンクがあります。 ログインすると、興味のあるパターンをダウンロードできるようになります。それを選択してもう一度[今すぐダウンロード]をクリックすると、ブロックパターンがメールで届きます。
電子メールに記載されているリンクをクリックすると、Webにアクセスしてパターンの.jsonファイルをダウンロードできます。 ダウンロードしたら、WordPressブロックエディターにドラッグするだけで、パターンを構成するすべてのブロックが自動的に表示されます。
それは面倒なプロセスですが、それは仕事を成し遂げます。 残念ながら、ブロックパターンがライブラリに表示されないことに気付くでしょう…
グーテンベルクハブパターンを追加する
グーテンベルクハブからパターンを追加する方が簡単です。 前と同じように、最初にコピーするパターンを選択します。
パターンの右側に、[コードのコピー]ボタンが表示されます。 ボタンをクリックしてクリップボードにコピーし、Gutenbergエディターに貼り付けます。 これにより、ブロックがエディターに貼り付けられますが、ライブラリはスキップされます。
ちょっと待って！ そんなに早くない。 結果のブロックを完全にカスタマイズしたい場合は、無料のプラグインであるEditorPlusをインストールすることをお勧めします。このプラグインは、エディターに新しいブロックを追加し、高度なデザインコントロール、フォント、アイコン、仕切り、アニメーションなどでグーテンベルクを拡張します。特徴。
そうした場合、エディターの右側のサイドバーに、コピーされたパターンのデザインを変更するための高度なコントロールが表示されます。
これで、ブロックパターンとは何か、それらを見つける場所、およびそれらをWebサイトに挿入して優れたデザインを作成する方法がわかりました。 独自のパターンを作成する方法を学ぶ次の投稿をお見逃しなく！
UnsplashのRaulCachoOsesによる注目の画像。