【WordPress】ブロックテーマのファイル構造やセットアップに関する基礎知識

ブロックテーマの作成は、クラシックテーマ作成とは異なる部分があります。

まずはブロックテーマの作成に最低限必要なファイル構造やテーマのセットアップについて知っていきましょう。

ファイル構造

ファイル構造例

theme
 |__ style.css
 |__ functions.php (optional)
 |__ index.php
 |__ templates
    |__ index.html
 |__ parts
    |__ (empty folder)

style.cssには従来通りテーマ情報を記載します(参考: https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/)。

必須ファイル

ブロックテーマの場合、以下のディレクトリ・ファイルが必須です。

• index.php
• style.css
• templates/index.html

*templatesファイルが間違ったディレクトリに設置されると正しく読み込みができなくなります。

その他の構成ファイル

テンプレートパーツは任意で、テンプレートパーツを含む場合は必ずpartsディレクトリに設置しなければなりません。

必須ファイルに加えて、テーマは

• theme.json
• functions.php
• その他phpファイル
• css
• images
• javascript

を追加できます。

WordPress公式のTheme Handbookではtheme.jsonファイルは任意ではあるが利用を強く推奨しています。

テーマのセットアップ

必要に応じてfunctions.phpの中にスタイル関連の設定を記述します。(after_setup_themeフックを使う)

必要か否かは記事を読み進めて決めましょう。

functions.php

if ( ! function_exists( 'myfirsttheme_setup' ) ) :
function myfirsttheme_setup() {
	// Add support for block styles.
	add_theme_support( 'wp-block-styles' );

	//基本的にこの中にadd_theme_support()関連の記述をする
}
endif;
add_action( 'after_setup_theme', 'myfirsttheme_setup' );

after_setup_themeフックを使う

基本的にこのフックを使ってadd_theme_support関連の記述をしていきます。

必要なものだけ記述します。

add_theme_support( ‘custom-line-height’ );

add_theme_support( ‘custom-spacing’ );

add_theme_support( ‘wp-block-styles’ )について

混乱しそうなのですがここでは3つのcssファイルが出てきます。

• ブロックデフォルトスタイル用(wp-includes/css/dist/block-library/style.css)
• ブロックデフォルトスタイル拡張用(wp-includes/css/dist/block-library/theme.css)
• 独自スタイル用(テーマ作成時に自分で準備するstyle.cssなど)

ブロックデフォルトスタイル

コアブロックはデフォルトでスタイルが当てられています。これをブロックデフォルトスタイルと呼ぶとして、

このスタイルシートはエディタ側とフロント側の両方に読み込まれるようになっているので両方のスタイルはおおよそ似たようなものになります(同じではない)。

しかし、一部のブロックではエディタ側では表示されているデフォルトスタイルがフロント側では表示されないものがあります。

そこでフロント側で反映されていないスタイルを適用するには2つの選択肢があります。

• ブロックデフォルトスタイルをadd_theme_support('wp-block-styles')で拡張する
• テーマに独自のcssを当てる

ブロックデフォルトスタイルをadd_theme_support(‘wp-block-styles’)で拡張

ブロックデフォルトスタイルを拡張してエディタ側で反映されているデフォルトスタイルをフロント側でも適用するにはfunctions.phpにadd_theme_support( ‘wp-block-styles’ )を追記します。

エディタ側、フロント側両方でおおよそ似たような見た目になります。

add_theme_support( 'wp-block-styles' );

上記のコードで新たにスタイルシートwp-includes/css/dist/block-library/theme.cssが読み込まれます。

しかし、大抵は独自のスタイルを当てていくと思うので、上記コードを記述しなくてもOKです。

拡張用スタイルを読み込んだとして、独自で当てたスタイルの詳細度が高ければスタイルが上書きされて独自スタイルが反映されることに気をつけましょう。

Theme supportについて

ブロックテーマでは以下のtheme supportsが自動的に有効になります。

add_theme_support( 'post-thumbnails' );
add_theme_support( 'responsive-embeds' );
add_theme_support( 'editor-styles' );
add_theme_support( 'html5', array('style','script', ) );
add_theme_support( 'automatic-feed-links' );

一部のtheme supportsはtheme.jsonでテーマの設定をしていれば有効になります。

theme.jsonの設定はadd_theme_support()より優先されることに気をつけましょう。

Theme supportとTheme.json settingの一部対応表は以下の通りです(参考：https://developer.wordpress.org/themes/block-themes/block-theme-setup/#theme-support)。

Theme support	Theme.json setting
add_theme_support( ‘editor-font-sizes’, array() );	settings.typography.fontSizes
add_theme_support( ‘custom-line-height’ );	settings.typography.lineHeight
add_theme_support( ‘align-wide’ );	settings.layout
add_theme_support( ‘editor-color-palette’, array() );	settings.color.palette
add_theme_support( ‘editor-gradient-presets’, array() );	settings.color.gradients
add_theme_support( ‘custom-spacing’ );	settings.spacing
add_theme_support( ‘custom-units’, array() );	settings.spacing.units

ブロックスタイル用のCSSについて

WordPress5.9からブロックススタイル用にwp_enqueue_block_style()が使えます。

wp_enqueue_block_style()はあるページであるブロックが使われたときにそのブロックのcssのみ読み込むのでパフォーマンスにも関係しそうです。

メディアクエリなどtheme.jsonで加えることができないスタイルをwp_enqueue_block_style()で加えることができます。