質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.55%

子テーマの複数のCSSを適応させたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 278

JAMJP

score 7

前提・実現したいこと

ワードプレスの子テーマを作って子テーマのstyle.cssの呼び込みはできましたが、
親テーマの同じ階層にもうひとつあるstyle.min.cssも子テーマに設置し、呼び込みしたいのですが、
子テーマのfunction.phpにどう書けばよいのかわかりません。

該当のソースコード

現在の子テーマのstyle.cssの呼び込みの記述

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles(){
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    }


問題なく子テーマのstyle.cssを読み込んでくれています。

試したこと

function my_enqueue_styles() {
    wp_enqueue_style( 'layouts-style', get_stylesheet_directory_uri() . '/style.min.css' , array(), true);
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );


を書き加えてみたことろ、子テーマに設置したstyle.min.cssを読み込んではくれますが、親テーマにあるstyle.min.cssも同時に読みこんでいます。

子テーマのstyle.min.cssのほうを優先?もしくは子テーマのstyle.min.cssだけを読み込むにはどのように記述すればよいのかアドバイスを頂けると助かります。
ネットでもたくさん検索して

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( 'layouts-style', get_template_directory_uri() .'/style.min.css' );
}


なども試してみましたが変わらず親テーマのstyle.min.cssを読み込んでいます。

よろしくお願いしますm(__)m

補足情報(FW/ツールのバージョンなど)

補足します。
イメージ説明
現在のヘッダーのソースコードは下記のような出力となります。

補足します。

ワードプレステーマDIVERにて、
親テーマのfunctions.phpを見たところ、
さらに他の場所にあるファイルを呼び込む記述がありました。

style.min.cssを全文検索をかけると、
それらのファイル群の中で

functions/diver_setting.php
functions/load-script.php

の2つのファイルの中でstyle.min.phpの記述がありました。

まず一つ目

functions/diver_setting.phpの中で

function my_theme_add_editor_styles() {
    add_editor_style('//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css');
    add_editor_style(diver_minifier_file('/editor-style.css','/editor-style.min.css','css'));

}
add_action( 'init', 'my_theme_add_editor_styles' );


と記述がありました。

そして、

二つ目

functions/load-script.phpの中で

function my_style() {
    //maincss
    wp_enqueue_style( 'diver-main-style', diver_minifier_file('/style.css','/style.min.css','css'));

    wp_deregister_style('parent-style');


    if(strpos(get_stylesheet_directory_uri(),'bc') !== "diver_child"){
        wp_enqueue_style( 'child-style', get_stylesheet_directory_uri()  . '/style.css',array(), null, 'all');
    }

    if(get_bloginfo('version') >= "5.0.0"){
        wp_enqueue_style( 'diver-block-style', diver_minifier_file('/lib/functions/editor/gutenberg/blocks.css','/lib/functions/editor/gutenberg/blocks.min.css','css'));
    }

    //swiper
    wp_enqueue_style( 'swipercss','https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.0/css/swiper.min.css', array(), null, 'all');

    if(get_option('diver_option_firstview','0') == '4'){
        wp_enqueue_style( 'YTPlayer', 'https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.2.9/css/jquery.mb.YTPlayer.min.css', array(), null, 'all');
            // YTPlayer
        wp_enqueue_script( 'ytplayer', '//cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.2.9/jquery.mb.YTPlayer.min.js', array(), false, true );
    }

    if(!is_mobile()){
        // sticky
        wp_enqueue_script( 'sticky', get_template_directory_uri()  . '/lib/assets/sticky/jquery.fit-sidebar.min.js', array(), false, true );
    }

}
add_action( 'wp_enqueue_scripts', 'my_style');


と記述がありました。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

子テーマを使用している場合、get_template_directory_uri は親テーマのディレクトリURIを返します
WordPress 4.7.0 以降で子テーマ → 親テーマの優先順位でファイルを呼び出す場合は get_theme_file_uri を利用するのが良いと思います。4.7.0 以前では get_stylesheet_directory_uri になります。

// 優先度を下げて親テーマでの wp_enqueue_scripts よりも後に実行させる.
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11 );
function theme_enqueue_styles() {
    // 親テーマで登録される style.min.css の読み込みを解除する.
    wp_dequeue_style( 'diver-main-style' );
    // 子テーマ側のスタイルファイルの読み込みを登録する.
    wp_enqueue_style( 'child-style', get_theme_file_uri( 'style.css' ) );
    wp_enqueue_style( 'layouts-style', get_theme_file_uri( 'style.min.css' ) );
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/08 14:35

    お世話になっております。
    無事子テーマのstyle.min.cssを読み込ませることが出来ました。ご親切にありがとう御座います。
    理解を深めたいのですが、この、

    wp_enqueue_scripts', 'theme_enqueue_styles', 11

    の数字の11はどんな意味があるのでしょうか?

    キャンセル

  • 2019/07/08 14:48

    アクションにフックさせる関数の優先度(実行順序)です。デフォルト(省略した場合)では 10 となります。数値が大きいほどフックさせた関数が後に実行されます。親テーマ側では優先度を省略しているため、デフォルトの 10 として登録されています。優先度を 10 よりも大きくしておかないと、親テーマ側の add_action( 'wp_enqueue_scripts', 'my_style'); よりも add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ) が先に実行されてしまうため、親テーマ側で wp_enqueue_style( 'diver-main-style', ...) で登録したキューを解除することができません。

    キャンセル

  • 2019/07/08 20:11

    ご親切にありがとうございます。
    とても勉強になります。
    まだまだわからないことばかりですが、自分で調べながら理解を深めていこうと思います。お付き合い下さり心より感謝申し上げます。ベストアンサーに登録させてください。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.55%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる