ブランク検証 – Theme emulsion

このページでは、最も簡単なフルサイト編集テーマの作成方法について、解説します。

ワードプレスを使って、WEBサイトを運営されている方は、「ブロックテーマ」とか「フルサイト編集テーマ」といった言葉を一度は聞いたことがあると思いますが、具体的にどのようにテーマを作ればいいのかわからないといった事も多いのではないかと思います。

フルサイト編集機能は、ベータ版であり　今後も様々な機能が追加される可能性がありますが、従来テーマとの違いを理解することは重要なので、実際に作業をしながら、フルサイト編集の特徴について理解を深めていけたらいいと思います。

以下、以下の環境で作業を始めていきたいと思います。

OS: Windows 10

WordPress:ver 6.0.2

テキストエディタ：Windows メモ帳　notepad

(notepadは、名前を付けて保存の時に文字コード　UTF-8で保存できるものを使用してください。「UTF-8　BOM付」は使用できません。）

Windows 10 May 2019 Update （バージョン1903）以降のメモ帳を使ってください。

グーテンベルグプラグイン：varsion 14.0.3 以降をインストールしアクティベートしてください。

ブランクテーマの作成

デスクトップに「my-fse-test」という名前でホルダーを作成します。

上記のホルダーに、メモ帳で、functions.php, index.php, style.css　を作成してください。

ファイルの中身は空です。（文字コードは必ず、UTF-8）

次に、ホルダー templates を作成してください。

templatesの中に、index.html, page.html,single.htmlを作成してください
ファイルの中身は空です。（文字コードは必ず、UTF-8）

templates ホルダーの中身

my-fse-test ホルダーの中身

style.css に、テーマコメントを記述します。

/*
Theme Name: MY FSE TEST
Theme URI: https://example.com/my-fse-test
Description: Full site editiong theme
Author: nobita
Author URI: https://example.com/
Version: 1.0
Tags: full-site-editing
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-fse-test
Tested up to: 6.0
Requires PHP: 5.6
*/

functions.phpに、テーマサポートやスタイルシートの読み込みコードを記述します。

<?php

add_action( 'after_setup_theme', 'my_fse_setup' );

function my_fse_setup(){

	add_theme_support( 'wp-block-styles' );
	add_theme_support( 'align-wide' );

	add_editor_style( 'style.css' );
}

add_action( 'wp_enqueue_scripts', 'my_fse_style' );

function my_fse_style(){

	wp_register_style(
			'my-fse-style',
			get_template_directory_uri() . '/style.css',
			array(),
			wp_get_theme()->get( 'Version' )
		);
	wp_enqueue_style( 'my-fse-style' );

}

ノート：　フルサイト編集テーマでは、大抵、theme.jsonファイルが使用されますが、ここでは、ハードルを下げるため、使用しません。