スタイルシートなしでwp_add_inline_styleを使用する


18

作成しているカスタムテーマのヘッダーにカスタムインラインスタイルを追加する必要があります。私はwp_add_inline_style()機能に出くわしましたが、それは機能しますが、特定のスタイルシートに依存するため、私にはあまり適していません。スタイルシートに依存せずに、headタグの最後にインラインスタイルを追加する必要があります。

テーマのスタイルシートまたは存在しないもののいずれかを設定しようとしました。どちらの場合でも動作しますが、少し汚いハックIMOです(テーマスタイルシートを2回読み込むか、ゴーストファイルを参照します...)。スタイルシートに依存せずにインラインスタイルを頭に追加する適切な方法はありますか?

もちろん、header.phpファイルに直接追加することもできますが、これは避けたいと思います。

回答:


24

スタイルをページヘッドに直接追加するだけです。これを行う最良の方法は、フックを持つテーマを使用していると仮定して、 'wp_head'アクションフックを使用することです。そのようです:

add_action('wp_head', 'my_custom_styles', 100);

function my_custom_styles()
{
 echo "<style>*{color: red}</style>";
}

アクションフックの詳細については、WPコーデックスをご覧ください。


問題ない!お役に立てて嬉しいです。
スカイシャブ14年

(私のように)ダッシュボードページにカスタムインラインCSSを追加する場合は、admin_headアクションを使用できます。
そのブラジル人

16

単純に「ダミー」ハンドルを使用できます。

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );

wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

私のスタイルにはハンドルがあり、.cssファイルからインクルードされているかのようにキューに入れられるため、このソリューションが本当に気に入っています。
dev_masta


3

テーマには必ずデフォルトのスタイルシートがあります(そうでなければ、テーマとしてロードされることさえありません)。このスタイルシートをインラインCSSのハンドラーとして使用するだけです。例は、テーマTwentyFifteenのfunctions.phpにあります(簡潔にするためにコードをスキップしました)。

function twentyfifteen_scripts() {
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

}
function twentyfifteen_post_nav_background() {
    wp_add_inline_style( 'twentyfifteen-style', $css );
}

1
OPは、wp_add_inline_style()を使用する以外の方法を具体的に要求しました。どちらの方法も機能しますが、wp_add_inline_style()を使用する理由はありません。理由を知っているなら、私はそれについて知りたいです。
スカイシャブ

あなたのソリューションは機能しますが、WPチームの誰かから一度聞いたことによると、それはまだ「ハッキング」です(間違えていなければ)。正確には私の意見ではありません。OPは、スタイルシートを2回ロードするか、ゴーストフックを使用せずにこれを行う方法はないと考えていたと思います。とにかく、プラグインを作成していない場合、テーマのスタイルシートが常に存在します。あなたのソリューションがコーデックスに文書化されているので、私も答えを編集しています。:)
キャスパー

私はwp_add_inline_style()で遊んでみましたが、これが私が見つけたものです。スタイルシートにスタイルを添付することの利点は、デキューされた場合、スタイルが印刷されないことです。しかし、どちらの方法でも、それらを頭にインラインで印刷します。あなたがプラグイン開発者であり、スタイルが頭に印刷されているとしましょう。これはテーマスタイルとは関係ないため、子テーマがメインテーマスタイルをデキューして独自のスタイルを使用する場合、プラグインスタイルは出力されません。そのため、OPは、この理由でリクエストのその部分を指定した可能性があります。
スカイシャブ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.