Last active
October 27, 2021 16:25
-
-
Save jmarreros/302690cbcedab783c7c3a693ba7c60d2 to your computer and use it in GitHub Desktop.
Integración de particles.js en WordPress con un shortcode
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
// The shortcode only works in WordPress front page | |
// Shortcode Creation | |
add_action( 'init', 'dcms_add_shortcode' ); | |
function dcms_add_shortcode(){ | |
add_shortcode('particles-background', 'dcms_particles_background'); | |
} | |
function dcms_particles_background( $atts , $content ){ | |
$str = '<div id="particles-js">'.$content.'</div>'; | |
return $str; | |
} | |
// Javascript library and configuration | |
add_action( 'wp_footer', 'dcms_footer_scripts' ); | |
function dcms_footer_scripts() { | |
if ( ! is_front_page() ) return; | |
?> | |
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> | |
<script type="text/javascript"> | |
particlesJS("particles-js", | |
//Configuracion JSON | |
{"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":0.5,"random":false,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"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 | |
} | |
// CSS configuration | |
add_action( 'wp_footer', 'dcms_footer_styles' ); | |
function dcms_footer_styles() { | |
if ( ! is_front_page() ) return; | |
?> | |
<style> | |
#particles-js { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
position: relative; | |
width: 100%; | |
min-height: 400px; | |
height: 600px; | |
background: #b61924; | |
} | |
#particles-js > section{ | |
position: absolute; | |
max-width:500px; | |
text-align:center; | |
} | |
#particles-js h1{ | |
font-weight:bold; | |
} | |
#particles-js h1, | |
#particles-js h2{ | |
color:white; | |
} | |
</style> | |
<?php | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment