WordPress:小テーマの作り方

Wordpress子テーマの作り方

なぜ子テーマが必要なのか?

子テーマを作る理由はテーマをカスタマイズした場合、テーマが更新(アップデート)されることによってカスタマイズした部分が消去される(更新ファイルで上書きされる)ためです。

子テーマを作ることで親テーマが更新されてもカスタマイズ部分を残すことができます。

子テーマの作り方

子テーマの作り方は簡単です。以下の方法だけで子テーマが作れます。

1. 子テーマ用のディレクトリを作る

ディレクトリの名前は慣習的に{親テーマのフォルダ名}+{–child}となります。
ex.) 親:oya → 子:oya-child

2.子テーマのディレクトリ内に以下の2つのファイルを作る

・style.css
・functions.php

※両ファイルは空のまま作成します。

3.style.cssに以下の記述をする

style.cssの冒頭に以下の記述をして子テーマであることをWordPressに明示します。

/*
Theme Name: {任意(通常は親テーマ名+Child}
Template: {親テーマのディレクトリ名}
*/

例)
/*
Theme Name: oya child
Template: oya
*/
※親テーマのディレクトリがoyaの場合。

★重要なのは”Template:”の部分で正確に親テーマのディレクトリ名を記述すること。間違えるとテーマ選択時に「親テーマが無い」と判断され、選択ができません。

4.親テーマのスタイルシートを継承する

今のままでも子テーマを選択することはできますが、style.cssが空なので、全くスタイルシートが適用されていないデザインとなってしまいます。

そこで、親テーマのスタイルシートを継承する必要があります。

親テーマを継承する方法は2つあります。

A.sytle.cssで親テーマのstyle.cssをインポートする方法

子テーマのstyle.cssに@Importで親テーマのstyle.cssをインポートする記述を行います。

例)
/*

Theme Name: oya child
Template: oya
*/
@import url(‘../oya/style.css’);

※親テーマのディレクトリがoyaの場合。

B.funtions.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’ );
}

A.B.どちらの方法でもかまいませn

5.WordPressの管理画面で子テーマを選択する

記述に間違いなければ、管理画面→外観→テーマで子テーマを選択できます。

子テーマのルール・記述方法

子テーマ内にはstyle.cssやfunctions.php以外にもテーマ関連のファイルを設置することができます。

その際のルールは次の通りです。

子テーマのファイルが優先され、親テーマの同名ファイルは無視される。

なので、基本的に同名ファイルを子テーマに作る場合は、親テーマの内容をコピーして、その内容をカスタマイズします。

しかし、このルールには例外があります。それはfunctions.phpです。

子テーマにおけるfunctions.phpのルール

functions.phpだけは子テーマにfunctions.phpがあっても親テーマのfuncitons.phpは無視されません。

functions.phpは親テーマと子テーマのもの両方が読み込まれます。

優先されるのは子テーマのfunctions.phpです。もし親子に同名の関数がある場合はエラーがでます。

しかし、現状ではfunctions.phpへの関数の書き方が以下のように!function_existsを付けることが慣習となっているので、エラーが起きにくくなっています。(つまり、同名の場合、子テーマの関数が選択されることが多い。)

if (!function_exists(‘関数名’)) {
function 関数名() {
}
}

子テーマの注意点

子テーマはWordPressから見ると親テーマとして認識されています。そのため、以下の関するを使う場合は注意が必要です。

get_template_directory()

これはテンプレートのディレクトリを取得する関数ですが、これを子テーマで使うと親テーマのディレクトリが参照されてしまいます。

なので、子テーマのディレクトリを参照させる場合は以下のようにします。

require_once( get_stylesheet_directory() . ‘/my_included_file.php’ );