Wordpress 主題上的自定義光標效果

Question

我試圖添加類似於下面就是自定義光標效果Javascript到Wordpress主題我的工作。 我是創建自己的主題的新手，我不確定在哪里應用代碼。 它應該放在functions.php中還是應該首先創建一種custom_script.js文件並在其中添加代碼？

不知道我應該進入哪個方向，所以任何幫助將不勝感激。

 (function fairyDustCursor() { var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"] var width = window.innerWidth; var height = window.innerHeight; var cursor = { x: width / 2, y: width / 2 }; var particles = []; function init() { bindEvents(); loop(); } // Bind events that are needed function bindEvents() { document.addEventListener('mousemove', onMouseMove); document.addEventListener('touchmove', onTouchMove); document.addEventListener('touchstart', onTouchMove); window.addEventListener('resize', onWindowResize); } function onWindowResize(e) { width = window.innerWidth; height = window.innerHeight; } function onTouchMove(e) { if (e.touches.length > 0) { for (var i = 0; i < e.touches.length; i++) { addParticle(e.touches[i].clientX, e.touches[i].clientY, possibleColors[Math.floor(Math.random() * possibleColors.length)]); } } } function onMouseMove(e) { cursor.x = e.clientX; cursor.y = e.clientY; addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]); } function addParticle(x, y, color) { var particle = new Particle(); particle.init(x, y, color); particles.push(particle); } function updateParticles() { // Updated for (var i = 0; i < particles.length; i++) { particles[i].update(); } // Remove dead particles for (var i = particles.length - 1; i >= 0; i--) { if (particles[i].lifeSpan < 0) { particles[i].die(); particles.splice(i, 1); } } } function loop() { requestAnimationFrame(loop); updateParticles(); } /** * Particles */ function Particle() { this.character = "*"; this.lifeSpan = 120; //ms this.initialStyles = { "position": "absolute", "display": "block", "pointerEvents": "none", "z-index": "10000000", "fontSize": "16px", "will-change": "transform" }; // Init, and set properties this.init = function(x, y, color) { this.velocity = { x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2), y: 1 }; this.position = { x: x - 10, y: y - 20 }; this.initialStyles.color = color; console.log(color); this.element = document.createElement('span'); this.element.innerHTML = this.character; applyProperties(this.element, this.initialStyles); this.update(); document.body.appendChild(this.element); }; this.update = function() { this.position.x += this.velocity.x; this.position.y += this.velocity.y; this.lifeSpan--; this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px,0) scale(" + (this.lifeSpan / 120) + ")"; } this.die = function() { this.element.parentNode.removeChild(this.element); } } /** * Utils */ // Applies css `properties` to an element. function applyProperties(target, properties) { for (var key in properties) { target.style[key] = properties[key]; } } init(); })();

Answer 1

執行 JavaScript 代碼最典型和正確的方法是將其放入*.js文件，然后將此文件注冊為主題的一部分，然后在您需要的任何模板中調用它。 技術上：

1. 在您的主題中創建一個custom-cursor.js文件並將您的代碼放在那里。 （ js文件夾通常是保存 javascript 文件的好地方，所以我們假設您的實際路徑是js/custom-cursor.js ）。
2. 打開您的functions.php並注冊您的腳本：

// This function will register your frontend scripts
// to let WordPress handle their loading

function rhonda_frontend_scripts() {

    // We shouldn't call frontend scripts on admin side, so...
    if ( ! is_admin() ) {

        // Ok, let's register a script
        wp_register_script(
            // Set a script name (unique handler) to call it later
            'custom-cursor',
            // Specify a path to your javascipt file
            get_template_directory_uri() . '/js/theme.min.js',
            // Leave dependencies array blank (your code doesn't require any other scripts)
            array(),
            // Don't specify a version (you can read about this later)
            false,
            // Yes, call this script in the footer 
            // after the main content (for performance reasons)
            true
        );

        // After the registration, you are able to load the script 
        // from any template using it's handler 

        // And since your cursor should be probably loaded on every page, 
        // you can load it just once right here in functions.php instead.
        wp_enqueue_style( 'custom-cursor' );

        // Ok, now you can add one more script if you wish.

    }
}

// But don't forget that we need to call our registration function right in time, 
// before the template is displayed, so we should use a hook.
// There is a special hook for this purpose: 'wp_enqueue_scripts'

add_action( 'wp_enqueue_scripts', 'rhonda_frontend_scripts' );

// Done :)

(3. 可選) 如果只需要在特殊模板中加載腳本，則需要調用wp_enqueue_style( 'custom-cursor' ); 就從它的身體。 例如，您可以打開single.php並將此代碼放在那里（在get_header()之前，這很重要）：

// This function will inject your scripts in the header/footer 
// of any page, which uses this .php template file
function rhonda_single_template_scripts() {
    wp_enqueue_script( 'custom-cursor' );
}

// Don't forget to call it via special hook 'wp_enqueue_scripts'.
add_action( 'wp_enqueue_scripts', 'rhonda_single_template_scripts' );

// ...

// get_header();

概括：

基礎知識：“Using_Javascript”（Codex）

參考： wp_register_script()

參考： wp_enqueue_script()

希望這可以幫助。