前提・実現したいこと
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を出力します。
この場合の指定方法もご教授頂ければ助かります。
よろしくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
下記のような質問は推奨されていません。
- 質問になっていない投稿
- スパムや攻撃的な表現を用いた投稿
適切な質問に修正を依頼しましょう。
回答2件
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総合スコア24976
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
回答へのコメント
0
未検証で失礼します。
『Elementorは複数のランダムなcssを出力します。』
と書かれていますが以下の指定は可能でしょうか。
wp_enqueue_style関数の第3引数にスタイルファイル名を指定すると
その指定したファイルの後に第2引数のファイルを読み込んでくれるようです。
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') );
あとは
heada.phpやfooter.phpに直書きする。
wp footerなどで出力する。
https://wpdocs.osdn.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_API/%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%95%E3%83%83%E3%82%AF%E4%B8%80%E8%A6%A7/wp_footer
などで質問の目的は達成できると思いますが
テーマの挙動的に可能でしょうか?
参考になりましたら幸いです。
投稿2018/11/27 01:04
総合スコア468
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
回答へのコメント
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
関連した質問
Q&A
解決済
タブの切り替え時にふわっと表示させたい。
回答2
クリップ0
更新
2023/06/08
意見交換
受付中
Python経験2年からゲームプログラマーになるためには
回答18
クリップ2
更新
2023/05/31
Q&A
解決済
htmlのformのsubmitが効かない
回答1
クリップ0
更新
2023/06/07
意見交換
受付中
大規模言語モデル ファインチューニングの方法
回答5
クリップ1
更新
2023/06/07
意見交換
受付中
Wordpressのphpファイルにデータベースの接続情報を直接記入しても大丈夫なのでしょうか。
回答39
クリップ3
更新
2023/05/25
意見交換
受付中
プログラミングの仕事やアルバイトの探し方を教えてください。(プログラミングの職歴はありません)
回答14
クリップ4
更新
2023/06/07
意見交換
クローズ
プログラマを目指す際の進路について
回答40
クリップ3
更新
2023/05/27
意見交換
受付中
データ分析、機械学習や人工知能にPythonが使われている理由に関して。
回答11
クリップ2
更新
2023/06/07
同じタグがついた質問を見る
WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。
PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。