賢威7.0で子テーマを使用する方法とその不具合の直し方

今回の記事では、最近公開された賢威7の子テーマをインストールする方法を紹介したいと思います。

賢威7では閲覧数やキャラ、ランディングページが追加され、以前に比べて更にパワーアップしたようです。それでも、使用するサイトに合わせて色を変えるなど、あれやこれやとカスタマイズしたくなりますよね。

少しくらいのカスタマイズなら、子テーマを作らず直接賢威のファイルを編集した方が簡単かもしれませんが、今回はしっかりカスタマイズしたい派にオススメな、子テーマを作る方法の紹介です。

[ad]

1 子テーマを使うメリット
2 1. 子テーマ用フォルダを作成
3 2. style.css を編集
- 3.1 2-1. 子テーマが認識されない場合には
4 3. 親テーマの style.css を読み込む
- 4.1 3-1. CSSがうまく読み込めない場合は?
- 4.2 3-2. 管理画面のサムネイルがはみ出る場合には?
5 4. 知っておくと役に立つかも

子テーマを使うメリット

子テーマを使うメリットは色々あると思いますが、個人的には以下の3つが大きいと思います。

どれだけ子テーマを編集しても親テーマには影響が無い
カスタマイズで使用したコードの管理が楽になる
親テーマをアップデートしても、子テーマには影響が無い

もし賢威に不具合が発見された場合、その不具合を修正したテーマが公開されると思いますが、親テーマを直接編集していると、修正版への差し替えがかなりの手間になるはずです。

なので、ほんの少しだけカスタマイズ！という以外は、出来る限り子テーマを作っておくのがオススメです。

1. 子テーマ用フォルダを作成

それでは早速、子テーマを作っていきましょう。

まずは子テーマ用の keni-child というフォルダを新規作成します。
このフォルダの中に style.css と functions.php ファイルを作成します。

2. style.css を編集

keni-child という名前のフォルダを作っても、WordPress はフォルダ名から子テーマであることを自動で認識してくれません。

子テーマとして認識させるには、以下のコードを style.css にコメントとして追加する必要があります。
（Template：以外はお好みのもので大丈夫です）

@charset "UTF-8";
/*
Theme Name: 賢威7.0子テーマ
Template: keni70_wp_standard_prototype_201511210807  ← お使いの賢威のフォルダ名
Description: 賢威7.0の子テーマだよ
*/

ここで注意したいのが、Template: という箇所です。

Template: の箇所で親テーマと子テーマを繋げているんですが、ここは親テーマの名前ではなく、「親テーマのフォルダ名」が入ります。

親テーマの名前（親テーマの style.css に書かれている名前）ではないということに注意が必要です。

2-1. 子テーマが認識されない場合には

もし、子テーマが認識されない場合には、以下の項目をチェックして下さい。

Template: の後は親テーマの「フォルダ名」になっているか
親テーマのフォルダ名に、半角などのスペースが入っていないか
親テーマのフォルダ名と Template: の後に大文字、小文字の違いはないか
Template: の後などに全角スペースが入っていないか
utf-8 で保存されているか

上のチェック項目の最後にある、utf-8 という部分ですが、もし utf-8 で保存されていない場合には、お使いのテキストエディタから「別名で保存」すれば、utf-8を選択できると思います。

この時点でダッシュボードの「テーマ」に子テーマが表示されるはずです。もし子テーマが表示されない場合には、上の項目をチェックしてみて下さい。

3. 親テーマの style.css を読み込む

先ほどの style.css の編集で、子テーマを作成することはできましたが、親テーマのスタイルシートはまだ読み込まれていないので、functions.php から親テーマの各種 CSS ファイルを読み込みます。

@import を使って親テーマの style.css を読み込む方法もありますが、CSSの @import は遅いので functions.php から wp_enqueue_style() を使う方法がオススメです。

子テーマの functions.php に以下のコードを追加します。

<?php

function wcl_load_parent_css(){
    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('wp_enqueue_scripts', 'wcl_load_parent_css');

function wcl_load_parent_admin_css() {
    wp_enqueue_style( "parent_admin_style", get_template_directory_uri() . "/keni_admin.css" );
}
add_action('admin_menu', 'wcl_load_parent_admin_css' );

これで親テーマの CSS が適用されました。

ウインドウサイズを狭めても、横スクロールバーが出ることなく、きっちり画面内に収まっています。

管理画面のサムネイルもはみ出ること無く表示されていますね。

3-1. CSSがうまく読み込めない場合は?

ブラウザの幅を狭めてスマホサイズにしたときに、横スクロールバーが表示されてコンテンツがはみ出てしまう場合には、おそらく親テーマの rwd.cssファイルの読み込みがうまくいっていないので、functions.php に追加したコードをチェックします。

子テーマのCSSが適用されない場合には、おそらく上と同じように functions.php のコードが原因なので、下の画像でハイライトしている箇所をチェックしてみてください。

3-2. 管理画面のサムネイルがはみ出る場合には?

賢威7.0で追加されている管理画面のサムネイルがはみ出る場合には、keni_admin.css ファイルの読み込みができていないからだと思うので、以下のコードが functions.php に書かれているか確認してみて下さい。

function wcl_load_parent_admin_css() {
wp_enqueue_style( "parent_admin_style", get_template_directory_uri() . "/keni_admin.css" );
}
add_action('admin_menu', 'wcl_load_parent_admin_css' );

4. 知っておくと役に立つかも

子テーマを作った時点では問題になることはないと思いますが、カスタマイズを進めていったときに間違いやすいのが、親テーマと子テーマの読み込み方法の違いです。

親テーマフォルダへのアクセス： get_template_directory_uri()
子テーマフォルダへのアクセス： get_stylesheet_directory_uri()

下のコードのように、WordPress テーマのカスタマイズでは子テーマ内の画像や JS ファイルを読み込むことがあると思いますが、上の違いを覚えておくと、そのような時にきっと役に立つはずです。

↓ 使用例

// 親テーマの img フォルダから画像を取得・表示
echo '<img src="' . get_template_directory_uri() . '/img/parent-image.jpg' . '" alt="">';

// 子テーマの img フォルダから画像を取得・表示
echo '<img src="' . get_stylesheet_directory_uri() . '/img/child-image.jpg' . '" alt="">';