LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Am_nine

【初心者部】WordPressテーマのフルサイト編集 ( 3 ) ブロックパターンを登録する方法の紹介

Last updated at Posted at 2025-09-23

概要

以下のチュートリアル＞ [ 第3章 テンプレート、パーツ、パターン ]
をおこなった記録。(※ チュートリアルの不備が多発したため、途中で中断 )

前の記事:

環境

wordpress-develop ( Docker コンテナ の WordPress 環境 ) を使用。

.bash
docker ps -a
CONTAINER ID   IMAGE                                                                          COMMAND                  CREATED        STATUS                    PORTS                                     NAMES
d844c2f7de74   vsc-src-ee47b25aac09ed2997b68384d2745e464f536bafa1aac67d1b823b83b7420469-uid   "/bin/sh -c 'echo Co…"   23 hours ago   Up 9 minutes                                                        brave_chaum
b4c47afb9392   nginx:alpine                                                                   "/docker-entrypoint.…"   4 days ago     Up 3 hours                0.0.0.0:8889->80/tcp                      wordpress-develop-wordpress-develop-1
673565aa0f6f   wordpressdevelop/cli:latest                                                    "/entrypoint.sh slee…"   4 days ago     Up 3 hours                9000/tcp                                  wordpress-develop-cli-1
401fdd352ccf   mysql:8.4                                                                      "docker-entrypoint.s…"   4 days ago     Up 3 hours (healthy)      33060/tcp, 0.0.0.0:64663->3306/tcp        wordpress-develop-mysql-1
4afec5543cb5   wordpressdevelop/php:latest                                                    "/entrypoint.sh /bin…"   4 days ago     Up 3 hours                9000/tcp                                  wordpress-develop-php-1

# PHP 8.2
docker exec -it wordpress-develop-php-1 php -v
PHP 8.2.29 (cli) (built: Aug  4 2025 20:53:17) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.2.29, Copyright (c) Zend Technologies
    with Zend OPcache v8.2.29, Copyright (c), by Zend Technologies

1. ブロックパターン

What is a block pattern?

A block pattern is a group of blocks that you combine to create reusable layout elements and page sections. Technically, patterns use the markup of individual blocks. This markup includes the HTML comment with the block attributes and the block content itself, such as text and links to images.

ブロックパターンとは

ブロックパターンはブロックのグループで、それを組み合わせると、再利用可能なレイアウトの要素とページのセクションを作成できます。技術的にはパターンは各ブロックのマークアップです。このマークアップにはブロック属性を持った HTMLのコメントと、テキストや画像へのリンクといったブロックそれ自体が含まれています。

How do theme developers and designers benefit from block patterns?

By creating your own pattern library, you can create time-saving layouts that look and feel unique with only minor changes.

テーマ開発者とデザイナーにとってブロックパターンにどんな利点がありますか？

自分自身のパターンライブラリを作成することによって、小さな変更を加えるだけで、ユニークな見た目と印象のレイアウトを手早く作成できます。

1-1 ユーザー作成のパターン

ブロックパターンの作成
サイトエディター
Appearance > Editor > Patterns

Click [Add pattern] Button ( At the right top corner)

WordPress 6.3では、サイトエディター にパターン用の新しいインターフェースが追加されました。このインターフェースはブロックテーマでのみ利用可能です。

この投稿シリーズでは、Create Theme Block というプラグインで作成したブロックテーマを使用しています。

まだ何もパターンを作成していない状況では以下のスクショのようになります。

スクリーンショット 2025-09-21 124824.png

右上の [Add pattern] ボタンをクリックし、新しいパターンを作成 します。

スクリーンショット 2025-09-21 125457.png

Name: test

Click [Add] Button
( an the right buttom corner of the "Add Pattern" window )

パターン名を入力し、[Add] ボタンを押すと、以下のようになります。

スクリーンショット 2025-09-21 125525.png

ブロック（例えば段落）を作成し、[Save] をクリックしてブロックパターンを作成 します。

