WordPress6.8でのブロックテーマ自作手順解説

Posted at 2025-11-02

当記事ではWordPressのブロックテーマを自作する手順や注意点をまとめています。

記事執筆にあたって用いた環境は以下のとおりです。Windows上にUbuntuを立てて、そこにWordPressをインストールしました。

ホストOS：Windows 11
ハイパーバイザー：VMware Workstation
ゲストOS：Ubuntu 24.04.1 LTS
Webサーバー：Apache HTTP Server 2.4.58-1ubuntu8.6
DBサーバー：MySQL 8.0
WordPress：バージョン6.8.x

はじめに

当記事を読み進めるにあたり、以下点に注意してください。

Ubuntu環境を想定

冒頭で述べたようにUbuntu環境を想定した内容になっています。他Linux環境であれば当記事の内容を流用できるかもしれませんが、Windows環境だと独自対応が必要かもしれません。

商用環境では使えないかも

プライベートな環境で操作した経験をもとに書いていますので、商用環境でこの手順を用いてブロックテーマを作るのは問題があるかもしれません。特にセキュリティ周りと作業の効率性という2点で問題のある内容かもしれませんのでご注意ください。

全角文字と空白文字は危険

ブロックテーマを作るうえではさまざまなファイルを作っていきます。このとき、それらファイルなどの名前に全角文字を使うとWordPress側で正しく認識できないことがあります。

たとえば、作りたいブロックテーマの名前が「練習1号」のばあい、ブロックテーマを構成するファイルを格納するディレクトリ名も 練習1号 にするとエラーが発生します。半角文字のみを用いて rensyu-ichi-go とか prcatice-1 にしてください。

あと、半角空白・全角空白もエラーを起こす原因になりますので使用しないでください。

この問題はWordPressサーバーに接続して直接シェルで操作をするときのみならず、WebブラウザーでWordPressを操作してファイルなどを作るときにも発生します。サーバーを直接触ってエラーが起きるのはともかく、WordPressのフロントエンドUIを操作してこの問題が発生することには納得できないのですが、WordPress 6.8時点では全角文字などへの対応ができていないようなので注意してください。

パーミッション問題

WordPress関連ファイルを新たに作るときはパーミッションを他ファイルと合わせてください。

私の環境だとWordPress関連ファイルはユーザー・グループともに www-data で統一しています。

手順1：テーマを構成する最低限のファイルを用意する

まずはブロックテーマを有効化するところまでの手順を解説します。見本として「練習1号」というブロックテーマを作っていきます。

テーマディレクトリを作成

ブロックテーマを構成する各種ファイルを配置するためのディレクトリ「テーマディレクトリ」を作成します。

テーマディレクトリはディレクトリ [WordPressインストールディレクトリ]/wp-content/themes/ の直下に作ります。「WordPressのインストールディレクトリがどこにあるかわからない」という人は以下コマンドなどで調べてください。私の環境では /srv/www/wordpress/ でした。

sudo find / -name "wp-content" -type d

themes/ はインストール直後だと以下のような構成になっているはずです。

■ themes/
├■ twentytwentyfive/
├■ twentytwentyfour/
├■ twentytwentythree/
└■ index.php

私の環境ではWordPressをインストールした時点で公式テーマ「Twenty Twenty-Five」を始めとする3つのテーマも一緒にイントールされましたので、それら3テーマのテーマディレクトリが存在しています。

index.php については以下記事を参照してください。簡単に言うと「消しても大丈夫だけど、とりあえず残しておいたほうがよいファイル」です。

テーマディレクトリ名がそのままテーマ名になるわけではないのでディレクトリ名はなんでもよいです。とはいえ、わざわざテーマ名とまったく異なる名前にする利点はないので、可能なかぎりテーマ名に合わせることを推奨します。

「練習1号」のテーマディレクトリ名は practice-1 とします。冒頭で述べたようにディレクトリ名・ファイル名に全角文字・空白文字を使わないのと、WordPressの他ファイルとユーザー・グループを合わせることを忘れないようにしてください。

