子テーマやカスタマイズの基本の基本についてちょっとおさらいしてみる

相変わらずのご無沙汰ぶりです。。

最近、頂いたコメントの中で子テーマについてお話ししていたのですが、説明も長くなりそうなので、せっかくだから記事にしちゃえ、ということで子テーマやカスタマイズの基本についてちょっとおさらいしてみようと思います。

テーマって何？

WordPressのデザインを変更するときに、外観＞テーマというところで好きなテーマを選びますね。テーマは一種のきせかえみたいなもので、簡単にデザインを変えたり、ちょっとした機能を足すことが出来ます。

WordPressをインストールしただけの状態だと、Twenty Ten、Twenty Elevenという二つのテーマが入っています。これはデフォルトのテーマで、WordPressを開発してる方達が用意してくれた、標準のテーマといえるものです。

他にもたくさんのテーマを「テーマのインストール」からインストールすることが出来ます。もちろん、「テーマのインストール」から選ぶほかにも、色々なところでテーマを手に入れることができます。
（ただし、公式と言われるところ以外からのテーマには悪意のある物がまじっている場合もあります。見極めが出来ない場合は十分気をつけてくださいね）

そんな便利なテーマですが、インストールすると管理画面で選べるように表示されますね。これはなぜかというと、きちんと決まりがあるからです。

テーマってどこにあるの？

テーマは、WordPressのある場所/wp-content/themes/テーマのフォルダ　という場所に置かれます。これは、FTPなどで確認してみるとすぐに分かります。

とっても大事なstyle.css

ただ、そこにフォルダを置いただけでは、WordPressがテーマを探してくれません。テーマのstyle.cssにテーマの名前など、決められた情報を書かなければなりません。
例えば、Twenty Elevenを見てみると、

/*
Theme Name: Twenty Eleven
Theme URI: http://wordpress.org/extend/themes/twentyeleven
Author: the WordPress team
Author URI: http://wordpress.org/
Description: 2011年版の WordPress テーマは洗練されていて、軽量で、柔軟性があります。メニュー、ヘッダー画像、背景をあなたなりにアレンジしてみてください。明と暗のカラースキーム、リンクカラー、3つのレイアウトオプションが利用できるようになっています。「Twenty Eleven」は、フロントページをコンテンツの目立つショーケースへと変身させるショーケース固定ページテンプレートを備えています。ウィジェット対応のたくさんのエリア (サイドバー、3つのフッターエリア、ショーケース固定ページウィジェットエリア) があり、また、アサイド・リンク・引用・ステータスを表示する「短冊」ウィジェットを備えています。印刷用と管理者のエディタ用のスタイル、アイキャッチ画像（投稿、固定ページ上のヘッダー画像と注目の"固定"記事の大きな画像として）のサポート、6つの異なる投稿フォーマットの特別なスタイルが含まれています。
Version: 1.3
License: GNU General Public License
License URI: license.txt
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
*/

/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

と書いてあります。全部が必要な情報ではありませんが、このコメント部分をみて、WordPressは管理画面にテーマの一覧そして出しているわけなんですね〜。（もちろん、管理画面に出すだけではなくて、この記述がないと、テーマとして機能しません）

CSSファイルだからって見た目のことを書いているわけではないのです。テーマの中でとっても大事なファイルです。

cssとphp

テーマフォルダの中を見ると、style.cssのようなCSSファイルとindex.phpのようなPHPのファイルが入っていると思います。

ざっくり分けると、CSSが見た目部分、PHPがHTMLとして書きだすための仕組みの部分になります。

フォントの色や大きさを変えたいならCSS、出てくる文章そのものを変えたいならPHPを編集することになります。

子テーマって何？

このブログでも紹介していますが、WorsPressのテーマの中には、子テーマと呼ばれる種類の物があります。

これは元々あるテーマを最大限利用して、変更したい部分だけ記述すればいいという、大変便利なものです。これを使えば、テーマを1から書く必要がありません。

テーマをカスタマイズするときに、この子テーマをおすすめしている方が多いのには理由があります。

まず、子テーマを作ることによって、WordPressバージョンアップなどに伴って自分の変更したテーマが自動的に上書きされてしまうことが防げます。
また、親のテーマを直に編集してしまい、大きなミスをしたり、もとに戻したくなったときに簡単にもとに戻すことが出来ます。

