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的 - 如何和在哪裏添加我的自定義菜單腳本？

回答

相關問題