srcmini我一直在学习如何使用php, html, css和javascript设计自定义Wordpress主题。进行更改时, 我正在使用Wordpress开发工具”本地”来查看我的网站。我是所有这些语言的初学者, 并且在导航中单击按钮时执行javascript函数时遇到问题。单击该按钮后, 应该显示一个滑出菜单。我不确定这是我的html和javascript语法是否存在问题, 或者我是否正确链接了它们(在html文件或functions.php文件中)。无论如何, 这是到目前为止我可能导致此问题的原因。
header.php
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<?php wp_head(); ?>
<script src="js/main.js"></script>
</head>
<body>
<div id ="slideout-menu">
<ul>
<li>
list items
</li>
</ul>
</div>
<nav>
<ul>
<li><a href ="#">Home</a></li>
<li><a href ="#">About</a></li>
<li><button onclick="showSlideOutMenu();">Projects</button></li>
</ul>
</nav>
main.js
const slideoutMenu = document.getElementById("slideout-menu");
function showSlideOutMenu(){
if(slideoutMenu.style.opacity == "1"){
slideoutMenu.style.opacity = '0';
slideoutMenu.style.pointerEvents = 'none';
}
else{
slideoutMenu.style.opacity = '1';
slideoutMenu.style.pointerEvents = 'auto';
}
}
functions.php
<?php
function js_css_setup(){
wp_enqueue_style('style', get_stylesheet_uri(), '/css/style.css');
wp_enqueue_script("main", get_theme_file_uri() .'/js/main.js', NULL, microtime(), false);
}
add_action('wp_enqueue_scripts', 'js_css_setup');
?>
style.css可以正常工作, 并且在不透明度设置为1时显示菜单, 所以我排除了这种情况。如果添加到main.js, 我的网页也可以显示警报消息。还有其他可能导致问题的原因吗？
#1
首先, 你应该在wp_enqueue_script函数中将in_footer参数设置为true
你的JS代码在页面完全加载之前运行, 并在浏览器控制台中导致错误
对于加载主要样式, 可以在wp_enqueue_style中使用get_stylesheet_uri()函数
<?php
function js_css_setup() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
wp_enqueue_script( "main-js", get_theme_file_uri() . '/js/main.js', null, microtime(), true );
}
add_action( 'wp_enqueue_scripts', 'js_css_setup' );
const或let在ES6中, 你不能直接在浏览器中使用, 应该使用var。
https://tylermcginnis.com/var-let-const/
https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75
var slideoutMenu = document.getElementById("slideout-menu");
function showSlideOutMenu() {
console.log(slideoutMenu.style.opacity);
if (slideoutMenu.style.opacity === "1") {
slideoutMenu.style.opacity = '0';
slideoutMenu.style.pointerEvents = 'none';
} else {
slideoutMenu.style.opacity = '1';
slideoutMenu.style.pointerEvents = 'auto';
}
}
index.php
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<?php wp_head(); ?>
</head>
<body>
<?php wp_body_open(); ?>
<div id="slideout-menu">
<ul>
<li>
list items
</li>
</ul>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<button onclick="showSlideOutMenu();">Projects</button>
</li>
</ul>
</nav>
<?php wp_footer(); ?>
</body>
</html>
我建议先学习HTML和CSS, 然后再学习JS(ES5 / ES6)
#2
将脚本更改为此
wp_enqueue_script("main", get_template_directory_uri().'/js/main.js', NULL, microtime(), false);
评论前必须登录！
注册