Wordpress 主题开发：单击按钮时未执行 Javascript 代码答案

【问题标题】：Wordpress theme development: Javascript code not executing when clicking buttonWordpress 主题开发：单击按钮时未执行 Javascript 代码
【发布时间】：2020-07-02 00:49:51
【问题描述】：

我一直在学习如何使用 php、html、css 和 javascript 设计自定义 Wordpress 主题。当我进行更改时，我正在使用 Wordpress 开发工具 Local 来查看我的网站。我是所有这些语言的初学者，在导航中单击按钮时执行我的 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，我的网页也可以显示警告消息。还有其他可能导致问题的原因吗？

【问题讨论】：

标签： javascript php html wordpress wordpress-theming

【解决方案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' );

在 ES6 中使用 const 或 let 不能直接在浏览器中使用，应该使用 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);

【讨论】：