WordPressに子テーマを追加してCSSでカスタマイズしてみよう！

それでは実際に子テーマのインストールまでやってみましょう！
本記事では、WordPressのデフォルトテーマ「Twenty Twenty」を使ってご説明します。
とても簡単なので説明通りに進めてみてくださいね。

親テーマのフォルダ名を確認

子テーマを作成する前に、親テーマ名を確認する必要があります。
WordPressの管理画面から、「外観」→「テーマエディター」を選択してください。

開くとデフォルトで「style.css」が開かれると思いますので、上から数行目（使用テーマによって異なります）にある「Text Domain」のテーマ名を確認してください。
ここに記載されているテーマ名がフォルダ名と同じなので、このテキストをコピーします。

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

先ほどコピーした親テーマ名+子テーマと分かる任意の名前を付けて、子テーマフォルダを作成してください。
今回は、「twentytwenty-child」としました。

子テーマのフォルダ内に、「functions.php」と「style.css」を作成

子テーマを導入する上で最低限必要なファイルがあります。それが下記のファイルです。

・functions.php
・style.css

この「functions.php」と「style.css」をフォルダ内に作成してください。

functions.phpにコードを追加

テキストエディタで「functions.php」に下記のコードをコピー＆ペーストして保存してください。
とくに変更なしでそのまま貼り付けでＯＫです。

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

style.cssに子テーマ情報を追加

テキストエディタで「style.css」にTheme Name、Templateを入力して保存してください。
最低この2つが書かれていれば子テーマは正常に機能します。

・Theme Nameは最初に作成した子テーマのフォルダ名を記入
・Templateは親テーマ名を記入


@charset "utf-8";
/*
Theme Name: twentytwenty-child
Template: twentytwenty
*/

子テーマフォルダをzipで圧縮

「functions.php」と「style.css」の準備が出来たら、子テーマフォルダをzipで圧縮します。
これで子テーマのインストール準備は完了です！次はWordPressの管理画面を操作していきます。

子テーマをインストールする

WordPressの管理画面で「外観」⇒「テーマ」を選んでください。

画面の「新規追加」ボタンを押して、「テーマのアップロード」を選択します。
次に、「ファイルを選択」を押して、zipで圧縮した子テーマフォルダを選択して、「今すぐインストール」を押します。

画面が遷移して、インストールの進捗が表示されます。問題なくインストールが完了したら、最後に「有効化」を選んで子テーマを適用させます。

テーマ一覧ページを確認すると、「twentytwenty-child」が有効になっているのが確認できます。

おめでとうございます！これで子テーマを適用できました。

子テーマのCSSファイルを確認する

子テーマの適用が出来たので、CSSのカスタマイズができるか確認してみましょう。
「外観」→「テーマエディター」を選択してください。

画面左上に「twentytwenty-child: スタイルシート(style.css)」と表示されていますね！これで子テーマのCSSカスタマイズが可能になりました。
あとはCSSを追加して、色々ページデザインをカスタマイズしてみてください♪

番外編：子テーマのスクリーンショット画像を追加する

※こちらはやらなくても使用上の問題はありません。

先ほどインストールが完了した後、テーマ一覧で子テーマが有効になっていることを確認しましたが、子テーマのサムネイル画像が表示されていなかったですよね？
実はこれ、簡単に追加できるので、見た目が気になる方は追加しちゃいましょう！

まず、お使いのFTPソフト、またはレンタルサーバーの管理画面のファイルマネージャーなどで、親テーマフォルダ（wp-content > themes > 親テーマフォルダ）を開きます。
フォルダ内にscreenshot.pngの画像ファイルがあるので、これをコピーします。