so nach mehreren Versuchen zu versuchen Sie Javascript in meine Wordpress Website einzubetten ichWie Einbetten richtig Javascript in Wordpress
Die Javascript/CSS Ich mag nicht erfolgreich war in meine Wordpress-Website implementieren:
The Javascript :
particlesJS("particles-js", {
"particles": {
"number": {
"value": 80,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#f09b00"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#ff8700"
},
"polygon": {
"nb_sides": 5
},
"image": {
"src": "http://www.freeiconspng.com/uploads/gears-icon-png-11.png",
"width": 100,
"height": 100
}
},
"opacity": {
"value": 0.1736124811591,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 11.83721462448409,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#757575",
"opacity": 0.2,
"width": 4.4192267931407265
},
"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": "bubble"
},
"onclick": {
"enable": true,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 10,
"duration": 2,
"opacity": .6,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
var count_particles, stats, update;
stats = new Stats;
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.left = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);
count_particles = document.querySelector('.js-count-particles');
update = function() {
stats.begin();
stats.end();
if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
}
requestAnimationFrame(update);
};
requestAnimationFrame(update);;
Die CSS:
/* ---- reset ---- */
body {
margin: 0;
font: normal 75% Arial, Helvetica, sans-serif;
}
canvas {
display: block;
vertical-align: bottom;
}
/* ---- particles.js container ---- */
#particles-js {
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-image: url("http://privatestaging.talespun.co/wp-content/uploads/2016/07/photo-1461994319301-06e2de6207c3.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
/* ---- stats.js ---- */
.count-particles {
background: #000022;
position: absolute;
top: 48px;
left: 0;
width: 80px;
color: #13E8E9;
font-size: .8em;
text-align: left;
text-indent: 4px;
line-height: 14px;
padding-bottom: 2px;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
}
.js-count-particles {
font-size: 1.1em;
}
#stats,
.count-particles {
-webkit-user-select: none;
margin-top: 5px;
margin-left: 5px;
}
#stats {
border-radius: 3px 3px 0 0;
overflow: hidden;
}
.count-particles {
border-radius: 0 0 3px 3px;
}
H TML:
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- stats - count particles -->
<div class="count-particles"> <span class="js-count-particles">--</span> particles </div>
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib -->
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
Ich möchte dieses Javascript/CSS in meine Wordpress-Website einbetten. Ich bin neu in diesem Bereich und brauche Hilfe, um herauszufinden, was der beste und optimalste Weg ist, dies zu erreichen.
Es gibt viele Tutorials für diese. Verwenden Sie einfach google – evolutionxbox
alle Vorschläge – fatalwanderer
Welche Teile von diesen werden dynamisch gegen Elemente generiert, die in einer js-Datei enthalten sein können und enthalten? Benötigen Sie Daten innerhalb von WP, um diesen Code zu generieren? – bswatson