はじめに
WordPressは「テーマ」を利用してサイト全体のデザインやレイアウトを管理できますが、「ブロックテーマ」を利用すると、Gutenbergエディタを生かしてより効率的なサイト編集を行うことができます。
この勉強会では、実際にミニマムなブロックテーマを作成する方法について取り上げました。
まとめ
やったこと
Create Block Themeプラグインのインストールと有効化
まずはCreate Block Themeプラグインを導入。
WP Multibyte Patchプラグインのインストールと有効化
必須ではないですが、マルチバイト対応のプラグインも入れます。
固定ページのテンプレートを作ってみる
Create Block Themeプラグインが有効化されると、外観メニュー内に項目が出るためクリックして作成ページへ遷移します。
作成ページで空白のテーマを作成するoptionを選び、テーマ名を決定して「生成」をsubmitします。
するとテーマメニューにブロックテーマが生成されます。
生成されたテーマの「カスタマイズ」を選択し、編集画面へ遷移します。
編集画面はこのようになっています。
左ペインのメニューから「＋」ボタンを押すことでテンプレートを追加したりすることができます。
今回は個別投稿を追加してみました。
追加した段階では、内容はブランクになっていますので、個別投稿としてふさわしい表示をするために、投稿タイトルなどのブロックを追加します。これにより動的に内容がセットされます。
オリジナルのcssを管理画面とフロント画面（ユーザ向け画面）の両方へ適用する
空のブロックテーマを作成した段階では、ファイル構成は次のようになっています。
style.cssに記述した内容を管理画面（ダッシュボード）とフロント画面の両方へ反映することで、実際の表示を想像しながら編集することができるようになります。
例えば次のようにstyle.cssの編集とfunctions.phpの追加を行います。
/*
Theme Name: 20230530
Theme URI:
Author:
Author URI:
Description:
Requires at least: 5.8
Tested up to: 6.2
Requires PHP: 5.7
Version: 0.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 20230530
Tags:
*/
h1,
h2,
h3 {
color: blue !important;
}<?php
function mytheme_support() {
// コアブロックの追加分のCSSを読み込む
add_theme_support( 'wp-block-styles' );
// テーマのCSS（style.css）をエディターに読み込む
add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'mytheme_support' );
function mytheme_enqueue() {
// テーマのCSS（style.css）をフロントに読み込む
wp_enqueue_style(
'mytheme-style',
get_stylesheet_uri(),
array(),
filemtime( get_theme_file_path( 'style.css' ) )
);
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue' );
これにより、次のように両方へ見出しの色が適用されて一致することがわかります。
今回は以上です。
