風吹です。
今日はWordPressテーマの子テーマについてです。

 

WordPressにはさまざまな用途にあわせたテーマがたくさんありますが、
実際に使ってみるとちょこちょこカスタマイズしたくなりますよね?

 

そんな時、ほとんどの人はテーマファイルに直接書き足したりしていると思います。

 

しかしこれ、その時はいいのですが、
使用しているテーマにセキュリティアップデートやちょっとした修正が入った時に
全てのファイルが上書きされてしまい、アップデート後にまた同じカスタマイズを
やり直さなければならなくなります。

 

そうならないためにカスタマイズする方法がこれから紹介する子テーマを使った
カスタマイズになります。

 

子テーマとは?

子テーマとは、Wordpress codexでも推奨されているカスタマイズ方法で、
WordPressカスタマイズ専用のテーマです。

 

既存のWordpressテーマを親テーマとし、親テーマの機能とスタイルを
継承したものが子テーマです。

 

子テーマの仕組み

 

つまり、子テーマを使えば、基本的なデザインや機能は親テーマのものを利用し、
親テーマのアップデートなども気にすることなくカスタマイズしたい部分のみを
作成することができます。

 

また、構文ミスなどでエラーが出てしまったり、真っ白になってしまっても、
子テーマの該当部分を削除すれば、即座にノーマル状態に戻すことも出来ます。

 

 

子テーマを呼び出す仕組み

子テーマを呼び出す仕組みはこのようになっています。

 

子テーマの呼び出しの仕組み

 

図のように、基本的には子テーマにファイルがある場合、
親テーマのファイルは読み込まれません。
子テーマにないファイルは親テーマのファイルが読み込まれます。

 

一方、functions.phpとstyle.cssに限っては、
親テーマファイルが読み込まれた後に子テーマファイルが読み込まれます。

 

 

子テーマの作り方

具体的な子テーマの作り方についてです。

 

子テーマを作る手順

1.子テーマ用のフォルダを作成する
2.子テーマに必要なファイルを作成する
3.親テーマを継承するためのコードを書く
4.フォルダごとWordPressのテーマフォルダの中にアップロードする
5.子テーマを適用する

 

上記手順で、誰でも簡単に子テーマを作成し、利用することが出来ます。
後は随時カスタマイズしたい部分をその都度書き足せばいいだけです。

 

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

まずは子テーマ用のフォルダを作成します。

パソコン上で作成するので
右クリック → 新規作成 → フォルダ
などとやって作成します。

 

フォルダ名は、子テーマとわかるように、
親テーマ名_child などとするのが一般的です。

 

ここでは賢威7の子テーマを作成するとし、keni70_child とします。

子テーマの呼び出しの仕組み

 

 

子テーマに必要なファイルを作成する

次に作成したフォルダの中に以下の2つの空ファイルを作成します。

  • style.css
  • functions.php

テキストエディタを開き、名前をつけて保存などとすればOKです。

※function.phpではなく、functions.phpですので気を付けて下さい。

子テーマの呼び出しの仕組み

 

 

親テーマを継承するためのコードを書く
style.css

style.cssには、子テーマ情報を以下のように記入します。

 

/*
 Theme Name:   子テーマ名_child
 Theme URI:    http://example.com/hild/
 Description:  Child Theme
 Author:       作者名
 Author URI:   http://example.com/
 Template:     親テーマのフォルダ名
 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だけなので、
他は省略してもかまいません。

 

functions.php

functions.phpには、親テーマのstyle.cssが子テーマを適用した際にも
呼び出されるように下記コードを記入します。

 

<?php //子テーマ用関数

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

?>

 

これにより、親テーマのスタイルシートが子テーマに継承されます。

 

この方法のほかに、子テーマのstyle.css内で
@importを使って読み込む方法がありますが、
読み込み速度の関係で、現在では、functions.phpで
呼び出す方法が推奨されています。

 

@import url("../keni70/style.css");

 

まあ、体感的にわかるものでもないので、
functions.php側でうまく読み込めない場合は、
@importで読み込んでも問題ないと思います。

 

 

フォルダごとWordPressのテーマフォルダの中にアップロードする

FTPクライアントを使って作った子テーマのフォルダごと一式を
WordPressのテーマフォルダにアップロードします。

 

子テーマの呼び出しの仕組み

 

アップロード先は、

WordPressインストールディレクトリ/wp-content/themes/

です。

 

 

子テーマを適用する

メニュー -> テーマ に移動します。

子テーマの呼び出しの仕組み

 

子テーマの呼び出しの仕組み

 

有効化をクリックしたら子テーマの設置が完了です。

この状態では、親テーマを使っていたときとまったく同じ状態になっています。

ここからファイルを追加してカスタマイズしていきます。