カスタマイズ 2023.12.14 2023.12.15

WordPressの非同期パターン作成方法を解説！functions.phpとpatternsフォルダでの宣言

この記事を書いた人

株式会社e2e wp.geek編集部

WordPressサイト制作サービス「wp.make」やWordPress保守・運用サービス「wp.support」などを展開する株式会社e2eの情報発信チームです。お客様の課題解決に役立つ、WordPressの最新情報をお届けいたします。

はじめに

WordPressでコンテンツを作成する際に、あらかじめ利用するブロックをまとめておくことができれば便利だと思いませんか？ WordPressには、特定のブロックを登録して利用する「パターン」という機能があり、作成方法は以下の3種類です。

ブロックエディタを利用する
register_block_patternをfunctions.phpに記載する
テーマのルートにあるpatternsフォルダ下にPHPファイルで宣言する

前編では初心者でも簡単にできる、1番のブロックエディタを利用した非同期パターン（旧：ブロックパターン）の作成方法を解説しました。今回はプログラミングの知識を必要とする、2,3番のPHPを利用した非同期パターンの作成方法を紹介します。

register_block_pattern

1つ目の方法としてregister_block_patternを利用した非同期パターンを作成します。大まかな方針は以下になります。

カテゴリーの作成
非同期パターンの作成

その際にfunctions.phpを修正しますが、小さなミスが深刻なエラーに繋がりやすいファイルですので、作業する際には必ずバックアップを取るよう心がけましょう。

カテゴリーの作成

まずはregister_block_pattern_categoryを使ってカテゴリーを作成します。カテゴリーを作成することで、パターンを利用するときに簡単に見つけることができます。なお、カテゴリを登録しない場合は「未分類」として登録されます。

    //カテゴリー作成

    if ( function_exists( 'register_block_pattern_category' ) ) {
        function my_register_pattern_category() {
            register_block_pattern_category(
                'my-pattern-category',
                array(
                    'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),
                    'description' => __( 'Colored h2 tags and p tags' ),
                )
            );
        }
        add_action( 'init', 'my_register_pattern_category' );
    }

//カテゴリー作成

if ( function_exists( 'register_block_pattern_category' ) ) {

function my_register_pattern_category() {

register_block_pattern_category(

'my-pattern-category',

array(

'label' => __( 'My Pattern Category', 'my-plugin-text-domain' ),

'description' => __( 'Colored h2 tags and p tags' ),

)

);

}

add_action( 'init', 'my_register_pattern_category' );

}

いくつか関数が使われていますので、1つずつ説明します。

function_exists

指定した関数が定義されている場合に true を返し、それ以外の場合にfalseを返す関数です。今回は、register_block_pattern_categoryが定義されているか確認しています。パターン作成に直接の関係はありませんが、functinos.php内でのエラーを予防する意味で記述することをおすすめします。

function_exists(string $function): bool

1	function_exists(string $function): bool

register_block_pattern_category

パターンカテゴリーが正常に登録されている場合に true を返し、エラーの場合はfalseを返す関数です。第1引数で登録するカテゴリーの名前、第2引数でカテゴリーのプロパティを配列で受け取ります。今回の第2引数には、必須であるlabel( 表示されるパターンカテゴリーの名前)と、descriptionでパターンの詳細を記述しています。他にも必要な情報があれば、随時追加してください。

register_block_pattern_category( string $category_name, array $category_properties ): bool

1	register_block_pattern_category( string $category_name, array $category_properties ): bool

__()

翻訳がない場合、またはテキストドメインが読み込まれていない場合は、第1引数で指定したテキストが返される関数です。アンダースコア2つですので、コピペする際は気を付けてください。

__( "必須" string $text, string $domain = 'default' ): 文字列

1	__( "必須" string $text, string $domain = 'default' ): 文字列

4つの引数を受け取ることで特定のタイミング、場所で任意の操作を実行できる関数です。第1引数でフックさせたいタイミング、場所、第2引数で実行させたい関数を指定します。今回実行させたい関数は、ユーザー定義関数のregister_pattern_categoryですので、第2引数に指定してください。第3引数は優先順位、第4引数は同時に実行したい関数の数になり、それぞれ初期値が入っています。必須のプロパティではないので今回は記述していません。

