WordPress 子テーマの作成手順

2015-08-27

テーマのバージョンアップが通知されていたので、気にせずアップデートを行ったら、いままでカスタマイズした部分がすっかり元通りになってしまいました

自分はCSSとfooter.phpだけで済んだので被害は少なかったですが。。

また同じような目に合わないために、対策はちゃんとしたいと思います^^;

対策方法をざっくり言うと。。

カスタマイズしたい部分だけをあらかじめ別のテーマで定義しておいて、読み込むときにカスタマイズ部分で上書きするというものです。

JavaやC＃の継承のようなもので、親のテーマを継承することから、子テーマと呼びます。

以下で説明する手順は、このサイトで採用しているテーマColorMagを例に説明しています。

必要に応じて、ご自分のサイトで採用しているテーマに置き換えて手順を実行してください。

手順１サーバに子テーマ用のディレクトリを作成

・ディレクトリ名：親テーマの名前 + "-child"

（例） colormag-child

・作成先ディレクトリ：/wp-content/themes

（例） /wp-content/themes/colormag-child

手順２ style.css の作成

・テキストエディタ（メモ帳）を開き、以下のヘッダーを記述します。

・Template には、親テーマのディレクトリ名を記述します。

・その他の文字列は、自分のテーマに沿った形で書き換えてください。

/*
 Theme Name:   ColorMag Child
 Theme URI:    
 Description:  ColorMag Child Theme
 Author:       
 Author URI:  
 Template:     colormag
 Version:      1.0.0
 License:      GNU General Public License, version 3 (GPLv3)
 License URI:  GNU General Public License, version 3 (GPLv3)
 Tags:        light, white, two-columns, right-sidebar, left-sidebar, fluid-layout, responsive-layout, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options
Text Domain: colormag
 Text Domain:  colormag-child
*/

Theme Name: ColorMag Child

Theme URI:

Description: ColorMag Child Theme

Author:

Author URI:

Template: colormag

Version: 1.0.0

License: GNU General Public License, version 3 (GPLv3)

License URI: GNU General Public License, version 3 (GPLv3)

Tags: light, white, two-columns, right-sidebar, left-sidebar, fluid-layout, responsive-layout, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options

Text Domain: colormag

Text Domain: colormag-child

・ファイル名をstyle.cssにして適当な場所へ保存します。

・保存したファイルをサーバの子テーマのディレクトリにアップロードします。

手順３ functions.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' );

}

<?php //子テーマで利用する関数を書く

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

・ファイル名をfunctions.phpにして適当な場所へ保存します。

・保存したファイルをサーバの子テーマのディレクトリにアップロードします。

手順４テーマの有効化

管理画面のサイドメニューから、外観　＞　テーマ　に移動します。

子テーマが表示されますので、有効化してください。

手順５カスタマイズを行う

① スタイルシートのカスタマイズする場合

以下のようにカスタマイズしたい部分のみを子テーマのstyle.cssに記述します。

h1, h2, h3, h4, h5, h6 {
	padding-bottom: 18px;
	color: #333333;
	font-weight: normal;
	font-family: Meiryo, ‘Lucida Grande’, ‘Hiragino Kaku Gothic ProN’,sans-serif;
}

h1, h2, h3, h4, h5, h6 {

padding-bottom: 18px;

color: #333333;

font-weight: normal;