如何让jQuery在管理区域工作?

时间:2013-04-07 00:07:46

标签: javascript jquery wordpress twitter-bootstrap wordpress-theming

我已将Twitter Bootstrap包含在WordPress的主题选项页面中,以帮助设置主题选项页面的样式。之前,当我取消注册jQuery并添加我自己的版本时,所有代码都在使用$,因为我不必担心WordPress始终将jQuery附加到所有内容的方式,我可以使用$并完成它。

不幸的是,你不应该取消注册jQuery,即使它只在你自己的管理页面上完成。

所以我四处寻找仍然在jQuery中使用$的方法,并写了这个:

(function($){   
    $(document).ready(function(){
        $('.posts').click(function(){
            if ($(this).attr("id") == "list"){
                $('.sectionLists').show();
            } else {
                $('.sectionLists').hide();
            }
        });
});
})(jQuery);

没有控制台错误 - 在我的代码中,但我的Twitter Bootstrap Javascript依赖函数都没有工作,例如Popovers,Tabs或其他任何性质的东西,上面的代码甚至都不起作用。

但是,如果我将其粘贴到Chrome控制台并按Enter键,则可以正常工作。

怎么回事?

2 个答案:

答案 0 :(得分:1)

你可能在加载之前尝试调用jQuery - 这就是为什么它在页面中不起作用但在控制台中起作用。

您是否正在添加如下所示的jQuery依赖关系,如wp_enqueue_script中的Codex所示?

function iamb_inc_bootstrap() {

    wp_register_script(
        'js_bootstrap',
        get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js',
        array('jquery'),
        '20130219',
        true
    );

    wp_enqueue_script('js_bootstrap');
}
add_action('wp_enqueue_scripts', 'iamb_inc_bootstrap');

答案 1 :(得分:1)

忽略排队脚本和样式表的correct way,这就是我经常这样做的方式:

add_action( 'admin_footer', 'wpse_46677_change_menu_item' );

function wpse_46677_change_menu_item()
{
    ?>
        <script type="text/javascript">
            jQuery(document).ready( function($) {
                $( "#menu-appearance" )
                    .find( "li:contains( 'Header' )" )
                    .html( '<a href="themes.php?page=custom-header">My Text</a> ');
            });     
        </script>
    <?php
}

来自this WordPress Answer