お問い合わせはメールにて24時間受付中

info@calliedesign.com

WordPressでの子テーマの作成方法は、以前は @import で親テーマのスタイルシートを読み込むのが普通でしたが、現在では WordPress Codex は @import の代わりに functions.php の利用を推奨しています。
今回のケースでも、functions.php を用います。

子テーマの作成方法は、①子テーマディレクトリの作成、②子テーマのstyle.cssの作成、③子テーマのfunctions.phpの作成、の3ステップで行われます。

①子テーマ用のディレクトリの作成

WordPressインストールディレクトリを基準にして、wp-content/themes 配下に利用中のテーマのディレクトリ(親ディレクトリ)があります。

今回は Extra というテーマを利用していたので、


    wp-content/themes/Extra

というディレクトリがありました。
この Extra ディレクトリを親テーマのディレクトリとして、同じ themes ディレクトリ下に子テーマのディレクトリを作成します。
子テーマディレクトリの名前はこうしなければならないと規定されているわけではありませんが、推奨は、親テーマの名前に -child をつけたものです。
今回の例でも、Extra-child という子テーマディレクトリを作成します。


    # mkdir wp-content/themes/Extra-child

②子テーマの style.css の作成

親テーマディレクトリの配下に親テーマのスタイルシート style.css があるはずです。
親テーマのスタイルシート wp-content/themes/Extra/style.css に対応させて、子テーマのスタイルシート wp-content/themes/Extra-child/style.css を作成します。
(ここでは、親テーマのスタイルシートが、標準の style.css の1つのみという前提で記載しています。)


    # vim wp-content/themes/Extra-child/style.css

この子テーマの style.css では、冒頭に以下のようなスタイルシートヘッダを記載します。


/*
 Theme Name:   Extra Child
 Description:  Extra 子テーマ
 Author:       CallieDesign
 Author URI:   https://calliedesign.com
 Template:     Extra
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

このうち必須事項は Theme Name と Template です。
Theme Name には、作成した子テーマの名前を記載してください。わかりやすいものにすればよいと思います。(今回の例では、子テーマのディレクトリ名は Extra-child ですが、子テーマの名前は Extra Child にしています。)
Template は親テーマのディレクトリ名を記載してください。これを間違えると、親テーマ・子テーマの関係が機能しません。

スタイルシートヘッダより後の箇所に、親テーマの style.css に追加・修正したい内容を記載していくことになります。

③子テーマの functions.php の作成

作成した子テーマの style.css を親テーマの style.css に追加して読み込ませるためには、functions.php を利用します。

親テーマの wp-content/themes/Extra/functions.php に対応させて、子テーマの functions.php を作成します。


    # vim wp-content/themes/Extra-child/functions.php

functions.php はPHPファイルですので、冒頭の1行目に


<?php

と記載してください。
そして、2行目以降に、関数 wp_enqueue_scripts を用いて、親テーマと子テーマのスタイルシート style.css をエンキューします。


add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

依存関係に ‘parent-style’ を設定しているので、子テーマの style.css は親テーマの style.css の後に読み込まれます。

④子テーマの有効化

③までで子テーマの最低限の作成が完了したので、ウェブサイトのWordPress管理画面で、「外観」>「テーマ」に移動します。

テーマ一覧に今作成した子テーマ Extra-child も表示されているので、その子テーマの「有効化」リンクをクリックして、子テーマを有効にします。

これで子テーマ Extra-child がメインのテーマとなります。

親テーマ Extra はメインのテーマから外れますが、子テーマを通じてそのプログラムが読み込まれることになります。