Houn

2022.05.02 WordPress

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

wp-stylecss-path

前提

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' );

といった感じです。

WordPressに時間を取られすぎていませんか?

「ブログやるなら、HP持つならWordPress!と聞いて始めたけれど『これどうやるの?』のオンパレード。分からなくてググってみれば『下手なカスタマイズはサイトが真っ白になります』『ハッキングされるかも?』って、何それ?!なんかもういいや‥」

‥というあなたへ朗報です!

WordPressブログに関するトラブル解決の専門家「ブログサポーターがみたか」さんが提供されているサービス

が助けてくれます。

WordPressのトラブル対応やカスタマイズにお強く、これまでのべ1,000件以上の解決実績をもとに

  • 使い方が分からない
  • カスタマイズしたい
  • ブログ運用の仕方、WordPressの使い方が間違っていないか不安
  • ハッキングに遭ってしまった‥

などさまざまな要望・問題に、丁寧迅速に対応してくださいます(がみたかさんは10年近く前から存じ上げていますが、本当に丁寧で優しいです)

ブロガーさんなら記事を書くこと、事業者さんなら本来の業務が時間を割くべきことで、「WordPress、これどうやるの?」とググって悩んでいるのは時間の無駄です。

きちっと必要な部分には投資をして”餅は餅屋”に任せ、できた時間でしっかり本業に集中し、より大きな収益を生みましょう。

安心して、快適にサイトを運営するために、ぜひ活用してください。

お問い合わせ