我是 PHP/Wordpress/Javascript 新手,正在尝试将使用 CSS 和 HTML 构建的网站转换为使用 PHP for Wordpress 的主题。
我有一个可以打开和关闭的屏幕外菜单。我应该将这个脚本放在我的 WordPress 文件中的什么位置?我该如何正确地做到这一点?
目前,我将 HTML 复制到了 header.php 中,并将 CSS 复制到了 style.css 中
这是我的菜单 HTML:
<h1 class="menu">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×
</a>
<br>
<a href=""> - p o r t f o l i o</a> <br>
<a href=""> - m e e t m e</a><br>
<a href=""> - i n s t a </a><br>
<a href="#"> - p r i n t e d</a><br>
<a href="#"> - c i a o</a>
</div>
<div style="font-size:30px;cursor:pointer" class="openbtn" onclick="openNav()"> <img src="hamburger.png"/> </div>
</h1>
这是我的 JavaScript
<h1 class="menu">
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</h1>
这是我的 CSS
.sidenav {
height: 100%;
width: 0;
position: absolute;
z-index: 1;
top: 0;
left: 0;
background-color: #ffffff;
overflow-x: hidden;
padding-top: 70px;
transition: 0.5s;
opacity: 0.8;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 16px;
color: #000000;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #BCBCBC;
}
.sidenav .closebtn {
position: absolute;
top: 0;
margin-left: 10px;
font-size: 36px;
padding-top: 11px;
}
.openbtn {
background-color: #fffff;
margin-right: 30px;
margin-top: 0;
padding-top: 0;
height: 45px;
}
.openbtn a:active{
color: #ffffff;
}
.menu {
width: 5%;
}
谢谢!
最佳答案
将脚本添加到 WordPress 网站的正确方法是注册它们并将它们排入队列。 Wordpress 保留了页面加载时应执行的脚本列表。通过注册和排队脚本,您可以将它们添加到此列表中,赋予它们执行优先级,决定它们是否加载到页眉/页脚等等。注册和排队脚本应通过 wp_enqueue_scripts 完成 Action Hook 。将函数附加到该 Hook 后,您可以使用 wp_enqueue_script然后运行wp_register_script函数分别注册和入队到脚本。
让我举个例子。将以下代码粘贴到主题的functions.php 文件中:
function add_menu_scripts()
{
wp_register_script( 'menuScript', get_template_directory_uri() .'/js/menu.js', array(), null, TRUE);
wp_enqueue_script( 'menuScript' );
}
add_action( 'wp_enqueue_scripts', 'add_menu_scripts' );
此代码块会将 add_menu_scripts
函数添加到 wp_enqueue_scripts
操作 Hook 中。在 add_menu_scripts 函数中,您可以看到我们为您的文件提供了一个句柄名称(昵称),指定文件位置,添加依赖项(在本例中没有依赖项,因此给出了一个空数组),为文件提供一个版本(这是可选的,因此我传递 NULL),最后指定脚本应加载到页脚中。
关于javascript - Wordpress - 如何以及在哪里添加自定义菜单的脚本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44510486/