2016-04-26 85 views
0

正確使用jQuery菜單功能進入Wordpress使用主題專門構建Wordpress網站後,我對這些龐大的主題網站所包含的內容感到沮喪。我冒險嘗試使用Underscores框架構建我的第一個站點。如何使用get_template_directory_uri()代替

我目前有實施一些jQuery的菜單滑動到WordPress站點麻煩

:www.AtlanticWebsites.co.uk

我想實現一些jQuery的從bigSlide.js

http://ascott1.github.io/bigSlide.js/#how

來源

步驟我已經採取了:

上傳bigSlide.js文件到js.folder /目錄

這包含以下所有代碼: https://raw.githubusercontent.com/ascott1/bigSlide.js/master/dist/bigSlide.min.js

插入下面的代碼到functions.php文件:

function atlanticwebsites_init_js_scripts() { 
wp_enqueue_script('big_Slide', get_template_directory_uri() . 
'/js/bigSlide.js', array('jquery'), '1.0', true); 
} 

add_action('wp_enqueue_scripts', 'atlanticwebsites_init_js_scripts'); 

插入下面的代碼放入header.php文件:

<a href="#menu" class="menu-link">&#9776;</a> 

    <nav id="menu" class="panel" role="navigation"> 
     <ul> 
      <li><a href="#">Web Design</a></li> 
      <li><a href="#">Optimisation</a></li> 
      <li><a href="#">Google Adwords</a></li> 
      <li><a href="#">Responsive Design</a></li> 
      <li><a href="#">Our Work</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
</script> 
<script src="jquery.big-slide.js"></script> 

<script> 
    $(document).ready(function() { 
    $('.menu-link').bigSlide(); 
    }); 
</script> 

我已將以下代碼插入到style.css

.panel { 
    position: fixed; 
    left: -15.625em; /*left or right and the width of your navigation  panel*/ 
    width: 15.625em; /*should match the above value*/ 
} 

.wrap { 
    position: relative; 
} 

菜單選項卡顯示,但不起作用。 問題可能有人檢查什麼是缺少的? 我懷疑我錯誤地放置了代碼

function.php或header.php 或省略代碼?

另外,我是否應該去掉與「導航」相關的現有代碼,該代碼已預填充Underscores Framework基本安裝?

非常感謝

+0

在瀏覽器的調試模塊中,您可以看到是否有404錯誤。另外爲什麼你定義?我想你應該定義更具體的相關路徑 –

+0

如果你排隊你的腳本,並假設你正在使用['wp_head()'](https://codex.wordpress.org/Plugin_API/Action_Reference/wp_head)頭模板文件,不需要像在header.php中那樣對'jquery.big-slide.js'進行硬編碼。另外我發現header.php有問題。這不是你想放置你的腳本的地方。 –

回答

0

我瓦列裏·

同意根據您的enqueue_scripts功能bigslide.js駐留在JS文件夾,但在你的header.php文件已包含它沒有JS文件夾,所以你可能會想檢查一下。

+0

感謝您的回覆。 @DhavalChheda已將以下代碼添加到header.php 但是,我仍然無法使其工作。任何幫助讚賞 – JohnyOhio

+0

你有斜槓不正確..它應該是js/file_name.js –