サポート » テーマ » 複数のCSSを認識させたい

  • 解決済 90kuma

    (@90kuma)


    現在、TCD019というテンプレートを使用しており、子テーマを作成中です。
    標準のスタイルシート style.css は普通に読み込めるようになっていますが、
    このテンプレートで使用しているPC用の style_pc.css、スマホ用の style_sp.css について、どうも上手く読み込めません。
    どちらも@importすればちゃんと読めるようなのですが、推奨じゃないと言うことで、functions.phpで読ませたいのですが、複数のスタイルシートを読み込ませる方法についての情報が少なく、難儀しています。

    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’));
    wp_enqueue_style( ‘parent2-style’, get_template_directory_uri() . ‘/style_pc.css’ );
    wp_enqueue_style( ‘child2-style’, get_stylesheet_directory_uri() . ‘/style_pc.css’, array(‘parent2-style’));
    wp_enqueue_style( ‘parent3-style’, get_template_directory_uri() . ‘/style_sp.css’ );
    wp_enqueue_style( ‘child3-style’, get_stylesheet_directory_uri() . ‘/style_sp.css’, array(‘parent3-style’));
    }
    ?>

    という記述をしたところ、
    style.cssは正常、
    style_pc.css、style_sp.css は親cssを読まずに子cssだけ実行している様子です。

    よろしくご助力ください。

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

    (@digitmaetel)

    parent2-styleとchild2-styleは、どういう意味ですか

    ご返信、ありがとうございます。
    style.css とダブったら不味いだろうと考えて、2、3と割り振ったのです。
    試しに2、3を外してみたところ、レイアウトが大きく崩れています。
    おそらく親cssを読みに行っていないように思われます。

    메텔

    (@digitmaetel)

    おそらく親cssを読みに行っていないように思われます。

    style_pc.css、style_sp.css が子テーマにも有るのですか

    そのうえで、次の点ですが。

    試しに2、3を外してみたところ、レイアウトが大きく崩れています。

    文面から分かりにくいのですが。
    そもそも、子テーマで親のスタイルシートが読み込めていないのではないでしょうか。

    • この返信は1 年、 2 ヶ月前に  메텔 さんが編集しました。

    はい、その通りです。

    메텔

    (@digitmaetel)

    子テーマ内の style_pc.css、style_sp.css には、スタイルの記述がないということはありませんか。

    申し訳ございません、スタイルの記述、というのは具体的にどんなものでしょうか?
    通常のスタイルシートと同じ感じで書いています。
    親cssの変更点のみの記載で問題ないですよね?

    메텔

    (@digitmaetel)

    親cssの変更点のみの記載で問題ないですよね?

    通常、親テーマのスタイルシートに、上書きするスタイルのみの記述でいいですよ。

    文面から分かりにくいのですが。
    そもそも、子テーマで親のスタイルシートが読み込めていないのではないでしょうか。

    はい、そんな感じがしています。
    一応ネット上の情報を見て回って、考えられるところはやったと思うのですが……

    大変申し訳ないです、なぜか書き込みが反映されずご連絡が遅くなりました。

    通常、親テーマのスタイルシートに、上書きするスタイルのみの記述でいいですよ。

    であれば、一応ちゃんとできているはずです。
    header.phpでスタイルシートの定義をする場合、子テーマのスタイルシートを指定するので間違いありませんか?

    메텔

    (@digitmaetel)

    子テーマをどう作っているのか曖昧さも疑いたくなってきてもいますが、

    header.phpでスタイルシートの定義をする

    とは wp_head のことだと読み替えていいですよね。

    • この返信は1 年、 2 ヶ月前に  메텔 さんが編集しました。

    header.phpは子テーマの中にあるものです。ちょっと別の理由でヘッダ部分を書き換える必要があったもので。。

    子テーマ自体は、一般にブログ等で書かれているとおり、functions.php と style.css で作りました。
    その部分はすでに数ヶ月間運用し、特段おかしなことはないんです。

    今回、親テーマにあった style_pc.css と style_sp.css の2つも書き換えの必要が生じたため、
    子テーマのディレクトリ内に同名ファイルを作成し、functions.php に冒頭の設定を追記したところ、親テーマのcssファイルを読まず、子テーマのcssに書いた変更点だけを読んでいるような挙動をしているのです。

    메텔

    (@digitmaetel)

    親テーマがプロダクトテンプレートであるため、フォーラム・ルールで抵触しそうな範疇は回避しています。

    どちらも@importすればちゃんと読める

    のですから、WordPressの使い方上には支障はないと判断できます。

    ここで課題としたいのは、「wp_enqueue_scripts」を使った方法で、親テーマのスタイルシートを、そもそも読み込めているかという点ではないでしょうか。

    はい、そうですね。
    @import すれば親テーマのスタイルシートもちゃんと読めていますが、この部分を削除してしまうと、子テーマの変更箇所だけが読み込まれるらしく、レイアウトが大幅に崩れた状態になってしまうのです。

    冒頭の書き込みの通り、wp_enqueue_scripts は一応書式に従って書いたつもりだったのですが、なにか他に気がつく点があれば、ぜひご指摘ください。とりあえずなんでも試してみます。

    冒頭の書き込みの通り、wp_enqueue_scripts は一応書式に従って書いたつもりだったのですが、なにか他に気がつく点があれば、ぜひご指摘ください。とりあえずなんでも試してみます。

    公式のテーマであればこれで上手くいくのですが、TCDのテーマですよね?
    親テーマの header.php に

    <link rel="stylesheet" media="screen and (min-width:641px)" href="<?php bloginfo('template_url'); ?>/style_pc.css<?php version_num(); ?>" type="text/css" />
    <link rel="stylesheet" media="screen and (max-width:640px)" href="<?php bloginfo('template_url'); ?>/style_sp.css<?php version_num(); ?>" type="text/css" />

    このようなコードが書かれていませんか?
    style_pc.css と style_sp.css の読み込みをメディアクエリで分けているはずなので、子テーマ側でも同様にPC用の style_pc.css、スマホ用の style_sp.css の読み込みをメディアクエリで分けないとダメなはずです。

    ご協力ありがとうございます。
    はい、該当するコードは確認できています。 <?php bloginfo(‘template_url’); ?> の部分が、<?php echo get_stylesheet_directory_uri(); ?> である以外は違いがなかったのですが、その部分を変更しても、結果は同じでした。やはり親テーマにあるスタイルシートを読んでいない様子です。

    functions.php の構文は冒頭の形で正しいのでしょうか?
    熊本地震無料Wi-Fi流浪民さんから指摘があった、「parent2-style」という部分は、現状 2・3 を削った状態にしてあります。

15件の返信を表示中 - 1 - 15件目 (全21件中)
  • トピック「複数のCSSを認識させたい」には新たに返信することはできません。