WordPressやSymfonyのTipsを中心にアニメや日常の出来事について語ります。
メニュー

【回答】WordPressTCDテーマの子テーマを作成して「style_pc.css」を配置しても読み込まれない問題の対処法

この記事は約2分18秒で読めます

女性,ユニット,SALBIA,SARY,サルビア,悩み,苦悩,頭痛,表情
ゆっきー
ども、カフェブロガーの悠木です。 お気に入りのカフェはドトールコーヒーです。 14時からの限定スイーツ「シューシャポー」が大好きです。

さえこさん(@saeko_bihadasui)から子テーマについての質問をいただいたのでブログからお答えしようと思います。

“TCDテーマをカスタマイズしようと子テーマを作成したのですが、「style_pc.css」がうまく読み込まれないんです。”

というご質問です。

※確認は私が実際に使用している「gorgeous_tcd013」を使っています。テーマによっては多少違いがあるかもしれませんがほぼ同じはずです。

style_pc.cssとは?

まずはTCDテーマフォルダの中に下記の3つのスタイルシートがあることを確認してください。

  • style.css (全体のスタイルシート)
  • style_pc.css (パソコン用のスタイルシート)
  • style_sp.css (スマートフォン用のスタイルシート)

他にもコメント用のスタイルシートなどが用意されていますが、とりあえずはこの3つを覚えてください。

style_pc.cssはどこで読み込まれているの?

style_pc.cssがあることは分かりましたが、どこでこのスタイルシートは読み込まれているのでしょうか?
大体、スタイルシートはページを表示する始めの部分で読み込まれるのでheader.phpを確認しましょう。

ブラウザの横幅が640px以下ならstyle_sp.css
ブラウザの横幅が641px以上ならstyle_pc.cssが読み込まれるようになっています。

style_pc.cssを参照している部分

href="/style_pc.css"で指定されたパスのスタイルシートを読み込んでいることが分かります。
PHPコードが使われているので解説したいと思います。

bloginfo('template_url');
version_num();

の2つです。

version_num();はただ、WordPressのバージョン情報を表示しているだけなので、特に気にしなくていいです。

bloginfo(‘template_url’)について

は下記のように変換されます。

となります。

現在有効となっている”子テーマ”ではなく、”親テーマ”を参照するようになっています。
そのため、子テーマにstyle_pc.cssを用意しても読み込まれなかったという訳です。

原因が分かったところで、対処方法をご紹介します。

子テーマに作ったstyle_pc.cssを読み込ませる方法

子テーマにファイルを作成する

header.php を親テーマからコピーする
style_pc.css は下記の内容にしてください。

親テーマのstyle_pc.cssを参照してインポートで取り込む指定をしてください。
これで親テーマのスタイルシートを引き継いで追記できます。

子テーマのheader.phpを編集する

子テーマにheader.phpを配置したことで
子テーマのheader.phpを優先的に読み込まれるようになりました。

先ほども書いたとおり、bloginfo('template_url');で親テーマの方を参照しているので
現在有効となっている子テーマを参照するように変更します。

echo get_stylesheet_directory_uri();に変更して下さい。

style_sp.cssも子テーマで変更するのであれば同様に指定してあげてください。

これで子テーマのstyle_pc.cssが正しく読み込まれます!
分からない部分や説明が足らない箇所がありましたらコメントください。

関連記事

  1. WordPress Popular Postsの使い方
  2. 青白く光るフレア
  3. WordPress 子テーマ 解説
  4. WordPress Crayon Syntax Highlighter
  5. zylyz wordpress free theme
  6. こたつの上でパソコンを触る男性

コメントをお待ちしております

PR

カテゴリー