Я пытаюсь создать собственную тему WordPress. В котором я пытаюсь создать отзывчивый заголовок, но мне почему-то не удается запустить сценарий, который я написал в своих сценариях. js. Я предполагаю, что что-то я делаю неправильно, связывая его с темой, потому что скрипт отлично работает вне WordPress. Это мой код:
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');