初心者向けガイド：WordPressブロックパターンを使いこなす方法

WordPressサイトの構築がこれほど簡単になったことはなく、ブロックパターンはその大きな要因です。初めてそれらを発見したとき、ワークフローをスピードアップする可能性を見出しました。

CTA やクーポンオファーボタンには、再利用可能なブロックのようなブロックパターンを使用しています。コンテンツ作成方法において不可欠なものとなっています。

ブロックパターンを使用すると、コーディングやウェブデザインのスキルがなくても、プロフェッショナルなデザインを簡単に作成できます。

これらは、ブロックの事前構築済みの組み合わせであり、いつでも最初から始めるのではなく、すばやく挿入してカスタマイズできるため、作業を効率化できます。

初めての WordPress サイトを構築する場合でも、より速く作業したい場合でも、この初心者向けガイドでは、ブロックパターンを見つけ、使用し、作成して、あらゆるプロジェクトで時間を節約する方法を紹介します。

このガイドで取り上げるトピックは次のとおりです。

• WordPressブロックパターンとは？
• WordPressでブロックパターンを使用する方法
• ブロックエディターでパターンを作成する方法
• サイトエディターでパターンを作成する方法
• WordPressでパターンを管理する
• ウェブサイトで使用できるブロックパターンの見つけ方
• ブロックパターンを作成して共有する方法
• WordPressブロックパターンを手動で作成する
• WordPressでブロックパターンを削除する方法
• 再利用可能なブロックはどうなりましたか？
• よくある質問
• 追加リソース

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

WordPressブロックパターンは、カスタムレイアウトを迅速かつ効率的に作成するのに役立つ、あらかじめデザインされたブロックのコレクションです。締め切りが迫っているページを作成する際に、これらは私たちにとってゲームチェンジャーとなりました。

WordPressのブロックエディターは直感的で、ユーザーはコンテンツブロックを使用して美しいレイアウトをデザインできます。これには、テキスト、画像、ボタン、その他の要素が含まれており、必要に応じて配置できます。

しかし、すべてのユーザーが毎回ゼロからレイアウトを作成する時間やデザインスキルを持っているわけではありません。私たち自身もこの課題に直面しており、だからこそブロックパターンは私たちのワークフローにおいて非常に価値のあるツールとなっています。

ブロックパターンは簡単なソリューションを提供します。WordPressにはデフォルトで様々な既成のパターンが含まれており、プロフェッショナルな見た目のレイアウトを数秒で簡単に追加できます。

人気のWordPressテーマには、独自のカスタムパターンが含まれていることがよくあります。これらのパターンは、テーマに合わせた既製のデザインを提供することで、さらに時間を節約します。

パターンには、複数列のデザイン、メディアとテキストの組み合わせ、コールトゥアクションセクション、ヘッダー、カスタムボタンなどのレイアウトを含めることができます。この柔軟性により、さまざまなコンテンツタイプに適しています。

WordPress.orgのウェブサイトでさらに多くのブロックパターンを見つけることもできます。デザインを楽しむなら、独自のパターンを作成してWordPressコミュニティと共有することもできます。

次に、WordPressでブロックパターンを使用して、ウェブサイトの見事なレイアウトを作成する方法を説明します。

WordPressでブロックパターンを使用する方法

デフォルトでは、WordPressにはウェブサイトで使用できるいくつかの便利なブロックパターンが付属しています。WordPressテーマや一部のプラグインも独自のパターンを追加する場合があります。

ブロックパターンを使用するには、ブロックパターンを使用したいWordPressの投稿または固定ページを編集する必要があります。

投稿編集画面で、「ブロックを追加」[+] ボタンをクリックしてブロックインサーターを開きます。そこから「パターン」タブに切り替えると、利用可能なブロックパターンが表示されます。

利用可能なブロックパターンを表示するには、下にスクロールしてください。

特集、ボタン、カラム、ヘッダーなどのさまざまなカテゴリでブロックパターンを表示することもできます。

または、「すべてのパターンを探索」ボタンをクリックしてブロックパターンを表示することもできます。

ここでは、ポップアップでより大きなプレビューを見ることができます。

試したいパターンを見つけたら、クリックするだけで投稿またはページのコンテンツエリアに挿入できます。

パターンはコンテンツエディターに表示され、編集・置換可能なプレースホルダーコンテンツが含まれます。

パターン内の任意のブロックをポイントしてクリックするだけで、その内容を要件に合わせて編集および変更できます。

各ブロックには、通常どおりすべてのオプションがあります。たとえば、カバーブロックの場合は、カバーの色や背景画像を変更できます。

ブログ投稿やページに必要なだけ多くのパターンを追加できます。WordPressブロックを削除するのと同じように、パターンを削除して投稿やページから削除することもできます。

ブロックパターンを使用すると、記事やWordPressサイトの美しいレイアウトをすばやく作成できます。

最終的に、ブロックパターンは、ヘッダー、ギャラリー、ボタンなどを追加する必要があるたびに手動でブロックを配置するのに費やす時間を節約するのに役立ちます。

ブロックエディターでパターンを作成する方法

