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

Question

我制作了自定义页面模板，该模板在选项卡中显示第一级页面的所有子页面，其中嵌套手风琴和二级子页面。这是我的页面： http://avgustin.dn.ua/en/menu/

由于这个问题 - jquery ui accordions within tabs 我不能使用插件 JQuery UI，因为它默认在手风琴之前初始化选项卡。所以我像这样手动添加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');

在制表符之前初始化手风琴

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 库。如何以正确的方式将自定义 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 脚本保留在主题目录中，但这取决于你。