WordPress ブロックテーマを作ってみよう その１

いよいよブロックテーマの作成を進めていきます。

前回まとめたブロックテーマを構成するファイルを、1つずつ作っていこうと思います。

01. テーマ作成の事前準備

まずは、開発環境にWordPress（今回は 6.8.1）をインストールしておきます。

wp-content/themes/sample-theme/のように、新しいテーマフォルダを用意します。

02. 必要なファイルを用意する

style.css

テーマフォルダの直下にstyle.cssを作成します。

今回はtheme.jsonを理解するために、最低限のファイルヘッダーのみ設定しました。

/*
Theme Name: Sample Theme
*/

templates/index.html

テーマフォルダの直下にtemplatesフォルダと、その中に空のindex.htmlを作成します。

theme.json

サイト全体やブロックのスタイルを設定できる「グローバルスタイル」を使用する場合、テーマフォルダ直下にtheme.jsonを作成します。

バージョン3、エディターのデフォルトコンテンツ幅に設定すると、以下のようになります。

{
    "version": 3,
	"settings": {
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	}
}

function.php

CSSやJavaScriptを追加したり、カスタマイズを行う場合、テーマフォルダ直下にfunction.phpを作成します。

<?php
/**
 * Sample Theme functions and definitions.
 *
 * @link https://developer.wordpress.org/themes/basics/theme-functions/
 *
 * @package Sample Theme
 */

// sample-style.cssの読み込み例
function css_custom() {
	wp_enqueue_style(
		'sample-style',
		get_template_directory_uri().'sample-style.css',
		array(),
		wp_get_theme()->get( 'Version' )
	);
}
add_action( 'wp_enqueue_scripts', 'css_custom' );

03. 新しいテーマに切り替える

ファイル構成

ここまでで、以下のようなブロックテーマの最小ファイル構成になっているかと思います。

• functions.php
• style.css
• templates/index.html
• theme.json

管理画面での操作

管理画面を開き、「外観」メニューの「テーマ」から、作成したテーマを選択します。

ブロックテーマとして認識されると「外観」メニュー内に「エディター」が登場します。

まだ中身を用意していないので、真っ白です。

おわりに

まっさらな状態のブロックテーマの枠組みを作成することができました。

まだ見慣れない「サイトエディター」の画面、わくわくしますね。

ここから個別テンプレートを作っていきますが、長くなりそうなので次回に持ち越したいと思います。