WordPressテーマ「TwentyTwelve」にて、子テーマを作成しました
の続きです。
前回の記事はこちら
子テーマの作成
作成するものは、
- 子テーマのディレクトリ
- style.css
- functions.php
の最低限３つ。
上記以外に変更したいファイルがあれば、それも随時追加していくかたちになります。
子テーマのディレクトリの作成
ディレクトリって何？ってところからつまずきました。
でもまあ、フォルダと思ってくれればいいようです。
（厳密に言うと意味が違いますが、今は気にしなくてよし）
自分のサーバーのWordPressの中を見てみます。
「wp-content」の中に「themes」というフォルダがあります。
その中にテーマのフォルダが存在します。
多分「twentyfifteen」とか、自分が使っているテーマの名前のフォルダがあるかと思います。
それと同じように、子テーマのフォルダを作成。
子テーマディレクトリ（フォルダ）の名前は、自分で分かるようにしておけばいいのですが、公式サイトでは名前の後ろに「-child」とつけるよう推奨しています。
推奨であって、必ずそうしなければならない訳ではないです。
スタイルシート（style.css）の作成
子テーマのフォルダを作成したら、その中にCSSファイル（style.css）を作成します。
CSSファイルは、冒頭部分に以下ような記述が必要になります。
/*
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
*/
「WORDPRESS Codex 日本語版より」
各項目の右側の記述は、自分の環境に応じて変えます。
いろいろ項目が多いですが、最低限として
「Theme Name」＝子テーマのテンプレートの名前（任意の名前をつける）
「Template」＝親テーマのディレクトリ（フォルダ）の名前
の二つがあればOKです。
そして、その後に、変更したいスタイルの記述をしていきます。
ここで、ちょっと注意。
子テーマのファイルは、親テーマを上書きすると前の記事で書きました。
ということは、変更したいとこだけ子テーマに書くだけでは、他の部分は無かったことになってしまいます。
親テーマのファイルをそのままコピペして、修正・加筆していくというのが、基本的な考え方。
でも、全部コピーしてあると、見るのも修正していくのも大変。
そこで、親テーマのファイルの内容を、読み込んでくれる簡単なコードを加えてあげます。
このコードなのですが、今現在の一般的なやり方として、「style.css」に
@import url(“../親テーマのフォルダ名/style.css”)
を記述します。
これが、今のところ大抵の方がやっているやり方。
しかし、公式サイトでは、次のように書かれています。
親テーマと子テーマのスタイルシートをキューに入れます。以前は @import: を使用して親テーマのスタイルシートをインポートしていましたが、これはもはや良い方法ではありませんので注意してください。親テーマのスタイルシートをキューに入れる正しい方法は、子テーマの functions.php で wp_enqueue_script()を使用する方法です。
というわけで、functions.phpにて、親テーマのスタイルを子テーマに読み込む記述をしていきます。
functions.phpの作成
この「functions.php」、ちょっと特別なファイルです。
このファイルに限って、上書きされません。
追記したい内容だけ、記述していく形になります。
まだ具体的なカスタマイズはしないので、今回は親の「style.css」ファイルデータを読み込むだけにしておきます。
正直、今までPHPファイルをいじったこと無いんですよね。
ちょっと変更したら、変なふうになりそうで・・・。
特にこの「functions.php」は、繊細そうです。
余計なことはせず、公式マニュアルサイトに記載されている通りに作成しました。
適用させて、特に問題なく表示できているようなので、ほっと一安心です。
ちょっと話は脱線しますが、PHPファイル作成時、開始タグをまず入力しますが、終了タグは省略したほうがよいようです。
マニュアルを読んでいて、開始タグのことは書いてあるのに、終了タグには何も触れてないのはなんでだろう？って調べてみました。
どうも、終了タグを入力して、へんな改行などしてしまうと、エラーなどの不具合が発生するそうです。
PHPしか記述の無いファイルなら、省略できるということです。
参考にした公式サイト
「WORDPRESS Codex 日本語版」子テーマについてのページ
コメント