jquery - 在页面模板中使用自定义 jquery

Question

我制作了自定义页面模板，它在选项卡中显示第一级页面的所有子页面，其中包含带有第二级子页面的嵌套 Accordion 。这是我的页面: http://avgustin.dn.ua/en/menu/

因为这个问题- jquery ui accordions within tabs我无法使用插件 JQuery UI，因为默认情况下它会在 Accordion 之前初始化选项卡。所以我像这样手动添加jquery(我像在function.php中的以下建议一样编辑它):

    function my_enqueue_jquery_ui() {
    wp_enqueue_script( 'jquery-ui-1.8.2', '/wp-content/themes/papyrus/js/jquery-1.8.2.js', '1.8.2', array( 'jquery' ) );
}
function my_enqueue_jquery_ui2() {
    wp_enqueue_script( 'jquery-ui-1.9.1.custom', '/wp-content/themes/papyrus/js/jquery-ui-1.9.1.custom.js', '1.9.1', array( 'jquery' ) );
}
add_action('wp_enqueue_scripts', 'my_enqueue_jquery_ui');
add_action('wp_enqueue_scripts', 'my_enqueue_jquery_ui2');

然后在选项卡之前初始化 Accordion

jQuery(document).ready(function($) {    
    <?php
        foreach( $mypages as $page ) {      
            $content = $page->post_content;
            if ( ! $content ) // Check for empty page
                continue;?>
            $("#accordion<?php echo $page->ID ?>").accordion({collapsible: true, active: -10 });    
        <?php 
                }
        ?>      
              $("#tabs").tabs();     
    });

一切正常，直到我激活任何使用 jquery 的插件，例如 flash gallery。如何以正确的方式向页面模板添加自定义 jquery 支持。真的可以用jquery制作通用工作页面模板，可以在任何模板上使用而无需修改吗？请帮帮我!这是完整的代码

<?php
/*
Template Name: Menu_page
*/
?><?php get_header(); ?>
  <div id="content">
  <div class="entry"/>
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div class="post" id="post-<?php the_ID(); ?>">
        <h2><?php the_title(); ?></h2>
        <div class="post-content">        
<?php
    $mypages = get_pages( array( 'child_of' => $post->ID, 'sort_column' => 'post_date', 'sort_order' => 'desc', 'parent' =>  $post->ID) );?>
    <div id="tabs"> 
       <ul>
<?php
    foreach( $mypages as $page ) {      
        $content = $page->post_content;
        if ( ! $content ) // Check for empty page
            continue;
        $content = apply_filters( 'the_content', $content );
    ?>
         <li><a href="#tab<?php echo $page->ID ?>"><?php echo $page->post_title; ?></a></li>        
    <?php   
    }?>
</ul>
<?php
    foreach( $mypages as $page ) {      
        $content = $page->post_content;
        if ( ! $content ) // Check for empty page
            continue;
        $content = apply_filters( 'the_content', $content );
    ?>
         <div id="tab<?php echo $page->ID ?>">
         <?php echo $content;?>
         <div id="accordion<?php echo $page->ID ?>">
         <?php 
         $mypages2 = get_pages( array( 'child_of' => $page->ID, 'sort_column' => 'menu_order', 'sort_order' => 'asc', 'parent' =>  $page->ID) );
         foreach( $mypages2 as $page2 ) {
            $content2 = $page2->post_content;
            if ( ! $content2 ) // Check for empty page
                continue;
            $content2 = apply_filters( 'the_content', $content2 );?>

            <h3><a href="#"><?php echo $page2->post_title; ?></a></h3>
            <div>   
                <?php echo $content2;?>
            </div>
            <?php }?>
            </div>
            </div>
    <?php   
    }?></div>     


<script>        
jQuery(document).ready(function($) {    
<?php
    foreach( $mypages as $page ) {      
        $content = $page->post_content;
        if ( ! $content ) // Check for empty page
            continue;?>
        $("#accordion<?php echo $page->ID ?>").accordion({collapsible: true, active: -10 });    
    <?php 
            }
    ?>      
          $("#tabs").tabs();     
});
</script>       
            <?php the_content('<p class="serif">Читать полностью &raquo;</p>'); ?>
            <?php link_pages('<p><strong>Страницы:</strong> ', '</p>', 'number'); ?>
        </div>
    </div>

  <?php endwhile; endif; ?>
    </div>
  </div><!--/content -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

当我在 chrome 源代码中激活其他插件(flash galery)时，我看到:

<script type='text/javascript' src='http://avgustin.dn.ua/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>

在我的 jquery 行初始化之后。所以我的 jquery 不起作用:(

Answer 1

为什么不尝试通过 wp_enqueue_script() 函数包含 jQuery？就像这样:

function my_enqueue_jquery_ui() {
    wp_enqueue_script( 'jquery-ui-1.9.1.custom', '/wp-content/uploads/jquery-ui-1.9.1.custom/js/jquery-ui-1.9.1.custom.js', '1.9.1', array( 'jquery' ) );
}
add_action('wp_enqueue_scripts', 'my_enqueue_jquery_ui');

据我了解，您的问题是其他插件需要 jQuery，然后它们都发生冲突(一个覆盖另一个)，并且您的代码不再正常工作。

此外，我会考虑将 jQuery UI 脚本保留在主题目录中，但这取决于您。