スクリーンショット 2025-09-21 130315.png

作成したブロックパターンの確認

You can choose between different pattern categories in the Site Editor sidebar.
The sidebar lists all user-created patterns under the heading “My patterns”.

サイトエディターのサイドバーでは、様々なパターンのカテゴリーから選択できます。サイドバーには、"My patterns" という見出しの下に、ユーザーが作成したすべてのパターンが一覧表示されます。

チュートリアルの説明通り、先ほど作成したパターンをサイトエディターから確認できます :

Appearance > Editor >
Patterns ＞ "My patterns"

スクリーンショット 2025-09-21 130632.png

ただし、以下のように書いてあります。

You can edit, copy, and delete user-created patterns. But you can not edit patterns from themes and plugins directly, because they are not saved in the WordPress database.

ユーザーが作成したパターンは編集、コピー、削除できます。ただし、テーマやプラグインのパターンはWordPressデータベースに保存されていないため、直接編集することはできません

要するに、テーマやプラグインのパターンはデータベースに保存されません。
(それらを利用する場合は、まず複製しなければいけません。)

1-2 パターンエクスプローラー

パターンエクスプローラーとは

パターンエクスプローラーでは、テーマ、プラグイン、WordPressコアで提供されているパターンや、WordPress.orgパターンディレクトリの注目アイテムを検索できます。

ただし:

I want to mention the pattern explorer because it is important to know that it is not possible to edit, create, or delete block patterns from this screen.

パターンエクスプローラーについて説明するのは、この画面からブロックパターンを編集、作成、または削除することはできないことを知っておくことが重要だからです。

Click "+" icon at the top left corner

スクリーンショット 2025-09-22 094631.png

At the bottom of the left side bar, click "Explorer all pattern"

スクリーンショット 2025-09-22 094716.png

スクリーンショット 2025-09-22 094947.png

ちなみに 左サイドバーの All と My pattern には自分が作成し、編集可能なパターンが表示されます。

About, ...etc. には既成のパターンが表示されます。

1-3 ブロックパターンの登録

1-2 の文脈から、「じゃあ自分で作ったパターンをパターンエクスプローラーにどうやって上げんの？」っていう話の流れで、このセクションは見ていこうと思います。

  • きっと、テーマ及びプラグイン開発者が、自分が作ったブロックパターンをパターンエクスプローラーに上げる方法の話では?
    (GitHubのローカルリポジトリにプッシュするイメージ？)

ただし、チュートリアルにもありますが、wp_block 投稿タイプを使わずに、 (同期パターンではない) ブロックパターンを登録します。

追記:
なんでブロックパターンをパターンエクスプローラーにあげるというステップがあるのか、という素朴な疑問について。

以下、公式より

Why a plugin?

While it is not a requirement to develop a block as part of a plugin, it’s generally the recommended approach.
One of the main reasons for this is that custom blocks are not allowed in themes that are submitted to the WordPress.org theme directory.
However, if you are developing a theme for your own use, or for a client, you can include custom blocks in your theme, the difference is that you register the blocks in a different way.
Ultimately though the block development experience and tooling is designed to work best with plugins

長文なので太字を含む段落だけ訳すと、以下のようになります:

(ブロックをプラグインの一部として作成する) 主な理由の一つは、Wordpress.org のテーマディレクトリに送信されていないテーマではカスタムブロックが許可されていないためです。

太字の次の段落を読めばわかりますが、プラグインとしてカスタムブロック ( たとえば Ninja Forms のフォームのブロック)を使用する には、functions.php 等でその ブロックを登録する 必要があるということです。

プラグインとテーマがパターンを追加する方法:
① functions.php

  • register_block_pattern() ( PHP 関数 )
  • init フック

② patternsフォルダ

  • テーマは、patternsというフォルダ内にPHPファイルを配置することでもパターンを登録できる。

Ninja Formsが提供する連絡フォームを使用してスタイルを設定する
【① functions.php でのやり方】

wp-content/themes/lesson-one/functions.php
function test_block_pattern() {

  // プラグインがアクティブかどうかを確認
  if ( function_exists( 'ninja_forms' ) ) {

    register_block_pattern( 
      'test/contact-form',
      array(
		'title'      => 'Test block pattern registeration', // The visible name in the editor
		'content'    => '<!-- wp:paragraph -->
<p>This is only a testing pattern with a paragraph.</p>
<!-- /wp:paragraph -->', // The block markup
	  )
    );
  }
}
 
add_action( 'init', 'test_block_pattern' );

上記の functions.php はどこに置けばいいかって話ですが、

  • wp-includes/functions.php
  • wp-content/themes/themename/functions.php
    の2つある。
vscode ➜ /workspaces/wordpress-develop/src (trunk) $ find ./ -path "*functions.php*"
./wp-admin/upgrade-functions.php
./wp-admin/admin-functions.php
./wp-includes/rss-functions.php
./wp-includes/ms-functions.php
./wp-includes/registration-functions.php
./wp-includes/functions.php
./wp-content/themes/twentyten/functions.php
./wp-content/themes/twentyeleven/functions.php
./wp-content/themes/twentytwentytwo/functions.php
./wp-content/themes/twentyseventeen/inc/template-functions.php
./wp-content/themes/twentyseventeen/inc/icon-functions.php
./wp-content/themes/twentyseventeen/functions.php
./wp-content/themes/twentysixteen/functions.php
......

テーマハンドブックという公式の説明には、「テーマの」 functions.php で アクションを追加 ( add_action() )する方法を書いてあるので、wp-content/themes/themename/functions.php にfunctions.php を作成します。

パターンにブロックマークアップを追加する方法

ブロックエディターからパターンのマークアップをコピーします。パターンの外側のブロックを選択し、ブロックツールバーから「コピー」 を選択します。
次に、マークアップを ( functions.phpのegister_block_pattern() に ) content パラメータの値として貼り付けます

サイトエディタ
Dashboard の Appearance ＞ Editor
Pattern ＞ ブロックを選択して "Copy styles"

スクリーンショット 2025-09-22 110736.png

コピーされたコード:

<!-- wp:paragraph -->
<p>This is only a testing pattern with a paragraph.</p>
<!-- /wp:paragraph -->

これを register_block_pattern() の content に上のコードを貼り付けます。

Ninja Forms をインストールする

パターンに追加する連絡フォームのプラグインをインストールします。

Plugins ＞Add Plugins
Search "Ninja Forms" > Install Now > Activate

スクリーンショット 2025-09-22 114521.png

Ninja Forms の HTML を取得

register_block_pattern() に追加するパターンとして、ninja form の HTML を貼り付けます。

register_block_pattern( 
      'test/contact-form',
      array(
		'title'      => 'Test block pattern registeration', // The visible name in the editor
		'content'    => '<!-- wp:paragraph -->
<p>This is only a testing pattern with a paragraph.</p>
<!-- /wp:paragraph -->
+ <!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":60}}} -->
+ <h2 class="wp-block-heading has-text-align-center" style="font-size:60px">' . __( 'Book an appointment', 'text-domain' ) . '</h2><!-- /wp:heading -->
+ <!-- wp:ninja-forms/form {"formID":1,"formName":"Contact Me ( ID: 1 )"} -->
+ <div class="wp-block-ninja-forms-form">[ninja_forms id=1]</div>
+ <!-- /wp:ninja-forms/form -->', // The block markup
	  )
    );

Patterns ＞ All patterns

スクリーンショット 2025-09-22 115827.png

なんか、パターンエクスプローラ上のサムネイルを見た感じ、Ninja Forms が正しく認識されていなさそうですが。

あとで治そう ( Ninja Forms の公式のマニュアルみずにチュートリアルからコピっただけなので )

→ Dashboard ＞ Ninja Forms
Add New

スクリーンショット 2025-09-22 122349.png

