WordPressブロックパターン101：それらは何ですか？ そしてそれらを使用する方法
公開: 2021-08-03時間を節約し、WordPressブロックエディターでよりプロフェッショナルなデザインを作成したいですか？ もしそうなら、WordPressのブロックパターンについて学ぶことはあなたが必要としていることかもしれません。
ブロックパターンを使用すると、事前に作成されたデザインを挿入し、ニーズに合わせて微調整して、準備を整えることができます。 これは時間の節約になります。 また、デザイナーでない場合は、ブロックパターンを使用すると、それらのデザインを最初から作成する知識がなくても、よりユニークなデザインを利用できるので便利です。
この投稿では、 WordPressのブロックパターンについて知っておく必要のあるすべてをカバーします。
- WordPressのブロックパターンとは何か、そしてそれらが再利用可能なブロックとどのように違うのか。
- エディターでブロックパターンを使用する方法。
- 新しいブロックパターンの場所とその使用方法。
- コードなしで独自のブロックパターンを作成する方法。
WordPressのブロックパターンとは何ですか？
WordPressのブロックパターンは、基本的にはブロックで作られた単なるテンプレートです。
それらには、特定のレイアウトに配置された単一のブロックまたは複数のブロックを含めることができます。 ブロック自体に加えて、ブロックパターンには、それらのブロックの設定（ボタンを特定の色に設定するなど）も含まれます。
フルページテンプレートのブロックパターンを見つけることができます。 または、より一般的には、ページで使用する可能性のある特定のセクションのブロックパターンを見つけることができます。 次に、レゴのような複数のブロックパターンを組み合わせてデザインを作成できます。
たとえば、画像の背景、見出しのテキスト、ボタンを含むセクションを作成するとします。 ブロックエディタを使用して手動で設定できます。 ただし、ブロックパターンを使用すると、そのレイアウトで事前に作成されたデザインを挿入し、コンテンツに合わせてカスタマイズすることができます。
上で述べたように、WordPressブロックパターンを使用する主な利点は次のとおりです。
- 彼らはあなたの時間を節約します。
- 特定の種類のデザインを自分で作成する知識がない場合があるため、より複雑なデザインを簡単に作成できます。
ブロックパターンと再利用可能なブロック
WordPressのブロックパターンが何であるかがわかったので、ブロックパターンの前に導入されたコア機能であるWordPressの再利用可能なブロックによく似ていると思うかもしれません。
再利用可能なブロックは、コンテンツに簡単に挿入できる1つ以上のブロックのコレクションでもあります。
どちらも既成のデザインをすばやく挿入できるという点で似ていますが、大きな違いが1つあります。
- ブロックパターンは、デザインの出発点です。 それらを使用して、使用したい基本的なデザインをインポートできますが、毎回カスタマイズすることになり、ブロックパターンのすべてのインスタンスが異なります。
- 再利用可能なブロックは、すべてのインスタンスで同じになります。 再利用可能なブロックのすべてのインスタンスは常に同じであり、再利用可能なブロックのデザインを1つの場所で更新すると、それらの変更は再利用可能なブロックのすべてのインスタンスに自動的に適用されます。
それぞれを使用する場合の例を次に示します。
まず、コンテンツに引用符を挿入するための特別な形式があるとします。 したがって、引用符を挿入するときは常に、ブロックのまったく同じ配置を使用して、一貫性を保つ必要があります。
各見積もりが異なる場合は、これにブロックパターンを使用することをお勧めします。 ブロックパターンを挿入して基本的なフォーマットを設定してから、一意の引用テキストを追加できます。
ここで、すべてのブログ投稿の最後に含めるメーリングリストに人々が参加するための召喚状（CTA）があるとします。 このCTAをすべてのインスタンスで完全に同じにし、将来的に更新できるようにする必要があります。
このユースケースでは、再利用可能なブロックを使用する必要があります。 再利用可能なブロックは、CTAのすべてのインスタンスが同じであることを確認します。 また、CTAを変更したい場合は、再利用可能なブロックを1回更新するだけで、それらの変更がすべてのインスタンスに適用されます。
WordPressブロックパターンの使用方法
ブロックの挿入に使用するのと同じインターフェースを介してブロックパターンを挿入できます。
まず、ブロックパターンを挿入するコンテンツのエディターを開きます。 次に、左上隅のプラスアイコンをクリックして、コンテンツインサーターインターフェイスを開きます。
表示されるサイドバーで、[パターン]タブをクリックします。 次に、ドロップダウンを使用して、さまざまなタイプのパターンを除外できます。
気に入ったパターンを見つけたら、それをクリックしてコンテンツに挿入するだけです。
ブロックパターンを挿入すると、手動でデザインを作成した場合と同じように、個々のブロックをすべて編集できます。
以上です！ 別のブロックパターンを挿入する場合は、同じプロセスを繰り返すことができます。 ブロックパターンは、エディターでカーソルを置いた場所に挿入されます。
新しいWordPressブロックパターンを見つけて使用する方法
新しいブロックパターンを見つけるのに役立つように、WordPressチームはWordPressに公式のブロックパターンライブラリを作成しました。 ここをクリックするとアクセスできます。
フィルタを使用してすべてのブロックパターンを参照し、結果をクリックしてプレビューできます。 気に入ったブロックパターンが見つかったら、[パターンのコピー]ボタンをクリックして、パターンをクリップボードにコピーします。
次に、ブロックパターンを追加するコンテンツのエディターを開いて、通常のテキストを貼り付けるのと同じように貼り付けます。右クリックして貼り付けを選択するか、 Ctrl + V （またはMacではCmd+V ）。
これで完了です。貼り付けた場所に完全なブロックパターンが表示されるはずです。
WordPress.orgの公式ブロックパターンライブラリに加えて、ShareABlockやGutenberg Hubテンプレートライブラリ（公式ライブラリと同じコピー/貼り付けアプローチを使用）などのサードパーティディレクトリもあります。
ネイティブのブロックパターン機能を使用する代わりに独自のカスタムソリューションを使用する場合もありますが、ブロックパターンとテンプレートを挿入できるプラグインも多数あります。 いずれにせよ、最終結果は同じです。 Gutenbergテンプレートプラグインに関する投稿で、いくつかの最良のオプションを見つけることができます。
コードなしで独自のWordPressブロックパターンを作成する方法
今のところ、コアのWordPressブロックエディターでは、コーディング方法を知らない限り、独自のブロックパターンを作成することはできません。これは少し厄介です。
ありがたいことに、WordPressに期待するように、これを修正するプラグインがあります。
私の個人的なお気に入りは、JustinTadlockの無料のBlockPatternBuilderプラグインです。 基本的に、このプラグインを使用すると、ブロックエディタを使用して独自のデザインを作成し、それをブロックパターンとして保存できます。 そのため、エディターを使用してパターンをデザインし、パターンとして保存して、他のパターンと同じように簡単に挿入できます。
正直なところ、この機能がコアのWordPressソフトウェアに含まれていないのは少し奇妙ですが、無料のプラグインをインストールするだけで解決できるため、大したことではありません。
まず、WordPress.orgから無料のBlockPatternBuilderプラグインをインストールしてアクティブ化します。 Justin Tadlockの前述のプラグインを使用していますが、BlockMeisterの同じ名前のプラグインがあり、同じ機能ともう少し多くの機能を提供しているようです。
次に、通常のエディターを開き、保存するデザインを作成します。 それが終わったら、ブロックパターンに含めるすべてのブロックを選択し、 3つのドットのアイコンをクリックします。 次に、ブロックパターンに追加するオプションを選択します。
次に、名前を付けます。
これで、他のブロックパターンと同じように挿入できます。 デフォルトでは、「未分類」セクションにあります。
エディターからの作業に加えて、WordPressダッシュボードに専用の[ブロックパターン]タブがあり、ブロックパターンを管理および作成できます。
今日からブロックパターンを始めましょう
WordPressのブロックパターンは、ブロックエディターからより多くのものを得るのに非常に便利なツールであるため、それらがどのように機能するかを理解することが重要です。
ブロックパターンの使用は非常に簡単です。ブロックのように挿入できます。 そして、それらを挿入すると、自分でデザインを作成した場合と同じように、パターン内のブロックを編集できます。
柔軟性を高めるために、新しいブロックパターンにアクセスする方法はいくつかあります。
- WordPress.orgの公式ブロックパターンライブラリまたはサードパーティのライブラリWebサイトの1つを使用できます。 ライブラリとWordPressエディター間でコピーアンドペーストするだけです。
- 収集したGutenbergテンプレートプラグインの1つを使用できます。 これらのプラグインはすべてネイティブブロックパターン機能を使用しているわけではありませんが、まったく同じ目的と機能を果たします。
- エディターとBlockPatternBuilderなどのプラグインを使用して、独自のブロックパターンをデザインできます。 デザインを保存すると、後で簡単に再利用できます。
ブロックエディタでの作業方法を改善する他の方法については、ブロックエディタを最大限に活用する方法に関するガイドと最高のブロックプラグインのコレクションをご覧ください。
WordPressのブロックパターンについてまだ質問がありますか？ コメントでお知らせください。サポートさせていただきます。