JS 文件未在 wordpress 自定义主题中运行脚本

Question

I am trying to create a custom WordPress theme.我正在尝试创建一个自定义 WordPress 主题。 In which I'm trying to create a responsive header but I'm somehow unable to run the script that I've written in my scripts.js.在其中我试图创建一个响应式 header 但我无法运行我在我的 scripts.js 中编写的脚本。 I guess there is something that I am doing wrong while linking it to the theme because the script runs perfectly fine outside WordPress.我想在将它链接到主题时我做错了什么，因为脚本在 WordPress 之外运行得非常好。 This is my code:这是我的代码：

header.php–---
<body>
<nav>  
  <div class="logo">
        <h4>The Nav</h4>
    </div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Projects</a></li>
    </ul>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>

css--
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    padding-top: 30px;
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5D4954;
    font-family: "Poppins", sans-serif;
}

.logo {
    color: rgb(226, 226, 226);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    color: rgb(226, 226, 226);
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}

.burger {
    display: none;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
    .nav-links {
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .nav-links {
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #5D4954;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }

    .nav-links li {
        opacity: 0;
    }

    .burger {
        display: block;
        cursor: pointer;
    }
    nav {
        padding-top: 50px;
        position: fixed;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        min-height: 8vh;
        background-color: #5D4954;
        font-family: "Poppins", sans-serif;
    }
}

.nav-active {
        transform: translateX(0%);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

scripts.js--
function navSlide() {
    const burger = document.querySelector(".burger");
    const nav = document.querySelector(".nav-links");
    const navLinks = document.querySelectorAll(".nav-links li");

    burger.addEventListener("click", () => {
        //Toggle Nav
        nav.classList.toggle("nav-active");

        //Animate Links
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = ""
            } else {
                link.style.animation = <code>navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s</code>;
            }
        });
        //Burger Animation
        burger.classList.toggle("toggle");
    });

}

functions.php----
<?php 
function get_files()
{
    wp_enqueue_script('jQuery-js', 'http://code.jquery.com/jquery.js', array(), '1.0', true);
    wp_enqueue_script('main-scripts', get_template_directory_uri().'/scripts.js', array(),'1.0' , true);
    wp_enqueue_style('main_styles',get_stylesheet_uri(),NULL,microtime());    
}
add_action('wp_enqueue_scripts','get_files');

Answer 1

Try the following:尝试以下操作：

wp_enqueue_script( 'main-scripts', get_stylesheet_directory_uri(). '/scripts.js', array(), '1.0', true );

Also at the moment you've declared your navSlide function but as far as I can see you haven't called it.同样，目前您已经声明了您的 navSlide function 但据我所知，您还没有调用它。

JS 文件未在 wordpress 自定义主题中运行脚本

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-06-25 16:50:44

JS 文件未在 wordpress 自定义主题中运行脚本

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-06-25 16:50:44

解决方案1
0 已采纳 2020-06-25 16:50:44