Как добавить динамические встроенные стили?

Попробуйте так:

Использование условных запросов

Размещение подключения стилей непосредственно в шаблоне не рекомендуется. Это возможно (если вы понимаете порядок выполнения соответствующих действий и убедитесь, что ваш вызов wp_add_inline_style() происходит в правильной точке порядка выполнения). Гораздо проще держать весь код вместе и использовать соответствующий условный запрос, такой как is_single(), для добавления динамического стиля:

function add_custom_css() {
    wp_enqueue_style('custom-css', get_template_directory_uri() . '/custom.css');   
    // Добавляем динамический стиль, если отображается отдельная страница
    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 — это просто добавит встроенные стили если custom.css уже был загружен.

Ссылки

• Страница Codex для add_action()
• wp_enqueue_style()
• wp_add_inline_style()

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

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

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

Я читал на одном форуме, что это увеличивает нагрузку на сервер

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

Возможно, это только мое мнение, но кажется, что мы делаем из мухи слона. (это фразеологизм... можете погуглить :))

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

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

Я не вижу никакого преимущества в излишнем усложнении этого вопроса.

Отвечая на изначальный вопрос.

Плохо ли добавлять код, как в примере выше?

Простой ответ — Нет, это не плохо. У такого подхода есть последствия, но производительность сервера к ним не относится, и я не нашел ничего в стандартах кодирования WordPress, что бы это запрещало. В целом, инлайн-стили стоит использовать умеренно и аккуратно, но они не являются чем-то плохим.

Если вы хотите четко разделять ответственность, можно добавить класс инлайн вместо стилей.

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

А затем определить .black в вашей таблице стилей. (Конечно, это работает только если у вас есть предопределенный список цветовых вариантов.)

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

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

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

    <?php
}

Я делаю это во всех своих шаблонах, используйте:

<?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