WordPressでは、ブロックエディターで後で再利用できるパターンを簡単に作成できます。

投稿またはページを編集する際に、パターンに含めたいブロックを選択し、「パターンの作成」をクリックするだけです。

キーボードのShiftキーを押しながらクリックすると、複数のブロックを選択できます。

ただし、ブロックが選択しにくいように配置されている場合は、ドキュメント概要タブの下にあるリストビューを使用できます。

パターンを作成するとポップアップが表示されます。

パターンに名前を付け、カテゴリを選択する必要があります。

その下には、パターンを同期（Synced）または未同期（Unsynced）のままにするためのトグルが表示されます。

同期されたパターン：あなたや他のユーザーがパターンを編集すると、次回そのパターンが使用されるときに変更が保存されます。

同期されていないパターン：投稿やページに挿入された後のパターンに加えられた変更は、元のパターンには影響しません。

「作成」ボタンをクリックしてパターンを保存します。

次回そのパターンを使用したい場合は、ブロックインサーターでその名前またはカテゴリを探すだけです。

サイトエディターでパターンを作成する方法

フルサイト編集に対応したブロックテーマを使用している場合は、サイトエディターでパターンを作成することもできます。

外観 » エディターページにアクセスしてサイトエディターを開きます。

これでサイトエディターインターフェイスに移動します。

左側のサイドバーにある「パターン」をクリックして続行してください。

利用可能なすべてのパターンとカテゴリが表示されます。

新しいパターンを作成するには、[+] 追加ボタンをクリックし、「パターンの作成」を選択してください。

これによりポップアップが表示され、パターンの名前、カテゴリの選択、パターンを同期するか未同期にするかの決定が必要になります。

続行するには「作成」をクリックします。

WordPressは、パターンを作成するための空白のキャンバスを作成します。

ここから、ブロックを追加してパターンをデザインできます。

終了したら、パターンを保存するために「保存」ボタンをクリックすることを忘れないでください。

WordPressでパターンを管理する

ブロックテーマでフルサイトエディターをサポートしている場合は、サイトエディターでパターンを管理できます。

外観 » エディターページにアクセスしてサイトエディターを開きます。

パターン画面では、パターンをクリックして編集できます。また、パターンの横にある3点メニューをクリックして、複製、エクスポート、または削除することもできます。

すべてのパターンを管理するには、サイドバーの「すべてのパターンの管理」タブをクリックします。

これですべてのパターンのリストが表示されます。編集、エクスポート、または削除できます。

クラシックテーマ（サイトエディターをサポートしていないWordPressテーマ）を使用している場合は、外観 » パターンページにアクセスしてパターンを管理できます。

ここから、ブロックパターンを追加、削除、エクスポートできます。

Hestiaのような一部のクラシックテーマでさえ、フルサイト編集テーマと同様の方法でパターンを管理していることに注意してください。一方、他のテーマは、以下のスクリーンショットに示されている古いインターフェイスを使用しています。

ブロックパターンの管理方法は、使用しているテーマによって異なります。

ウェブサイトで使用できるブロックパターンの見つけ方

デフォルトでは、WordPressには一般的に使用されるいくつかのブロックパターンが付属しています。WordPressテーマも独自のパターンをウェブサイトに追加する場合があります。

ただし、ウェブサイトのブロックインサーターから利用できるものよりも、はるかに多くのブロックパターンを見つけることができます。

単純にWordPressパターンディレクトリのウェブサイトにアクセスして、さらに多くのブロックパターンを表示してください。

ここでは、WordPressコミュニティから提供されたブロックパターンを見つけることができます。

これらのブロックパターンを使用するには、パターンを表示するためにクリックし、次に「パターンをコピー」ボタンをクリックするだけです。

次に、WordPressブログに戻り、このブロックパターンを挿入したい投稿またはページを編集する必要があります。

編集画面で、右クリックしてブラウザメニューの「貼り付け」を選択するか、CTRL+V（Macの場合はCommand + V）を押します。

ブロックパターンを作成して共有する方法

独自のWordPressブロックパターンを作成して、世界と共有したいですか？

WordPressを使用すると、ブロックパターンを非常に簡単に作成し、自分のウェブサイトで使用したり、世界中のすべてのWordPressユーザーと共有したりできます。

WordPressパターンディレクトリのウェブサイトにアクセスし、「新しいパターン」リンクをクリックするだけです。

注意: パターンを保存するには、WordPress.orgアカウントにサインインするか、無料のアカウントを作成する必要があります。

サインインすると、ブロックパターンエディターページに到達します。これはデフォルトのWordPressブロックエディターと同一であり、パターンを作成するために使用できます。

ブロックを追加して、パターンレイアウトを作成するだけです。

グループ、カバー、ギャラリーなどのレイアウトブロックを使用して、レイアウトを整理できます。

メディアブロックで使用できるロイヤリティフリーの画像もあります。WordPressメディアライブラリを使用すると、これらの画像をパターンで簡単に見つけて使用できます。

ブロックパターンに満足したら、下書きとして保存するか、パターンディレクトリに送信できます。

ブロックパターンをパターンディレクトリに送信する前に、ブロックパターンディレクトリのガイドラインをお読みください。

