Efecto de partículas, cómo crear el tuyo propio e insertarlo en Wordpress

Una vez más aquí. Hoy vengo a dejar un pequeño artículo en el que vamos a ver cómo se puede agregar un efecto de partículas usando librerías de javascript y un shortcode de WordPress. Este efecto se puede crear de manera bastante sencilla utilizando la librería particles. Después se puede tan solo tendremos que utilizar un pequeño código para crear un shortcode que posteriormente podremos poner en alguna parte de nuestra instalación de Wordpress.

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

Aprovechando la época navideña, me he propuesto crear una felicitación navideña.

El código

Para llevar a cabo, usaremos el siguiente código. Este se puede pegar en el archivo functions.php de tu tema o en tu plugin de funciones que tengas disponible en tu instalación de Wordpress.

// Creamos el Shortcode que vamos a llamar fondo-particulas
add_action( 'init', 'particulas_add_shortcode' );

function particulas_add_shortcode(){
    add_shortcode('fondo-particulas', 'entreunosyceros_particles_background');
}

function entreunosyceros_particles_background( $atts , $content ){
    $str = '<div id="particulas-js">'.$content.'</div>';
    return $str;
}

// Librería Javascript y configuración. La librería necesaria la vamos a importar de https://www.jsdelivr.com/package/npm/particles.js
add_action( 'wp_footer', 'entreunosyceros_footer_scripts' );

function entreunosyceros_footer_scripts() {

    ?>
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
    <script type="text/javascript">
        particlesJS("particulas-js",
                //Configuración JSON. Aquí se puede modificar el comportamiento y vista de las partículas
                 {"particles":{"number":{"value":80,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":1,"random":true,"anim":{"enable":false,"speed":1,"opacity_min":0.5,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":false,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":2.5,"direction":"bottom","random":true,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":true,"mode":"push"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true}
                );
    </script>
    <?php
}

// configuración CSS 
add_action( 'wp_footer', 'entreunosyceros_footer_styles' );

function entreunosyceros_footer_styles() {

    ?>
    <style>
        #particulas-js {
            width: 100%;
            min-height: 200px;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            background: #000;
            background-image: url('https://URL-DE-LA IMAGEN-DE-FONDO');
            background-size: initial;
            background-position: 10% 50%;
            background-repeat: no-repeat;
            border: 2px solid green;
           
        }
        #particulas-js > section{
            max-width:500px;
            text-align:center;
            position: absolute;
            border: 3px solid green;
            padding: 2%;
        }
        #particulas-js h1{
            font-weight:bold;
        }
        #particulas-js h1,
        #particulas-js h4{
            color:red;
        }

    </style>
    <?php
}

Una vez pegado el código, solo queda guardar el archivo y volver a subirlo a nuestra instalación de Wordpress.

Cómo usar el shortcode

Para mostrar las partículas (y todo lo demás) en alguna parte de nuestra instalación, solo tendremos que utilizar el siguiente shortcode llamado “fondo-particulas”. Puedes colocar contenido dentro de una sección HTML, en el siguiente ejemplo usamos dos cabeceras una h1 y otra h2

[ fondo-particulas ]

<section>
<h1>Esto es un ejemplo</h1>
<h4>de lo que se puede conseguir con este efecto de partículas</h4>
</section>

[ /fondo-particulas ]

En este último código he tenido que añadir unos espacios para que Wordpress no los interpretase. Para que funcione correctamente hay que quitar los espacios que hay en las etiquetes fondo-particulas.

Hay que decir que si tienes anuncios o una tabla de contenido, cabe la posibilidad que un anuncio o la tabla de contenido de los artículos se metan dentro de la imagen que se va a mostrar. Pero esto se soluciona eligiendo bien el lugar donde colocaremos el shortcode. También quiero decir que aun que en este ejemplo he buscado un efecto como de nieve, esta librería que estamos utilizando permite muchos tipos diferentes de configuraciones, las cuales se pueden modificar en la configuración JSON que hay dentro del código.