ブロックテーマの作成

UNDERSCORES BASED THEMEブランクテーマをベースに、クラシックテーマの基本的な部分の自作を学べたので、次は公式サイトのブロックテーマの作成情報に従いブロックテーマを学びながら自作を行ってみようと思います。

Block themes

WordPress メジャーリリースVer6.1の段階で、ブロックテーマとなっているデフォルトテーマは、Twenty Twenty-TwoとTwenty Twenty-Threeです。

有効化すると、ブロックテーマ専用のSite Editorが使えるようになり、ブロックを使用してヘッダー、フッターをはじめサイト全体をデザインできるようになります。

ブロックテーマの設定

WordPressにブロックテーマを認識させサイトを編集するためのブロックテーマ最小構成を学びます。

ファイル構造

ブロックテーマ必須ファイル

ブロックテーマを認識させるために必要な必須ファイルは、 style.cssとtemplates/index.html です。

【参考】WordPress5.9以前のクラシックテーマと互換性を持たせるため、テーマがインストールされているフォルダにindex.phpが必要となっています。

index.phpが存在しないと壊れたテーマとして下記メッセージが表示されます。

その他の必要ファイル

クラシックテーマでテンプレート階層に対応して設置していた404.phpなどの各phpファイルは、

templatesフォルダー内に拡張しがhtmlファイルとして配置します。

これ以外ではオプション扱いですがtheme.json 構成ファイルの使用がブロックテーマで推奨されています。

【参考】Theme.jsonファイル（オプション）

Theme.jsonファイルは、以下の機能を持ちテーマのスタイルやブロック設定を行うためのファイルです。

ドロップキャップ、パディング、マージン、行の高さなどのスタイル設定機能の利用設定
カラーパレット、グラデーション、およびデュオトーンデザインを追加できます。
フォントサイズの追加ができます。
コンテンツとワイドコンテンツにデフォルトの幅を追加できます。
カスタム CSS プロパティを追加できます。
テンプレートパーツをテンプレートパーツ領域に割り当てる

詳細はTheme.jsonファイルを参照してください。

ブロックテーマファイル構成

公式サイト　サンプルファイル構成は下記のとおりです。

patterns (dir)
      - example.php
parts (dir)
      - footer.html
      - header.html
templates(dir)
      - 404.html
      - archive.html
      - index.html (required)  <==必須ファイル
      - singular.html
functions.php
index.php　　　　　　　　　　　　<==必須ファイルではないが、存在しないとエラー表示する。
README.txt
screenshot.png
style.css (required)　　　　　　<==必須ファイル
theme.json

テーマのセットアップ

公式サイトテーマのセットアップに基づきブロックテーマ作成作業を行います。

style.cssの作成

style.css ファイルのヘッダーにはクラシックテーマ (従来のテーマ) と同じ要素を記述しますに従いサンプルを修正しテーマルートフォルダーに配置します。

/*
Theme Name: Learn　block theme
Theme URI:
Author: Learn Block Theme admin
Author URI: https://block.seodouga.info/
Description:
Tags: full-site-editing, blog
Version: 1.0.0
Requires at least: 5.9
Tested up to: 5.9
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fse-tutorial
 
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

`index.php`の作成

ブランクの index.phpを作成し、テーマルートフォルダーに配置します。

index.htmlの作成

templatesフォルダを作成しブランクの index.htmlをtemplatesフォルダに配置します。

functions.phpの作成

オプションですが、手順通りの記述を持つfunctions.phpを作成しテーマルートフォルダーに配置します。

<?php if ( ! function_exists( 'fse_tutorial_theme_setup' ) ) :
    /**
     * Sets up theme defaults and registers support for various WordPress features.
     *
     * Note that this function is hooked into the after_setup_theme hook, which runs
     * before the init hook. The init hook is too late for some features, such as indicating
     * support for post thumbnails.
     */function fse_tutorial_theme_setup() {
        /**
         * Add default posts and comments RSS feed links to <head>.
         */
        add_theme_support( 'automatic-feed-links' );
 
        /**
         * Enable support for post thumbnails and featured images.
         */
        add_theme_support( 'post-thumbnails' );
 
        add_theme_support( 'editor-styles' );
 
        add_theme_support( 'wp-block-styles' );
    }
endif;
add_action( 'after_setup_theme', 'fse_tutorial_theme_setup' );
 
