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

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

なので、賢威7.0テンプレートのカスタマイズを考えているなら、子テーマの作成は必須と言えるでしょう。今回は、賢威7.0の子テーマを作る方法を紹介します。

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

賢威子テーマ用のフォルダを作成

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

style.cssファイルを作る

賢威子テーマ用の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をご覧ください。

簡易版はこちら

@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で保存

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

BOM(バイトオーダーマーク)とは?

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

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

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

functions.phpファイルを作る

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ファイルに追記していけば読み込まれます。

base.cssとrwd.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を修正

親テーマ内にある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

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

子テーマカスタマイズ時の注意

  • functions.phpは親テーマと子テーマに同じ関数がある場合にエラーを吐くので、functions.phpの修正は親テーマで行う。
  • functions.phpに関数を追加する場合は、親テーマに同様のモノがないか確認してから記述する。
  • その他のheader.phpやsingle.php、footer.php等に変更を加える場合は、親テーマからPHPファイルをまるごとコピーして、変更箇所を追記し、子テーマフォルダに投げ込む。

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

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

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

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

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

タイプ バージョン
カスタマイズ時 スタンダード Ver.7.0.4.4
対応 全タイプ ~Ver.7.0.6.6

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

2016.02.06追記

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

  • 親テーマへのアクセス: get_template_directory_uri()
  • 子テーマへのアクセス: get_stylesheet_directory_uri()

上記を使用するのが推奨されています。これを踏まえて、変更した場合は以下のようにして子テーマの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">

この記事が役に立ったらいいね!しよう

最新情報をお届けします

Twitterでアクロニウムをフォローしよう!