Vous utilisez des plugins JS personnalisés avec WordPress?
Comment puis-je utiliser quelque chose comme particules.js avec Divi?
J'ai essayé de mettre le code suivant dans la page d'Integration Divi dans le corps (c'est ici que ça fonctionne sur un site autre que WordPress)
<div id="particles-js"></div>
<!-- PARTICLES.JS LIBRARY -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- PARTICLES.JS SCRIPT -->
<script>
particlesJS("particles-js", {
"particles": {
"number": {
"value": 160,
"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": true,
"speed": 1,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 4,
"size_min": 0.3,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "window",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "Push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"Push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
</script>
et j'ai également ajouté ce qui suit dans le CSS personnalisé de la page dans le générateur de visuels:
canvas {
display: block;
}
#particles-js {
width: 100%;
height: 100vh;
background: -webkit-linear-gradient(top, #000000 1%, #0c0c24 100%);
position: fixed;
top: 0;
left: 0;
z-index: -50;
}
Cela ne fonctionne tout simplement pas, rien ne se présente. Qu'est-ce que je fais mal? :(
Bienvenue (je suis nouveau moi aussi).
Avant tout, je hautement recommande de configurer un thème Child pour votre installation Divi; Ainsi, toutes les modifications que vous apportez ne seront pas écrasées lorsque Elegant Themes effectuera une mise à jour.
Cela dit, la meilleure solution consiste à utiliser le système de mise en file d'attente natif de WordPress. Dans votre fichier functions.php, ajoutez les éléments suivants:
function enqueue_particles() {
wp_register_style('particles-styles', get_stylesheet_directory_uri() .'/particle.css', array());
wp_enqueue_style('particles-styles');
wp_enqueue_script('particles-cdn', '//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js');
wp_enqueue_script('particles-js', get_stylesheet_directory_uri() .'/particle.js', array('particles-cdn'));
}
add_action('wp_enqueue_scripts', 'enqueue_particles');
... puis créez 2 nouveaux fichiers dans votre répertoire de thème:
particule.css
canvas {
display: block;
}
#particles-js {
width: 100%;
height: 100vh;
background: -webkit-linear-gradient(top, #000000 1%, #0c0c24 100%);
position: fixed;
top: 0;
left: 0;
z-index: -50;
}
... et particule.js
jQuery(document).ready(
function() {
particlesJS("particles-js", {
"particles": {
"number": {
"value": 160,
"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": true,
"speed": 1,
"opacity_min": 0,
"sync": false
}
},
"size": {
"value": 3,
"random": true,
"anim": {
"enable": false,
"speed": 4,
"size_min": 0.3,
"sync": false
}
},
"line_linked": {
"enable": false,
"distance": 150,
"color": "#ffffff",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 1,
"direction": "none",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 600
}
}
},
"interactivity": {
"detect_on": "window",
"events": {
"onhover": {
"enable": false,
"mode": "grab"
},
"onclick": {
"enable": true,
"mode": "Push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 250,
"size": 0,
"duration": 2,
"opacity": 0,
"speed": 3
},
"repulse": {
"distance": 400,
"duration": 0.4
},
"Push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
}
);
Bonne chance!