add_action("必須" string $hook_name, "必須" callable $callback, int $priority = 10, int $accepted_args = 1 ): true

1	add_action("必須" string $hook_name, "必須" callable $callback, int $priority = 10, int $accepted_args = 1 ): true

非同期パターンの作成

次にregister_block_patternを利用して非同期パターンを作成します。

    //非同期パターンの作成

    if ( function_exists( 'register_block_pattern' ) ) {
        function my_plugin_register_block_pattern() {
            register_block_pattern(
                'First/my-block-pattern',
                array(
                    'title'			=> __( 'First pattern', 'my-plugin-text-domain' ),
                    'categories'	=> array( 'my-pattern-category' ),
                    'content'		=>
                    '<!-- wp:group -->
                    <div class="wp-block-group">
                    <!-- wp:heading {"fontSize":"large"} -->
                    <h2 class="has-large-font-size"><span style="color:#ba0c49" class="has-inline-color">Hi everyone</span></h2>
                    <!-- /wp:heading -->
                    <!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} -->
                    <p class="has-white-color has-black-background-color has-text-color has-background">Powered by WordPress</p>
                    <!-- /wp:paragraph -->
                    </div><!-- /wp:group -->',
        )
            );
        }
        add_action( 'init', 'my_plugin_register_block_pattern' );
    }

//非同期パターンの作成

if ( function_exists( 'register_block_pattern' ) ) {

function my_plugin_register_block_pattern() {

register_block_pattern(

'First/my-block-pattern',

array(

'title' => __( 'First pattern', 'my-plugin-text-domain' ),

'categories' => array( 'my-pattern-category' ),

'content' =>

'

<h2 class="has-large-font-size"><span style="color:#ba0c49" class="has-inline-color">Hi everyone</span></h2>

<p class="has-white-color has-black-background-color has-text-color has-background">Powered by WordPress</p>

</div>',

)

);

}

add_action( 'init', 'my_plugin_register_block_pattern' );

}

上記で説明していない関数を説明します。

register_block_pattern

2つの引数を受け取ることで、パターンそのものを作成する関数です。第1引数に（namespace/任意のパターンの名前）、第2引数にパターンのプロパティを配列で受け取ります。今回第2引数には3つのプロパティを指定しました。

【必須】title：パターンの名前です。第1引数で指定したものとはまた別で、こちらがユーザーに表示されるものです。
【必須】content：パターンの内容をHTML形式で記述します。投稿画面からコピーしてくると簡単にアレンジできます。
categories：register_block_patternで作成したカテゴリー名を書きます。

register_block_pattern( string $pattern_name, array $pattern_properties ): bool

1	register_block_pattern( string $pattern_name, array $pattern_properties ): bool

参考画像

以上がregister_block_patternを利用した非同期パターンの作成になります。値を変更した際にどこに反映されるのかを検証して頂ければ、今後も簡単にアレンジができると思います。

patternsフォルダ

2つ目の方法として、テーマのルートにある/patternsフォルダ下にPHPファイルで宣言することで非同期パターンを作成します。今回は前章で作成したパターンと同じものを作り、テーマはTwenty Twenty-Threeを利用します。加えて前提条件として、既にカテゴリーは作成されてることとします。大まかな方針は以下になります。

patternsフォルダ下にPHPファイルの作成
PHPファイルにパターンの記述

patternsフォルダ下にPHPファイルの作成

PHPファイルの作成にあたって、patternsフォルダの位置を確認しましょう。patternsフォルダは個々のテーマフォルダの直下にあります。patternsフォルダが見つかったら、早速PHPファイルを作成しましょう。

    /wp-content/themes/twentytwentythree
                                ├── patterns
                                ├── assets
                                ├── parts
                                ├── styles
                                └── templates

/wp-content/themes/twentytwentythree

├── patterns

├── assets

├── parts

├── styles

└── templates

PHPファイルにパターンの記述

