如何正確嵌入的JavaScript到WordPress

所以以後的試圖嵌入的JavaScript到我的wordpress網站，我已經失敗多次嘗試如何正確嵌入的JavaScript到WordPress

的JavaScript/CSS我想落實到我的wordpress網站：

的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);;

的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>

我想將此javascript/css嵌入到我的WordPress網站中。我對此很陌生，需要幫助解決這個問題，什麼是最好的和最優化的方式來完成這件事。

來源

2016-09-29 fatalwanderer

這有很多教程。只需使用谷歌 – evolutionxbox

任何建議 – fatalwanderer

這些動態生成哪些部分vs可以包含在js文件中幷包含的項目？你是否需要WP中的數據來生成這些代碼？ – bswatson