賢威(WordPress)の子テーマが作れない？反映できなかった時の対処法
photo credit: joshme17 Oh no! 200 Pictures! via photopin (license)
賢威(WordPress)の子テーマが作れない？反映できなかった時の対処法
実際に私も反映できなかったので、調べたことをまとめました。
反映できなかった時の設定方法
テンプレートの設定を色々いじってみたいので子テーマを作ることにしました。
【wordpress 子テーマ 】でGoogle検索。
検索結果は、分かりやすそうなサイトがたくさん出ています。これらのサイトを参考にして、小テーマを作成してみました。
１）子テーマの入れ物(ディレクトリ)を用意する
『親テーマと同じ名前＋_child』の名前で子テーマ用の入れ物(ディレクトリ)をFTPを使って用意しました。
新規の入れ物(ディレクトリ)作成方法が分からない方は、【お使いのサーバー名やFTP名】【ディレクトリ】【作成】の検索で多くのサイトで作成方法が紹介されています。
２）「style.css」ファイルを作成する
「style.css」のファイルを作ってたら、説明のサイトにある通り【Template】には「親テーマの名前」を、【Theme Name】には「子テーマの名前」を入れました。以下のソースコードはサンプルです。
Template: keni07
Theme Name: keni07_child
３）「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' );
}
４）WordPressのテーマから子テーマを選択し、有効化する
WordPressに戻って、『外観→テーマ→子テーマ』を選択し有効化に変更。いくつかのサイトを読んでみると、これで自動で子テーマになり、今の見た目は親テーマを引き継ぎます。新たに子テーマを編集した時に親テーマより子テーマの編集内容が優先され見た目にも反映してきます。これで作業終了です。更新して確認してみます。
５）子テーマの見た目(CSS)が反映されない！！
確認して、ショック。最初から全てが上手く行くとは思っていませんでしたが、すんなりといかないと残念です。今回表示された結果は写真のようになりました。昔のHPみたいになっていますね。見た目(CSS)の情報が上手く引き継がれていません。
６）子テーマを確認してみる
上手くいかなかったので、まずは行った内容に単純ミスがないかどうかの確認をしました。こういう新しい作業する時には「うっかりミス」が起こりがちです。今回見直してみた点を挙げます。
- 「style.css」「function.php」のスペルミス
- ソースコードスペルミス
- ソースコードの過不足
- 文字コード「UTF-８」を選択
- 「function.php」内のソースコードを別のソースコードに変更
- 子テーマの入れ物名(ディレクトリ名)のスペルミス
ざっと、これだけ見直してみました。しかし、テーマが適応されません！！！反映されていないです、見た目。。。
７）親テーマを確認してみる
子テーマを見ても間違いらしき箇所が見つかりません。ならば、親テーマに戻って階層が正しいかどうかの確認もしようと思い戻りました。ファイルを置く階層が間違っていると、サイトに反映されません。階層を確認していると・・・見つけました。私のミス！！！
反映できた時の設定方法、間違っていた訳
間違いのヒントは親テーマにあり
見つけましたよ、間違いの箇所！！まさかこれだとは思っていませんでした。
その答えは・・・
「function.php」ファイルの名前
賢威テンプレート(WordPress版)では、違ったんです。
- 間違い「function.php」
- 正解 「functions.php」
みなさん分かりましたか？？
「S」が足りないんです。
【S】が！！
【S】ですよ!!!!!
たった一文字に長い時間を費やした、これが感想です。上手く反映されない時、大概小さな間違いなんですよね。今回もそうでした。間違いが見つかって良かったです。
この記事を読まれているということは、中々うまくいかないな、反映されていない、動作しないと悩んでいて読まれている方がほとんどでしょう。みなさんはどうですか？？「functions.php」になっていますか？見直して見てください。
「style.php」のソースコード
これは、上記と変更はありません。１回作った物をそのまま利用しました。
※サンプル
Template: keni07
Theme Name: keni07_child
「functions.php」のソースコード
ファイル名に「S」を加えましたか？ソースコードは変更しました。
<?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」と、間違いの原因が分かった後に、参考にしたサイトをご紹介します。ソースコードはこのサイトのをコピーさせていただきました。賢威７についての設定方法が説明されているので賢威を使用されている方にはオススメです。