管理画面から親のテーマを選べば、とりあえずはもとに戻せますし、もとの親テーマを見ることでどこがおかしくなったのか調べることも出来ます。

もちろん、変更前のテーマをまたダウンロードしてくる、ということも出来ますが、とても面倒ですし、そのテーマ自体がなくなったり変わっていたら大変です。

他にも、自分用の使いやすいテーマをつくっておいて、その子テーマでどんどん新しいテーマを作っていく、という使い方もできますね。

「テーマは直に編集しない」

大事なことなので、何回でも言っちゃいます。

ということで、私もカスタマイズには子テーマを使うことを強〜くおすすめしているワケなのですが、子テーマによるカスタマイズの基本についてももう一回じっくり見てみたいと思います。

子テーマの作り方

子テーマの作り方については「まずは子テーマをつくる準備から」に書いてありますので、ちょっと補足します。

子テーマに置くstyle.cssに記述するコメントが必要なのは、先ほど書いたように、それをテーマとして認識させるためです。
普通の物と違うのは、親のテーマを指定する部分ですね。
親のテーマを指定することで、この親テーマの機能を引き継げるわけです。

また、普通のテーマではstyle.cssのほかにindex.phpも必要ですが、これは親のものを利用できるため、style.cssを置くだけでテーマとして機能するようになっています。

このstyle.cssを好きな名前のフォルダに入れて、先程のテーマを置く場所に、FTPなどでアップします。

そうすれば、管理画面から自分の子テーマを選べるようになります。

子テーマのしくみ

さて、子テーマは親のテーマを利用する、といいましたが、いったいどこを利用してくれるのでしょうか？

試しにstyle.cssにテーマに必要なコメント部分のみ書いて有効化するとどうなるでしょうか？

/*
Theme Name:     child
Template:       twentyeleven
*/

これだけです。他には何も置きません。スクリーンショットです。

こちらはTwenty Eleven。

子テーマの方はCSSはすべて解除された状態ですが、コンテンツやメニューなどは同じように出力されているのがわかるでしょうか。

子テーマは機能は引き継ぐけどデザインは引き継がない

というわけで、よく子テーマに書かれる@importの登場です。もし、親テーマのCSSを大部分利用してちょっと変えたいだけ、という場合は

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

というように親のテーマのCSSを読み込みます。そうすると、親テーマと全く変わらない子テーマの出来上がりです。

子テーマでどうやって変更するの？

子テーマでの変更の基本は「上書き」です。

例えばCSSを変更したいときは、子テーマのstyle.cssに変更したい部分だけ書いていきます。
CSSは読み込んだ順に適用されていきます。WordPressは@importで呼ばれた親テーマのCSSを読んでから子テーマのCSSを読むことになるので、必要部分を書き足していくだけでよいわけです。
親テーマのCSSをすべてコピペしてくる、という必要はありません。
（もちろん、親のCSSを全く読みこまずに、全部自分で書く、というのもアリですよ）

また、ほかのphpのテンプレートに関しても、基本は上書きになります。例えば、ちょっとheader.phpに変更を加えたいな、というときには、まず子テーマに親テーマのheader.phpをコピーしてきます。そして、そのコピーしたものに変更を加えれば、そちらが後から読まれて、有効になります。

注意するのはファイル名を同じにするということです。同じファイル名でないと上書きしてくれません。

ちょっと付け足したい

例えば、特定のページだけ、ちょっと出されるものを変えたいなということもあると思います。

チョコレート、「chocolate」というスラッグの付いたカテゴリーがあるとします。そのカテゴリーだけちょっと何か変えたいよ、というときは、category-chocolate.phpというファイルを新たに作って子テーマの中に置けばいいのです。

このルールについてはWordPress Codexのテンプレート階層を参考にすると良いと思います。

要注意！functions.php

CSSもテンプレートも基本的に上書きなのでカスタマイズもかなり楽なのですが、functions.php、これがクセモノです。これにはちょっと癖があるのですが、今回は基本の基本ということのにしたいので、ここまでで。

このブログでもいつか取り上げるかもしれませんし、調べると色々な情報がでてくるので、「WordPress 子テーマ　functions.php」などで調べてみるとよいかもしれません。

安心してカスタマイズを！

子テーマを作れば、少しくらい失敗しても、もとはきちんとあるので大丈夫。ちょっと冒険も出来ますね。

ということで、子テーマと親テーマの仕組みをしっかりおさらいして、安心してカスタマイズを楽しんでください！