Blank Form

スクリーンショット 2025-09-22 122549.png

スクリーンショット 2025-09-22 122839.png

右側のパネルから、フォームに入れたい要素を選択。(名前、苗字、段落テキスト)

Submitボタンは、選択しなくても自動で作成されました。

スクリーンショット 2025-09-22 123115.png

Paragraph Text の右上歯車アイコン ＞
Label: Message

右上の "→" アイコンをクリックし、作成。

スクリーンショット 2025-09-22 123419.png

右上の PUBLISH

スクリーンショット 2025-09-22 123711.png

Form name を入力し、PUBLISH

スクリーンショット 2025-09-22 123958.png

ショートコード ([ninja_form id=2] ) をコピーし、registerr_block_pattern() の contentに貼り付けます。

スクリーンショット 2025-09-22 124145.png

register_block_pattern( 
      'test/contact-form',
      array(
		'title'      => 'Test block pattern registeration', // The visible name in the editor
		'content'    => '<!-- wp:paragraph -->
<p>This is only a testing pattern with a paragraph.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":60}}} -->
<h2 class="wp-block-heading has-text-align-center" style="font-size:60px">' . __( 'Book an appointment', 'text-domain' ) . '</h2><!-- /wp:heading -->
- <!-- wp:ninja-forms/form {"formID":1,"formName":"Contact Me ( ID: 1 )"} -->
- <div class="wp-block-ninja-forms-form">[ninja_forms id=1]</div>
- <!-- /wp:ninja-forms/form -->', // The block markup
+ <!-- wp:ninja-forms/form {"formID":2,"formName":"Book an appoinment ( ID: 2 )"} -->
+ <div class="wp-block-ninja-forms-form">[ninja_form id=2]</div>
+ <!-- /wp:ninja-forms/form -->'
	  )
    );

スクリーンショット 2025-09-22 125114.png

しかし、サムネを拡大してみると。。。

スクリーンショット 2025-09-22 125320.png

"Block contains unexpected or invalid content." ( 「ブロックに予期しないあるいは無効な内容が含まれています。」 ) と書いてあります。なんでやねん。

パターンエクスプローラ　のところで書きましたが、 "All patterns" に登録した パターンは、編集できません。なので、編集するには複製 ( Duplicate ) します。

スクリーンショット 2025-09-22 125619.png

複製された方を開きます。

スクリーンショット 2025-09-22 125854.png

"Attempt recovery" を押してみましたが、フォームが正しく表示されません。

スクリーンショット 2025-09-22 130017.png

エディター ( Appearance ＞ Editor ＞Patterns ) 上で Ninja Forms のフォームを選択し、ブロックツールバーから "Copy" してから content にHTMLを貼り付けてみましたが、再度エディタを読み込んでも変わりませんでした。

スクリーンショット 2025-09-23 100603.png

スクリーンショット 2025-09-23 100827.png

チュートリアル通りでうまくいっていないので、スルー。

【② patternsフォルダでのやり方】

functions.php でやったのと同じことを別の方法でやります。

テーマ（プラグインは除く）は、特定のファイルヘッダーを持つPHPファイルをpatternsというフォルダに追加することでパターンを登録できます。
テーマフォルダのルートに "patterns" という新しいフォルダを作成します。
追加したいパターンごとにPHPファイルを1つ作成し、patternsフォルダに配置します。

テーマフォルダの下にpattern フォルダを作ります。

スクリーンショット 2025-09-23 104302.png

patterns フォルダの中に以下の footer-links.php を作成します。コードはチュートリアルまんまです。

wp-content/themes/lesson-one/patterns/footer-links.php
<?php
/**
 * Title: Footer links -The visible name in the pattern inserter
 * Slug: theme-slug/footer-links
 * Categories: text, site-footer 
 * Description: A description of the pattern
 * Keywords: footer, links, copyright, keywords used in the search
 * Block Types: core/navigation, core/site-title, core/social-links
 */
?>

