WordPress「Gutenberg」自作ブロックパターンで記事執筆を劇的に加速する秘訣

Posted on by web

目次

WordPress「Gutenberg」自作ブロックパターンで記事執筆を劇的に加速する秘訣

第1章：ブロックパターンとは何か？その基礎知識とメリット
第2章：自作ブロックパターン作成のための準備と必要な知識
第3章：自作ブロックパターンを作成する手順
第4章：自作ブロックパターン運用時の注意点とよくある失敗例
第5章：記事執筆を劇的に加速させる応用テクニック
第6章：よくある質問と回答
第7章：まとめ

日々WordPressで記事を執筆する中で、「このレイアウト、前にも作ったな」「毎回同じようなデザインを作るのに時間がかかる」と感じたことはないでしょうか。特にGutenbergエディタの登場以来、ブロックを組み合わせることでデザインの自由度は増したものの、定型的なセクションを繰り返し作成する手間は依然として残ります。

このような課題を解決し、記事執筆の効率と品質を劇的に向上させる強力なツールが、Gutenbergの「ブロックパターン」です。この記事では、WordPressのGutenbergで自作ブロックパターンを活用し、記事執筆を加速させるための秘訣を、基礎から応用まで専門的な視点で徹底解説します。

第1章：ブロックパターンとは何か？その基礎知識とメリット

WordPressのGutenbergエディタにおけるブロックパターンは、複数のブロックを組み合わせて作成された定型的なレイアウトやデザインの集合体です。一度作成すれば、ボタン一つで記事内に挿入でき、デザインの統一性と作業効率の大幅な向上を実現します。

ブロックパターンの定義と役割

ブロックパターンは、WordPress 5.5で導入された機能で、「ブロック」という個々の要素をさらに大きな「パターン」として登録し、再利用できるようにするものです。例えば、「タイトル＋画像＋テキスト＋ボタン」といったよく使うセクションや、「2カラムのデザイン」といった複雑なレイアウトも、一つのパターンとして登録できます。これにより、毎回ゼロからブロックを組み合わせてデザインする必要がなくなり、執筆者はコンテンツ作成に集中できるようになります。

再利用ブロックとの違い

ブロックパターンと似た機能に「再利用ブロック」がありますが、両者には重要な違いがあります。

  • ブロックパターン: 挿入後にパターンを構成する各ブロックが独立します。つまり、挿入後に編集しても、元のパターンや他の場所で挿入されたパターンには影響しません。これは、テンプレートのように一度呼び出したら個別に編集したい場合に最適です。
  • 再利用ブロック: 挿入後も常に元のブロックと連動しています。再利用ブロックを一つ編集すると、そのブロックが挿入されている全ての場所で内容が更新されます。サイト全体で共通して使われるフッターや会社情報など、内容を一元管理したい場合に適しています。

これらの違いを理解し、目的や用途に応じて使い分けることが、WordPress運用の効率化には不可欠です。

ブロックパターンを活用するメリット

自作ブロックパターンを導入することには、数多くのメリットがあります。

  • 執筆効率の向上: 定型的なレイアウトやデザインを瞬時に挿入できるため、記事作成にかかる時間を大幅に短縮できます。特に、頻繁に登場するセクション（CTA、注釈、レビューボックスなど）でその効果は顕著です。
  • デザインの一貫性: サイト全体で統一されたデザインガイドラインに沿ったレイアウトを簡単に適用できます。これにより、ブランドイメージを強化し、ユーザーにとって分かりやすく、プロフェッショナルな印象を与えることができます。
  • ヒューマンエラーの削減: レイアウトの崩れや、指定されたデザインルールから逸脱したブロックの使用を防ぎます。初心者でもプロ並みのデザインを簡単に再現できるようになります。
  • チームでの効率化と品質均一化: 複数人で記事を作成する場合でも、定義されたパターンを使用することで、誰が作成しても一定の品質とデザインレベルを保つことができます。これにより、レビューや修正の工数も削減されます。
  • 学習コストの軽減: HTMLやCSSの深い知識がなくても、既存のパターンを選択するだけで複雑なレイアウトを実現できるため、新しい執筆者がスムーズに作業を開始できます。

これらのメリットを享受するためにも、自作ブロックパターンの作成と運用は、現代のWordPressサイト運営において非常に重要な取り組みと言えます。

第2章：自作ブロックパターン作成のための準備と必要な知識

自作ブロックパターンを効果的に作成・運用するためには、いくつかの準備と基本的な知識が必要です。これらを事前に整えておくことで、スムーズな開発とトラブルの回避につながります。

準備すべきWordPress環境

