Production Diary 01

今日の作業内容

テーマは「Twenty Twenty Three」

公式テーマ「Twenty Twenty-Three」を親テーマに設定する。

「Twenty Twenty-Three(2023)」は「Full Site Editing」に対応したブロックテーマです。「Twenty Twenty-Two(2022)」の後継テーマとして今月リリースされました。

出たばかりなので 不具合等あるかもしれませんが、公式テーマなので更新も早く、これから作り始めるのには最適なので このテーマを使用します。

子テーマを使用

WordPressの「WPがインストールされた階層＞wp-content>themes」フォルダに新たに子テーマ用のフォルダを作成します。

子テーマフォルダ内のファイル

style.css

子テーマとして認識させるために

/*
Theme Name: XXXXXXXXXXX
Template: twentytwentythree
*/

テーマの名前と 親テーマを記載する必要があります。これ以外は空白で構いません。

theme.json

{
	"version": 2,
	"$schema": "https://schemas.wp.org/wp/6.1/theme.json"
}

バージョンは現在「２」です。

スキーマを入れておくと 「VScode」などで編集するときに便利です。（この記事を書いた時点で WordPress のバージョンは6.1です。）

これ以外は空白で構いません。

functions.php

上記の2つのファイルをアップロードしたら 子テーマとして認識してくれましたが 子テーマのスタイルシートが読み込まれませんでした。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')
);
}

上記のコードを記入して functions.php を追加すると 無事スタイルシートが読み込まれました。