今回は自分の備忘も兼ねて、WordPressの子テーマ作成方法をまとめました！
そもそも子テーマって？ なんで作るの？
子テーマという機能がどんなものかは下の記事で紹介しています。今回はその機能を利用するための最低限の設定方法を紹介します！
子テーマ作成方法 ～style.css・function.phpのコピー～
では早速、子テーマを作成していきましょう。今回はtwenty twenty oneの子テーマを作成します！子テーマを作成する場合は、契約しているサーバーのFTPから直接ファイルを編集するか、アプリからFTP接続して編集を行います。
（参考：Dreamweaver の FTP 接続の設定をする (adobe.com)）
一番最初に、style.cssを作成します。
style.cssの作成
- 「themes」フォルダの中に、「twentytwentyone_child」（子テーマフォルダ）というフォルダを作成します。
- 「twentytwentyone」（親テーマフォルダ）にあるstyle.cssを子テーマフォルダにコピーします。
- コピーして作ったstyle.cssの中身を全部消します。
- 以下のテキストをコピペします。
@charset "UTF-8";
/*
Theme Name: Twenty Twenty-One Child
Template: twentytwentyone
*/
Theme Name → 子テーマの名前（管理画面に表示されます。）
Template → 親テーマフォルダ名
ただ、これだけでは子テーマのstyle.cssとして認識されません。子テーマ用のfunction.phpを作成する必要があります。
function.phpの作成
- 親テーマフォルダにあるfunction.phpを子テーマフォルダにコピーします。
- コピーして作ったfunction.phpの中身を全部消します。
- 以下のテキストをコピぺ（子テーマのファイルを読み込んだ後、親テーマのファイルを読み込む的なことが書いてあります。）
<?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')
);
}
?>
これで、子テーマの基本的な形は完成です！
WordPressの管理画面に戻ってテーマの選択をしようとすると、子テーマが選べるようになっていると思います！（下図左上）
この子テーマを選択すると、一見親テーマと全く同じように見えます。しかし、子テーマstyle.cssを編集すると、この子テーマだけに変更が反映されるようになります！また、テーマのアップデータがあっても、更新されるのは親テーマだけなので、子テーマの変更箇所は上書きされずに残るというわけです！
WordPressのカスタマイズをするのであれば必ず子テーマを作成しましょう！
子テーマcssを変えてみた
子テーマcssにこんな記述を加えてみました！サイトのタイトルの文字色を変更するコードです。
.site-title {
color: red !important;
}
親テーマを選択してみると反映されていませんが、
子テーマを選択すると反映されていますね！
まとめ
子テーマ作成は、WordPressカスタマイズをするうえで必須です！上記の方法を参考に、カスタマイズの前準備として子テーマを用意できるようにしていきましょう！
header.phpなどほかのファイルも子テーマにできます！やり方はほぼ同じですが、また次回詳しく書きます！
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
