WordPressの子テーマ作成してカスタマイズしました。

2021/11/16

日々様々な業務をやらせてもらっているのですが、既存のテーマを使ってサイトをコーディングする機会がありました。
その際、子テーマを作りサイトの細かいカスタマイズを行いました。

子テーマとは既存のテーマの一部を修正したい場合に、既存のテーマ（親テーマ）の一部を上書きして編集できるテーマのことです。

今回は、そんな子テーマのメリットや自分が実際に行った子テーマのコーディングに関しても述べます。

子テーマのメリット

子テーマは既存のテーマを編集せずにカスタマイズできます。
既存のテーマはWordpress自体の更新があったときなどに、定期的にテーマの更新が行われます。
その際にもし、大本の既存のテーマを編集してしまっているとテーマ更新に合わせて、編集した部分が上書きされてしまい、予期せぬ表示崩れが起こる可能性があります。

しかし子テーマを作ることでそれを防ぐことが出来ます。

子テーマは親テーマを読み込んだ後に読み込まれるので、子テーマで編集した内容は大本の親テーマが更新されても残ります。

また、大本のテーマを書き換えることがないので何か不具合があった場合に原因が調査しやすくなります。

子テーマでカスタマイズ

今回新しく作ったJavaScriptのファイル（以下JS）のみを読み込みたかったのですが、うまくいかず先輩コーダーの方に助けていただきJSを読み込むことが出来ました。
JSなどのファイルの読み込み方はいくつか方法がありますが、今回は親のテーマで読み込まれていたhead.phpを読み込ませないようにして、小テーマのhead.phpを読み込むようにしました。

head.phpを作成する

子テーマの中にfunctionsというフォルダを作成してその中に、head.phpを用意します。

子テーマのhead.phpを読み込む

親テーマのwp_headを無効にして、子テーマのhead.phpが読み込まれるようにfunctions.phpに記述します。

    
        add_action( 'after_setup_theme', 'override_functions' );
            function override_functions() {
            remove_action('wp_head','tcd_head'); // 親テーマのhookを無効
            require get_stylesheet_directory() . '/functions/head.php'; // 子テーマに再指定
        }

このコードを書くことで親テーマではなく子テーマのjsのみを読み込むということが出来ました。