WordPressサイトのカスタマイズに必要な子テーマの作り方をご紹介します。

子テーマとは？

子テーマは、親テーマの拡張機能なようなものです。

子テーマを使うと、親テーマのコードを編集することなく、テーマに機能を足したりデザインを変更することができるようになります。

親テーマのコードを直接編集して機能を足したりデザインを変更することもできなくはありませんが、親テーマをアップデートした際にその内容でコードが上書きされるので、カスタマイズしたコードが消えてしまいます。

子テーマを使うと、親テーマとは別のテーマファイルになるので、親テーマをアップデートしてもカスタマイズが消えることはありません。

子テーマの作り方

記事制作時点でWordPressにプリインストールされているテーマTwenty Twenty-Fiveを例に、子テーマの作り方をご紹介します。

子テーマのフォルダを作成する

まずは子テーマのフォルダを作成します。

フォルダ名は、親テーマのフォルダ名 + childとするとわかりやすいかと思います。

Twenty Twenty-Fiveのフォルダ名はtwentytwentyfiveなので、子テーマはtwentytwentyfive-childとします。

style.cssを作成する

twentytwentyfive-childにstyle.cssを作成して、次を記載します。

/**
 * Theme Name: Twenty Twenty-Five Child
 * Template:   twentytwentyfive
 */

.wp-block-heading {
    color: red !important;
}

ヘッダーコメントは子テーマに最低限必要な要素です。Theme Nameに子テーマの名前、Templateに親テーマのフォルダ名を記載します。

.wp-block-headingのCSSについては子テーマを適用した際の検証用に記載しています。

functions.phpを作成する

style.cssまで用意すればWordPressサイトへ子テーマを適用することは可能です。

しかし、子テーマで機能やデザインのカスタマイズを行うには、もう1つファイルが必要です。

twentytwentyfive-childにfunctions.phpを作成して、次を記載します。

<?php
add_action( 'wp_enqueue_scripts', 'twentytwentyfive_child_enqueue_styles' );

function twentytwentyfive_child_enqueue_styles() {
    wp_enqueue_style(
        'twentytwentyfive-child-style',
        get_stylesheet_uri()
    );
}

親テーマのスタイルを読み込んだ後に、子テーマのスタイル（style.css）を読み込む処理を行っています。

以上で、次のような構成の子テーマが出来上がります。

twentytwentyfive-child
├── functions.php
└── style.css

子テーマを適用する

作成した子テーマをFTPなどでWordPressのthemesフォルダへアップロードします。

その後、WordPressダッシュボードより外観 → テーマ画面を開くと、作成した子テーマが表示されています。

子テーマを有効化してWEBページを見ると、子テーマのstyle.cssに記載した.wp-block-headingのCSSが適用されているのが確認できます。

まとめ

WordPressサイトのカスタマイズに必要な子テーマの作り方をご紹介しました。

子テーマを使い、親テーマのコードを編集することなく、テーマの見出しテキストの色を変更することができました。

同じ様な要領で他のデザインもカスタマイズすることができます。

さらに、functions.phpも使うことで、独自の機能を追加することも可能です。

カナメグローバルホールディングスではWEBサイトの制作や保守を行っています。

WordPressサイトも対応しているのでぜひお気軽にご相談ください。