cd /srv/www/wordpress/wp-content/themes/

sudo -u www-data mkdir ./practice-1

`style.css` を作る

テンプレートディレクトリを作成できましたので、これでテーマとして認識されるでしょうか。

管理ページを確認すると、テーマ一覧ページの末端に「壊れているテーマ」として practice-1 の名前が表示されています。「スタイルシートが見つかりません」とのことです。

ここでいうスタイルシートとは style.css のことです。 style.css はテーマに関わるスタイルを記述するファイルであるとともに、Node.jsでいうところの package.json のような設定ファイルでもあります。テーマを作るばあいは必ず作成する必要がありますし、外部からテーマをインストールしたばあいも必ず含まれています。

style.css はテーマディレクトリ直下に作成します。

cd /srv/www/wordpress/wp-content/themes/practice-1/

sudo -u www-data touch ./style.css

`index.html` を作る

あらためて管理ページを見てみます。「テンプレート」が不足しているようです。

ご存じかとは思いますが、WordPressには「テンプレート階層」という仕組みがあります。アクセスされたページに対応するテンプレートを探し、そのテンプレートに各ページ固有の文章・画像・映像などを配置してユーザーへレスポンスするという仕組みです。ご存じない方は以下ページを一読ください。WordPressを使っていくうえでは非常に重要な概念です。

それらテンプレートのうち、最も汎用的なテンプレートである index.php か index.html は、実際に使うかはさておき、必ず存在していなければなりません。あと、ブロックテーマにおいては原則としてテンプレートは.htmlファイルである必要があります。

テーマディレクトリ直下にテンプレートディレクトリ templates を作成し、そのなかに index.html を作成します。

cd /srv/www/wordpress/wp-content/themes/practice-1/

sudo -u www-data mkdir ./templates

cd ./templates

sudo -u www-data touch ./index.html

こうして管理ページに戻るとエラーが消え、ブロックテーマ「practice-1」が認識されています。テーマの詳細画面にもエラーなどは出ていません。

有効にしてみましょう。特にエラーなどは出ないですね。

公開ページも見てみましたがテンプレートの内容が空であるためか、以下のような表示が出ています。ただ、それはそれとしてエラーなども出ていないのでテーマを認識されることには成功したと言えるでしょう。

`style.css` にテーマ情報を記述する

前述のとおり style.css は単にテーマのスタイルを記述するだけのファイルではなく、テーマに関するメタ的な情報を記述する設定ファイルでもあります。

style.css の先頭にコメントを配置し、そのなかにWordPressで決められた形式に従ってテーマ情報を記述してください。「練習1号」では以下のようにしました。

style.ccs

/*
Theme Name: 練習1号
Author: tomomoss
Description: テーマの仕様理解のために作成した練習用テーマ1号です。
Version: 0.1
Requires at least: 6.8.2
Tested up to: 6.8.2
Requires PHP: 8.0
License: WTFPL
License URI: https://www.wtfpl.net/
Text Domain: practice-1
*/

管理ページを見てみると、テーマ名がディレクトリ名である「pracice-1」から style.css のヘッダー項目 Theme Name に記載した「練習1号」へと変わっています。また、テーマ詳細画面にもいろいろな情報が表示されています。

ヘッダーコメントの書き方については以下ページを参照ください。

サムネイルを配置

ほとんどのテーマにはサムネイル画像が用意されています。サムネイル画像がなくても動作に支障はありませんが、せっかくのでサムネイル画像を用意します。

サムネイル画像のサイズは幅1,200px・縦900px。ファイル名は screenshot.png にしてテーマディレクトリ直下に配置してください。

私のばあいはWindows環境でサムネイル画像ファイルを作成し、WinSCPでWordPressサーバーへとアップロードしましたが、管理ページを見てみるとサムネイル画像が表示されています。

まとめ

ここまでの作業によってテーマディレクトリのなかは以下のようになっているはずです。これがテーマディレクトリとしての最小構築と言えます。