/**
 * Enqueue theme scripts and styles.
 */function fse_tutorial_theme_scripts() {
    wp_enqueue_style( 'fse-tutorial-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'fse_tutorial_theme_scripts' );

Theme setup functionページの例では、下記の様に省略されています。

<?php
if ( ! function_exists( 'myfirsttheme_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which runs
 * before the init hook.
 */
function myfirsttheme_setup() {
	// Add support for block styles.
	add_theme_support( 'wp-block-styles' );

	// Enqueue editor styles.
	add_editor_style( 'editor-style.css' );
}
endif; // myfirsttheme_setup
add_action( 'after_setup_theme', 'myfirsttheme_setup' );

この時点でのファイル構成

themeルートフォルダー　<==★ Learn-Block-Themeとする
 |__ style.css 　　<==★必須ファイル
 |__ functions.php (optional)
 |__ index.php
 |__ README.txt
 |__ screenshot.png
 |__ templates
    |__ index.html <==★必須ファイル
 |__ parts
    |__ (empty folder)

この時点でのブロックテーマの認識と機能状況

テーマとして認識し有効化もできるが、編集ができない状態。

この状態でのサイト表示内容。

手動でのテンプレート作成

header.html　footer.html　を作成しpartsフォルダへアップロードし、index.htmlを修正。

<!-- wp:site-title /-->

<!-- wp:paragraph {"align":"center"} --><p class="has-text-align-center">
    Proudly powered by <a href="https://wordpress.org/">WordPress</a>.
</p><!-- /wp:paragraph -->

<!-- wp:template-part {"slug":"header","tagName":"header"} /--><!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

タイトルとフッターだけのページが表示されるが、ブロックエディタの編集はできない状態。

サイトエディターでのテンプレート作成

ブロックスタイルの CSS を含める

latest-comments.cssの作成

ブロックテンプレート最小構成にこの作業は、不要。

theme.json 経由では追加できないブロックスタイルを追加する例としてlatest-comments.css（最新のコメントブロックの日付のサイズとテキストの色を変更）を作成しassets/CSS/blocksフォルダーに配置。

.wp-block-latest-comments__comment-date {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
}

ブロックスタイルの CSS を含めるため、functions.php内のmyfirsttheme_setup()関数を変更します。

<?php
if ( ! function_exists( 'myfirsttheme_setup' ) ) :
/**
 * Sets up theme defaults and registers support for various WordPress features.
 *
 * Note that this function is hooked into the after_setup_theme hook, which runs
 * before the init hook.
 */
function myfirsttheme_setup() {
	/*
	 * Load additional block styles.
	 */
	$styled_blocks = ['latest-comments'];
	foreach ( $styled_blocks as $block_name ) {
		$args = array(
			'handle' => "myfirsttheme-$block_name",
			'src'    => get_theme_file_uri( "assets/css/blocks/$block_name.css" ),
			$args['path'] = get_theme_file_path( "assets/css/blocks/$block_name.css" ),
		);
		wp_enqueue_block_style( "core/$block_name", $args );
	}
}
add_action( 'after_setup_theme', 'myfirsttheme_setup' );
endif;

JavaScript の読み込み

~~Loading JavaScript~~

（プラグインの作成処理のため不要）

JavaScript のロードページの指示に従いmyguten-plugin.phpとmyguten.jsを作成しpluginsフォルダに配置。

theme.jsonの作成

github（theme-experiments/emptytheme/）より、最小構成theme.jsonをダウンロードしテーマルートディレクトリにアップロード。

{
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		}
	}
}

theme.jsonアップロード時点でサイトエディターが有効になる。

singular.htmlの作成

templatesへアップロード。

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->

<!-- wp:post-title /-->

<!-- wp:post-content {"layout":{"inherit":true}} /-->

個別　単一投稿、または単一ページが追加される。

この時点でのファイル構成

themeルートフォルダー　<==★ Learn-Block-Themeとする
 |__ style.css 　　<==★必須ファイル
 |__ functions.php (optional)
 |__ index.php
 |__ README.txt
 |__ screenshot.png
 |__ theme.json
 |__ templates
    |__ index.html <==★必須ファイル
    |__ singular.html
 |__ parts
    |__ header.html　footer.html

functions.phpを最小構成に書き換え

theme-experiments/emptytheme/functions.phpの内容に書き換える。

<?php

if ( ! function_exists( 'emptytheme_support' ) ) :
	function emptytheme_support()  {

		// Adding support for core block visual styles.
		add_theme_support( 'wp-block-styles' );

		// Enqueue editor styles.
		add_editor_style( 'style.css' );
	}
	add_action( 'after_setup_theme', 'emptytheme_support' );
endif;

/**
 * Enqueue scripts and styles.
 */
function emptytheme_scripts() {
	// Enqueue theme stylesheet.
	wp_enqueue_style( 'emptytheme-style', get_template_directory_uri() . '/style.css', array(), wp_get_theme()->get( 'Version' ) );
}

add_action( 'wp_enqueue_scripts', 'emptytheme_scripts' );

テンプレートとテンプレートパーツの追加

githubのtheme-experiments/armando/より、テンプレートとテンプレートパーツを追加する。

（Armando は、ブログ用の基本的なフルサイト編集テーマです。）

themeルートフォルダー　<==★ Learn-Block-Themeとする
 |__ style.css 　　<==★必須ファイル
 |__ functions.php (optional)
 |__ index.php
 |__ README.txt
 |__ screenshot.png
 |__ theme.json
 |__ templates
    |__ index.html <==★必須ファイル
        singular.html 404.html archive.html 
　　　　 page.html page-sidebar-left.html page-sidebar-right.html 
　　　   page-templats-patterns.html post-sidebar-left.html post-sidebar-right.html 
        search.html single.html
 |__ parts
    |__ header.html　footer.html main.html sidebar-left.html sidebar-right.html comments.html

自作ブロックテーマでの表示

https://block.seodouga.info/

機能追加やレイアウト調整を行っていない最小構成の自作ブロックテーマを利用したサイトです。

自作ブロックテーマでの表示 — https://block.seodouga.info/

ブロックテーマの作成