次に作成したPHPファイルに、以下のコードを記述します。

    //PHPファイル

    <?php
    /**
    * Title: First pattern
    * Slug: twentytwentythree/first_pattern
    * Categories: my-pattern-category
    */
    ?>

    <!-- wp:group -->
    <div class="wp-block-group">
    <!-- wp:heading {"fontSize":"large"} -->
    <h2 class="has-large-font-size"><span style="color:#ba0c49" class="has-inline-color">Hi everyone</span></h2>
    <!-- /wp:heading -->
    <!-- wp:paragraph {"backgroundColor":"black","textColor":"white"} -->
    <p class="has-white-color has-black-background-color has-text-color has-background">Powered by WordPress</p>
    <!-- /wp:paragraph -->
    </div><!-- /wp:group -->

//PHPファイル

<?php

/**

* Title: First pattern

* Slug: twentytwentythree/first_pattern

* Categories: my-pattern-category

<h2 class="has-large-font-size"><span style="color:#ba0c49" class="has-inline-color">Hi everyone</span></h2>

<p class="has-white-color has-black-background-color has-text-color has-background">Powered by WordPress</p>

</div>

HTMLは前章と同じですので、PHPのコードを説明します。

【必須】Title：パターンの名前で、ユーザーに表示されます。
【必須】Slug：パターンを取得する際に利用します。
Categories：前章で登録したカテゴリー名を登録してください。登録しない場合は未分類になります。

※そして最も重要なポイントとして、PHPはコメントアウトしてください。下記のエラーの原因になります。

以上がpatternsフォルダを利用した非同期パターンの作成になります。お試しでパターンを作成するのであれば、functions.phpを編集しない点でこちらがおすすめです。

まとめ

本記事ではfunctions.phpとpatternsフォルダを利用して非同期パターンを作成しました。どちらもコードを扱うため難易度は高いですが、その分アレンジの幅が広いです。WordPressで制作する際には、ぜひ活用してみてください。

参考記事

register_block_pattern_category
register_block_pattern
functions.php
function_exists
add_action
__()
patterns-file

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPressでのサイト制作やリニューアルを検討する時、以下のようなお悩みはありませんか？

WordPressに詳しい制作会社に依頼したいが、どこがいいかわからない…
セキュリティ対策をしっかりしたいが、社内にノウハウがないのでプロに任せたい…
WordPressに最適なサーバーの選定や構築から依頼したい…
SEO対策や高速化も考慮したサイト構築を行なってほしい…
制作後の保守・運用についてもサポートしてほしい…
今のサイトを簡単に運用できるようにしてほしい…

「wp.make」は、WordPressのプロフェッショナル集団によるWordPressサイト制作・カスタマイズサービスです。
サイトの制作だけでなく、WordPressに最適なサーバーの選定や構築といったインフラ面の支援から、SEO対策や表示スピードの高速化、高度なセキュリティ対策や制作後の保守・運用サポートまで、WordPressに関わることならあらゆるお悩みを解消いたします。

既存のお客さまからも
「コミュニケーションが取りやすく、クオリティが高い」
「WordPressのプロとして信頼感がある」
と大変ご好評をいただいています。

WordPressサイトの制作・カスタマイズをご検討されているなら、ぜひ以下からお気軽にご相談ください。

>> wp.makeに無料相談する

WordPress開発・カスタマイズなら『wp.make』

全案件WordPressのみ！
株式会社e2eの『wp.make』はWordPress専門のWeb制作サービスです。

WordPress案件だけを扱っているから、技術・ノウハウ・対応力が圧倒的！

【WordPressサイト制作でよくあるお悩み】
・運用シーンが想定されておらず、更新しづらかった…
・打ち合わせで専門用語が多くてわかりづらい…
・制作後の保守には対応してくれなかった…

こんな事態になる前に、ぜひ一度、ご相談ください！
WordPressサイトを作るなら、一番WordPressに詳しいところへ！

もっと詳しく

WordPressの非同期パターン作成方法を解説！functions.phpとpatternsフォルダでの宣言

株式会社e2e wp.geek編集部

はじめに

register_block_pattern

カテゴリーの作成

function_exists

register_block_pattern_category

__()

add_action

非同期パターンの作成

register_block_pattern

参考画像

patternsフォルダ

patternsフォルダ下にPHPファイルの作成

PHPファイルにパターンの記述

まとめ

参考記事

WordPressサイト制作・カスタマイズなら「wp.make」にお任せ！

WordPress開発・カスタマイズなら 『wp.make』

WordPress開発・カスタマイズなら『wp.make』