2016-04-26 84 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 –