サポート » 使い方全般 » wp_add_inline_style で既存のハンドルに依存してCSSを出力する方法について

  • 解決済 kurudrive

    (@kurudrive)


    お世話になっております。

    wp_add_inline_style() について質問です。

    codexに記載の使用例では、

    function my_styles_method() {
    	wp_enqueue_style(
    		'custom-style',
    		get_template_directory_uri() . '/css/custom_script.css'
    	);
    	$custom_css = "
    		.mycolor{
    			background: #F00;
    		}";
    	wp_add_inline_style( 'custom-style', $custom_css );
    }
    add_action( 'wp_enqueue_scripts', 'my_styles_method' );

    のように書かれており、上記コードは正常に動作します。

    但し、上記コードでは、

    get_template_directory_uri() . ‘/css/custom_script.css’

    というCSSファイルを読み込んで、その下に $custom_css を出力します。

    自分が行いたいのは既に別の場所から wp_enqueue_style で読みこんであるCSSに対して inline style を追加したいので、

    function my_styles_method() {
    	wp_enqueue_style(
    		'custom-style',
    		get_template_directory_uri() . '/css/custom_script.css',
    		array('依存するハンドル名')
    	);
    	$custom_css = "
    		.mycolor{
    			background: #F00;
    		}";
    	wp_add_inline_style( 'custom-style', $custom_css );
    }
    add_action( 'wp_enqueue_scripts', 'my_styles_method' );

    と書きましたが、これは意図した場所に表示されますが、やっぱり

    get_template_directory_uri() . ‘/css/custom_script.css’

    は必要ありません。

    既に読み込んでるCSSファイルに依存させたいのだから

    function my_styles_method() {
    	$custom_css = "
    		.mycolor{
    			background: #F00;
    		}";
    	wp_add_inline_style( '依存するハンドル名', $custom_css );
    }
    add_action( 'wp_enqueue_scripts', 'my_styles_method' );

    じゃあかんの? と思ってやってみましたがガン無視されました…。

    既に wp_enqueue_style で別のどこかで読み込んでるCSSに依存で add inline style したい場合は、別途

    get_template_directory_uri() . ‘/css/custom_script.css’

    みたいに適当に空のCSSファイルでも作って置いておいて読み込ませないとダメなのでしょうか?

    おそらくそんなハズはなく別の手法があると思いますのでお力添えいただけると助かります。

    よろしくお願いいたします。

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • モデレーター Okamoto Hidetaka

    (@hideokamoto)

    WP_Stylesクラス使ってダイレクトに突っ込むというのは流石に横着すぎますかね。。
    https://codex.wordpress.org/Class_Reference/WP_Styles

    wp_add_inline_styleの処理を追いかけて行くとこのクラスに行き着くので、
    こっちを操作する形でもいけるはずだとは思います。

    Twenty FifteenからJetpackが登録しているStyleにインラインスタイルを追加するという想定で色々やってみました。

    まず、ハンドル名:twentyfifteen-jetpackにインラインスタイルを追加してみました。

    function kuck1u_add_inline_style() {
        $styles = 'body { background-color: #000; }';
    
        wp_add_inline_style( 'twentyfifteen-jetpack', $styles );
    }
    add_action( 'wp_enqueue_scripts', 'kuck1u_add_inline_style', 99 );

    これは、ノーマルですよね。「なんだ行けるじゃん!」と思って、次にJetpackのシェアボタンのCSS”sharedaddy”にハンドル名を変えてみたら、てこづりました。twentyfifteen-jetpackと同じコードでハンドル名だけ変更してもダメでした。じゃぁ、sharedaddyを登録しているwp_enqueue_styleはwp_headアクションで使われているから、wp_headすればいいかな?と思ってやってみたのですがダメで、最終的に以下のコードになりました。

    function kuck1u_add_inline_style( $tag, $handle ) {
        $styles = 'body { background-color: #000; }';
    
        if ( 'sharedaddy' === $handle ) {
            wp_add_inline_style( 'sharedaddy', $styles );
        }
    
        return $tag;
    }
    add_action( 'style_loader_tag', 'kuck1u_add_inline_style', 10, 2 );

    無理矢理感が否めないですが、これで上手くいきました。原因までは調べきれていないのですが、スタイルを登録する時のwp_enqueue_styleのタイミング?なのかな?と思いましたが、タイムリミットでよく分かりませんでした(笑)

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

    依存するcssを上書きする必要がないならwp_add_inline_styleじゃなくても良いのじゃないでしょうか。
    依存する側の.hoge{}よりあとにwp_add_inline_styleで直接head要素に書き込んで.hone{}で前の.hoge{}を上書きする目的で使うものなのではないでしょうか。
    あるいはすでにあるインラインよりあとにフックして、先のインライン要素よりあとにインラインを書き出す。
    ちがうかな。

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

    @oisit さん

    テーマAのアドオン的プラグインA+に、テーマAの色やレイアウトを変更するテーマカスタマイザーが搭載されていて、そのCSSをプラグインA+がインラインで出力してテーマAのCSSを上書きする…的な感じなのかな?とイメージしました。

    次にJetpackのシェアボタンのCSS”sharedaddy”にハンドル名を変えてみたら、てこづりました。

    wp_add_inline_styleが使える条件は、それまでに当該のハンドルのスタイルシートが登録されている(register or enqueue)ことです。

    sharedaddy はwp_head内でenqueueされているので、それより早い wp_enqueue_scripts ではダメだったのではないか、と言う仮説。

    と思ったものの

    じゃぁ、sharedaddyを登録しているwp_enqueue_styleはwp_headアクションで使われているから、wp_headすればいいかな?と思ってやってみたのですがダメで

    なんですよね……

    あれれ、手元でやってみて期待通りに動いたのですが……

    
    add_action('wp_head',function() {
          $styles = 'body { background-color: #000; }';
    
          wp_add_inline_style( 'sharedaddy', $styles );
    },2);
    

    https://gyazo.com/f1d7c70329bfac3f0026bb819e056f19

    ところで @kurudrive さんへの答えとしては、add_actionの第3引数を適切に指定しておけば大丈夫なはずです、となりますね。

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

    @hnle さん、ありがとうございます。

    sharedaddyのwp_headの第三引数は、0,10,99しか試してませんでしたorz プライオリティを7以下にすると反映されるのを確認しました。

    @hideokamoto さん
    @kuck1u さん
    @oisit さん
    @hnle さん

    みなさんいろいろありがとうございます!
    結局の所 Hinaloe さんの指摘通り 第3引数の指定で無事動作しました。

    https://github.com/kurudrive/lightning-advanced-unit/commit/c808d1e0173cfb2c5072deff87afabe20035fcb9

    ありがとうございました!

7件の返信を表示中 - 1 - 7件目 (全7件中)
  • トピック「wp_add_inline_style で既存のハンドルに依存してCSSを出力する方法について」には新たに返信することはできません。