賢威7 – 便利な子テーマを作る方法

2016年1月21日現在、リリースされている賢威7.0はプロトタイプという事もあり、頻繁にアップデートされています。

また、正式リリース後も不具合があれば、どんどんアップデートが繰り返されるのが賢威の特徴でもあります。

子テーマ用フォルダを作る

PCのデスクトップ上に「keni70_child」というフォルダを作成します。ここではファイル名を「keni70_child」としていますが、任意の名前でOKです。

style.cssファイルを作る

Terapad のようなテキストエディタで「style.css」ファイルを作成します。次に親子関係を築けるように、style.cssを編集していきましょう。

style.cssファイルを編集する

@charset "UTF-8";
/*
Theme Name: 賢威7.0 スタンダード版 子テーマ
Theme URI: http://www.seo-keni.jp/
Description: 賢威7.0 スタンダード版テンプレートの子テーマです。
Author: 株式会社ウェブライダー
Author URI: http://www.web-rider.jp/
Template: keni70_wp_standard_prototype_201512111544
Version: 7.0.4.4
*/

基本的には上記内容を参考にstyle.cssに書き込みますが、「Theme Name」「Template」のみ書き込めば子テーマとして認識されます。さらに詳しく書きたい方はWordPress Codexをご覧ください。

子テーマ | WordPress Codex

簡易版はこちら

@charset "UTF-8";
/*
Theme Name: 賢威7.0子テーマ    /*任意のテーマ名*/
Template: keni70_wp_standard_prototype_201512111544    /*親テーマのフォルダ名*/
*/

Theme Nameは好きな名前でOKです。Templateには親テーマのフォルダ名を記述します。

子テーマを作る際に1番大事なのがTemplateの記述で、親テーマと子テーマを繋ぐ役割をしますので間違えないように気をつけましょう。

逆に子テーマを作ったのに「表示されない」とか「壊れている」という場合は、Templateをまずチェックしましょう！

特に賢威テンプレートは、ダウンロード時によってテーマフォルダ名が変わるので、注意が必要です。ここでは「keni70_wp_standard_prototype_201512111544」と記述しています。

記述が終わったら保存をしますが、「ファイル」⇒「文字/改行コード指定保存」を選択します。

文字コードは「UTF-8N（ボムなし）」・改行コードは「LF」を選択して保存しましょう。ここで「ボムとはなんぞや？」となるワケですが・・・

BOM（バイトオーダーマーク）とは？

バイトオーダーマーク (byte order mark) あるいはバイト順マーク（バイトじゅんマーク）は通称BOM（ボム）といわれる、

Unicodeの符号化形式で符号化したテキストの先頭につける数バイトのデータのことである。このデータを元にUnicodeで符号化されていることおよび符号化の種類の判別に使用する。

引用元: wikipedia

要するに「UTF-8を使用しますよ！」というデータの事なんですが、WordPressではBOMなしを選択しなければなりません。また、改行コードも同様に「LF」を指定します。

functions.phpファイルを作る

style.cssと同様に「functions.php」ファイルを作成します。保存時の「ファイルの種類」はPHPを選びましょう。

子テーマを作成するのに必要最低限のファイルは「style.css」「functions.php」の2つなので、コレで子テーマとしては動作するようになります。

functions.phpは追加する関数がない限り、空っぽの状態でも良いのですが、親テーマのCSSを読み込む方法として以前までは「@import:」が使われてきました。

しかし、現在では、子テーマのfunctions.phpに「wp_enqueue_scripts()」を記述する方法が推奨されています。

ということは・・・必然的にfunctions.phpを編集する必要性があります。ちなみに「@import:」を使った方法よりも速く読み込まれるメリットがあります。

functions.phpを編集する

<?php

//親テーマCSS⇒子テーマCSSの順に読み込む
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-base-style', get_template_directory_uri() . '/base.css' );
    wp_enqueue_style( 'parent-rwd-style', get_template_directory_uri() . '/rwd.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
}
add_action( 'admin_menu', 'theme_admin_styles' );
function theme_admin_styles() {
    wp_enqueue_style( 'excolor_css', get_template_directory_uri() . '/colpick.css' );
    wp_enqueue_style( "parent_admin_style", get_template_directory_uri() . "/keni_admin.css" );
}

上記の関数を子テーマのfunctions.phpに貼り付けて使用して下さい。これで親テーマのCSSが反映され、カスタマイズ時に子テーマのCSSファイルに追記していけば読み込まれます。

子テーマの「style.css」に追加スタイルを書き込んでも適用されますが、親テーマと合わせたいなら子テーマに「base.css」「rwd.css」ファイルを作って、それぞれスタイルを書き込んで下さい。

その際に1行目に「@charset “UTF-8”;」と記述するのを忘れないようにしましょう！

子テーマのimagesフォルダを読みこませるには？

子テーマにimagesフォルダを作り、apple-touch-iconやファビコンを子テーマのimagesフォルダから読み込ませるようにするなら、もう1つ作業が必要です。

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('template_url'); ?>/favicon.ico">
<link rel="apple-touch-icon" href="<?php bloginfo('template_url'); ?>/images/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('template_url'); ?>/images/apple-touch-icon.png">
<link rel="icon" href="<?php bloginfo('template_url'); ?>/images/apple-touch-icon.png">

header.phpの25行目～29行目あたりの上記の箇所を修正し、親テーマではなく子テーマ内のimagesフォルダを読み込むように書き換えます。

親テーマ内にあるheader.phpをコピーして、子テーマフォルダ内にペーストしましょう。

<link rel="shortcut icon" type="image/x-icon" href="<?php bloginfo('stylesheet_directory'); ?>/images/favicon.ico">
<link rel="apple-touch-icon" href="<?php bloginfo('stylesheet_directory'); ?>/images/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="<?php bloginfo('stylesheet_directory'); ?>/images/apple-touch-icon.png">
<link rel="icon" href="<?php bloginfo('stylesheet_directory'); ?>/images/apple-touch-icon.png">

「template_url」と記述されている箇所を「stylesheet_directory」に書き換えてましょう。後は、画像ファイルを子テーマのimagesフォルダに放り込んでいけばOKです。

MATO-MEMO

関数が多いので・・・難しく思えるかもしれませんが、書いた事を順番にやっていけば子テーマの作成は簡単です。また、カスタマイズ時の注意点として・・・

以上の点に注意して、カスタマイズしてみて下さいね。賢威テンプレートは多くの方が利用していますから、少しでもカスタマイズして他サイトと差別出来るようにしたいですね。

ここまで書いといてなんですが・・・子テーマファイルを作りましたので、参考にしてみて下さい。

子テーマフォルダにスクリーンショットの画像ファイルを入れてますが、アミアミだと寂しいので入れただけで必須ではないです。

※子テーマファイルの配布停止中

カスタマイズ・対応バージョン

エントリーは読んだけど、自分が使っているタイプやバージョンには適用出来るのか不安だと思うので、カスタマイズ時と対応バージョンを紹介しておきます。

2016.02.06追記

子テーマのimagesフォルダを読み込むのに「stylesheet_directory」を親テーマに合わせて使用しましたが、これはもう推奨された方法ではないようなので修正しました。

上記を使用するのが推奨されています。これを踏まえて、変更した場合は以下のようにして子テーマのimagesフォルダを読み込みます。

修正版

<link rel="shortcut icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/favicon.ico">
<link rel="apple-touch-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="<?php echo get_stylesheet_directory_uri(); ?>/images/apple-touch-icon.png">
<link rel="icon" href="<?php echo get_stylesheet_directory_uri(); ?>/images/apple-touch-icon.png">

該当箇所に移動する