WordPress的 - 如何和在哪里添加我的自定义菜单脚本？

我是PHP/Wordpress/Javascript的新手，我试图将使用CSS和HTML构建的网站转换为使用PHP for Wordpress的主题。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()">&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%; 
}

谢谢！

来源

2017-06-13 Kayla C

将脚本添加到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），最后指定脚本应该加载在页脚中。

来源

2017-06-13 02:13:00 Nadav

这是有用的信息。每个排队脚本都会执行哪些文件，并且与文件中的哪个位置有关系？ –

文件的位置并不重要 - 可以将文件的位置指定为wp_enqueue_scripts的第二个参数。还要确保将第六个参数设置为boolean TRUE，以在脚注中加载脚本（因为您的目标是DOM元素）。 – Nadav

我给答案增加了一个例子。希望有所帮助。 – Nadav

在header.php，最好不要硬编码，让创建页面

的本地WordPress的功能，偷看在https://codex.wordpress.org/Navigation_Menus

来源

2017-06-13 00:23:57 fauverism

嗯我看到函数注册我的菜单的名称和功能，告诉主题我想要菜单显示，但我没有看到确切的位置插入在上面的js。我错过了什么吗？ –

你应该把这些脚本到一个单独的文件，然后使用wp_enqueue_script（）来称呼它：

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

您可以了解更多从here

来源

2017-06-13 00:55:22

WordPress的 - 如何和在哪里添加我的自定义菜单脚本？

回答

相关问题