HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

ワードプレス 子テーマの作り方


ワードプレスの有料テーマを導入すると多いのが、テーマのバージョンアップ。
ところが、テーマをカスタマイズしているところにバージョンアップをしてしまうと、
せっかくカスタマイズしたものが全部パーになります。

そこで子テーマが必要になるわけです。

子テーマは、親テーマがバージョンアップで上書きされても影響されませんから、
テーマをバージョンアップしても何の問題もでなくなるわけです。

有償、無償にかかわらず、テーマをカスタマイズする場合は、なるべく子テーマを作ってそちらをカスタマイズするようにしましょう。

 

ワードプレスの子テーマの作り方

 

子テーマのフォルダーの作成

 ワードプレスのテーマフォルダー( wp-content/themes/ )に「(親テーマフォルダー名)-child 」といったフォルダーを作成します。

 わかりやすいように 親テーマ名の名前に-childeとつけましたけど、子のフォルダー名は、なんでもかまいません。
 親テーマとの関係は、そのフォルダーの中の style.css で設定します。(後述)

 

子テーマフォルダーにファイルを作る

作成した子テーマフォルダーに以下の2つのファイルを作成します。
  • style.css
  • function.php
こちらに 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″]

子テーマ作成プラグインの使い方

  1. 外観⇒テーマで子テーマを作りたいテーマに切り替えます。
  2. ワードプレスのプラグイン新規追加
  3. プラグインのアップロード
  4. ファイル選択でこのファイルを指定
  5. 今すぐインストールでインストール
  6. プラグインの有効化
  7. 設定の中の「ゆずまるの子テーマ作成」
  8. 「”今使っているテーマ”の子テーマを作ります」にチェックを入れて、変更を保存
  9. 外観->テーマで、子テーマを選べるようになっています。

子テーマ作ったら、このプラグインは停止させて削除しておくことをお薦めします。
間違って、再実行すると子テーマに作ったファイルが上書きでまっさらになってしまいますw

さらにテーマフォルダーをきれいにしようと「つかっていない」テーマを削除するとき・・・
(しないかな?w)間違って親テーマまで削除しないようにしてくださいね。

子テーマだけでは動きませんw

スポンサーリンク

スポンサーリンク

カテゴリー