自作ブロックパターンは、PHPコードやテーマファイルを編集するため、本番環境での直接的な作業は避けるべきです。

  • ローカル開発環境: Local by Flywheel、MAMP、XAMPPなどのツールを使用して、自身のPC内にWordPress環境を構築します。これにより、本番サイトに影響を与えることなく、自由に開発とテストが行えます。
  • ステージング環境: 本番サイトのコピーを作成し、テスト専用の環境として利用します。開発したパターンを本番にデプロイする前に、最終的な動作確認を行うのに適しています。
  • 子テーマ: 最も重要な準備の一つです。WordPressのテーマをカスタマイズする際には、必ず「子テーマ」を使用してください。親テーマのfunctions.phpやstyle.cssに直接コードを書き込むと、親テーマがアップデートされた際にカスタマイズ内容がすべて上書きされてしまいます。子テーマを使用すれば、親テーマのアップデートを安全に行いつつ、自身のカスタマイズを保持できます。
  • コードエディタ: Visual Studio Code（VS Code）やSublime Textなど、PHPやHTML、CSSの編集に適した高機能なテキストエディタを用意しましょう。シンタックスハイライトや自動補完機能が作業効率を向上させます。

自作ブロックパターンに必要な知識

ブロックパターンの作成には、ウェブサイトを構成する基本的な技術要素の理解が求められます。

  • HTMLの基礎知識: Gutenbergエディタで作成したブロックの構造は、最終的にHTMLコードとして出力されます。パターンのコンテンツを定義する際に、どのブロックがどのようなHTMLタグに変換されるかを理解していると、より意図した通りのレイアウトを作成できます。特に、グループブロックやカラムブロックがどのように入れ子構造のHTMLを生成するかを知っておくと役立ちます。
  • CSSの基礎知識: 作成したブロックパターンに独自のスタイルを適用する場合、CSSの知識が必要になります。色、フォント、余白、レスポンシブデザインなど、パターンの見栄えを調整するためには、CSSセレクタやプロパティの基本的な使い方を理解しておくことが重要です。子テーマのstyle.cssにパターン専用のスタイルを記述することになります。
  • PHPの基礎知識（最低限の理解）: ブロックパターンをWordPressに登録するためには、PHPコードをfunctions.phpに記述する必要があります。具体的には、registerblockpattern関数とregisterblockpatterncategory関数を使います。これらの関数の引数や基本的な構文を理解していれば、パターンを正確に登録し、カテゴリ分けを行うことができます。深いプログラミング知識は必須ではありませんが、PHPの構文ルール（セミコロンの場所、引用符の使い方など）を守る意識は必要です。
  • Gutenbergエディタの基本操作: ブロックパターンの元となるレイアウトは、Gutenbergエディタ上で実際に作成します。そのため、ブロックの挿入、並び替え、グループ化、カラムの設定、ブロック設定パネルでの詳細な調整など、Gutenbergエディタの基本的な使い方に慣れておくことが、効率的なパターン作成の第一歩となります。

これらの準備と知識を身につけることで、単にパターンを登録するだけでなく、デザイン性や拡張性の高い自作ブロックパターンを作成し、柔軟に運用できるようになります。

第3章：自作ブロックパターンを作成する手順

自作ブロックパターンを作成する手順は、主にGutenbergエディタでデザインを作成し、そのHTMLをPHPコードで登録するという流れになります。ここでは、具体的な手順とコード例を交えて解説します。

ステップ1: Gutenbergエディタで理想のレイアウトを構築する

まずは、WordPressの投稿または固定ページ編集画面で、通常通りブロックを組み合わせて、パターンとして登録したいレイアウトを作成します。この際、以下の点を意識すると良いでしょう。

  • グループブロックやカラムブロックを積極的に使用し、セクション全体をまとめる。
  • 使用するブロックの組み合わせ、テキスト、画像、ボタンなどの配置を決定する。
  • 必要なブロック（見出し、段落、画像、ボタン、区切り線など）を設定パネルで調整し、スタイルやクラスを追加する。
  • レスポンシブデザインを意識し、スマートフォンでの表示も確認する（必要に応じて、ブロックの設定でPC/SP表示を切り替えるCSSクラスを追加するなど）。

例えば、以下のような「サービス紹介セクション」を作成したとします。

  1. グループブロックを追加
  2. その中に見出しブロック（H2）を追加
  3. 段落ブロックで説明文を追加
  4. 2カラムブロックを追加
  5. 左カラムに画像ブロック、右カラムにさらに見出し（H3）と段落ブロック、ボタンブロックを追加

ステップ2: 作成したレイアウトのHTMLコードを取得する

理想のレイアウトが完成したら、そのブロック群のHTMLコードを取得します。

  1. Gutenbergエディタの右上にある「オプション」（縦に3つの点があるアイコン）をクリックします。
  2. ドロップダウンメニューから「コードエディター」を選択します。
  3. 表示されたHTMLコード全体をコピーします。

