响应式 jQuery Menu 原生于 WP 主题

Posted 2023-04-13

【中文标题】响应式 jQuery Menu 原生于 WP 主题

【英文标题】：Responsive jQuery Menu native to WP theme

【发布时间】：2014-04-30 02:55:03

【问题描述】：

我正在为自定义 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 的新手，为此我已经绞尽脑汁 2 天了。我尝试使用谷歌搜索并在 *** 上找到了类似的问题，但它们似乎并没有使它起作用。也许我的问题更具体？叹息...任何帮助将不胜感激！谢谢！！！

编辑

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

这涉及将 jQuery 直接编码到我的 WP 主题标题中。即便如此，很高兴能弄清楚我如何链接到我的自定义 jquery external script 工作表。谢谢！

【问题讨论】：

请务必阅读选择标签时出现的说明！

【参考方案1】：

我不知道您为什么要注销 jQuery 库，然后将其重新添加。我会像下面这样写。

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

你需要这样称呼它， get_bloginfo('template_url');

你应该使用 get_template_directory_uri();

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

请注意，我在函数参数中添加了 $，这是因为 WP jQuery 库无法识别 $。另一种选择是用 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');