jquery - WP 主题原生的响应式 jQuery 菜单

Question

我正在为自定义 WordPress 主题开发响应式下拉菜单 http://www.imlivingart.com/testimonials (注意:此问题与启动页面无关，因此请不要仅访问 imlivingart.com)

愿景:当我将浏览器大小调整到 900 时，应该会出现一个菜单栏。当我单击该菜单栏时，WP 菜单列表会下拉。当我再次单击菜单栏时，WP 菜单列表将被隐藏。

当前现实:我正在尝试使用一些简单的 jQuery 来上下切换菜单。不幸的是，我似乎无法将我的自定义 jQuery 连接到我的 WP 主题。

jquery(当前位于/js/resp-menu.js):

jQuery(document).ready(function() {
    $('#show-rmenu').click(function() {
            $('.r-menu').slideToggle("fast");
    });
});

所有相关代码似乎都可以在此 jsfiddle 中工作(针对非 WP 进行调整):http://jsfiddle.net/QRfK7/1/

但这并不能转化为我的 WP 主题。在我的函数文件中，我尝试以多种方式调用 jQuery 和我的自定义脚本。最近我尝试了这个(来自 http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/ ):

function my_init() {
if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.10.1', true);
    wp_enqueue_script('jquery');

    // load a JS file from my theme: js/theme.js
    wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/resp-menu.js', array('jquery'), '1.10.1', true);
}
}
add_action('init', 'my_init');

我希望这是足够的信息。啊。我是 jQuery 和 WP Enqueue Script 的新手，我已经为此绞尽脑汁两天了。我尝试用谷歌搜索，在 StackOverflow 上发现了一些类似的问题，但他们似乎没有让它发挥作用。也许我的问题更具体？叹息......任何帮助将不胜感激!谢谢!!!

编辑

好的，我成功地使用本教程使其工作:http://wpwizard.net/jquery/add-jquery-to-your-theme-or-plugin/

这涉及将 jQuery 直接编码到我的 WP 主题 header 中。即便如此，如果能弄清楚如何链接到我的自定义 jquery 外部脚本 表，那就太好了。谢谢!

Answer 1

我不确定你为什么要取消注册 jQuery 库然后将其添加回来。我会像下面这样写。

此外，如果您要使用 bloginfo('template_url');

你需要这样调用它， get_bloginfo('template_url');

你应该使用 get_template_directory_uri();

您还应该使用 wp_enqueue_scripts 操作，而不是 init。

注意，我在函数参数中添加了 $，这是因为 WP jQuery lib 无法识别 $。另一种选择是用 jQuery 替换 $ 的所有实例。

jQuery(document).ready(function($) {
    $('#show-rmenu').click(function() {
        $('.r-menu').slideToggle("fast");
    });
});


// Register Javascript with wp_enqueue
function my_init() {
 if (!is_admin()) {

 // Register Script
 wp_register_script('my_script', get_template_directory_uri() . '/js/resp-menu.js', array('jquery'), '1.10.1', true);

 wp_enqueue_script('my_script');
}

}
add_action('wp_enqueue_scripts', 'my_init');