このコードは、後ほどPHPファイルに貼り付けるための重要な要素です。この際、コピーしたHTMLコードは、特殊文字（引用符、改行など）が含まれるため、PHPの文字列として安全に扱うためにはエスケープ処理が必要になります。

ステップ3: PHPファイルにコードを記述してパターンを登録する

コピーしたHTMLコードを子テーマのfunctions.phpファイルに記述し、WordPressにブロックパターンとして登録します。

  1. 子テーマのfunctions.phpファイルを開きます。
  2. 以下のPHPコードを記述します。

if ( ! functionexists( 'mythemeregisterblockpatterns' ) ) {
    function mythemeregisterblockpatterns() {
        // パターンカテゴリの登録 (必要であれば)
        registerblockpatterncategory(
            'my-custom-patterns',
            array( 'label' => '私のオリジナルパターン' )
        );

        // コピーしたHTMLコードをPHP文字列として定義
        $patterncontent = '
            <!-- wp:group {"align":"full","backgroundColor":"light-green","layout":{"type":"constrained"}} -->
            <div class="wp-block-group alignfull has-light-green-background-color has-background"><div class="wp-block-groupinner-container">
            <!-- wp:heading {"textAlign":"center","level":2} -->
            <h2 class="has-text-align-center">Gutenbergで記事執筆を加速！</h2>
            <!-- /wp:heading -->

            <!-- wp:paragraph {"align":"center"} -->
            <p class="has-text-align-center">定型的なセクションをパターン化し、効率と品質を向上させましょう。</p>
            <!-- /wp:paragraph -->

            <!-- wp:columns {"verticalAlignment":"center"} -->
            <div class="wp-block-columns is-layout-flex wp-container-2">
            <!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
            <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%">
            <!-- wp:image {"id":123,"sizeSlug":"full","linkDestination":"none"} -->
            <figure class="wp-block-image size-full"><img src="https://example.com/path/to/image.jpg" alt="効率化のイメージ" class="wp-image-123"/></figure>
            <!-- /wp:image -->
            </div>
            <!-- /wp:column -->

            <!-- wp:column {"verticalAlignment":"center","width":"50%"} -->
            <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:50%">
            <!-- wp:heading {"level":3} -->
            <h3>あなたの時間を有効活用</h3>
            <!-- /wp:heading -->

            <!-- wp:paragraph -->
            <p>繰り返し使うデザインをパターン化することで、コンテンツ作成に集中できます。</p>
            <!-- /wp:paragraph -->

            <!-- wp:buttons -->
            <div class="wp-block-buttons">
            <!-- wp:button {"backgroundColor":"vivid-cyan-blue"} -->
            <div class="wp-block-button"><a class="wp-block-buttonlink has-vivid-cyan-blue-background-color has-background wp-element-button">詳細を見る</a></div>
            <!-- /wp:button -->
            </div>
            <!-- /wp:buttons -->
            </div>
            <!-- /wp:column -->
            </div>
            <!-- /wp:columns -->
            </div></div>
            <!-- /wp:group -->
        '; // 実際のHTMLコードをここに入力。引用符内の改行はエスケープ不要。

        // ブロックパターンの登録
        registerblockpattern(
            'my-theme/accelerate-writing-section', // ユニークなパターン名 (スラッシュで区切るのが慣例)
            array(
                'title'       => '記事執筆加速セクション', // エディタに表示されるタイトル
                'description' => '記事執筆を加速させるための紹介セクションです。', // パターンの説明
                'categories'  => array( 'my-custom-patterns' ), // 登録したカテゴリ名
                'content'     => $patterncontent, // 上記で定義したHTMLコンテンツ
                'keywords'    => array( '執筆', '効率化', '紹介', 'セクション' ), // 検索用のキーワード (WP 5.8+)
                'viewportWidth' => 1200, // プレビューの幅 (WP 5.8+)
            )
        );
    }
    addaction( 'init', 'mythemeregisterblockpatterns' );
}

上記のコードでは、以下の点に注意してください。

  • registerblockpatterncategory: まず、パターンを分類するためのカテゴリを登録します。my-custom-patternsがスラッグ、私のオリジナルパターンがエディタに表示される名前です。
  • $patterncontent: ここに、ステップ2でコピーしたHTMLコードを貼り付けます。PHPのヒアドキュメント（<<などのHTML特殊文字は自動的にエスケープされるため、そのまま貼り付けられます。ただし、HTML内のシングルクォート、ダブルクォートはPHPの文字列を閉じないように注意が必要です。
  • registerblockpattern:
    • ‘my-theme/accelerate-writing-section’は、このパターンのユニークなIDです。テーマ名やプラグイン名をプレフィックスとしてつけるのが慣例です。
    • ‘title’は、Gutenbergエディタのパターン挿入画面で表示される名前です。
    • ‘description’は、パターンの概要説明です。
    • ‘categories’には、登録したカテゴリのスラッグを指定します。複数のカテゴリを指定することも可能です。
    • ‘content’に、先ほど定義した$patterncontent変数を指定します。
    • ‘keywords’は、Gutenbergエディタでパターンを検索する際に使用されるキーワードです（WordPress 5.8以降）。
    • ‘viewportWidth’は、パターンプレビューの幅を設定します（WordPress 5.8以降）。
  • addaction( ‘init’, ‘mythemeregisterblockpatterns’ );: WordPressの初期化時に、この関数が実行されるようにフックしています。

