ブロックテーマ

ブロックテーマの作成

更新日:

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

ブロックテーマの作成

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

WordPressがデフォルトで提供するブロックテーマ

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

ブロックテーマ使用時の外観メニュー

ブロックテーマの設定

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

ファイル構造

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

ブロック テーマを認識させるために必要な必須ファイルは、 style.csstemplates/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/

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

-ブロックテーマ

Copyright© WordPressの始め方 , 2022 All Rights Reserved.