Добавление inline CSS через functions.php

Question

Добавление inline CSS через functions.php

6 февр. 2017 г., 18:21:47

Просмотры: 17K

Голосов: 6

Я пытаюсь добавить inline CSS стили к элементу body через файл functions.php. Стили должны быть inline, потому что я использую ACF, чтобы позволить пользователю изменять изображение.

Ожидаемый результат:

<body style="background-image: url('<?php the_field('background'); ?>');">

Я читал о wp_add_inline_style, но не смог разобраться.

Обновление: Вот функция, которую я пробовал:

function wpdocs_styles_method() {
    wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/body.css'
    );
        $img = get_theme_mod( "<?php the_field('background') ?>" );
        $custom_css = "body {background-image: {$img}";
        wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_styles_method' );

Я загрузил body.css и попытался добавить inline CSS. Но это не сработало - возможно, это вообще неправильный подход?

Matt

160

функции css расширенные произвольные поля

Комментарии

Покажите ваш пример, который не сработал.

kaiser

6 февр. 2017 г. 18:29:27

Я вижу несколько проблем в вашем примере кода. Вам не нужны теги <?php и ?>, так как вы уже работаете в PHP. Также вы должны использовать get_field(), потому что вам не нужно выводить возвращаемое значение с помощью echo.

Pat J

6 февр. 2017 г. 18:48:05

Все ответы на вопрос

Комментарии

Опередил меня. Это тоже "не самый изящный, но практичный и эффективный" способ добавить встроенный JavaScript, если это необходимо.

admcfajn

4 мар. 2018 г. 05:45:23

Комментарии

спасибо, Абдул - я не могу писать напрямую в родительский шаблон... но, возможно, JavaScript — это выход. могу ли я использовать JavaScript из дочерней темы?

Matt

6 февр. 2017 г. 20:33:03

Да, вы можете сделать это и из дочерней темы

Anwer AR

7 февр. 2017 г. 08:56:54

vhs 350 · Answer 1 · 2017-04-17T23:37:12Z

Самый простой способ, который я видел — это вывести стили через echo там, где они нужны:

function inline_css() {
  echo "<style>html{background-color:#001337}</style>";
}
add_action( 'wp_head', 'inline_css', 0 );

Начиная с 2019 года, стили можно добавлять непосредственно внутри тега body, как показано ниже (без использования echo):

function example_body_open () { ?>
  <style>
    html {
      background-color: #B4D455;
    }
  </style>
<?php }
add_action( 'wp_body_open', 'example_body_open' );

Преимущество этого подхода — лучшая подсветка синтаксиса и отсутствие необходимости экранировать двойные кавычки. Обратите внимание, что этот хук будет работать только в темах, поддерживающих хук wp_body_open.

Anwer AR 1.01K · Answer 2 · 2017-02-06T19:49:09Z

Встроенные стили — это стили, которые записываются непосредственно в тег документа, и это именно то, что вам нужно.

Однако, функция wp_add_inline_style добавит дополнительный кусок CSS в секцию <head> документа (встроенный стиль), а не в HTML-тег style.

Таким образом, если вам нужно разместить ваше CSS-значение непосредственно в HTML-разметке через тег style, то wp_add_inline_style не подойдет для этой задачи. Вам следует либо передать значение get_field в HTML-тег style в ваших файлах шаблонов, либо рассмотреть использование JavaScript.

<div style="<?php the_field( 'some-field' ) ?>">

</div>

Nathan Johnson 6.53K · Answer 3 · 2017-02-06T22:36:55Z

может быть, это вообще неправильный подход?

wp_add_inline_style добавляет дополнительные CSS-стили к зарегистрированной таблице стилей. Эта функция не добавляет встроенный HTML-стиль к тегу body.

Однако я действительно считаю, что это правильный подход к решению проблемы. Вы в основном делаете всё верно, но вам нужно добавить как встроенный CSS, так и дополнительный класс к тегу body, чтобы CSS действительно сработал.

/**
 * Условное добавление класса к body и встроенного CSS
 */

//* Добавляем действие к wp_loaded для инициализации плагина
add_action( 'wp_loaded', 'wpse_106269_wp_loaded' );
function wpse_106269_wp_loaded() {
  add_action( 'wp_enqueue_scripts', 'wpse_106269_enqueue_scripts' );

  //* Условное добавление хуков
  if( '' !== get_theme_mod( 'my-mod', '' ) ) {
    add_filter( 'body_class', 'wpse_106269_body_class' );
    add_action( 'wp_enqueue_scripts', 'wpse_106269_add_inline_style' );
  }
}

//* Убедимся, что загружается наш кастомный CSS
function wpse_106269_enqueue_scripts() {
  wp_enqueue_style( 'custom-style', '/style.css' );
}

//* Добавляем дополнительный класс к тегу body    
function wpse_106269_body_class( $classes ) {
  $classes[] = 'custom-background-image';
  return $classes;
}

//* Добавляем встроенный background-image
function wpse_106269_add_inline_style() {
  $background_url = esc_url( get_theme_mod( 'my-mod', '' ) );
  $custom_css = ".custom-background-image { background-image:URL( $background_url ); }";
  wp_add_inline_style( 'custom-style', $custom_css );
}