WordPress(ワードプレス)でホームページを作りたい、カスタムしたいという人のためのサイトです。

WordPressの子テーマ作成方法まとめ

TOP > 基礎知識 > WordPressの子テーマ作成方法まとめ

WordPressでテーマを作成する場合によく用いられる子テーマの作成方法をまとめてみました。
これから子テーマを作るという人も、これまで子テーマって聞いたことなかった人にも知っておくと便利だと思います。

そもそも子テーマとは?

まずは子テーマが何かということをおさらいしておきます。
子テーマはあるテーマを利用して最小限の要素を追加することで別のテーマとして運用する方法です。

子テーマはこういうときに使う

例えば公式テーマの「Twenty Eleven」の機能面を使用して、cssのみ変更して使用したい場合等が考えられます。
その場合、普通に考えるとテーマのCSSを変更して対応したらいいんじゃないかと思いますよね。
でもここで注意。
「Twenty Eleven」は公式テーマでWordpressのテーマディレクトリに登録されているテーマなので、アップデートがあります。
アップデートの通知が来てテーマをアップデートするとどうなると思いますか?

これまで自分でカスタムしていた内容が全て最新版に上書きされます。

これは最悪な事態ですね。
これまでの作業が一瞬でなくなるとか考えると目も当てられません。
ということで、この事態は避けなければいけないです。
でもテーマとして「Twenty Eleven」が好きでこれはどうしても使いたい。

そういう時こそ子テーマの出番というわけです。

子テーマを使用するメリット

上記の場合はアップデートで全ての作業内容が上書きされるという悪夢のような状態ですが、子テーマの場合は作成した子テーマはテーマディレクトリに登録されていないので(当然といえば当然なんですけどね)アップデートはありません。
もちろん本体のアップデートを行っても、その影響は子テーマには影響しないのでより安全に運用ができるわけです。
子テーマ仕様の最大のメリットはここにあると言っても過言ではないですね。
あとは更新するファイルが最小限ですので、メンテナンス性が高いというのも特徴です。

実際に子テーマを作ってみる

では実際に子テーマを作りましょう。
今回はwp_mychildという子テーマを作るという想定で行います。
内容としては基本的な部分を「Twenty Eleven」で管理し、CSSファイルで見た目のみをカスタムして使うという想定で行います。

作成するファイルは「style.css」一つだけです。
残りは親テーマである「Twenty Eleven」から引き継ぐので当然といえば当然ですね。
テーマの中身が「style.css」一つだけなのでとても簡単です。
作成する「style.css」の中身はこんな感じにすれば大丈夫です。

@charset "utf-8";
/*
Theme Name: wp_mychild
Theme URI: サイトURL
Description: サイトの説明文
Author:作成者の名前
Author URI: 作成者のURL
Template: twentyeleven
*/
@import url('../twentyeleven/style.css');

内容を説明すると、Template: twentyelevenで「Twenty Eleven」が親テーマであることを指しています。
@import url(‘../twentyeleven/style.css’);で親テーマのCSSを利用する形にしています。
あとはカスタム内容をstyle.cssの最下部に追記していけばカスタムは完了です。
CSSは下の記述ほど優先順位が高いので、@importで読み込んだスタイルもカスタム内容をその下に追記する事で上書きすることができます。
もちろんこだわりたい人は親テーマのCSSを読み込まずにCSSを全て自分で設定したものにして適用することも可能です。

子テーマを反映する

子テーマの反映はすごく簡単で、作成した子テーマを親テーマと同階層にアップロードして管理画面のテーマから適用するだけです。
子テーマだからといって親テーマの下にアップロードするわけではないので注意しましょう。

子テーマを作成する際の注意点

基本的には上記のような感じでカスタムしても問題ないのですが、1点だけ注意することがあります。
それはfunctions.phpを子テーマで管理したい場合です。
基本的にはheader.phpやfooter.phpなんかを子テーマで使いたい場合はそのまま作れば子テーマの内容が優先されるので気にする必要はないんですが、functions.phpだけはWordpressのテーマのコアファイルになる為か子テーマで作成しても上書きにはなりません。
上書きしちゃうと重要な部分が抜け落ちてサイトの表示ができないという場合も想定される為ではないかと思います。
その場合は、親テーマにない記述のみをfunctions.phpに記載しておくことで、親テーマのfunctions.phpに追記されたような状態として認識してくれます。
functions.phpのみが子テーマでの取り扱いが異なりますのでそこだけご注意ください。

といった感じで結構気軽に始めることができますので、まずはやってみて感覚をつかんでみるといいかと思います。


« »

ABOUT THE AUTHOR

こしもあんず
こしもあんず

Wordpressをカスタマイズすることが好きなギーク女子です。
好きなエディタはSublimetext2です。
Google+やってるので、よろしくです。
デザインは好きですが、PHPはあまり得意ではないのでその辺ご容赦くださいね。


Twitterはこちら
https://twitter.com/wordpresscusto1

ad