Inyectar CSS en línea desde functions.php en WordPress

Question

Inyectar CSS en línea desde functions.php en WordPress

6 feb 2017, 18:21:47

Vistas: 17K

Votos: 6

Estoy intentando inyectar un estilo CSS en línea al elemento body a través del archivo functions.php. Necesita ser en línea porque estoy usando ACF para permitir que el usuario cambie la imagen.

Este debería ser el resultado:

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

Leí sobre wp add inline style, pero no pude hacerlo funcionar.

Actualización: Aquí está la función que intenté:

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' );

Cargué un archivo body.css para intentar agregar el CSS en línea. Pero no funcionó - ¿quizás este no sea el enfoque correcto?

Matt

160

funciones css campos personalizados avanzados

Comentarios

Muestra tu ejemplo que no funcionó.

kaiser

6 feb 2017 18:29:27

Veo un par de problemas en tu código de ejemplo. No necesitas las etiquetas <?php y ?>, ya que ya estás analizando PHP. Además, deberías usar get_field() ya que no quieres hacer echo del valor devuelto.

Pat J

6 feb 2017 18:48:05

Todas las respuestas a la pregunta

Comentarios

Me ganaste. Esta también es una forma "no tan elocuente pero práctica y efectiva" de agregar js en línea si es necesario.

admcfajn

4 mar 2018 05:45:23

Comentarios

gracias abdul - no puedo escribir directamente en la plantilla padre... pero quizás javascript sea el camino a seguir. ¿puedo usar javascript desde el tema hijo?

Matt

6 feb 2017 20:33:03

Sí. también puedes hacerlo desde el tema hijo

Anwer AR

7 feb 2017 08:56:54

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

La forma más fácil que he visto es usar echo donde lo necesites:

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

Desde 2019 también puedes agregar estilos en línea dentro del body, mostrado aquí sin usar echo:

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

El beneficio aquí es que obtienes mejor resaltado de sintaxis y no necesitas escapar comillas dobles. Ten en cuenta que este hook en particular solo funcionará con temas que implementen el wp_body_open hook.

vhs

350

17 abr 2017 23:37:12

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

Los estilos en línea son estilos que se escriben directamente en la etiqueta del documento y esto es lo que estás buscando.

Pero, wp_add_inline_style agregará una pieza adicional de CSS en la sección <head> del documento (estilo embebido), no al atributo style de HTML.

Así que, si deseas colocar tu valor CSS directamente en el marcado HTML mediante un atributo style, entonces wp_add_inline_style no hará eso por ti. Deberías pasar el valor de get_field a un atributo style en tus archivos de plantilla, o considerar usar JavaScript.

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

</div>

Anwer AR

1.01K

6 feb 2017 19:49:09

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

¿Quizás este no sea el enfoque correcto en absoluto?

wp_add_inline_style agrega estilos CSS adicionales a una hoja de estilos registrada. Esta función no agregará un estilo html inline a la etiqueta body.

Sin embargo, sí creo que este es el enfoque correcto para el problema. Básicamente lo estás haciendo bien, pero necesitas agregar tanto CSS inline como otra clase al body para que el CSS realmente haga efecto.

/**
 * Agregar condicionalmente clase al body y CSS inline
 */

//* Agregar acción a wp_loaded para inicializar el plugin
add_action( 'wp_loaded', 'wpse_106269_wp_loaded' );
function wpse_106269_wp_loaded() {
  add_action( 'wp_enqueue_scripts', 'wpse_106269_enqueue_scripts' );

  //* Agregar hooks condicionalmente
  if( '' !== get_theme_mod( 'my-mod', '' ) ) {
    add_filter( 'body_class', 'wpse_106269_body_class' );
    add_action( 'wp_enqueue_scripts', 'wpse_106269_add_inline_style' );
  }
}

//* Asegurarse de cargar el CSS personalizado
function wpse_106269_enqueue_scripts() {
  wp_enqueue_style( 'custom-style', '/style.css' );
}

//* Agregar otra clase a la etiqueta body    
function wpse_106269_body_class( $classes ) {
  $classes[] = 'custom-background-image';
  return $classes;
}

//* Agregar background-image inline
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 );
}