WordPressで子テーマを使いテーマの複製代わりにする方法
2013/12/06
WordPressのテーマを改良して使ってみたいと思った時にはどうすればいいでしょう？無料のブログなどではテーマを複製する機能がついてる所もあります。そのような無料ブログでは複製ボタンを押してやると簡単にテーマが複製できるようになります。
WordPressではといいますと、そのような機能は見当たりませんね。使っているテーマなどを改良して使う場合は、元のテーマも残しておきたいとは思うので、ローカル環境などにテーマをファイルごとコピーし、中の設定内容を変えるというような手しかないかもしれません。
このような場合に便利なのが子テーマという機能を使う事です。Wordpressの子テーマとは元のテーマに対して、元のテーマを全く変更せずに機能やデザインを改良して使う事ができるものです。
元の親テーマがあり、新たにその子テーマを作ります。その子テーマは何も変更を加えなければ、元の親テーマそのものデザインと機能をもっています。この子テーマにどんどん変更を加えていくとデザインの変更や機能の追加をできるというものです。
元の親テーマは全く元のままです。インストールした状態を保てます。またテーマのアップデートはWordpressではよくありますが、元の親テーマがアップデートしても子テーマでの変更は維持できるという事になります。
WordPressにおいて既存のテーマを改良して使うならば、この子テーマを使う事が便利です。テーマをコピーして使う場合はアップデートはできませんが、子テーマを使えばアップデートにも対応できる事になります。
子テーマを使う方法は公式のwikiに一通り書かれています。
公式の子テーマに関するwiki
このサイトでも少し基本的な子テーマの使い方について説明したいと思います。
1,フォルダを作る
子テーマを使うための最小の構成はフォルダとcssを作る事です。たったコレだけで子テーマを作ることはできてしまいます。デザインに変更を加えるだけならcssを変更してしまえば、いろいろと変更も可能になるのです。
例えばwordpress公式のテーマのtwentytenを親テーマとし、子テーマを作るとします。
まずはローカルの環境でフォルダを作ります。フォルダの名前は何でも構いませんが、仮にKidtwentytenという名前にでもしておきます。
フォルダの製作は完了です。
2,cssを作る
cssはカスケードスタイルシートの事ですね。拡張子がcssになっているファイルです。
まずはKidtwentytenにstyle.cssを作ります。
Kidtwentytenにあるstyle.cssをテキストエディタで開きましょう。テキストエディタはサーバーがUTF-8を使っている場合は、文字コードがUTF-8に対応したテキストエディタがいいでしょう。
WordPressの公式wikiではstyle.cssに下のような記述をすると書いてあります。
/*
Theme Name: Kid
Theme URI: http: //example.com/
Description: Child theme for the Twenty Ten theme for WordPress
Author: Demetris
Author URI: http: //example.com/about/
Template: twentyten
Version: 0.1.0
*/
ここで最小限必要なのは下に記述したものだけです。これは子テーマのテーマ名をKidtwentytenにし、親のテーマはtwentytenにするという意味です。
/*
Theme Name: Kidtwentyten
Template: twentyten
*/
元の親テーマのcssをいろいろ弄りたい場合は、親テーマのcssの内容をこの下にコピーします。twentytenの場合は一番上にはコメント/* */で囲まれた部分がありますが、それ以外の部分をコピーします。
/*
Theme Name: Kidtwentyten
Template: twentyten
*/親テーマのcssの内容を/* */で囲まれた部分以外をコピーしてはりつける。
これで親テーマのデザインそのままの子テーマが作られます。cssに関しては子テーマのcssが読み込まれている状態になります。
3,作ったフォルダをWordpressにアップロードし適用させる
作ったフォルダを中身ごとKidtwentytenをwordpressにアップロードしましょう。
アップロードする場所はwp-content＞themesのフォルダです。
アップロードすると使えるテーマにKidtwentytenが増えているはずなので、それを適用して使います。
今回はcssだけ改良できるようになっているので、cssに変更を加えて行けばいろいろとデザインが変更できます。
その他
上では親テーマのcssをコピーして使っていましたが、下のような記述をする事も可能です。
/*
Theme Name: Kidtwentyten
Template: twentyten
*/@import url(‘../twentyten/style.css’);
#site-title a {
color: #009900;
}
これは@import url(‘../twentyten/style.css’);の部分で親テーマのcssを読み込んでいる状態です。この設定では元の親テーマのcssに変更はできません。cssに追加項目を加えることのみでデザインを変更していく事になります。
まとめ
今回は最小構成で子テーマを作る事を説明してみました。子テーマを作る事自体は最小構成であれば簡単にできてしまいます。
cssに変更を加えれば、親テーマに全く変更を加えることなくデザインを変更できる状態です。
他にいろいろ変更を加えたり、機能の追加をする場合は公式のwikiページに書いてありますので、そちらをご覧ください。
公式の子テーマに関するwiki