Añadir particles.js en wordpress

particles.js es uno de tantos proyectos open source que puedes encontrar por GitHub. Toda la información sobre el mismo la puedes encontrar haciendo clic aquí, pues el propósito de este artículo es explicar cómo incluirlo en un tema de WordPress.

Para incluir dicha librería en tu tema de wordpress vamos a llevar a cabo un par de modificaciones en su código. En primer lugar descargar los siguientes ficheros:

  1. particles.min.js, proyecto minimizado.
  2. app.js, para configurar todo lo relacionado con las partículas que quieras incluir. Para probar distintas configuraciones haz clic aquí, prueba todo lo que quieras y cuando acabes simplemente descarga el archivo json con la configuración que acabas de probar.

Ahora mueve ambos archivos a la carpeta js de tu tema. Si no existe, créala. Aprovecho para comentar que ese proceso es igual tanto para temas child como para originales.

A continuación abre el archivo functions.php de tu tema, y en la sección donde cargues scripts añade los siguientes dos enqueues:

wp_enqueue_script( 'particles-js', get_stylesheet_directory_uri() . '/js/particles.min.js');
wp_enqueue_script('particles-app', get_stylesheet_directory_uri() . '/js/particles-app.js', array('particles-js'), false, true);

En el primer enqueue añadimos el primer archivo que descargamos al header, y en el segundo añadimos app.js al footer y además pedimos a WordPress que no lo cargue hasta que su única dependencia esté lista: particles-js. Puedes ver una detallada información sobre esta función haciendo clic aquí.

A continuación edita el archivo style.css del tema y añade la siguiente clase:

#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}

 

¡Ahora sólo tienes que añadir

<div id="particles-js"></div>

allá donde quieras ver tus partículas! En mi caso quise que las partículas aparecieran en el background de la web que andaba editando, por lo que incluí el anterior fragmento de código (con algunas modificaciones) en el archivo header.php.

¿Problemas, ideas, etc? Te invito a dar rienda suelta a tu imaginación en los comentarios.

 

2 comentarios en “Añadir particles.js en wordpress”

    1. Hola Eduardo, ¿has comprobado si wordpress está cargando particles.js en tu web? Puedes comprobarlo pulsando CTRL+U y luego buscando “particles” o “particles.js” en el código fuente de la página.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *