it-roy-ru.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. Что я делаю неправильно?

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() является приоритетом, который сообщает WordPress, в каком порядке добавлять действие - более высокие числа означают последующее выполнение.

Отредактировано для добавления Это не добавит никакого кода к custom.css - он просто добавит встроенные стили ifcustom.css уже загружен.

Рекомендации

8
Pat J

Он не добавляет никакого кода в файл custom.css. Что я делаю не так?

Эти стили добавляются в HTML-документ внутри тегов <style>, а не в таблицу стилей, которую вы ставили в очередь. Вы все еще должны поставить в очередь таблицу стилей перед добавлением встроенных стилей.

Имя функции немного сбивает с толку, потому что оно создает блоки стилей, а не фактические встроенные стили. То, что вы сделали с DIV выше, это встроенный стиль. Вам следует избегать их, потому что они имеют наивысший приоритет перед правилами !important (переопределить их будет очень сложно).

Я читал на каком-то форуме, что это добавляет сервер Burdon

Нет, это не так. Вы, вероятно, ошибаетесь с помощью скриптов PHP, действующих как таблицы стилей. Это плохо.

3
onetrickpony

Может быть, это только я, но мне кажется, что мы напрягаемся от комара и глотаем верблюда здесь. (это фраза ... посмотрите :))

Если вы создаете тему, которая может иметь дочернюю тему, связанную с ней, и добавление ее непосредственно в строку, и добавление ее в блок стиля с помощью wp_add_inline_style () будет требовать! Важное, чтобы переопределить ее.

Если это пользовательский плагин, и изменение цвета фона является важной частью функциональности, то обязательно добавьте его в строку.

Я не вижу никакого преимущества в том, чтобы усложнять это.

Чтобы ответить на оригинальный вопрос.

Это плохо, чтобы добавить код, как указано выше?

Простой ответ: нет, это не плохо. Это имеет последствия, но производительность сервера не входит в их число, и я не вижу в стандартах кодирования 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

0
Zachary Raineri

Просто используйте:

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

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

    <?php
}
0
T.Todua