自定义PHP和CSS不能作为Wordpress插件使用-光标

Question

我正在尝试让一个自定义光标在我的Wordpress网站上工作。我让它与微软的Visual Studio Code在实时服务器上脱机工作，但不是在Wordpress上。我在这个插件中使用了两个文件: cursor.php和cursor.css。我正在使用FileZilla上传这些文件到wordpress插件文件夹，并通过可湿性粉剂管理面板激活插件。

我的第一个文件(cursor.php)

<?php

/**
Plugin Name:    Labrador Cursor
Version:        1.2
Author:         Labrador
License:        N/A
*/

add_action( 'wp_head', 'cool_cursor' );

function cool_cursor(){
    ?>  
    <style>
    <?php include 'cursor.css'; ?>
    </style>
    
    <script type="text/javascript">

    let mouseCursor =document.querySelector('.cursor');
      
    const cursor = document.querySelector(".cursor");
    document.addEventListener('mousemove', e => {
        cursor.style.top = e.pageY + 'px';
        cursor.style.left = e.pageX + 'px';
        })

    document.addEventListener('click', () => {
        cursor.classList.add("expand");
        setTimeout(() => {
            cursor.classList.remove("expand");
            }, 500);
    })

    </script>
    <?php
}
?>

我的第二个文件(cursor.css)

body {
  margin: 0;
  height: 100vh;
}

.cursor {
  width: 20px;
  height: 20px;
  border: 1.5px solid #0170b4;
  border-radius: 50%;
  position: absolute;
  pointer-events: none;
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
  -webkit-animation: cursorAnim .5s infinite alternate;
  animation: cursorAnim .5s infinite alternate;
}

.cursor::after {
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border: 2px solid black;
  border-radius: 50%;
  top: 8px;
  left: 8px;
  -webkit-transition: none;
  transition: none;
  -webkit-animation: none;
          animation: none;
}

.expand {
  -webkit-animation: cursorAnim2 0.5s forwards;
          animation: cursorAnim2 0.5s forwards;
  border: 2px solid #00b7ff;
}

@-webkit-keyframes cursorAnim {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
}

@keyframes cursorAnim {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
  }
}

@-webkit-keyframes cursorAnim2 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}

@keyframes cursorAnim2 {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;
  }
}
/*# sourceMappingURL=cursormain.css.map */

有没有人知道我是不是错过了什么？

致以敬意，

拉布拉多犬

Answer 1

你遗漏了一个重要的问题--要包含css和js，你应该使用build in wp_register_script函数。完整的规范在这里：

https://developer.wordpress.org/reference/functions/wp_register_script/

关键问题是使用正确的文件路径-这可能是您失败的原因：

wp_register_script ( 'cool_cursor', plugins_url ( 'js/cool_cursor.js', __FILE__ ) );

还有--通常你会将action添加到'init‘--而不是'wp-head’

add_action('init', 'cool_cursor');