■ practice-1/
├■ templates/
│└■ index.html
├■ screenshot.png
└■ style.css

手順2：ブロックを自作する

ブロックテーマの有効化ができましたので、次はブロックを自作する手順について解説します。

解説にあたって前提知識を共有したいのですが、これから解説するのは厳密には「ブロックタイプ」を作る手順です。「ブロック」を作る手順ではありません。ブロックエディターの左サイドメニューに表示される「段落」「見出し」などがブロックタイプ。それをブロックエディター上に配置したものが「ブロック」です。

オブジェクト指向プログラミングで例えるならば、ブロックタイプは「クラス」に相当し、ブロックは「インスタンス」に相当します。よって、厳密にいえば「ブロックタイプを自作する」は適切な表現ですが「ブロックを自作する」は適切な表現とは言えません。ただ、WordPress公式においても、そのあたりが曖昧……というかブロックで通している場面が多いので当記事でも基本的にはブロックと表記します。

あと、先ほどからブロックを「自作」と言ってますが、WordPressにおいてはブロックを「登録」するというのが表現として正しいようです。以後、できるかぎり登録という表現を用いるようにします。

ブロックを登録する方法はいくつかありますが、今回はファイル block.json を用いて登録する方法を解説します。 block.json はブロックタイプの設定ファイルであり、1つのブロックタイプに対して1つの block.json が必要です。

block.json を用いたブロック登録方法はWordPress公式からも推奨されていますので、可能なかぎりこの方法をとるようにしてください。

基本的なファイル・ディレクトリを準備

まずはブロックに関するファイルをまとめるためのディレクトリ「ブロックスディレクトリ」を作ります。テーマディレクトリ直下にディレクトリ blocks を作ってください。ちなみに、ディレクトリ名は blocks 以外でもよいですし、そもそもディレクトリ自体不要だったりしますがWordPressのデファクトスタンダードにならって作ることにします。

sudo -u www-data mkdir ./blocks

ブロック自作手順解説のために、見本としてブロック「挨拶」を作ることにします。

ブロックスディレクトリ直下に「挨拶」用のブロックディレクトリ greeting-block を作成します。このディレクトリが「挨拶」に関する各種ファイルをまとめておくディレクトリです。そして greeting-block の直下に block.json を配置します。

sudo -u www-data mkdir ./blocks/greeting-block

sudo -u www-data touch ./blocks/greeting-block/block.json

block.json は以下のようにします。これで完成ではなく後からいろいろ追記していきますが、いったん基本となるプロパティのみ記述しています。

block.json

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "description": "ブロックタイプ仕様理解のためのブロックタイプです。",
  "name": "practice-1/greeting-block",
  "title": "挨拶"
}

各プロパティの意味は以下のとおりです。

$schema
- JSON Schemaファイルのパスを指定するメタ的なプロパティ
  - https://json-schema.org/
apiVersion
- 必須項目
- block.json の仕様・記法のバージョン
  - 2025年10月18日時点ではバージョン3が最新
description
- ブロックの概要
- 必須ではないが書いておくのが丁寧
name
- 必須項目
- ブロックの識別子
- 基本的には テーマディレクトリ名/ブロックディレクトリ名 にする
title
- 必須項目
- ブロックエディター上に表示されるブロックの名前

ブロックを実装

「挨拶」を実装していきます。ブロックはHTML・CSS・JavaScriptで構成されますが、エントリポイントは.jsファイルとなり、そのなかでブロックを構成するHTML・CSS・JavaScriptを記述します。これはちょうどReactやVue.jsにおける「コンポーネント」とほぼ同じ使い勝手ですので、フロントエンドエンジニアの方にとっては馴染みのある作り方かもしれません。

ブロックディレクトリ直下にファイル index.js を作成します。ファイル名はなんでもいいですが、いったん index.js にしておきます。

index.js

