Question

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

由于这个问题 - jquery ui accordions within tabs我无法使用插件JQuery UI，因为默认情况下它会在手风琴之前初始化标签。所以我像这样添加jquery manualy（我编辑它就像在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 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脚本保存在主题目录中，但这取决于你。

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

1 个答案: