web-dev-qa-db-ja.com

動的インラインスタイルを追加する方法

動的CSSを追加したいので、現在私はdivに直接追加しています。

$color = "#000000";
echo '<div style="background:'.$color.'">

上記のようなコードを追加するのは悪いことですか？

私はいくつかのフォーラムでそれがサーバーの負担を増すことを読んだことがあります、そしてそれはWordPressコーディング標準によって推奨されません。私はwp_add_inline_style()を使うべきです。だから私はそれを使用しようとしていますが、それはうまくいきません。これが私がしようとしているものです：

functions.php：

function add_custom_css() {
        wp_enqueue_script('custom-css', get_template_directory_uri() . '/custom.css');          
    }
}
add_action( 'wp_enqueue_scripts', 'add_custom_css' );

single.php

$color = "#000111";
$custom_css = "
    .mycolor{
            background: {$color};
    }";

wp_add_inline_style( 'custom-css', $custom_css );

Custom.cssファイルにコードは追加されません。何がおかしいのですか？

theme-developmentthemeswp-enqueue-style
2
ajay

これを試して：

クエリ条件を使用する

スタイルをテンプレートに直接エンキューすることはお勧めできません。それは可能です（関連するアクションが起動する順序を理解し、wp_add_inline_style()への呼び出しが実行順序の正しい時点で行われるようにする）。すべてのコードをまとめて、動的スタイルを追加するためにis_single()などの適切な条件付きクエリを使用する方がはるかに簡単です。

function add_custom_css() {
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');   
    // Add dynamic style if a single page is displayed
    if ( is_single() ) {
        $color = "#000111";
        $custom_css = ".mycolor{ background: {$color}; }";
        wp_add_inline_style( 'custom-css', $custom_css );
    }
}
add_action( 'wp_enqueue_scripts', 'add_custom_css' );

元の答え

functions.php 

function add_custom_css() {
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');          
}
add_action( 'wp_enqueue_scripts', 'add_custom_css', 20 );

single.php 

function wpse104657_custom_color() {
    $color = "#000111";
    $custom_css = "
        .mycolor{
            background: {$color};
        }";
    wp_add_inline_style( 'custom-css', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpse104657_custom_color', 21 );

add_action()呼び出しの3番目のパラメータは優先順位です。これは、WordPressにアクションを追加する順序を指示します。数字が大きいほど後で実行されることを意味します。

追加編集 これはcustom.cssにコードを追加しません - インラインスタイルを追加するだけですifcustom.cssはすでにロードされています。

参考文献

8
Pat J

Custom.cssファイルにコードは追加されません。何が悪いの？

これらのスタイルは、エンキューしたスタイルシートではなく、<style>タグ内のHTMLドキュメントに追加されます。 「インライン」スタイルを追加する前に、スタイルシートをエンキューする必要があります。

関数名は、実際のインラインスタイルではなくスタイルブロックを生成するため、少しわかりにくいです。上記のDIVで行ったことはインラインスタイルです。これらは!importantルールよりも優先されるので、これらを避けるべきです（それらをオーバーライドするのは非常に難しいでしょう）。

私はそれがサーバーの砲火を追加するといういくつかのフォーラムで読んだことがあります

いいえ、違います。あなたはおそらくこれをスタイルシートとして機能するPHPスクリプトと間違えています。それらは悪いです。

3
onetrickpony

たぶんそれは私だけですが、ここでは、私達がnatに力を入れてラクダを飲み込んでいるように感じます。 （それはフレーズです...それを調べてください:)）

子テーマが関連付けられている可能性があるテーマを作成している場合、それを直接インラインで追加し、wp_add_inline_style（）でスタイルブロックに追加するには、それをオーバーライドするために！importantが必要になります。

これがカスタムプラグインで、背景色を変更することが機能の重要な部分である場合は、必ずインラインで追加してください。

これを過度に複雑にしても利点はありません。

元の質問に答えるために。

上記のようなコードを追加するのは悪いことですか？

簡単な答えは、いいえ、悪くないです。それは結果をもたらしますが、サーバーパフォーマンスはそれらの1つではありません、そして私はこれを落胆させるようなWordPressコーディング標準の中には何も見ません。一般に、インラインスタイルは控えめに慎重に使用する必要がありますが、悪くはありません。

関心事を確実に分離したい場合は、スタイルの代わりにクラスをインラインで追加することができます。

$color = "black";
echo '<div class=".$color.">'

そしてスタイルシートに.blackを定義します。 （もちろん、色オプションの定義済みリストがある場合にのみ機能します。）

2
Jeremy Ross

私はすべてのテンプレートでこれを行います。

<?php
    function hook_css() {
        ?>
            <style>
                .sub { margin: auto; max-width: 1140px;}
            </style>
        <?php
    }
    add_action('wp_head', 'hook_css');
?>

これにより、完了時に、参照されているスタイルタグとスタイルがheadセクション内に配置されます。

<?php wp_head();?>

テンプレートにコーディングしている場合は、

<?php wp_head();?>セクションあなたはここでそれについてもっと学ぶことができます WordPress Codex

0
Zachary Raineri

ただ使用してください：

add_action('admin_head','myfunc24235235');
function myfunc24235235(){ ?>

  <style>
  .smth{ color:red;}
  </style>

    <?php
}
0
T.Todua