(function () {
  wp.blocks.registerBlockType("practice-1/greeting-block", {
    edit: function () {
      return wp.element.createElement("p", {}, [
        "こんにちは！",
        wp.element.createElement(
          "span",
          { style: { color: "red" } },
          "（ブロックエディター用）"
        )
      ]);
    },
    save: function () {
      return wp.element.createElement("p", {}, "こんにちは！");
    }
  });
})();

注意点やソースコードの概要は以下のとおりです。

処理全体を即時実行関数で囲むこと
- WordPressはさまざまな.jsファイルで構成されているので必須ではありませんが強く推奨
WordPressに関わる関数などはグローバル変数 wp に公開される
関数 wp.blocks.registerBlockType() でブロックタイプを登録する
- テーマやプラグインのように管理ページから「有効化」すればブロックタイプが永続的に登録されるわけではないのが特徴
  - 管理ページからブロックタイプを登録するようにしたいのであれば「ブロックタイプを登録するプラグイン」を作って、そのプラグインを有効化する……という仕組みがオススメであり、WordPressの世界では一般的らしい
- 第1引数にはブロックタイプの識別子を指定
- 第2引数にはブロックタイプの詳細を指定
  - プロパティ edit にはブロックエディター上での挙動を定義
  - プロパティ save には公開ページ上での挙動を定義
関数 wp.element.createElement() でHTML要素を定義
- https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/#createelement
- 第1引数にHTMLタグ
- 第2引数にスタイルなどのオプション情報
- 第3引数に子要素
  - 文字列を指定したばあいはテキストノードが入る
  - wp.element.createElement() の戻り値であればHTMLノードが入る
  - 配列にすることで複数の子要素を入れることができる

あと、 index.js が「挨拶」の実装であることを block.json に追記します。プロパティ editorScript を追加し、そこに file:./index.js を指定してください。

block.json

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "description": "ブロックタイプ仕様理解のためのブロックタイプです。",
  "editorScript": "file:./index.js",
  "name": "practice-1/greeting-block",
  "title": "挨拶"
}

editorScript はブロックの実装が書かれたファイルパスなどを指定するプロパティです。ファイル以外も指定することができるのですが、今回のようにファイルを指定するばあいはパスの頭に file: を付ける必要があります。

`index.js` を呼び出す処理を実装

ブロックの実装内容が記述された index.js は自動的に読み込まれることはありませんので functions.php から呼び出すようにします。 functions.php とは各テーマディレクトリ直下に置くことができるファイルです。有効化されているテーマのテーマディレクトリ直下に functions.php が置かれているばあい、管理ページ・公開ページにおいてページが読み込まれるたびに functions.php も読み込まれて処理が実行されます。

functions.php から index.js を呼び出すばあいはライフサイクル init のタイミングで呼び出すのが良いようです。そのために関数 add_action() で index.js を呼び出すライフサイクルフックを定義します。

functions.php

<?php

add_action("init", function () {
  register_block_type(__DIR__ . "/blocks/greeting-block");
});

「挨拶」が登録されます……と言いたいところですが、もう1つだけやってもらうことがあります。というのも、ここまでの作業だけではブロックエディターに「挨拶」が表示されないのです。

ブロックエディターを開き、Webブラウザーの開発者ツールを開いてコンソールを見ると Uncaught ReferenceError: wp is not defined というエラーが出ています。 index.js 内で参照されているWordPress関連の関数などは wp に定義されているという話をしましたが、その wp が定義されていないというのです。これはバグではなく、どうも wp が定義されるよりも前に index.js が実行されてしまうために発生するエラーのようです。

そのため各種処理の読み込み順を明示する必要があります。 index.js と同じ階層にファイル index.asset.php を作成してください。ファイル名は [ブロックの処理が記述された.jsファイルの拡張子を除いたファイル名].asset.php にしてください。たとえば、ブロックの処理が記述された.jsファイルの名前を block.js にしていたばあいは今回作る.phpファイルの名前は block.asset.php になります。

ファイルの内容は以下のようにします。こうすると index.js が読み込まれるよりも前に wp-blocks と wp-element という処理が読み込まれて wp に定義されるので index.js の処理が通ります。

index.asset.php

<?php

