Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
WordPress

Cómo cargar CSS y JS sólo cuando el shortcode se esté utilizando

Es muy habitual que a la hora de desarrollar un shortcode (por ejemplo desde un plugin), que necesites darle unos estilos o que ejecute alguna acción mediante JavaScript.

Si encolamos estos assets de manera normal, los estaremos cargando en todas la páginas de nuestro sitio, esté el shortcode presente o no. Esto es una faena, ya que estaremos cargando archivos que no utilizamos, añadiendo peso a la página y haciendo peticiones extra que aumentaran nuestros tiempos de carga.

¿Qué sería lo ideal? Pues que los CSS o JS asociados a un shortcode se carguen sólo en aquellas páginas donde el shortcode esté presente. De este modo, nuestro WPO será mejor en el resto de las páginas.

 

Cargando el JS cuando esté presente el shortcode

Esta parte es la más fácil. Tan fácil como encolar el script en el cuerpo del método de callback del shortcode:

En este caso, el shortcode se encolará en wp_footer y se parseará allí. Sin más

 

Cargando el CSS cuando esté presente el shortcode

Esto es un poco más complejo, pero no mucho más. Y esto es debido a cómo han de cargarse las hojas de estilo. Deben cargarse en el wp_head, es decir, antes de cerrar la etiqueta </head> del HTML.

Muchos navegadores interpretan hojas de estilo fuera del head, pero eso no es lo correcto. Afortunadamente WordPress dispone de una función llamada has_shortcode, que mediante expresiones regulares busca en el post_content de nuestro post si está presente un shortcode concreto.

Si el post actual sobre el que estamos navegando contiene el shortcode en cuestión, cargaremos la hoja de estilos correspondiente.

Se suele decir que las expresiones regulares son lentas, pero en este caso… se trata de una regex sencilla, que ataca a sólo un post (el actual), por lo tanto el beneficio de no cargar y parsear CSS/JS frente al rendimiento de una regex, no tiene dudas. Y ya si dispones de algún sistema de caché, no da lugar ni a discutirlo.

Puede que también te interese

Seguridad WordPress: usa un Captcha para login
Seguridad WordPress: usa un Captcha para login
Otro “filtro” que podemos usar para proteger nuestro panel de administración o back-end. Instalando un plugin como WP Login reCAPTCHA, podremos insertar el reCAPTCHA de…
Cómo mantener la jerarquía de las categorías en el back-end una vez seleccionadas
Cómo mantener la jerarquía de las categorías en el back-end una vez seleccionadas
En este artículo vamos a ver qué podemos hacer para mantener la jerarquía de las categorías en el back-end de WordPress una vez seleccionadas. Imaginemos…
Me han hackeado mi página web de WordPress, ¿qué puedo hacer?
Me han hackeado mi página web de WordPress, ¿qué puedo hacer?
Un día nos podemos levantar y encontrarnos con la desagradable noticia de que nuestro sitio ha sido infectado. Esto puede ocurrir por multitud de factores:…
Cómo eliminar automáticamente los enlaces por defecto en las imágenes dentro del editor de WordPress
Cómo eliminar automáticamente los enlaces por defecto en las imágenes dentro del editor de WordPress
WordPress dispone de un sistema potentísimo para administrar el contenido multimedia de tu sitio web. Es muy fácil subir archivos, imágenes, etc…y siempre las tendremos…