WordPress ブロックパターンとは?

公開: 2022-08-18

WordPress のブロックパターンについてよく耳にしますが、その目的が正確にはわかりませんか? あなたは正しい場所にいます!

この投稿では、WordPress のブロック パターンとは何かを説明するだけでなく、Web サイトでそれらを使用する方法、独自のカスタム パターンを作成する方法、既製の WordPress ブロック パターンをオンラインで見つける場所についても説明します。

したがって、あなたが WordPress サイトの所有者であり、オンライン プレゼンスを最大限に活用したい場合は、WordPress が用意しているこのクールな機能 (別名ブロック パターン) について知っておく必要があるすべてのことを読んでください.

飛び込みましょう!

WordPress のブロックパターンとは何か、なぜそれを使うべきなのか

WordPress のブロックパターンは、ブロックで作られたテンプレートです。

つまり、WordPress のブロックをいくつか取り、それらを組み合わせて美しいデザインにすると、WordPress のブロック パターンが作成されたことになります。

WordPress ブロック エディターのリリース以降、ユーザーは WordPress ブロック パターンを利用できます。 しかし、WordPress 6.0 では、WordPress でデザインやテンプレートを構築するための主要なツールとなったパターンに特に重点が置かれています。 このバージョンの WordPress では、個々のブロックではなくパターンにスポットライトが当てられています。

WordPress のブロック パターンを使用すると、ページの完全なテンプレートを作成することも、サイトのセクションとして使用できるテンプレートの一部のみを作成することもできます。 必要に応じて、必要な数のブロック パターンから完全なデザインを作成できます。

WordPress パターンを作成またはカスタマイズしたら、それをライブラリに保存して、いつでもページやブログ投稿で再利用できます。

ブロックパターンが役立つ理由

WordPress のブロック パターンは、いくつかの理由で役立ちます。

  • デザインをゼロから構築する技術的スキルを持たない Web サイトの所有者は、ブロック パターンを使用して Web サイトの見栄えを良くすることができます。 この機能を使用すると、ページ、セクション、および投稿を実際に自分でデザインすることができます。
  • ブロック パターンは再利用可能で柔軟です。 保存したブロック パターンから多数のテンプレートを作成および再作成できます。 たとえば、同じブロック パターンをさまざまなバリエーション (さまざまな色やタイポグラフィなど) で保存できます。 各ブロック パターンをどのようにカスタマイズするかは、あなた次第です。
  • また、さまざまなプロジェクトやキャンペーンで将来簡単に再利用できる、さまざまなブロックの組み合わせを作成することもできます。 これは、時間を節約し、反復作業を回避できるため、長期的には優れています。

WordPress ブロックパターンの使い方

WordPress ウェブサイトを美しいページとテンプレートで装飾することに熱心ですか? WordPress のブロックパターンを正確に使用する方法を見てみましょう。

パターンを追加するページまたは投稿に移動します。 そこに来たら、WordPress ブロックエディターの左上にある + アイコンをクリックします。

グーテンベルク + アイコン WP

メニューがドロップダウンしたら、[パターン] を選択します。 ニーズにより関連性の高いパターンのカテゴリを選択することもできます。 Exploreボタンをクリックして、より大きなウィンドウでパターンを開きます。

WPブロックパターンドロップダウン

パターンのコレクションを参照した後、投稿またはページに挿入したいパターンをクリックします。

ブロック エディターに挿入したら、カスタマイズを開始できます。 ブロック パターンをカスタマイズするには、パターンに含まれる個々のブロックを実際にカスタマイズする必要があります。 したがって、そのパターンのすべてのブロックをクリックして、個別にカスタマイズするだけです。

特定のブロックが気に入らない場合は、いつでも別のブロックに置き換えることができます。カスタム ブロックでも、ライブラリに既に存在するブロックでもかまいません。

ブロック パターンのカスタマイズ

以上です。 各ブロックのカスタマイズが完了したら、パターンを公開する準備が整います。 それはとても簡単です!

既製のWordPressブロックパターンを見つける場所

前のセクションでお気づきかもしれませんが、WordPress には、Web サイトで自由に使用できる既製のブロック パターンが用意されています。 創造性が足りない場合、または将来のデザインのインスピレーションが必要な場合は、公式の WordPress リポジトリで既製のブロック パターンを多数見つけることができます。

ここでは、いくつかのカテゴリ (ボタン、列、ギャラリー、ヘッダー、画像、テキスト、おすすめ) に分類される印象的なパターンのコレクションを見つけることができます。 合計で、WordPress リポジトリだけでも、800 以上のクールなブロック パターンが公開されています。

既製のブロックパターン

時間をかけて利用可能なパターンをチェックして、Web サイトに最も美しいデザインを見つけてください。 そうです、選択できるオプションが非常に多いため、適切なものを見つけるまでに時間がかかる場合があります.

使用またはさらにカスタマイズしたいパターンが見つかったら、それをクリックして新しいページで開き、[パターンのコピー] をクリックします。

次に、パターンを追加したい WordPress ダッシュボードの最初の投稿またはページに戻り、ブロック エディターを右クリックして貼り付けます。

ブロックパターンをコピー

繰り返しになりますが、WordPress ブロック パターンを公式リポジトリから WordPress Web サイトに簡単に追加できます。 数回クリックするだけです。

コピー後に「予期しないコンテンツまたは無効なコンテンツ」を含むブロックが表示された場合は、下の [ブロックの復元を試行] ボタンをクリックして修正してください。

ブロック回復を試みる

どうぞ! WordPress ブロック パターンを WordPress ウェブサイトにコピーしました。 あなたは先に進んで、あなたの好みに合わせてカスタマイズすることができます!

WordPress リポジトリのパターンに戻ると、パターンをお気に入りとしてマークして、将来簡単にアクセスできるようにすることもできます。 ハートの数は、特定のデザインを気に入った人の数を示します。

独自のブロック パターンを作成する方法

ここまでで、デフォルトで利用可能な WordPress ブロック パターンの使用方法を学習しました。 それでも、ライブラリで利用できない非常に具体的または特別なものが必要な場合は、独自のパターンを作成できます。 このセクションでは、コードなしで独自のブロック パターンを作成する方法を紹介します。

WordPress リポジトリ経由で WordPress ブロック パターンを作成する

WordPress.org -> Patterns -> Create a new patternに移動します。 パターンを作成するには、ログインする必要があります。 そのため、アカウントを持っていない場合は必ず作成してください。

WordPress.org のパターン

次に、WordPress ダッシュボードで行うのと同じように、新しいブロックを追加してパターンを作成できるブロック エディターの空白のページが表示されます。

ここで、挿入するブロックの名前を入力できます。 例: 段落、文章、画像、表紙、見出し、列、メディア & テキストなど。左上隅の + アイコンを使用してブロックを追加することもできます (WordPress ダッシュボードと同様)。

画像を使用する場合は、デフォルトのギャラリーから選択するか、独自の画像をアップロードできます。 すべてのブロックを挿入してカスタマイズし、パターンの最終バージョンを作成したら、次の 2 つのいずれかを実行できます。

リポジトリに送信します (ページの右上隅)

送信パターン

パターンに名前と説明を付け、そのカテゴリを選択して、[完了] をクリックします パターンは WordPress コア チームによってレビューされ、リポジトリに公開されることに注意してください。 これは、他の人が自分の Web サイトでそれを使用できることを意味します。

下書きとして保存する

私のパターン

パターンを(公開せずに)自分用に残しておきたい場合は、下書きとして保存してください。 パターンを使用するたびに、 [マイ パターン]に移動すると、すべてのパターンが見つかります。

プラグインで WordPress ブロックパターンを作成する

WordPress ダッシュボードにすべてをまとめておき、新しいパターンを作成するために WordPress リポジトリに移動する必要がない場合は、ダッシュボードを離れずにパターンを作成できるプラグインをインストールできます。

開始するには、次の 2 つのプラグインのいずれかを選択します (どちらも無料です)。

  • ブロック パターン ビルダー
  • ブロックマイスター

BlockMeister プラグインを使用してパターンを作成する手順を簡単に示します。

Plugins -> Add New からプラグインをインストールします。

ブロックパターンプラグインをインストール

プラグインがインストールされたら、WordPress ダッシュボード メニューに戻り、[ブロック パターン] をクリックしてから [新規追加] をクリックします。 次に、ブロックの追加を開始できる WordPress ブロック エディターが表示されます。

プラグインを介してパターンを作成する

パターンを作成したら、公開します。 [ブロック パターン] -> [すべてのパターン] にすべてのカスタム パターンが表示されます。

次のステップは、ブロック パターンを挿入する投稿またはページに戻り、[+] アイコン -> [パターン] をクリックして、パターンを検索することです (パターンを作成したときに付けた名前)。 パターンがライブラリに表示されるはずです。

私の最初のパターン

それをクリックして挿入し、ニーズに合わせてさらにカスタマイズしてください。 WordPress Web サイトのどこでも使用できるようになりました。

カスタマイズ後に同じカスタム パターンの新しいバリエーションを保存する場合は、パターン (単一のブロックではなくパターン全体) をクリックし、 [ブロック パターンに追加] を選択します。 別の名前を付けて、[パターンの作成] をクリックします。

ブロックパターンに追加

ページを更新すると、この新しいパターンのバリエーションがライブラリに表示されます。

結論

これで、WordPress のブロック パターンに関するチュートリアルを終了します。 これで、Web サイトを思い通りにデザインし、訪問者にとってより魅力的なものにすることができます。

この記事を読んでお気づきかもしれませんが、ブロック パターンの使用とカスタマイズはまったく複雑ではありません。 独自のパターンを作成する場合でも、非常に簡単な手順がいくつか必要です。

管理が簡単であるだけでなく、WordPress のブロック パターンは特に便利です。初心者であっても、独自のテンプレートを作成し、何度でもカスタマイズして、サイトのどこでも再利用できるからです。

かっこよくないですか? これは、ユーザーと読者の両方にとって、より視覚的な WordPress エクスペリエンスへの一歩です。

WordPress のブロックパターンについてどう思いますか? それらがあなたのウェブサイトに役立つと思いますか? コメント欄からお知らせください。