return [
  "dependencies" => [
    "wp-blocks",
    "wp-element"
  ]
];

ここまでできましたら、ブロックエディターを見てみましょう。左ペイン末尾に「挨拶」が表示されているはずです。

テンプレート内に追加すると以下のように表示されます。

保存して公開ページに行くと以下のように表示されます。

これでブロックの登録が完了です。

手順3：動的ブロックの作成

手順2で作ったブロックですが、正確には「静的ブロック」と言います。静的ブロックとはブロックエディターで保存した瞬間に静的なHTMLソースコードが生成され、それが公開ページを構成するDOMとして保存されるようなブロックを指します。これと対比されるのが「動的ブロック」なのですが、静的ブロック・動的ブロックの違いが判別しやすいように例を紹介します。

ここにページ読み込み時の時刻を表示するブロック「現在日時」があるとします。ソースコードとしては以下のようになるでしょうか（ざっと書いたので動作確認してません）。

index.js

(function () {
  wp.blocks.registerBlockType("practice-1/greeting-block", {
    edit: function () {
      return wp.element.createElement("p", {}, "※ページ読み込み時の現在日時");
    },
    save: function () {
      return wp.element.createElement("p", {}, new Date().toString());
    }
  });
})();

一見すると、ブロックエディター編集中は「※ページ読み込み時の現在日時」と表示され、公開ページではページを読み込むたびに new Date().toString() の値が入った <p> が表示されるように思われます。これを図に表すと以下のようになります。

■ ブロックエディターで「現在日時」ブロックをページに挿入
↓
■ ブロックエディターで「保存」を実行
↓
■ 「現在日時」ブロックのsaveプロパティの関数がWordPressに保存
↓
■ 「現在日時」ブロックが使われているページにリクエストが来る
↓
■ WordPressに保存されたsaveプロパティの関数が実行され、HTML要素が生成されてページに入ってレスポンスされる
↓
■ Webページにはページ読み込み時点の現在日時が表示される

しかしながら、実際にはそのような結果になりません。ブロックエディター編集中の挙動は問題ありませんが、公開ページに表示される日時は「ブロックエディターで保存したときの日時」が表示されます。その理由は save の関数が返すHTML要素・DOMは静的なマークアップとして保存されるからです。図に表すと以下のようになります。

■ ブロックエディターで「現在日時」ブロックをページに挿入
↓
■ ブロックエディターで「保存」を実行
↓
■ 「現在日時」ブロックのsaveプロパティの関数が実行され、HTMLのマークアップコードが生成されてWordPressに保存される
↓
■ 「現在日時」ブロックが使われているページにリクエストが来る
↓
■ WordPressに保存されたHTMLのマークアップコードがページに入ってレスポンスされる
↓
■ Webページにはブロックエディターで保存された時点の現在日時が表示される

今回のケースだと、ブロックエディター保存時に <p>Sun Oct 19 2025 15:40:57 GMT+0900 (日本標準時)</p> みたいなマークアップがWordPressに保存され、公開ページにはこのマークアップが返されるので想定どおりの挙動にならないというわけです。

`block.json` の `viewScript` で動的ブロックを作る

動的ブロックを作る方法を解説します。いくつかの方法があるようですが、私が調べたなかで最もコンパクトに作れる方法を紹介します。

この方法では block.json のプロパティ viewScript を使います。 viewScript は公開ページにおいて読み込ませて実行したいJavaScriptファイルなどを指定するプロパティです。ブロックを作るときに editorScript を使いましたが、そちらはブロックエディター上で動作するJavaScriptファイルなどを指定するプロパティということで似ていますが別物です。

まずはブロック「現在日時」用のブロックディレクトリを作成し、主要なファイルを作っていったり、先ほど作ったブロック「挨拶」からコピーしてきたりします。

sudo -u www-data mkdir ./blocks/now-block

sudo -u www-data touch ./blocks/now-block/block.json

sudo -u www-data touch ./blocks/now-block/index.js

sudo -u www-data touch ./blocks/now-block/set-now.js

