WordPressプラグインが出力するcssをテーマcssの前に読み込みたい

前提・実現したいこと

WordPressオリジナルテーマでElementorを使用しているのですが、
Elementorが出力するcssがテーマcssの後に読み込まれるのを、テーマcssの前に読み込ませたいです。

現在以下の記述でcssを読み込んでいます。

function twpp_enqueue_styles() {
  wp_enqueue_style( 'original-style', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'twpp_enqueue_styles' );

プラグインが出力するcssの後にテーマcssを読み込むようにするにはどのように記述すれば良いのでしょうか？

また、Elementorは複数のランダムなcssを出力します。
この場合の指定方法もご教授頂ければ助かります。

よろしくお願いします。

CHERRY

2018/11/27 01:12

回答を書いてからですが....　　プラグインが出力するのは、 HTMLファイルに埋め込まれた「インライン CSS」ではなくて、外部CSSファイルなんですよね？

Unite-east

2018/11/27 01:26

はい、外部cssで出力されます

回答2件

ベストアンサー

WordPressのqueueに登録された順番と実際のHTMLでヘッダに出力された順番がわからないので、まずは一般論で...

WordPressでのCSS やスクリプトの読み込み順を指定する通常の方法は、 https://wpdocs.osdn.jp/関数リファレンス/add_action のパラメータの説明に下記の説明があるように

add_action( $hook, $function_to_add, $priority, $accepted_args );

$priority

（整数）（オプション）特定のアクションに関連づけられている関数が実行される優先順序を指定する。少ない数であれば早く実行され、同じ数の優先度である関数はアクションに追加された順序で実行される。
初期値： 10

優先順序 $priority を 9999 等の 10 より大きな数字にすることで、wp_enqueue_scripts フックの中での実行順を後ろにずらすことが可能です。

まずは、これを試してください。

add_action( 'wp_enqueue_scripts', 'xxxxx', 9999 ); のように優先順位を後ろに下げても動作を変更できないのであれば...

wp_enqueue_scripts フックで登録せずに、下記のように、wp_head フックで、優先順位を最後の方( </head>の直前に実行される)に実行されるように $priority を大きな数字で登録して、直接 link タグを使って、CSS を書き出す必要があるかもしれません。
(wp_enqueue_scriptsフックで登録された<head>に出力される内容は、wp_headフックの最初の方で実行されて出力されるので、<head>内の最後の方に出力するのであれば、wp_enqueue_scriptsフックを使わずに直接HTMLを記載する必要があります。)

add_action( 'wp_head', 'add_original_style_css', 9999 );
function add_original_style_css() {
    echo '<link rel="stylesheet" id="original-style" href="'. get_stylesheet_uri() . '" type="text/css" media="all" />';
}

この方法でダメであれば、プラグインが上書きしていると思いますので、テーマファイルに直接CSSを記載するかプラグインのソースコードを読んで動作を調べて、プラグインのソースコードを直接修正する等の対応が必要になるかもしれません。

投稿2018/11/27 01:09

編集2018/11/27 01:10

CHERRY

総合スコア24976

回答へのコメント

Unite-east

2018/11/27 01:26

コード「add_action( 'wp_enqueue_scripts', 'xxxxx', 9999 );」でテーマcssが最後に読み込まれるようになりました！ありがとうございます。優先順序 $priorityは試していたのですが、記述場所が間違っていたようです。色々調べても一向にわからなかったので、大変助かりました。ありがとうございます！ベストアンサーにさせて頂きます。

未検証で失礼します。
『Elementorは複数のランダムなcssを出力します。』
と書かれていますが以下の指定は可能でしょうか。

wp_enqueue_style関数の第３引数にスタイルファイル名を指定すると
その指定したファイルの後に第２引数のファイルを読み込んでくれるようです。
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_enqueue_style

php
1//例
2wp_enqueue_style( 'original-style', get_stylesheet_uri(), array('/wp-content/themes/Elementor/style1.css','/wp-content/themes/Elementor/style2.css') );