昨日投稿したAsai’s checkで、WordPress 3.4にアップデートしたことを報告したのだけど、同時期に、WordPressのデフォルトテーマ(Twenty Eleven)もアップデートして、どうしようかな?と悩んでることもお伝えしました。
これまで、Twenty Elevenのテーマをそのまま編集してカスタマイズしてたので、何も考えずにアップデートしちゃうと、これまでカスタマイズした部分が上書きされて消えてしまいます。さて、どうしたものか… 対応策は子テーマを採用することと知ってはいたのですが、いままでそのままにしてました。^^;
で、今回のバージョンを機に、子テーマを設定することに決定!
現在のテーマ:
※子テーマとは、WordPressのあるテーマ(親テーマ)の機能を継承して、さらに機能を追加したり、置き換えたりするテーマのことです。また、WordPressのテーマをカスタマイズする際に、WordPress.orgが推奨している方法です。
今回、Twenty Elevenを親テーマとして、子テーマを設定したので、忘備録的にその設定方法を残しておきます。私と同じように、WordPressのテーマをそのままカスタマイズしてる人は、参考にしてください。
まずは、私が行った手順を書きますね。
1.カスタマイズしたコードをバックアップ
まず、ブログサイトのファイルマネージャー(サーバー上で、PHP等のコードを操作できるサーバー管理ツールのことです)を起動して、Twenty Elevenのテーマに対して、カスタマイズしたコード(style.css、各種.php)を抜き出します。
私の場合、レンタルサーバーを導入したのが今年の3月1日なので、その日以降に修正が入ってるコードを抽出すればOK!
※抽出した10ファイルです。
2.子テーマ用のフォルダを作成
public_html ← TOPフォルダ
wp-content
themes (すべてのテーマが入るディレクトリ)
kid (子テーマ自身のディレクトリ; 名称は自由) ←これです!
style.css (子テーマに必須; 名称は style.css)
私の場合、ブログのサイトと同じWakeiseijakuという名前の子テーマを作りました。
3.次に、style.cssを作成
子テーマを作る上で必須のファイルです。
書式は以下のようになっています。
・Theme Name (必須) :子テーマ名
・Theme URI (任意) :子テーマのウェブページ
・Description (任意) :テーマの説明
・Author URI (任意) :作者のウェブページ
・Author (任意) :作者の名前
・Template (必須) :親テーマ名
・Version (任意) :子テーマのバージョン
これが、最初に設定したStyle.cssです。
@charset “utf-8”; /* Theme Name: Wakeiseijaku ← 子テーマ名 Author: Toshimitsu Asai Description: WordPressテーマ(Twenty Eleven)の子テーマです。 Template: twentyeleven ← 親テーマ名 Version: 0.1 */ @import url(‘../twentyeleven/style.css’); ← 親テーマのCSSを読み込む |
上記コードの@importは、親テーマのスタイルシートを読み込んでいます。この行以降に、CSSを変更する箇所を記載すればOKです。
子テーマ用のstyle.cssの作成が終わったら、2で作った子テーマ用のフォルダにアップロードします。これで、WordPressのテーマ管理画面に利用可能なテーマとしてリストアップされますので、有効化すればOK!
とりあえず、親テーマと分離して子テーマを用意するのは、ここまでの処理で終了です。なんかあっけないね!^^;
4.カスタマイズしたコードのアップロード
さて、3までで子テーマの作成は終了なのですが、これだと親テーマと同じ内容になってしまいます。なので、カスタマイズしたコートを2で作成した子テーマのフォルダにアップロードすればOK!
ここで、1点注意があります。functions.phpのみ、親テーマにある同名のファイルをオーバーライドできません。親テーマのfunctions.php に追加して読み込まれるようです。具体的には、親テーマのfunctions.php の直前に読み込まれるようなので、親テーマに同じ名前の関数があれば、子テーマの関数が使用されることになります。
私の場合、WP-PageNaviプラグインを有効にするため、以下のように設定しています。
functions.php:
※コードを添付したらうまく表示できなかったので、画面キャプチャを添付しておきます。
最後に
今回、WordPressの子テーマを設定したのですが、今後、親テーマ(Twenty Eleven)が、アップデートしても何の躊躇もなくアップデートできるようになりました。( ゚Д゚ノノ”☆パチパチパチパチ
あと、上記には書いてないのですが、実際に子テーマを有効にする際には、テストサイトでテスト後に本サイトで子テーマを有効にしました。実は、functions.phpをアップロードした際、変なコードが残ってて、最初、子テーマを有効にした時、エラー表示されてしまったんです。WordPressの管理画面にも入れないしどうしようかと… まぁ、子テーマのフォルダから一旦、functions.phpを消したら戻ったので、安心しましたけどね。
なので、いきなり本番環境でテストするのではなく、テスト環境で確認がおわってから試すようにしましょう!^^;
では、みなさんも子テーマ設定試してください。(^.^)/~~~