「マイパターン」リンクをクリックすると、すべてのブロックパターンを管理できます。共有したすべてのブロックパターン、下書きパターン、およびお気に入りに登録したパターンが表示されます。

自分の使用のためだけにブロックパターンを作成したい場合は、下書きとして保存できます。その後、マイパターンページからWordPressウェブサイトにコピー＆ペーストしてください。

WordPressブロックパターンを手動で作成する

ブロックパターンを手動で作成し、WordPressテーマやWPCodeのようなカスタムスニペットプラグインに追加することもできます。

WordPressで新しい投稿またはページを作成するだけです。コンテンツエリアで、パターンとして保存したいカスタムレイアウトまたはブロックコレクションを作成するためにブロックを使用します。

その後、コードエディターモードに切り替えます。

ここから、コードエディターに表示されているすべてのコンテンツをコピーする必要があります。

次に、メモ帳のようなプレーンテキストエディターを開き、そのコードを貼り付けます。次のステップで必要になります。

これで、ブロックをパターンとして登録する準備ができました。

これを行うには、以下のコードをテーマの functions.php ファイルまたは 無料のWPCodeプラグイン（推奨）のようなコードスニペットプラグインにコピー＆ペーストするだけです。

詳細については、WordPressにカスタムコードを追加する方法の完全なガイドをご覧ください。

function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( 'Two column magazine layout', 'my-theme'),
            'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' Your block content code goes here'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

次に、先ほどコピーした生のブロックデータを、contentパラメータの値としてコピー＆ペーストします。つまり、「ここにブロックコンテンツコードを入力」というテキストをブロックコードに置き換える必要があります。テキストを囲む一重引用符はそのまま残しておくようにしてください。

最後に、タイトルと説明をご自身のものに変更して保存することを忘れないでください。

これで、ウェブサイトにアクセスして投稿またはページを編集できます。新しく登録したブロックパターンがブロックインサーターに表示されます。

WordPressでブロックパターンを削除する方法

WordPressでは、ブロックパターンを簡単に削除または登録解除できます。たとえば、上記の例で作成したブロックパターンを削除したいとします。

次のコードをテーマのfunctions.phpファイルまたはWPCodeにコピー＆ペーストするだけです。

function wpb_unregister_my_patterns() {
  unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );

この例では、'my-plugin/my-awesome-pattern'は、登録時に使用したパターンの名前です。

このコードを使用して、テーマまたはプラグインによって作成されたブロックパターンを登録解除できます。知っておく必要があるのは、パターンを登録するために使用された名前だけです。

WordPressコアパターンを削除する

コアWordPressパターンはすべてのWordPressユーザーが利用できます。これは、それらが使い古されている可能性があり、WordPressテーマの他の部分と一致しない可能性があることを意味します。

パターンを使用したくない場合は、コンテンツに追加しないようにすればよいだけです。ただし、マルチライターのWordPressサイトを運営している場合は、すべてのユーザーがこれらのコアパターンを使用できないようにしたい場合があります。

すべてのコアWordPressパターンを削除するには、次のコードをテーマのfunctionsファイルまたはWPCodeに追加する必要があります。

remove_theme_support( 'core-block-patterns' );

再利用可能なブロックはどうなりましたか？

ブロックパターンと再利用可能なブロックは、どちらも同様の問題を解決することを目指していました。それは、ユーザーが一般的に使用されるブロックを簡単に追加できるオプションを提供することです。

これを修正するために、コアWordPressチームは再利用可能なブロックをパターンにマージしました。

再利用可能なブロックと同じ機能を持たせるには、同期パターンを使用できるようになりました。あなたや他のユーザーがパターンを編集すると、そのパターンが次に使用されるときに変更が保存されます。

よくある質問

ブロックパターンに関して、読者からよく寄せられる質問をいくつかご紹介します。

追加のブロックパターンはどこで見つけられますか？

WordPress のデフォルトのパターン以外にも、コミュニティによって作成されたさらに多くのオプションを、オンラインの WordPress パターンディレクトリ で探すことができます。

ブロックパターンは私のウェブサイトを遅くしますか？

いいえ、ブロックパターン自体はサイトの速度に影響しません。コンテンツを構造化する方法ですが、最高のパフォーマンスを得るために最適化された画像とブロックを使用していることを確認してください。

ヒントについては、WordPressの速度とパフォーマンスを向上させるための究極のガイドをご覧ください。

追加リソース

WordPressサイトのデザインをカスタマイズしたい場合は、以下のリソースが役立ちます。

• コードなしでカスタムWordPressテーマを簡単に作成する方法
• WordPressウェブサイトを再設計する方法（初心者向けガイド）
• WordPressの一般的なブロックエディターの問題とその解決方法
• WordPress コメントフォームのスタイル設定方法 (究極ガイド)
• WordPressブロックエディターの背景色を変更する方法

このガイドが、WordPressブロックパターンをウェブサイトで使用する方法を学ぶのに役立ったことを願っています。また、WordPressブロックエディターを使いこなす方法に関するガイドをご覧になるか、生産性を高めるための便利なWordPressショートカットをご覧ください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。