【问题标题】:Add this little jquery action in wordpress using button使用按钮在 wordpress 中添加这个小 jquery 操作
【发布时间】:2013-02-27 09:05:29
【问题描述】:

我有一段非常小的代码,我想在 word press 中实现:

<div id='cont' style="border: 1px solid #000; height: 150px; overflow:hidden;">
    <a href="#" id="button">Mostrar Todo</a>
    <ul>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li> 
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
         <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>

    </ul>
</div>`

我想做的jquery函数

$('#button').click(function(){
    $('#cont').animate({height:'500px'}, 500);

});

演示:

http://jsfiddle.net/YPAy6/9/

我只需要如何或在何处放置“函数”以及如何从 wordpress 中的帖子中调用它。

有什么想法吗?真的谢谢!

PD:我正在从谷歌的 cdn 加载所有脚本,据我所知,它没有必要加载任何其他 jquery cos wordpress,它的加载也是它自己的版本,无论如何我对此不是 110% 确定。

【问题讨论】:

    标签: javascript jquery css wordpress button


    【解决方案1】:

    为了在您的 WP 网站上执行上述 jQuery 功能,您必须首先通过 .js 文件加载它。将其复制并另存为 functions.js 并将其放在名为 /js/ 您的主题目录 (/wp-content/themes/[theme-name]) 的文件夹中。

    为了在您的站点上加载脚本,您可以在 &lt;head&gt; 元素中使用 &lt;script src="..." /&gt; 的旧方法,但我强烈建议使用 wp_enqueue_script 代替。 (有关更多信息,请参阅WP codex)。

    wp_enqueue_scripts() 函数添加到您主题的functions.php

    <?php
    function site_functions_js() {
        wp_enqueue_script(
            'site_functions',
            get_template_directory_uri() . '/js/functions.js',
            array('jquery')
        );
    }
    add_action('wp_enqueue_scripts', 'site_functions_js');
    ?>
    

    【讨论】:

    • 好的,一切都完成了,但它什么也没做,也许与无冲突模式有关? (我用过 wp_enqueue)对不起,如果有些问题太基本了,但这太基本了,我搞砸了-__-
    • 你应该在页面加载时使用浏览器中的开发者工具检查页面是否加载成功。
    • 很好,现在我正在沙盒站点中进行测试,脚本正在加载,开发人员工具说 js 文件有问题,(很确定我做错了什么)(noslan.com/customers/sandbox/?p=60 ) 建议? :)
    • 附带说明,如果您不确定 JS 文件是否正确加载或工作,只需使用旧的 alert() 函数来检查;)
    【解决方案2】:

    创建一个新的 javascript 文件并将这个函数放在那个文件中,并将这个 Javascript 文件放在 wp_head 函数之后。 像这样:-

    <script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/yourScript.js">   </script>
    

    欲了解更多详情,请使用此链接:-

    http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

    【讨论】:

    • 真的有必要吗?我的意思是,这是一个 jquery 函数,jquery 是由 WP 加载的,还是我脑子里一片混乱?
    • 好的,因为我可以看到加载各种脚本时的最佳实践是排队脚本。您的回答似乎也合法但不实际,还是我错了?
    猜你喜欢
    • 1970-01-01
    • 2021-04-04
    • 2013-09-19
    • 2017-02-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-09
    • 1970-01-01
    相关资源
    最近更新 更多