Agregar efecto de partículas en WordPress

En este artículo aprenderás cómo agregar un efecto de partículas usando librerías de javascript y un shortcode de WordPress, de manera simple a través de código

 

Resultado final

Al final lo que queremos obtener será el siguiente efecto, ten en cuenta que si quieres mostrarlo a ancho completo depende de las dimensiones del contenedor.

Este es un texto de título

Este es un texto de subtítulo

 

Librerías de partículas

Existen diferentes librerías para crear efectos de partículas, por ejemplo:

• particles.js
• tsparticles

En este artículo veremos la implementación usando particles.js, sin embargo es bastante similar para otras librerías.

Las librerías de partículas están bien documentadas y también tienen ejemplos de aplicación en sitios como codepen.io

 

Código para agregar efecto de partículas en WordPress

Usaremos el siguiente código que puedes pegarlo en el archivo functions.php de tu tema hijo.

El siguiente código se usa a través de un shortcode llamado “particles-background”, además sólo se podrá ver en la página de inicio.

Puedes generar una configuración JSON diferente y reemplazarla en el código javascript, para que se genera en una sola línea puedes usar un compresor como Jsonminifier

En el código anterior:

• El código tiene tres partes, la primera crea el shortcode para WordPress a través de la función add_shortcode()
• El shortcode lo que hace es formar el HTML, usamos un contenedor con ID particles-js, que servirá para que Javascript haga referencia y para dar estilos CSS
• La siguiente parte del código agrega el código javascript necesario, lo hacemos usando el hook de footer y colocamos una condición para que sólo se cargue en la página de inicio
• La carga de Javascript tiene dos partes, la primera es la carga de la librería y la segunda es la configuración JSON
• La tercera parte del código simplemente usa código CSS en base al ID y la estructura HTML del contenido del shortcode

 

Cómo usar el shortcode

Puedes colocar contenido dentro de una sección HTML, en el siguiente ejemplo usamos dos cabeceras una h1 y otra h2

[particles-background]
<section>
<h1>Este es un texto de título</h1>
<h2>Este es un texto de subtítulo</h2>
</section>
[/particles-background]

 

Conclusión

Como has podido comprobar, es posible añadir efectos de partículas usando directamente código, además de que tienes más flexibilidad para configurarlos evitas el uso adicional de plugins.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores y se muestra un ejemplo con otra librería alterna.

Suscríbete a DecodeCMS:  

 

La entrada Agregar efecto de partículas en WordPress es un artículo reciente del sitio DecodeCMS.