WordPress 子テーマの作成 #WordPress

はじめに

まずはググって、色々な子テーマの作成の記事を見ながら試していたのですが、どうもローカルで試すと上手く行かず、悩みました。
最終的には公式ドキュメントを見て解決できました。最初から公式をチェックすれば良かった。

子テーマの作成

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

$ cd /path/to/wordpress_root
$ mkdir wp-contents/themes/child
$ cd wp-contents/themes/child

style.css ファイルの作成

ファイルを作成します。

$ touch style.css

「Twenty Ten」を親として、子テーマを作成します。取り急ぎ、最低限の内容としては以下の感じ。

style.css

/*
 Theme Name: Twenty Ten Child
 Template: twentyten
*/

functions.php ファイルの作成

必須なのは style.css のみのようなのですが、この状態だと正しく表示されないので、この手順を行います。親テーマの css を @import する、というのが今までの方法だったようなのですが、良い方法ではないそうです。

子テーマ - WordPress Codex 日本語版

最後のステップでは、親テーマと子テーマのスタイルシートをキューに入れます。以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。

ファイルを作成します。

$ touch functions.php

内容は以下の通り。

functions.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')
  );
}

子テーマの適用

管理画面から子テーマを選択

一覧に作成した子テーマが表示されますので「有効化」します。

サイトの確認

無事、子テーマが適用されました。めでたしめでたし。