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?
  • Hi! I could hhave sworen I’ve besen to this werbsite begore butt
    after browsiing through somne of the pos I realized it’s neew tto me.
    Anyhow, I’m definitely lad I foiund iit annd I’ll be book-marking andd chcking back
    often!

  • Excellent webllog here! Additionally yor
    web site quiye a bit uup fast! What hot are yyou using?
    Caan I geet your asociate hyperlink to your host? I dsire my website loaded uup aas quickkly aas yours lol

  • Hmmm iit ppears like youhr sit atte my frst comjment (it waas
    extrenely long) so I guesds I’ll just ssum it upp what I wrote andd
    say, I’m thoroughly enjoyng youhr blog. I as well am aan spiring blpog blogger but I’m still neew to
    everything. Do yyou hace aany tips for ewbie bog writers?I’d definitely appreciate it.

  • Hi, I doo believe thiks iss an excellent wweb site.
    I stumbledupon it 😉 I am goiong to revisait yeet ayain since
    I saved ass a favrite it. Mney and freefom is the best wway too change,
    mmay youu be rich andd contnue tto guiide others.

  • Johnathan Rohde

    Hey,

    I have a bunch of leads avail for your business.
    What’s the best # to reach out to you with them?

    Thanks
    Jonathan

    304 S. Jones Blvd #4934, Las Vegas, NV. 89107

    To opt out, UNSUBSCRIBE HERE
    https://Eventoptout.xyz

  • Johnathan Rowe

    Hey,

    I have a bunch of leads avail for your business.
    What’s the best # to reach out to you with them?

    Thanks
    Jonathan

    304 S. Jones Blvd #4934, Las Vegas, NV. 89107

    To opt out, UNSUBSCRIBE HERE
    https://Eventoptout.xyz

  • Hey, I made a new free course to start earning money online with AI, is this a good place to send it?

Déjanos tus comentarios..!

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
Abrir chat
One Asesoría
Hola 👋
¿Necesita cotizar una página o tienda online, cómo podemos ayudarle..?