【WordPress】style.cssはテーマのルートディレクトリに置かないとエラーになる

前提

WordPressテーマにはstyle.cssファイルが必須で、ここにTheme Nameをはじめとしたテーマの情報を記載することが必要です。

で、テーマ情報に続いてスタイルを記述。このstyle.cssファイルをfunction.phpにて

function add_files() {
  wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

って書くことで読み込んでくれます。

本題

このstyle.cssファイルの設置場所ですね。

通常であれば
themes / (テーマのルートディレクトリ) / style.css
と、テーマディレクトリ直下に置きますが、例えばほかにも複数のcssファイルを作っていて「css」っていうフォルダにまとめておきたいなっていう場合。下記の感じですね。

themes / (テーマのルートディレクトリ) /　css / style.css（ほか、hoo.css, bar.css…）

こうすると、実はエラーになってしまいます。

エラー: スタイルシートが見つかりません。って言われちゃうんですね。

そうなんです。テーマに必須なstyle.cssは、テーマディレクトリの直下に置かないと認識してくれません。

wp_enqueue_style('style', get_template_directory_uri().'/css/style.css');

こんなふうに、ご丁寧にパス指定して読み込ませてあげようとしてもダメなのです。

解決策

素直にディレクトリから出して使えば良い話ではあるんですが。「いやー、まとめて格納してCSS管理したい」という場合は”style.cssにはテーマ情報を書くだけにする”という手もあります。

実際のスタイルはほかにcssファイル（main.cssとか？）を作って、そっちに書いていくんですね。

でですね、style.cssにはテーマ情報しか書いてない場合はなんと、get_stylesheet_uri()で読み込む必要がありません。

ただ単にテーマ内、テーマディレクトリ直下にさえポンと置いておけばWordPressが「あ、ちゃんとstyle.cssあるね。テーマ情報の記述もオッケー」と認識してくれます。

注意点

get_stylesheet_uri()はあくまで、style.cssを探して読み込む関数のため、ほかのcssファイルを読み込んでほしいときはget_template_directory_uri()を使います。

functions.phpに

function add_files() {
  wp_enqueue_style('mainCss', get_template_directory_uri().'/css/main.css');
}
add_action( 'wp_enqueue_scripts', 'add_files' );

といった感じです。