WordPressテーマのカスタマイズ!子テーマを作る方法

Th スクリーンショット 2013 09 09 22 43 36  mini

WordPressには色々なテーマが有ります。そのまま使用しても問題ないのですが、同じテーマを使用している人と、見た目が「同じ」になってしまいます。

そこで、テーマをカスタマイズしたい!という思いが湧いてきます。

私はテーマをカスタマイズするとき、今までは直接テーマ内のファイルを弄っていました。しかし、テーマのバージョンアップなどで上書きしてしまうと、当然カスタマイズした内容も上書きされてデフォルト状態に戻ってしまいます。

それを回避する方法としてWordPressには「子テーマ」と言う便利な運用方法があります。

子テーマの作り方

201309092208

テーマフォルダーの中に新規ホルダーを作成します。
今回は「stinger3」と言うテーマの子テーマを作成したいと思うので「stinger3custom」と言う名前にしておきます。この名前はなんでもOKです。

style.cssファイルを作成

作成した「stinger3custom」フォルダー内に「style.css」と言うファイルを新規作成します。子テーマでカスタマイズする時には、最低限、この「style.css」が必要です。

「style.css」をテキストエディタで開き次のコードを記載しましょう。

[css]
/*
Theme Name: stinger3custom
Template: stinger3
*/
[/css]

  • Theme Name:子テーマの名前です。好きな名前をつけて下さい。
  • Template:親テーマのフォルダー名を指定します。今回はstinger3です。

(Theme Name:)と(stinger3custom)、(Template:)と(stinger3)の間は、半角スペースをあけて下さい。

ここで作成したstyle.cssファイルがstnger3フォルダー内のstyle.cssより優先されます。
WordPress管理画面のテーマで「stinger3custom」が表示されていればOKです。

スクリーンショット 2013 09 09 22 13 19  mini

もう一つコードを追加

子テーマ内に作成したstyle.cssにはまだ、何もコードを記載していません。その状態で子テーマを読み込むと、当然表示は崩れます。

そこで、親テーマのstyle.cssの内容を全てコピペする方法もありますが次のコードを子テーマのstyle.cssに追記します。

[css]
/*
Theme Name: stinger3custom
Template: stinger3
*/
@import url(‘../stinger3/style.css’);
[/css]

これで、親テーマのスタイルが引き継いだ状態で表示されます。

あとは、カスタムしたい内容をどんどん追記していくだけです。

今の私の子テーマcssはこんな感じになっています。

[css]
/*
Theme Name: stinger3custom
Template: stinger3
*/
@import url(‘../stinger3/style.css’);
#side {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px 4px 4px 4px;
}
.kizi02 {
padding-left: 10px;
padding-right: 10px;
}
#ad1 {
padding-left: 10px;
padding-right: 10px;
}
.entry {
border-bottom: 1px solid #ccc;
}
[/css]

子テーマに書いた内容が優先されて、親テーマの内容プラスアルファで子テーマの内容が追加されます。

まとめ

最初の設定がちょっと大変ですが、子テーマを作ってしまえばカスタムしたい内容をどんどん書いていけばいいだけです。親テーマのファイルは一切手を加えないので、バージョンアップがされても子テーマに書いた内容は変更されません。WordPressでテーマをカスタマイズする時は子テーマ作成がオススメです。

コメント

タイトルとURLをコピーしました