2016-09-19 48 views
0

對不起,如果這是一個基本的問題,但我無法搞清楚如何在我的網站使用JavaScript/jQuery腳本。 (如果這是有據可查的,我只是不知道正確的條款,請分享給尋找什麼 - 我與我所知道的沒有運氣尚未在線)的JavaScript在WordPress的響應菜單

我已經設計了一個網站用靜態頁面,它只是沒有博客。因此,我將Wordpress放入其中一個頁面,並找出如何使用header.php和footer.php文件爲我現有網站的菜單添加HTML/CSS設計。然而,我的jQuery腳本,應該加載頁面大小,以改變菜單設計無法正常工作。

我粘貼<script type="text/javascript" src="jquery.min.js"></script>代碼中的文件的<head>部分,調節所述主體標籤<body onresize="myFunction()" <?php body_class(); ?>>,並添加了「myFunction的」腳本的footer.php文件時,</body>標籤的上方。以上function myFunction() {我也有window.onload=myFunction();這也不起作用 - 所以無論頁面加載的大小是多少,或者它更改爲菜單的大小都沒有響應。

當我嘗試添加入隊的代碼塊給它完全打破了網頁的functions.php文件,給一個500錯誤。

任何意見將非常感激!路徑指定了jQuery庫

+0

你可以發佈你的代碼嗎? – spozun

回答

1

檢查是正確的。在您的腳本標記src="jquery.min.js是一個相對路徑。這意味着文件jquery.min.js與您的html/php /模板根據您的src路徑位於相同的目錄中。

我會推薦使用CDN。你不會有相對路徑,需要加載你的jQuery文件,並且如果其他頁面/站點加載了相同的文件,你將從瀏覽器緩存中受益。

3倍

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

2X

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
+0

哈哈,哦,好的電話。我注意到了,並在與php文件相同的文件夾中創建了一個新的jquery.min.js文件,但是當我嘗試了您的建議後,它現在可以正常工作。不知道爲什麼它不讀取服務器上的文件,非常感謝您的建議! –

+0

很高興工作!您的WP頁面的路徑可能與靜態網站不一樣......這就是爲什麼即使js位於同一文件夾中,路徑也不同。 – mhatch

1

當您添加資源,如scrips和樣式表到WordPress,你應該使用功能wp_enqueue_script()wp_enqueue_style()排隊它們。

這樣做可以確保您的scirpt/style僅包含一次,允許您聲明依賴關係,並且(在腳本的情況下)允許您在需要/願望時將其添加到頁腳。

你可以找到關於法典這些功能的詳細信息 -

與這些功能一起,你應該使用wp_enqueue_scripts行動,以確保您的腳本樣式會在正確的時間排隊。

因此,例如,您應該在您的functions.php文件中放置與此類似的內容。因爲jQuery已經存在於WP中,所以你甚至不需要指定一個位置,你只需告訴WP你想排隊它 -

add_action('wp_enqueue_scripts', 'my_enqueue_jquery'); 
function my_enqueue_jquery(){ 
    wp_enqueue_script('jquery'); 
}