sudo -u www-data cp ./blocks/greeting-block/index.asset.php ./blocks/now-block/

各ファイルは以下のように実装します。

block.json は「現在日時」に合わせて作るだけです。基本的には「挨拶」と同じであり、 viewScript が増えている点だけが異なります。

block.json

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "description": "ブロックタイプ仕様理解のためのブロックタイプです。",
  "editorScript": "file:./index.js",
  "name": "practice-1/now-block",
  "title": "現在日時",
  "viewScript": "file:./set-now.js"
}

index.js は以下のとおりです。フロントエンド側で現在日時を取得してブロックを構成するHTML要素に反映するためクラスを適用します。クラス名は何でもよいのですがWordPressクラス命名規則に従って wp-block-practice-1-now-block としました。

index.js

(function () {
  wp.blocks.registerBlockType("practice-1/now-block", {
    edit: function () {
      return wp.element.createElement(
        "p",
        { style: { color: "red" } },
        "${ ページ読み込み時点の現在日時が表示されます。 }"
      );
    },
    save: function () {
      return wp.element.createElement(
        "p",
        { className: "wp-block-practice-1-now-block" },
        "現在日時を読み込み中……"
      );
    }
  });
})();

set-now.js は見たとおりです。

set-now.js

(function () {
  document.addEventListener("DOMContentLoaded", function (event) {
    for (const nowBlock of document.querySelectorAll(".wp-block-practice-1-now-block")) {
      setInterval(function () {
        nowBlock.textContent = new Date().toLocaleString();
      }, 1000);
    }
  });
})();

あとは functions.php に「現在日時」を登録する index.js を呼び出す処理を追加して終わりです。

functions.php

<?php

add_action("init", function () {
  register_block_type(__DIR__ . "/blocks/greeting-block");
  register_block_type(__DIR__ . "/blocks/now-block");
});

動作確認

ブロックエディターに「現在日時」が表示されていますのでページに追加しました。

公開ページでも想定どおりに描画されていることを確認しました。スクリーンショットなので伝わりませんが1秒ごとに現在日時が更新されています。

手順4：プラグイン化する

ブロックはテーマを有効化して導入するのみならず、プラグインとして導入することもできます。プラグイン化する手順を解説します。

解説のために、手順3で作った「現在日時」ブロックをプラグイン化してみます。プラグインの名前は「現在日時ブロック」とします。

プラグインディレクトリを作成

プラグインは.phpファイルを中心とするいくつかのファイルで構成されます。まずは、それはファイルの格納するためのディレクトリ「プラグインディレクトリ」を作ります。

プラグインディレクトリは [WordPressインストールディレクトリ]/wp-content/plugins の直下に作ります。私の環境では /srv/www/wordpress/wp-content/plugins でした。

ディレクトリ名はプラグイン名を訳した now-block とします。

cd /srv/www/wordpress/wp-content/plugins

sudo -u www-data mkdir ./now-block

プラグインのエントリポイントとなる.phpファイルを作成

プラグインディレクトリ直下にエントリポイントとなる.phpファイルを作ります。ファイルの名前はなんでもよいですがWordPress界隈ではプラグインディレクトリと同じ名前にするのが慣習らしいので合わせます。

cd ./now-block

sudo -u www-data touch ./now-block.php

ここまでの作業ではプラグインとして認識されません。

プラグインとして認識されるためにはブロックテーマの style.css に記述したようなコメント「プラグインヘッダーコメント」を now-block.php に記述する必要があります。

最小限の記述は以下のとおりです。項目「Plugin Name」にプラグイン名を記述すれば管理ページからプラグインとして認識されます。

now-block.php

<?php

/*
 * Plugin Name: 現在日時ブロック
 */

有効化してエラーが出ないことを確認します。

有効化したタイミングで プラグインの有効化中に49文字の予期しない出力が生成されました。 “headers already sent” メッセージや RSS フィードの問題、その他の不具合に気づいた場合、このプラグインの停止または削除を試してください。 といったエラーが出たばあい、 now-block.php 先頭に <?php を付け忘れていたり、文字コードがUTF-8ではなかったりといった凡ミスの可能性があるので対応してください。

