Siempre que desarrolles un tema o plugin para WordPress, seguramente habrás sentido la necesidad de modificar algunas propiedades CSS como colores, tamaño de fuente, transiciones, hovers y otros elementos CSS usando PHP.
Hay muchas maneras de hacerlo, pero vamos a centrarnos en la más recomendada, es decir, wp_add_inline_style
. Esta función se utiliza para añadir estilos CSS personalizados a archivos ya en cola. Veamos cómo funciona.
La sintaxis de la función es la siguiente:
wp_add_inline_style( string $handle, string $data )
Esta función acepta dos parámetros, la primera cadena $handle
es el id de la hoja de estilos en cola. Puede ser la hoja de estilos por defecto del tema (style.css
) o cualquier otro archivo css que incluya estilos para el tema.
El segundo son los datos a añadir en la hoja de estilos. Tiene que ser en forma de cadena.
Lo único que hay que tener en cuenta es que esta función se llama después de que las hojas de estilo se cargan en un tema o plugin. Es, en circunstancias normales, en el gancho de acción wp_enqueue_scripts
. Si esta función se llama antes de que se ejecute wp_enqueue_scripts
, dará un error ya que uno de los argumentos no está definido.
Vamos a comprobarlo con un ejemplo. Supongamos que queremos transformar el título del sitio de normal a mayúscula y planeamos añadir el CSS en línea a la hoja de estilos principal.
Ve al archivo functions.php
y crea una función mi_tema_inline_css()
. Con el fin de añadir CSS en línea, añadimos lo siguiente a la función:
$css=".site-title a {text-transform: uppercase;}"; wp_add_inline_style('mi-tema-style', $css);
Aquí estamos asumiendo que el ID del archivo de hoja de estilos en cola es mi-tema-style
. Tienes que cambiarlo por el ID de tu hoja de estilos. Todo quedaría tal que así:
function mi_tema_inline_css() { $css=".site-title a {text-transform: uppercase;}"; wp_add_inline_style('mi-tema-style', $css); }
Actualmente, no hará nada porque no está en cola y, a su vez, no se está implementando. Necesitamos ponerlo en cola. Hay que ponerlo en cola en el gancho wp_enqueue_scripts
o después de él.
Así que vamos a engancharlo a wp_enqueue_scripts
. Todo el código se verá así:
function mi_tema_inline_css() { $css=".site-title a {text-transform: uppercase;}"; wp_add_inline_style('mi-tema-style', $css); } add_action('wp_enqueue_scripts', 'mi_tema_inline_css');
Esto debería añadir el código CSS integrado (inline) en el archivo de hoja de estilo principal (o en aquel cuyo ID se indique).
Esta es la implementación más básica de wp_add_inline_style
. Puedes usarla para añadir estilos condicionales basados en los ajustes del personalizador, estilos de widgets y muchas otras funcionalidades.
Sólo recuerda que la llamada debe realizarse en o después del gancho wp_enqueue_scripts
.
PUEDE QUE TAMBIÉN TE INTERESE…
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!