Pocket
LINEで送る



WordPressを始めた方は、ご存じでしょう。
Pluginと同時に、テーマが割と頻繁に更新されることを。

デフォルトのままで利用している場合は、問題ないのですが、
文字の大きさ、行間、見出しのフォントファミリー、大きさなどデザイン面に加え、機能的なカスタマイズを加えて、デフォルトのテンプレートに書き加えている場合、テーマが制作者によって更新され、自身も管理画面から更新してしまうと、せっかく書き加えたコードが全て上書きされてしまいます。

しかしながら、「子テーマ」を作成しておいて、そこにカスタマイズしたい内容を書き加えていくと、上記のような上書きを避けられます。

使い出すと、「このテーマ(テンプレート)、気に入ってるんだけど、ここを自分用にカスタマイズしたい。他のブログを参考に自分も同じような機能を付けたい。」と思うことは、ままあるものです。
そんな時に、子テーマの作成法を覚えておくと助かります。

1.子テーマを作成するメリット

  1. 親テーマからデザインや機能の全てを引き継ぐ。
  2. 子テーマを準備すると、オリジナルのテーマ(親テーマ)のテンプレートを直接、編集せずにカスタマイズできる。
  3. オリジナルテーマである親テーマがアップデートしても、子テーマ内でカスタマイズしたテンプレートファイルは影響を受けない。
  4. また、子テーマはオリジナル・テーマ開発にも役立ちます。
    オリジナル・テーマ開発している際、ルーティン化されたスタイルや機能を親テーマとして設定しておき、案件毎に子テーマでバリエーションを付けていくというWordPressのテーマ(テンプレート)開発の効率化が図れます。

2.子テーマと親テーマの関係

WordPressでは、子テーマが存在する場合、子テーマ内のテンプレートファイルが優先して使用される。

一旦、子テーマを読み込んだ後、子テーマにないものは、親テーマで補完する。

親テーマにしかないファイルは親テーマのものが使用され、親テーマと子テーマの両方にあるものは、子テーマのものが使用される。

子テーマファイルの読み込み修正

ただし、functions.php だけ特殊で、親テーマのfunctions.php が読み込まれる直前に、子テーマのfunctions.php が読み込まれる。

子テーマ作成時、functions.phpが読み込まれる様子

functions.phpの場合は、親テーマのfunctions.phpの直前に子テーマのfunctions.phpが読み込まれ、結合され、子テーマフォルダのfunctions.phpと親テーマフォルダ内のfunctions.phpの両方が有効になる。

3.子テーマの作り方

最小限、必要なファイルは、style.cssのみ。

3.1子テーマのファイルを入れるフォルダを作成

子テーマフォルダの作成

ディレクトリ[・・・・・/wp-content/themes]フォルダに子テーマフォルダを作成。

3.2子テーマのstyle.cssの作成

子テーマのstyle.cssの設定

図を参考に、子テーマのstyle.cssを作成する。
図にはインポートする親テーマとしてtwentyelevenとして記述しています。
@import url(‘以下は、1つ上のフォルダ(../)にあるtwentyelevenフォルダ内のstyle.css.を参照するようにという意味です。

/*
Theme Name:
Theme URI:
Description:
Author URI:
Author:
Version:
Template:
*/

@import url('../ /style.css');

コピペできるようにしておきました。
文字コードをUTF-8にするのを忘れずに。

これらは、全て記述する必要なく必須となっているTheme Name,Templateと@import url(‘../ /style.css’);だけでもよいようです。

Templateは、親テーマの名称ではなく、ディレクトリ名であるので、注意を。
また、子テーマの名称は、自分でこれが子テーマだとわかれば何でもいいと思います。
一般には、○○○(親テーマ名) child等が利用されているようです。

Theme Name 子テーマの名称
Theme URI 子テーマのURL
Description テーマの説明文
Author テーマ作成者の名前
Autor URI テーマ作成者のURL
Template 親テーマのディレクトリ名
(大文字と小文字を区別する必要あり)
Version 子テーマのバージョン

3.3作成した style.css をアップロード

1で作成した子テーマのファイルを入れる子フォルダに style.css のみをアップロード。

3.4管理画面の【外観>テーマ】で子テーマを有効化

親テーマとデザイン等が同じになっていれば、OK.

4.子テーマを使ったカスタマイズの方法

子テーマは、親テーマの機能、デザインを引き継ぐので、全てのファイルを入れる必要は無い。
カスタマイズしたいファイルのみ入れること。
カスタマイズしないファイルは入れる必要は無い。

style.css

要素レベルで親テーマのstyle.cssを継承。

変更したい、追加したいタグだけ@import以降に記述。

CSSには「後から記述した設定が優先される」というルールがあるので、子テーマのstyle.cssで@importよりも後に新しい設定を記述すると、親テーマの設定を上書きできる。

functins.php

追加したいタグだけ記述。

子テーマのfunctins.phpで定義された関数

 ↓
親テーマで定義された関数と重複しないことが必要。

関数の二重定義

PHPでは、既に定義されている関数を新たに定義しようとすると、二重定義となりエラーとなる。

function_exists関数を利用することで、子テーマからの関数の再定義ができる。

その他のindex.php,single.phpなどのファイル

全てコピーしてカスタマイズを加える必要がある。

Pocket
LINEで送る