<!-- wp:group {"layout":{"type":"flex","allowOrientation":false,"justifyContent":"space-between"}} -->
<div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex","allowOrientation":false}} -->
<div class="wp-block-group"><!-- wp:paragraph {"fontSize":"extra-small"} -->
<p class="has-extra-small-font-size">
<?php echo esc_html__( 'Copyright', 'text-domain' ) . ' ' . date_i18n( _x( 'Y', 'copyright date format', 'text-domain' ) ); ?></p><!-- /wp:paragraph -->
<!-- wp:site-title {"level":0, "fontSize":"extra-small"} /-->
<!-- wp:social-links {"className":"is-style-logos-only"} -->
<ul class="wp-block-social-links has-icon-color is-style-logos-only"><!-- wp:social-link {"url":"https://wordpress.org","service":"wordpress"} /--></ul>
<!-- /wp:social-links -->
</div><!-- /wp:group -->
</div><!-- /wp:group -->

うーん。コードを書いただけでは、パターン ( Editor＞ Patterns ) の UI 上に反映されていませんね。チュートリアルにも書いてくれていなそうだし。

<!-- 追記1: -->

  • phpファイルの上部コメント内、Categories ( text, site-footer ) が、Patterns UI 左側にリストされている、登録済みパターンのカテゴリーに対応しているみたいです。
    よく探せば、上のphpファイルで追加したパターンが登録されていそうです。

  • 参考:下記リンクの例では "featured" ( おすすめ ) にパターンが登録されています。

<!-- 追記2: -->

  • 上の公式のリンクに書かれているデフォルトのカテゴリーの中に、text, site-footer はないので、デフォルトで存在する featured にカテゴライズした方が確実だと思います。
    デフォルトにないなら、まずカテゴリーを作成する必要があるのが普通の流れですが、チュートリアルではそのへんの説明が抜けています。

<!-- 追記3: -->

  • 確認したら パターンエクスプローラー( Patterns explorer/ Site editor > Patterns > + icon> "Explore all patterns" ) で text のカテゴリに表示されていました。

    スクリーンショット 2025-09-24 101941.png

  • また、サイトエディタ ( Dashboard> Appearance> Editor> Patterns ) には All patterns に表示されていました。

    スクリーンショット 2025-09-24 101645.png

<!-- 追記ここまで: -->

3章は、なんか雑ですね。チュートリアルの執筆者が変わったのかな？

このチュートリアル、中断します。

っつーわけで、3章は見切りをつけて続きはやらないことにします。ネットをあさればチュートリアルはやまほどあるので、やる価値のないチュートリアルに割くほど人生長くないんでね。

ちなみに続きのセクション内容：

  • ブロックパターンのカテゴリ
    • ユーザーが作成したブロックパターンのカテゴリ
  • ブロックパターンにCSSクラスを追加する方法
  • ブロックパターンを削除する方法
    • パターンディレクトリからブロックパターンが読み込まれないようにする方法
    • ブロックパターンカテゴリの削除


  • パターンディレクトリからパターンを組み込む方法
  • 新しいページを作成するときにパターン選択を表示する方法
  • 新しいテンプレートを作成するときにパターン選択を表示する方法

  • インサータからブロックパターンを隠す方法

  • ブロックパターン内でテンプレートパーツを使用する方法
  • ソースパラメータを使用して、パターンがテーマまたはプラグインからのものであるかどうかを示す方法

  • ブロックパターンのトラブルシューティング
  • ブロック パターンにはデフォルトのコンテンツを含める必要がありますか?

ブロックパターンを HTML で満足に作成できないのに、CSS を設定したり、ブロックテンプレートにパターンを組み込んだり、 逆に ブロックパターンにテンプレートを組み込んだりする 方法を学んでも意味が半減しますね。やはり中止するべきでしょう。他のチュートリアルをやろうと思います。

他のチュートリアルをやった記録↓

  • ブロックテンプレートにパターンを配置する方法について

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?