ステップ4: theme.jsonでの登録（WordPress 5.8以降のモダンな方法）

WordPress 5.8以降では、theme.jsonファイルを使用してパターンを登録することも可能です。この方法は、PHPファイルに直接HTMLを書き込むよりも管理がしやすく、推奨されるアプローチです。

theme.jsonファイルに、以下のようにpatternsプロパティを追加します。


{
    "version": 2,
    "patterns": [
        {
            "title": "記事執筆加速セクション",
            "description": "記事執筆を加速させるための紹介セクションです。",
            "categories": [ "my-custom-patterns" ],
            "content": "<!-- wp:group {\"align\":\"full\",\"backgroundColor\":\"light-green\",\"layout\":{\"type\":\"constrained\"}} --><div class=\"wp-block-group alignfull has-light-green-background-color has-background\"><div class=\"wp-block-groupinner-container\"><!-- wp:heading {\"textAlign\":\"center\",\"level\":2} --><h2 class=\"has-text-align-center\">Gutenbergで記事執筆を加速！</h2><!-- /wp:heading --><!-- wp:paragraph {\"align\":\"center\"} --><p class=\"has-text-align-center\">定型的なセクションをパターン化し、効率と品質を向上させましょう。</p><!-- /wp:paragraph --><!-- wp:columns {\"verticalAlignment\":\"center\"} --><div class=\"wp-block-columns is-layout-flex wp-container-2\"><!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"50%\"} --><div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:50%\"><!-- wp:image {\"id\":123,\"sizeSlug\":\"full\",\"linkDestination\":\"none\"} --><figure class=\"wp-block-image size-full\"><img src=\"https://example.com/path/to/image.jpg\" alt=\"効率化のイメージ\" class=\"wp-image-123\"/></figure><!-- /wp:image --></div><!-- /wp:column --><!-- wp:column {\"verticalAlignment\":\"center\",\"width\":\"50%\"} --><div class=\"wp-block-column is-vertically-aligned-center\" style=\"flex-basis:50%\"><!-- wp:heading {\"level\":3} --><h3>あなたの時間を有効活用</h3><!-- /wp:heading --><!-- wp:paragraph --><p>繰り返し使うデザインをパターン化することで、コンテンツ作成に集中できます。</p><!-- /wp:paragraph --><!-- wp:buttons --><div class=\"wp-block-buttons\"><!-- wp:button {\"backgroundColor\":\"vivid-cyan-blue\"} --><div class=\"wp-block-button\"><a class=\"wp-block-buttonlink has-vivid-cyan-blue-background-color has-background wp-element-button\">詳細を見る</a></div><!-- /wp:button --></div><!-- /wp:buttons --></div><!-- /wp:column --></div><!-- /wp:columns --></div></div>"
        }
    ],
    "customTemplates": [],
    "templateParts": []
}

あるいは、パターンコンテンツを別ファイルに分割することもできます。

  1. 子テーマのディレクトリ内にpatternsフォルダを作成します。
  2. その中にaccelerate-writing-section.phpやaccelerate-writing-section.htmlといったファイル名で、HTMLコードのみを記述したファイルを作成します。
  3. functions.phpでregisterblockpattern関数を使う場合、content引数にfilegetcontents( DIR . ‘/patterns/accelerate-writing-section.html’ )のようにファイルパスを指定します。
  4. theme.jsonを使う場合は、patternsプロパティの各項目でnameを定義し、別途wp-content/themes/your-child-theme/patterns/accelerate-writing-section.phpというファイルを作成します。WordPressは自動的にそのファイルからパターンを読み込みます。

この方法だと、HTMLとPHPコードが分離され、管理がしやすくなります。

ステップ5: WordPress管理画面で確認

コードを保存したら、WordPressの管理画面に戻り、投稿または固定ページの編集画面を開きます。ブロックを追加する際に「パターン」タブを選択し、作成したカテゴリとパターンが表示されていることを確認します。挿入して、正しく表示されるかテストしましょう。

Pages: 1 2 3
Category: ブログ運営・アフィリエイト