目次
  1. 子テーマを作る理由
  2. テーマの格納場所
  3. 子テーマの作り方
      1. (1) Themesフォルダに新しいフォルダを作る
      2. (2) 作成したフォルダに style.css を追加する
      3. (3) style.css に Template を追加修正する
      4. (4) テーマ画面を表示更新して詳細を確認する
      5. (5) 子テーマを有効化する
      6. (6) functions.phpを作成してCSSを反映させる

子テーマを作る理由

WordPressでは、有料，無料に関わらず自由にテーマを検索してダウンロード・インストールできる手軽さがあります。もちろん、テーマを加工せずに使うこともアリです。自分なりに加工したいときは、親(元の)テーマをコピーして自分用に子テーマを作って使うことをおすすめします。理由は、万一不具合が起きてどの操作が障害に影響したかわからなくなった時、元のテーマがないと修正や元に戻せなくなってしまうことがあります。(あらかじめセットされているスクリプト機能などが、予期しない不具合を起こし、加工したデータを含めて正常な表示を再現できなくなってしまうなど、本番環境でのメンテナンスに極力影響を与えないためです。)

テーマの格納場所

Local by Flywheel で WordPress 6.2 をインストールし、言語を日本語設定，プラグインに WP Multibyte Patchのみあてた状態を前提とします。

管理者としてログインし、[外観]→[テーマ]と進みます。この時点で、「Twenty Twenty-Three」が有効化されているのが確認されます。

Local by Flywheelのサイトの [Go to site folder]をクリックします。(例としてサイト名は Spark-Laboとしています。)

フォルダーが開きます。既定では、ユーザーフォルダに関連ファイルがおさめられています。

[ユーザー名] > [Local Sites] > [サイト名] の下に下図のように展開されます。

WordPressの構成ファイルは、[app] よりも下層に保管されていますので、[app]フォルダをVS Code などのエディタで開きます。

WordPressの設定ファイルは、

[app] > [public]の下に、3つのフォルダにまとまっています。

  • wp-admin
    • WordPress管理画面のファイル類(HTML, PHP, CSS, 画像)が格納されています。
  • wp-content
    • WordPressのテーマ, プラグイン, 画像データなどが格納されています。
  • wp-includes
    • WordPressのシステムを管理するPHPなどのプログラムファイルが格納されています。

テーマは、[wp-content] > [themes] の下の各テーマフォルダ下にあります。

子テーマの作り方

(1) Themesフォルダに新しいフォルダを作る

VSCode で、[themes]フォルダに新しいフォルダを追加します。

作成したフォルダ名を任意の名称に変更します。

フォルダ名については、わかりやすい名前を付ければOKです。

(例)

child-twentytwentythree

twentytwentythree-child

(2) 作成したフォルダに style.css を追加する

VSCode で、新しいファイルを追加します。

ファイル名を style.css にします。

この時点で、テーマを確認します。「壊れているテーマ」と表示されます。

表示されている説明を見ると、後半に「子テーマでは style.css スタイルシートに Template ヘッダーが必要です。」と書かれていますので、指示通りに追加する必要があります。

(3) style.css に Template を追加修正する

空の style.css を VSCode で下記のように記述して保存します。

  • Theme Name
    • Child と半角スペースに続けて元のテーマ名を入れて、子テーマであることを分かりやすくしています。
  • Author
    • 子テーマの作者名として任意の名前を入れています。
  • Version
    • バージョンは、適当に入れます。ここでは、1.0としています。
  • Template
    • 親になるテーマ名を入力します。これによって、自動的に子テーマとして認識されるようになります。

(4) テーマ画面を表示更新して詳細を確認する

テーマ画面をブラウザの更新ボタンを押して更新します。作成した子テーマが認識されます。

子テーマの上にマウスカーソルをホバーすると、「テーマの詳細」と表示されるのでクリックします。style.css に書き込んだ内容が反映され、「twentytwentythree」の子テーマであることも反映されています。

(5) 子テーマを有効化する

このテーマを有効化するには、詳細画面上で、一番下の「有効化」ボタンを押します。

(または、詳細画面からテーマ画面に戻って「有効化」ボタンを押しても同じことができます。)

更新されると、自動的にその前に有効化されていたテーマが無効化されます。

この操作時点で、親テーマの「TwentyTwenty-Three」テーマの場合は、スタイルは継承されています。

また、[カスタマイズ]ボタンは、子テーマの外観をブロックエディターでカスタマイズしたいときに使えます。

「TwentyTwenty-Three」テーマでは、WordPressバージョン5.9で提供されていた「TwentyTwenty-Two」と異なり、下記のような特徴があります。

style.css の記述がなくなった(すべての記述がコメント化されコードがない)ため、ただ親テーマの通りに動作させるだけならば、何も記述する必要はありません。もし、カスタマイズしたいときは、独自の記述を追加すればいいですが、反映には下記の手順が必要になります。

既定で functions.php ファイルがなくなりました。このため、style.css の記述を追加する場合は、[(1) 親テーマの style.cssを読み込み ⇒ (2) 子テーマの style.cssを読み込む] という手続きを行う必要があります。この手続きを実行するには、functions.php を作成してこの手続きを読み込ませる必要があります。

(6) functions.phpを作成してCSSを反映させる

子テーマ「childtwentytwentythree」フォルダ直下に、新しいファイルを作成して名前を[functions.php]にします。

functions.phpに、コードを記述します。

<1> function theme_enqueue_styles(){ ～ } のブロックは、テーマスタイルをキューという手続きに渡すための関数ブロックで、この中に書かれた内容が、WordPressを表示させる手続きで順番が来たら読み込まれるように必ず渡される手続きとして宣言されたものです。

<2> wp_enqueue_style関数は、CSSファイルを追加する関数になります。カンマで、3つの引数（パラメータ変数）に区切られています。

第一引数は、読み込むスタイルシートの名称を設定。

第二引数は、読み込むスタイルシートのパスを指定。

第三引数は、読み込むスタイルシートより前に読み込まれる必要のスタイルシートを指定。

<3>この関数を使った、CSS を読み込ませる手続きを説明します。

wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');

これは、最初に、本来の親のテーマの style.css に “parent-style” という名称を設定して、読み込ませています。

wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));

次に、子テーマの style.css に “child-style” という名称を設定しています。

つまり、この連続した読み込みにより、”parent-style” という名称のスタイルシートを読み込んだ後、子テーマの “child-style” という [style.css]を読み込ませることになります。

あとは、子テーマ「childtwentytwentythree」フォルダ直下の [style.css] に、必要なクラスに対して適用させたい内容を書けば、反映されます。

以上が、WordPress 6.1以降(現時点の最新は、6.2)で、標準の「twentytwentythree」を子テーマとして活用するやり方となります。

WordPress 6.1では、サイトエディターを使ってサイトの構成を自由に編集できる「ブロックテーマ」というテーマ開発方法が登場しました。テーマの見た目や設定を定義するためのファイルとして、「twentytwentythree」フォルダ直下にある、[theme.json] という JSON形式で書かれたファイルで、テーマの見た目や設定を定義するように変更されています。今後、この 内容をカスタマイズすることでスタイル定義ができるようになります。

[theme.json]で設定できること

  • マージンやパディング，行間などの調整機能の有効化や無効化，設定できる値
  • カラーパレット，グラデーション，デュオトーンフィルターなどの設定
  • フォントサイズ、フォントの種類などの設定
  • コンテンツ幅の設定
  • 追加のCSS変数の定義
  • テンプレートパーツに関する情報