管理画面が不安定だった原因と解決法
先に結論から書きます。
WordPressで自作テーマが認識されなかった原因は、
テーマ直下に style.css がなかっただけでした。😫
起きていた症状⚠️
HTMLで静的サイトを作り、
それを WordPress 化している途中で、
こんな状態にハマりました。
- アイキャッチ画像の設定が出たり出なかったりする
- 管理画面の挙動がなんとなく不安定
「PHPの書き間違い？🤔」
「Gutenbergのバグ？😇」
と数時間悩みましたが、
原因はとてもシンプルでした🥹
※ちなみにこの不具合は
ローカル環境での制作中に起きたものです。
原因：テーマ直下に style.css がなかった😇
WordPressでは、
**「これはWordPressのテーマですよ」**と名乗るための
決まりがあります。
それが、
👉 テーマフォルダ直下に style.css があること。
WordPressは、
この style.css の中身を見て、
「あ、このフォルダはテーマなんだな」と判断します。
そのため、style.css が決まった場所にないと、
WordPressには テーマとして認識されません。
WordPress初心者の私は原因がわからず２時間ほど沼りました😇
よくある勘違い💡
静的HTMLに慣れていると、
CSSをこんな構成で管理しがちです。
- css/style.css
- css/main.css
私も同じように整理していたため、
ブラウザでは問題なく表示されていました。
しかし、WordPressにとっての style.css は
デザイン用CSSではなく、
「これはWordPressテーマですよ」という身分証明書😇
解決方法：やることは2つだけ🙌
今回の原因は、
テーマ直下に style.css がなかったことでした。
対応はシンプルで、
やることはこの2つだけです。
① テーマ直下に style.css を作成する
まず、テーマフォルダの一番上（直下）にstyle.css を作成します。
この style.css は、
デザイン用のCSSというよりも、
「これはWordPressのテーマですよ」と伝えるためのファイルです。
中身には、最低限のテーマ情報だけを書きます。
/*
Theme Name: 自作テーマ名
Author: 自分の名前
Version: 1.0
Description: はじめての自作テーマです。
*/
② デザイン用CSSは functions.php から読み込む
WordPressでは、
実際に見た目を整えるCSSをfunctions.php から読み込むのが基本です。
ここで指定したCSSファイルが、
フロント画面に反映されます。
たとえば、css/main.css というファイルを使っている場合は、functions.php に次のように書きます。
function my_theme_scripts() {
wp_enqueue_style(
'theme-style',
get_template_directory_uri() . '/css/main.css'
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
この記述は、
- テーマフォルダ内の
css/main.cssというCSSファイルを- WordPressで正しく読み込む
という意味になります。
※ main.css という名前に特別な意味はありません。main.css や common.css など、
自分が使っているCSSファイル名・場所に合わせて指定します。
この対応でどうなったか
これだけで、
- 管理画面にテーマ名が正しく表示され
- 今回起きていたアイキャッチ画像まわりの
不安定な挙動も解消されました🙌
今回の原因が
テーマ直下に style.css がなかったことだったため、
この対応で問題なく動くようになりました。
まとめ：WordPressには独特のルールがあるや😭
今回の学びはこれです。
- 「見た目のCSS」と「テーマ認識用の style.css」は別物
- 表示できていても、
WordPressがテーマとして認識していないことがある
もし今、
- 自作テーマを作っている
- 管理画面の動きが怪しい
- 原因が分からず詰んでいる
という方は、
まずテーマ直下に style.css があるか
一度チェックしてみてください🙌
✨ 小さなミスでも、
気づけばちゃんと成長の材料になります。🌱
