初心者ガイド：WordPressブロックパターンの使い方

WordPressサイトの構築はかつてないほど簡単になりましたが、ブロックパターンはその大きな部分を占めています。ブロックパターンを初めて発見したとき、私たちはワークフローをスピードアップできる可能性を感じました。

再利用ブロックのようなブロックパターンをCTAやクーポンオファーボタンに使用するようになりました。

ブロックパターンを使えば、コーディングやウェブデザインのスキルがなくても、プロ並みのデザインを簡単に手に入れることができる。

ビルトインされたブロックの組み合わせは、すぐにインサートやカスタマイザーが可能で、毎回ゼロから始めるのではなく、先手を打つことができる。

初めてWordPressサイトを構築する人も、より速く作業を進めたい人も、この初心者向けガイドを読めば、どのプロジェクトでも時間を節約できるブロックパターンの見つけ方、使い方、作り方がわかる。

このガイドで取り上げるトピックは以下の通り：

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

WordPressのブロックパターンは、カスタムレイアウトを素早く効率的に作成するのに役立つ、あらかじめデザインされたブロックのコレクションです。タイトな納期でページを作成する際、このブロックパターンは私たちにとって大きな変革をもたらしてくれました。

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

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

ブロックパターンは簡単な解決策を提供します。WordPressにはデフォルトで様々なビルトインパターンが用意されており、プロ並みのレイアウトを数秒で簡単に追加することができます。

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

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

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

次に、WordPressでブロックパターンを使って、ウェブサイトの魅力的なレイアウトを作成する方法をご紹介します。

WordPressでブロックパターンを使う方法

WordPressには初期設定として、サイトで使える便利なブロックパターンがいくつか用意されています。WordPressテーマや一部のプラグインにもパターンが追加されている場合があります。

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

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

下にスクロールすると、利用可能なブロックパターンを見ることができる。

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

また、’Explore all patterns’ボタンをクリックして、ブロックパターンを見ることもできる。

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

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

パターンがコンテンツエディターにプレースホルダー付きで外観表示されるので、それを編集してあなた自身のコンテンツに置き換えることができます。

パターン内のブロックをポイント・アンド・クリックするだけで、そのコンテンツを編集し、必要なものに変更することができます。

各ブロックには、通常のオプションがすべて用意されています。例えば、カバーブロックであれば、カバーカラーや背景画像を変更することができます。

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

ブロックパターンを使えば、投稿やWordPressサイトの美しいレイアウトを素早く作ることができる。

結局のところ、ブロックパターンは、ヘッダー、ギャラリー、ボタンなどを追加する必要があるたびに、手作業でブロックを配置する時間を節約するのに役立ちます。

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

WordPressでは、ブロックエディターでパターンを作成し、後で再利用することができます。

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

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

しかし、ブロックが選択しにくいように配置されている場合は、「ドキュメントの概要」タブのリスト表示を使用することができます。

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

パターンの名前を入力し、カテゴリーを選択する必要があります。

その下に、パターンをシンクさせるかシンクさせないかのトグルがあります。

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

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

Create’ボタンをクリックしてパターンを保存します。

次にそのパターンを使いたいときは、ブロック・インサーターでその名前かカテゴリーを探せばいい。

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

サイトエディターがフルサポートされているブロックテーマを使用している場合は、サイトエディターでパターンを作成することもできます。

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

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

左のサイドバーから「パターン」をクリックして次に進む。

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

新規パターンを作成するには、Add [+]ボタンをクリックし、’Create pattern’を選択します。

ポップアップが表示されるので、パターンの名前を入力し、カテゴリーを選択し、同期するかしないかを決定します。

Create」をクリックして続行する。

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

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

終了したら、「保存」ボタンをクリックしてパターンを保存するのをお忘れなく。

WordPressでパターンを管理する

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

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

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

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

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

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

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

Hestiaのようなクラシックテーマでも、フルサイト編集テーマと同じようにパターンを管理できるようになったものもあれば、下のスクリーンショットのような古いインターフェースをまだ使っているものもあることを覚えておいてください。

つまり、ブロックパターンをどのように管理するかは、使用しているテーマ次第ということだ。

サイトで使えるブロックパターンを探す

初期設定のWordPressには、よく使われるブロックパターンがいくつか用意されています。WordPressのテーマは、あなたのサイトに独自のパターンを追加することもできます。

しかし、ブロック・インサーターから入手できるブロック・パターン以外にも、たくさんのブロック・パターンをサイトで見つけることができる。

WordPress Patterns Directoryのサイトに行けば、もっとたくさんのブロックパターンを表示できます。

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

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

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

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

ブロックパターンの作成と共有方法

自分だけのWordPressブロックパターンを作って、世界中と共有したいですか？

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

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

注：パターンを保存するには、サインインするか、無料の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' );

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

最後に、タイトルと説明文を自分の好きなものに変更し、変更を保存することをお忘れなく。

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

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' );

再利用ブロックはどうなった？

ブロックパターンと再利用ブロックはどちらも、よく使うブロックを簡単に追加できるオプションをユーザーに提供するという、同じような問題を解決することを目的としている。

これを解決するために、Core WordPressチームは再利用ブロックをパターンにマージした。

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

よくある質問

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

その他のブロックパターンはどこにありますか？

WordPressの初期設定以外にも、WordPress Patterns Directoryでコミュニティが作成したオプションを検索することができます。

ブロックパターンによってサイトが遅くなることはありますか？

いいえ、ブロックパターン自体はサイトのスピードに影響しません。コンテンツを構成する方法のひとつですが、最適化された画像やブロックを使用することで、最高のパフォーマンスを実現できます。

ヒントについては、WordPressのスピードとパフォーマンスに関する究極のガイドをご覧ください。

その他のリソース

WordPressサイトのデザインをカスタマイズしたい場合は、以下のリソースが便利です：

• カスタムWordPressテーマを簡単に作成する方法（コードなし）
• ワードプレスウェブサイトのデザイン変更方法（初心者ガイド）
• WordPressブロックエディタのよくある問題とその解決方法
• WordPressのコメントフォームをスタイリッシュにする方法（アルティメットガイド）
• WordPressブロックエディタの背景色をカスタマイズする方法

このガイドが、あなたのサイトでWordPressブロックパターンの使い方を学ぶのにお役に立てば幸いです。また、WordPressブロックエディターを使いこなすためのガイドや、より生産的になるための便利なWordPressショートカットもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.