サポート » テーマ » 子テーマにcssが反映されない(functions.phpにコード記述)

  • 解決済 sasaido1

    (@sasaido1)


    使用テーマ:
    stinger3forFANS
    Wordpressバージョン:
    4.4.2

    子テーマを作成しています。
    子テーマのフォルダにはstyle.cssとfunctions.phpのみ入れている状態です。

    その際、
    style.cssに@import url(“../●●●/style.css”);
    を記述するやり方はよくないとのことで、代わりにfunctions.phpにphpコードを記述するやり方で行いました。

    参考にした記事:
    https://mono96.jp/archives/26592
    これとまったく同じことをやりました。

    ですが、サーバーにアップしてみると、
    cssが適用されていません。
    一体どこが間違っていたのでしょうか?
    ちなみに、前述のcssに@importのやり方だとちゃんと反映されました。

    見るべき箇所、怪しいと思われる箇所のヒントなどでも構いません。
    よろしくお願いします。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • 메텔

    (@digitmaetel)

    これとまったく同じことをやりました。

    コピーしてペーストしただけということはないですよね。

    sasaido1

    (@sasaido1)

    返信ありがとうございます。

    はい、そのままコピペしました。
    具体的には以下の内容をfunctions.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’ );
    wp_enqueue_style( ‘child-style’,
    get_stylesheet_directory_uri() . ‘/style.css’,
    array(‘parent-style’)
    );
    }
    ?>

    これが原因なのでしょうか?

    ちなみにstyle.cssは下記の通りです。
    /*
    Theme Name: stinger3-child
    Author: sasaido
    Template: stinger3forFANS
    */

    메텔

    (@digitmaetel)

    style.cssに@import url(“../●●●/style.css”);
    なぜ伏せ時にされているのか理解し難いですが、この箇所、
    実際は../stinger3forFANS/style.cssになっていますか。stinger3forfansではありませんか?

    同様に子テーマのディレクトリ名はstinger3-childですか?

    sasaido1

    (@sasaido1)

    返信ありがとうございます。

    ちょっと説明がわかりづらかったかもしれません。
    質問を整理させて頂きます。

    私はワードプレスでブログを運営しており、子テーマを作ろうとしています。
    私が調べたところ、子テーマの作り方は二つあり、それは以下の通りです。

    ①style.cssに@importを含むコードを記述するもの

    ②functions.phpにコードを記述するもの

    ①の方法は試してみて成功しましたが、サイト表示が遅くて現在は非推奨とのことなので、②の方法を試しましたところ、うまくいきませんでした。

    そこで、質問した内容になります。
    ②のやり方で間違っている箇所を教えてください。

    맹조さんのご回答部分は①の方法に当たる部分で、問題なく表示できました。
    ②の方法について何かご存知であればご回答頂ければと思います。
    よろしくお願いします。

    메텔

    (@digitmaetel)

    示唆では伝わってないので無礼を承知で端的に書きます。
    使用テーマ:
    stinger3forFANS
    の style.css の頭は以下に成ってませんか。

    /*———————————————————
    Theme Name: stinger3verFANS2
    Theme URI: http://stinger3.com
    Description: stinger3
    Author: enji
    Author URI: http://stinger3.com
    License:
    License URI:
    Version: 20140502
    ———————————————————*/

    sasaido1

    (@sasaido1)

    返信ありがとうございます。
    まさにそのようになっております。
    下の方だけ少し違います。

    /*———————————————————
    Theme Name: stinger3verFANS2
    Theme URI: http://stinger3.com
    Description: stinger3
    Author: enji
    Author URI: http://stinger3.com
    License:
    License URI:
    Version: 20140502
    ———————————————————*/
    @charset “UTF-8”;
    /*—————————–
    RESET
    ——————————*/

    ここが何かの原因なのでしょうか?

    메텔

    (@digitmaetel)

    で、あれば

    /*
    Theme Name: stinger3-child
    Author: sasaido
    Template: stinger3forFANS
    */

    なぜに、こう書かれたのでしょうか?

    sasaido1

    (@sasaido1)

    その記述は、子テーマフォルダ内のstyle.cssにした記述です。

    一つ前に返信したものは
    親テーマであるstinger3verFANS2フォルダ内のstyle.cssの記述です。

    子テーマの名前は任意で決められるとのことでstinger3-childとしました。
    Authorは一応、子テーマ作成者である自身の名前を記述しました。

    よろしくお願いします。

    메텔

    (@digitmaetel)

    その記述は、子テーマフォルダ内のstyle.cssにした記述です。

    ですよね。それはわかります。
    でも、親テーマであるstinger3verFANS2フォルダ内のstyle.cssの宣言は、

    /*———————————————————
    Theme Name: stinger3verFANS2

    ですね。

    sasaido1

    (@sasaido1)

    元テンプレートのテーマネームが違うということでしょうか。

    親テーマのフォルダ名はstinger3forFANSとなっています。
    記述は
    /*———————————————————
    Theme Name: stinger3verFANS2

    となっています。
    ちなみに、ここらへんはリネームや書き換えを一切行っていません。
    デフォルトのままです。

    これに気づき、
    子テーマcss内も
    /*
    Theme Name: stinger3-child
    Author: sasaido
    Template: stinger3verFANS2
    */

    にしてアップロードしてみたのですが、やはりcssは適用されませんでした。

    nobita

    (@nobita)

    こんにちは、

    以下の内容をfunctions.phpにコピペしました。

    に提示されているコードですが、

    間違っていないと思います

    チャイルドテーマのスタイル指定に、依存関係の配列が記述されていますが

    依存関係の配列を間違えて、修正したような場合

    array('parent-style')

    チャイルドテーマのスタイルシートがロードされにくくなることはあるようです。

    なので、チャイルドテーマのハンドル名(第一引数)を変更してみるとどうですか?

    モデレーター Seisuke Kuraishi (tenpura)

    (@tenpura)

    ちなみに、前述のcssに@importのやり方だとちゃんと反映されました。

    親テーマの CSS 自体は読み込まれているけど正しく反映されないという状況でしょうか?その場合、親テーマの構成により稀に @import 方式でないと上手くいかないものがあるようです。どうしても PHP で読み込ませたい場合は、お使いの親テーマのサポートに問い合わせる方が早いかもしれません。

    메텔

    (@digitmaetel)

    チャイルドテーマで stinger2 から使い始めて、現在 stinger7 を使っているサイトと別に、新しいサイトに stinger3forFANS をインストールして一から「theme_enqueue_styles」方法で試みましたが、支障なくチャイルドテーマに出来ました。

    この子テーマは親テーマ stinger3verFANS2 のテンプレートを引き継ぎます。

    と出ています。

    sasaido1

    (@sasaido1)

    解決しました。

    間違ったフォルダにアップロードしていたのが原因でした。
    参考としてだしたやり方のままで無事子テーマcssを反映させることができました。

    お騒がせしました。
    親身に答えて頂き、本当にありがとうございました。

    메텔

    (@digitmaetel)

    記述には一切の誤りはない、という鼻息でしたが。

15件の返信を表示中 - 1 - 15件目 (全15件中)
  • トピック「子テーマにcssが反映されない(functions.phpにコード記述)」には新たに返信することはできません。