「有効日時」ブロック登録勝利を実装

プラグインの実装を開始します。

……と、その前に、ブロック登録処理が動作していることを確認するために、テーマを「練習1号」から「Twenty Twenty Five」に変更しておきます。以下スクリーンショットのとおり「現在日時」ブロックは存在していません。

加えて、テンプレートを空にしましたので公開ページもこのとおりです。

今度こそ実装を始めます。

まずは「現在日時」ブロックを構成するソースファイルをプラグインディレクトリ内に配置していきます。プラグインディレクトリ直下にディレクトリ block を作り、そのなかに手順3で作ったファイルを参考にファイルを配置していきます。

sudo -u www-data mkdir ./block

sudo -u www-data touch ./block/block.json

sudo -u www-data touch ./block/index.js

sudo -u www-data touch ./block/set-now.js

sudo -u www-data touch ./block/index.asset.php

block.json は基本的に同じですが項目 name はプラグイン名に合わせて少し変えてあります。

block.json

{
  "$schema": "https://schemas.wp.org/trunk/block.json",
  "apiVersion": 3,
  "description": "ブロックタイプ仕様理解のためのブロックタイプです。",
  "editorScript": "file:./index.js",
  "name": "now-block/now-block",
  "title": "現在日時",
  "viewScript": "file:./set-now.js"
}

index.js も基本的に同じですが wp.blocks.registerBlockType() の第1引数や、プロパティ save から返す <p> 要素に付けるクラス名などをプラグイン名に合わせて修正してあります。

index.js

(function () {
  wp.blocks.registerBlockType("now-block/now-block", {
    edit: function () {
      return wp.element.createElement(
        "p",
        { style: { color: "red" } },
        "${ ページ読み込み時点の現在日時が表示されます。 }"
      );
    },
    save: function () {
      return wp.element.createElement(
        "p",
        { className: "wp-block-now-block-now-block" },
        "現在日時を読み込み中……"
      );
    }
  });
})();

set-now.js は手順3で作ったものから変更ありません。

set-now.js

(function () {
  document.addEventListener("DOMContentLoaded", function (event) {
    for (const nowBlock of document.querySelectorAll(".wp-block-now-block-now-block")) {
      setInterval(function () {
        nowBlock.textContent = new Date().toLocaleString();
      }, 1000);
    }
  });
})();

index.asset.php も手順3で作ったものから変更ありません。

index.asset.php

<?php

return [
  "dependencies" => [
    "wp-blocks",
    "wp-element"
  ]
];

最後に、 now-block.php にブロック登録処理を実装して完了です。

now-block.php

<?php

/*
 * Plugin Name: 現在日時ブロック
 */

add_action("init", function () {
  register_block_type(__DIR__ . "/block");
});

ブロックエディターにて「現在日時」ブロックが表示されました。テンプレートに挿入して保存します。

公開ページでも想定どおりに動作しています。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

WordPress6.8でのブロックテーマ自作手順解説

はじめに

Ubuntu環境を想定

商用環境では使えないかも

全角文字と空白文字は危険

パーミッション問題

手順1：テーマを構成する最低限のファイルを用意する

テーマディレクトリを作成

style.css を作る

index.html を作る

style.css にテーマ情報を記述する

サムネイルを配置

まとめ

手順2：ブロックを自作する

基本的なファイル・ディレクトリを準備

ブロックを実装

index.js を呼び出す処理を実装

手順3：動的ブロックの作成

block.json の viewScript で動的ブロックを作る

動作確認

手順4：プラグイン化する

プラグインディレクトリを作成

プラグインのエントリポイントとなる.phpファイルを作成

「有効日時」ブロック登録勝利を実装

`style.css` を作る

`index.html` を作る

`style.css` にテーマ情報を記述する

`index.js` を呼び出す処理を実装

`block.json` の `viewScript` で動的ブロックを作る