Wordpress - 如何以及在何处为我的自定义菜单添加脚本？答案

【问题标题】：Wordpress - How and Where to add the script for my custom menu?Wordpress - 如何以及在何处为我的自定义菜单添加脚本？
【发布时间】：2017-06-13 00:11:19
【问题描述】：

我是 PHP/Wordpress/Javascript 的新手，我正在尝试将使用 CSS 和 HTML 构建的网站转换为使用 PHP for Wordpress 的主题。

我有一个可以打开和关闭的屏幕外菜单。我在哪里把这个脚本放在我的 Wordpress 文件中？我该如何正确地做到这一点？

目前，我在 header.php 中复制了下面的 HTML，在 style.css 中复制了下面的 CSS

这是我的菜单 HTML：

<h1 class="menu">
 <div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;
  </a>
  <br>
  <a href=""> &nbsp; &nbsp; - p o r t f o l i o</a> <br>
  <a href=""> &nbsp; &nbsp; - m e e t &nbsp; m e</a><br>
  <a href=""> &nbsp; &nbsp; - i n s t a </a><br>
  <a href="#">  &nbsp; &nbsp; - p r i n t e d</a><br>
  <a href="#">  &nbsp; &nbsp; - 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%;
}

谢谢！

【问题讨论】：

标签： javascript php html css wordpress

【解决方案1】：

将脚本添加到您的 Wordpress 网站的正确方法是注册它们并将它们加入队列。 Wordpress 保留了页面加载时应该执行的脚本列表。通过注册和排队你的脚本，你可以将它们添加到这个列表中，给它们一个执行优先级，决定它们是否加载到页眉/页脚等等。注册和入队脚本应通过wp_enqueue_scripts 操作挂钩完成。将函数附加到该钩子后，您就可以使用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 操作挂钩。在add_menu_scripts 函数中，您可以看到我们为您的文件提供了一个句柄名称（昵称），指定文件位置，添加依赖项（在这种情况下，没有，所以一个空数组给出），给文件一个版本（这是可选的，所以我改为传递 NULL），最后指定脚本应该加载到页脚中。

【讨论】：

这是有用的信息。每个入队脚本会进入哪些文件，在该文件中的哪个位置是否重要？
文件在哪里无关紧要 - 您将文件的位置指定为 wp_enqueue_scripts 的第二个参数。还要确保将第六个参数设置为布尔值 TRUE 以在页脚中加载脚本（因为您的目标是 DOM 元素）。
我在答案中添加了一个示例。希望对您有所帮助。
这个例子帮助很大！谢谢！

【解决方案2】：

在header.php 中最好不要硬编码，让创建页面的原生 wordpress 功能

看看https://codex.wordpress.org/Navigation_Menus

【讨论】：

hmm 我看到了注册我的菜单名称的功能和告诉主题我希望菜单显示在哪里的功能，但是我看不到在哪里插入我的 js有以上。我错过了什么吗？

【解决方案3】：

你应该把这些脚本放到一个单独的文件中，然后使用 wp_enqueue_script() 来调用它：

wp_enqueue_script(
    'offset-menu',
    get_template_directory_uri() . '/js/offset-menu.js',
    array( 'jquery' ),
    '1.0',
    true
);

您可以通过here了解更多信息

【讨论】：