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

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

Y de paso crea tu propia felicitación de navidad

por entreunosyceros
Publicado el Última actualización el

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.


También te puede interesar ...

2 Comentarios

Hiber 5 diciembre, 2021 - 2:11 AM

Gracias por el artículo. Copié y pegué el código en functions.php, y me devolvió el siguiente error:

Los cambios en tu código PHP se han revertido debido a un error en la línea 68 del archivo wp-content/themes/hueman/functions.php. Por favor, arréglalo y trata de guardar de nuevo.

syntax error, unexpected ‘<', expecting end of file

Responder
entreunosyceros 5 diciembre, 2021 - 12:18 PM

Hola. En primer lugar gracias por tu comentario. Te diré que por lo que me cuentas, es posible que el problema esté en la primera línea, elimina el

Responder

Deja tu comentario

* Al utilizar este formulario, acepta que este sitio web almacene y maneje sus datos.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

logo expressVPN - Obtén 30 días gratis

Si te preocupa la seguridad de tus datos, o si quieres saltarte los geobloqueos para ver tus streamings favoritos, consigue una VPN segura y de calidad GRATIS durante 30 días (cancela cuando tú quieras, sin coste alguno). Disponible para todas las plataformas y navegadores.