[英]Custom PHP and CSS not working as a Wordpress Plugin - Cursor
I am trying to get a custom cursor working on my Wordpress website.我正在尝试在我的 Wordpress 网站上使用自定义 cursor。 I have it working offline with Microsoft's Visual Studio Code with the live server, but not on Wordpress.
我让它在 Microsoft 的 Visual Studio Code 和实时服务器上离线工作,但不在 Wordpress 上。 There are two files I am using for this plugin, cursor.php and cursor.css.
我为此插件使用了两个文件,cursor.php 和 cursor.ZC7A628C5622E2A2EB61AZ7。 I am using FileZilla to upload these files to the wordpress plugin folder, and activating the plugin through the WP admin panel.
我正在使用 FileZilla 将这些文件上传到 wordpress 插件文件夹,并通过 WP 管理面板激活插件。
My first file (cursor.php)我的第一个文件(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
}
?>
My second file (cursor.css)我的第二个文件(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 */
Does anyone know If I am missing something?有谁知道我是否遗漏了什么?
Regards,问候,
Labrador拉布拉多犬
You're missing one important issue - to include css and js you should use build in wp_register_script function.您错过了一个重要问题 - 包括 css 和 js,您应该在 wp_register_script function 中使用构建。 Full specification is here:
完整规格在这里:
https://developer.wordpress.org/reference/functions/wp_register_script/ https://developer.wordpress.org/reference/functions/wp_register_script/
And the key issue is to use proper path to your files - that is probably why you fail:关键问题是使用正确的文件路径——这可能就是你失败的原因:
wp_register_script ( 'cool_cursor', plugins_url ( 'js/cool_cursor.js', __FILE__ ) );
Also - usually you add action to 'init' - not 'wp-head'另外-通常您向“init”添加操作-而不是“wp-head”
add_action('init', 'cool_cursor');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.