WordPress 初心者 子テーマの作成

★記事が気に入ったらシェアお願いします★

子テーマって何?

最初は何もわかりませんでした。何のために必要なのか、どうやって作るのか、全く分かりませんでした。

今は分からなくてもいい、そのうち分かるだろう、先にいろいろカスタマイズしてとにかく WordPress に慣れて行こう、と思って使い始めました。そこで簡単なカスタマイズ、本文の幅だとか、フッターの Copyright 表示などの変更を選んだテーマ上で行っていきました。

そうこうしているうちに WordPress のアップデートが二度ほどありました。

本文の幅を変更したはずなのに元に戻っている、おかしいなあ、何故かなと思い、ネットで探していろいろな記事をよくよく読んでみると、選んだテーマそのものをカスタマイズしてもダメ、子テーマを作ってそれをカスタマイズしなくてはいけない、ということがようやくわかりました。

スポンサーリンク

子テーマの必要性

選んだテーマ(親テーマ)はいろいろな機能の追加によって、知らないうちに自動でアップデートがされてしまいます。そこにカスタマイズを行っても勝手に上書きされて、せっかくやったカスタマイズが消失してしまうということです。

WordPress Codex 日本語版にある子テーマの項にも書いてありました。

あまり大きなカスタマイズをしないうちに、子テーマ作成の必要性が分かってよかったです。

子テーマの作成

子テーマは以下の手順で作ります。
1. 子テーマのフォルダを作る
2. 子テーマに必要なファイルを作る(style.css と functions.php)
3. 親テーマを引き継ぐためのコードを書く

2.と3.はまとめて、エディタを使ってコードを書いた style.css と functions.php を子テーマフォルダにアップロードしてもいいですね。

子テーマのフォルダは “child” としました。いろいろなサイトには “twentyfourteen-child” のように “親テーマ名-child” にするように、と書かれているのですが、そうすると何故か認識されませんでした。

Theme Child

その後、child の中に style.css と functions.php の二つのファイルを作ります。

そして、style.css に以下のコードを記述する。上記の WordPress Codex のページにもこのように書かれています。

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

でも実際必要なのは、Theme Name と Template だけで、このサイトの style.css に書いたのもこれだけです。

/*
Theme Name: child
Template: twentyfourteen
Author: Jos
*/

functions.php のほうには以下を記述。

<?php //css の読み込み
 
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

子テーマの有効化

そして最後に、WordPress のダッシュボード(管理画面)から外観->テーマを選択、作成した child を有効化します。

これで子テーマの作成は完了。親テーマのアップデートを気にすることなく、自由にカスタマイズできるようになりました。

Theme Child activate

子テーマの利用

子テーマの style.css は、親テーマの style.css を上書きします。それに対して、子テーマの functions.php は親テーマの機能に上書きをするのではなく、親テーマの functions.php に追加して読み込まれるということになります。

style.css 以外のテンプレートを変更したい場合は、同じ名前のファイルを子テーマのフォルダに置くことで内容は上書きされます。例えば footer.php を変更したい場合は、親テーマの footer.php を子テーマにコピーし、そのファイルに変更を加えることで親テーマのアップデートを気にしなくて済みます。

非常に便利な子テーマ、テーマのカスタマイズには必要不可欠です。

スポンサーリンク
★合わせて読んでおきたい★
★合わせて読んでおきたい★

★記事が気に入ったらシェアお願いします★

★フォローはこちらです★