logooneasesoria4

¿Necesita una consulta gratuita?

Cómo mejorar el rendimiento de WordPress integrando CSS de temas y plugins @ Ayuda WordPress

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.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

¿Te gustó este artículo?
12 de julio de 2023

RECIBE

GRATIS

Recursos para tu web GRATIS.

En agradecimiento por haber leido nuestro blog te ofrecemos algúnos plugins, temas y asesoría para el desarrollo de tu sitio web.
Envía correo y espera respuesta...Gracias..!
baneranunciopluginsbest
Publicaciones Relacionadas
logooneasesoria1
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Si gustas puedes revisar nuestro Aviso de Privacidad Integral.