「TwentyTwelve」にて、子テーマを作成したときのメモ

WordPressテーマ「TwentyTwelve」にて、子テーマを作成しました
の続きです。
前回の記事はこちら

子テーマの作成

作成するものは、

  • 子テーマのディレクトリ
  • style.css
  • functions.php

の最低限3つ。
上記以外に変更したいファイルがあれば、それも随時追加していくかたちになります。

子テーマのディレクトリの作成

ディレクトリって何?ってところからつまずきました。
でもまあ、フォルダと思ってくれればいいようです。
(厳密に言うと意味が違いますが、今は気にしなくてよし)

自分のサーバーの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 日本語版」子テーマについてのページ

ブログランキング

ランキング参加中

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レクタングル(大)広告