WordPress テーマ(Twenty Eleven)の子テーマ設定!






昨日投稿したAsai’s checkで、WordPress 3.4にアップデートしたことを報告したのだけど、同時期に、WordPressのデフォルトテーマ(Twenty Eleven)もアップデートして、どうしようかな?と悩んでることもお伝えしました。

これまで、Twenty Elevenのテーマをそのまま編集してカスタマイズしてたので、何も考えずにアップデートしちゃうと、これまでカスタマイズした部分が上書きされて消えてしまいます。さて、どうしたものか… 対応策は子テーマを採用することと知ってはいたのですが、いままでそのままにしてました。^^;

で、今回のバージョンを機に、子テーマを設定することに決定!

現在のテーマ:
スクリーンショット 2012-06-17 12.05.43
※子テーマとは、WordPressのあるテーマ(親テーマ)の機能を継承して、さらに機能を追加したり、置き換えたりするテーマのことです。また、WordPressのテーマをカスタマイズする際に、WordPress.orgが推奨している方法です。

今回、Twenty Elevenを親テーマとして、子テーマを設定したので、忘備録的にその設定方法を残しておきます。私と同じように、WordPressのテーマをそのままカスタマイズしてる人は、参考にしてください。


まずは、私が行った手順を書きますね。

1.カスタマイズしたコードをバックアップ
まず、ブログサイトのファイルマネージャー(サーバー上で、PHP等のコードを操作できるサーバー管理ツールのことです)を起動して、Twenty Elevenのテーマに対して、カスタマイズしたコード(style.css、各種.php)を抜き出します。

私の場合、レンタルサーバーを導入したのが今年の3月1日なので、その日以降に修正が入ってるコードを抽出すればOK!
スクリーンショット 2012-06-17 11.46.44
※抽出した10ファイルです。

2.子テーマ用のフォルダを作成
 public_html ← TOPフォルダ
  wp-content
   themes (すべてのテーマが入るディレクトリ)
    kid (子テーマ自身のディレクトリ; 名称は自由) ←これです!
     style.css (子テーマに必須; 名称は style.css)

私の場合、ブログのサイトと同じWakeiseijakuという名前の子テーマを作りました。
スクリーンショット 2012-06-17 11.23.09
 
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!
スクリーンショット 2012-06-17 12.00.03

とりあえず、親テーマと分離して子テーマを用意するのは、ここまでの処理で終了です。なんかあっけないね!^^;

4.カスタマイズしたコードのアップロード
さて、3までで子テーマの作成は終了なのですが、これだと親テーマと同じ内容になってしまいます。なので、カスタマイズしたコートを2で作成した子テーマのフォルダにアップロードすればOK!

ここで、1点注意があります。functions.phpのみ、親テーマにある同名のファイルをオーバーライドできません。親テーマのfunctions.php に追加して読み込まれるようです。具体的には、親テーマのfunctions.php の直前に読み込まれるようなので、親テーマに同じ名前の関数があれば、子テーマの関数が使用されることになります。

私の場合、WP-PageNaviプラグインを有効にするため、以下のように設定しています。

functions.php:
スクリーンショット 2012-06-17 12.28.12
※コードを添付したらうまく表示できなかったので、画面キャプチャを添付しておきます。

最後に
今回、WordPressの子テーマを設定したのですが、今後、親テーマ(Twenty Eleven)が、アップデートしても何の躊躇もなくアップデートできるようになりました。( ゚Д゚ノノ”☆パチパチパチパチ

あと、上記には書いてないのですが、実際に子テーマを有効にする際には、テストサイトでテスト後に本サイトで子テーマを有効にしました。実は、functions.phpをアップロードした際、変なコードが残ってて、最初、子テーマを有効にした時、エラー表示されてしまったんです。WordPressの管理画面にも入れないしどうしようかと… まぁ、子テーマのフォルダから一旦、functions.phpを消したら戻ったので、安心しましたけどね。

なので、いきなり本番環境でテストするのではなく、テスト環境で確認がおわってから試すようにしましょう!^^;

では、みなさんも子テーマ設定試してください。(^.^)/~~~

カテゴリー: Wordpress   タグ: , , , ,   作成者: 朝井俊光   この投稿のパーマリンク






記事の購読はこちら!

一服のお茶と、お菓子を振る舞う気持ちで、ブログ立ち上げ時から毎日更新継続中です。


「今日の写真」を代表とする日常を記録してゆくライフログ的な性格と、「Asai’s check」によるRSSリーダー巡回チェック、「お店探訪」や「開封の儀・製品レビュー」等の各種レビュー記事を書いています。
登録はこちらから
follow us in feedly



関連記事:

コメントを残す