ワードプレス 子テーマの作り方
ワードプレスの有料テーマを導入すると多いのが、テーマのバージョンアップ。
ところが、テーマをカスタマイズしているところにバージョンアップをしてしまうと、
せっかくカスタマイズしたものが全部パーになります。
そこで子テーマが必要になるわけです。
子テーマは、親テーマがバージョンアップで上書きされても影響されませんから、
テーマをバージョンアップしても何の問題もでなくなるわけです。
有償、無償にかかわらず、テーマをカスタマイズする場合は、なるべく子テーマを作ってそちらをカスタマイズするようにしましょう。
ワードプレスの子テーマの作り方
子テーマのフォルダーの作成
ワードプレスのテーマフォルダー( wp-content/themes/ )に「(親テーマフォルダー名)-child 」といったフォルダーを作成します。わかりやすいように 親テーマ名の名前に-childeとつけましたけど、子のフォルダー名は、なんでもかまいません。
親テーマとの関係は、そのフォルダーの中の style.css で設定します。(後述)
子テーマフォルダーにファイルを作る
作成した子テーマフォルダーに以下の2つのファイルを作成します。- style.css
- function.php
[download id=”3924″]
子テーマの style.css の作成
style.css は、以下のような内容を記述して子テーマフォルダーにアップロードします。※日本語が入る場合には、テラパッドなどを使用して、文字セットを UTF-8N で保存してください。
※ワードプレスのファイルは、UTF-8で保存されているので SHIFT-JIS のファイルは日本語が化けてしまいます。
他はなんでもいいのですが、Theme Name と Template だけはしっかりと。
Template は、親テーマのフォルダー名なのでくれぐれも間違いのないように。
/* Theme Name: 子テーマの名前 Theme URI: 子テーマのURL Description: 子テーマの説明 Author: 作成者名 Author URI: 作成者URL Template: 親テーマのフォルダー名 Version: バージョン番号 */
例えば、親テーマの名前を avant_tcd060 とします。
/* Theme Name: avant_tcd060_child Theme URI: http://~/avant_tcd060_child/ Description: avant_tcd060_child Author: ほにゃほにゃ Author URI: http://~/ Template: avant_tcd060 Version: 1.0.0 */
言ってしまえば、子テーマの style.css は、以下だけあればOKですwww
/* Theme Name: avant_tcd060_child Template: avant_tcd060 */
子テーマの function.php の作成
次に function.php に以下を記述して子テーマのフォルダーにアップロードします。<?php add_action('wp_enqueue_scripts','theme_enqueue_styles'); function theme_enqueue_styles() { wp_enqueue_style('parent-style',get_template_directory_uri() .'/style.css'); wp_enqueue_style('child-style' ,get_stylesheet_directory_uri().'/style.css', array('parent-style') ); } ?>
子テーマの サムネイル画像
もちろん、なくてもかまいません。モチベーションを上げる目的のためだけにこの項目を書いていますwww子テーマのフォルダーの中に screenshot.png を入れておけば、テーマ選択画面でサムネイルが表示されます。
screenshot.png のサイズは、300 x 225 あたりの比率で作るとキレイ・・・みたい(主観)
もちろん、親テーマの screenshot.png を持ってきてもかまいません。
子テーマの実装
手順としては、これでおしまいで、あとは外観 ⇒ テーマ で子テーマを選択すれば終わりです。実際のカスタマイズは、この子テーマのフォルダーの style.css に書き足せばOKです。
他のファイル、function.php 、テンプレートなども、この子テーマのフォルダーに入れることで反映されます。
子テーマ の style.css の例
/* Theme Name: avant_tcd060_child Theme URI: http://~/avant_tcd060_child/ Description: avant_tcd060_child Author: ほにゃほにゃ Author URI: http://~/ Template: avant_tcd060 Version: 1.0.0 */ .title_width{ width:550px; } .title_color{ color:#cc0000; }
子テーマ作成プラグイン
と、面倒な説明は省きまして、子テーマを作成するプラグインを書いたのでお試しください。[download id=”3936″]
子テーマ作成プラグインの使い方
- 外観⇒テーマで子テーマを作りたいテーマに切り替えます。
- ワードプレスのプラグイン新規追加
- プラグインのアップロード
- ファイル選択でこのファイルを指定
- 今すぐインストールでインストール
- プラグインの有効化
- 設定の中の「ゆずまるの子テーマ作成」
- 「”今使っているテーマ”の子テーマを作ります」にチェックを入れて、変更を保存
- 外観->テーマで、子テーマを選べるようになっています。
子テーマ作ったら、このプラグインは停止させて削除しておくことをお薦めします。
間違って、再実行すると子テーマに作ったファイルが上書きでまっさらになってしまいますw
さらにテーマフォルダーをきれいにしようと「つかっていない」テーマを削除するとき・・・
(しないかな?w)間違って親テーマまで削除しないようにしてくださいね。
子テーマだけでは動きませんw
スポンサーリンク