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

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

新規登録して質問してみよう
ただいま回答率
85.44%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

2回答

6359閲覧

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

Unite-east

総合スコア12

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2018/11/26 23:45

前提・実現したいこと

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を出力します。
この場合の指定方法もご教授頂ければ助かります。

よろしくお願いします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

CHERRY

2018/11/27 01:12

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

2018/11/27 01:26

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

回答2

0

ベストアンサー

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

総合スコア25188

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Unite-east

2018/11/27 01:26

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

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

ruuusaamarki

総合スコア468

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問