Xu Yiyang

jQuery UI Tabs 是一个强大而易用的 jQuery 插件，我无意详细的介绍它，本文只涉及本站当前 WordPress 主题侧边栏中 UI Tabs 的一些简单应用。建议事先阅读相关文档： jQuery UI Tabs/Tabs 3 或 jQuery JavaScript Library 里的 UI/Tabs。

首先，在主题的 header.php 中调用 jQuery 和 UI Tabs，比如（假定所需文件被上传至“主题目录/js/”）：

<script src=”<?php bloginfo(’template_directory’); ?>/js/jquery.js” type=”text/javascript”></script>
<script src=”<?php bloginfo(’template_directory’); ?>/js/ui.tabs.pack.js” type=”text/javascript”></script>
<script src=”<?php bloginfo(’template_directory’); ?>/js/ui.tabs.ext.pack.js” type=”text/javascript”></script>

当然你也可以使用 wp_enqueue_script() 来调用 WP 自带的 jQuery 以保证同 WP 插件的兼容性。在 header.php 中，<?php wp_head(); ?> 之前，加入如下代码：

<?php wp_enqueue_script(’jquery-ui-core’); ?>
<?php wp_enqueue_script(’jquery-ui-tabs’); ?>

并按照 UI Tabs 所要求的格式（$(’#example > ul’).tabs();）根据自己需要添加相关代码，比如我是这么写的：

<script type=”text/javascript”>
jQuery.noConflict();
jQuery(function() {
jQuery(’#sidebar > ul’).tabs({ fx: { opacity: ‘toggle’ } });
});
</script>

然后，根据文档要求修改你的 sidebar.php 即可。如果你想要在不同页面的侧边栏显示不同的 Tabs，这里有一个非常简单的应用，可以参考下面的代码：

<div id=”sidebar”>
   <ul>
    <li><a href=”#tab-1″>Comments</a></li>
    <li><a href=”#tab-2″>Latest</a></li>
    <li><a href=”#tab-3″>Tags</a></li>
    <?php if(is_home() && !is_paged()) { //前三个Tabs分别显示评论、文章和标签，第四个Tab在首页显示友情链接 ?>
    <li><a href=”#tab-4″>Friends</a></li>
    <?php } if(is_single()) { //第四个Tab在单篇汇整页面显示基于 Simple Tag 的相关文章 ?>
    <li><a href=”#tab-4″>Related</a></li>
    <?php } if(is_archive()) { //第四个Tab在存档页面显示按月汇整 ?>
    <li><a href=”#tab-4″>Monthly</a></li>
    <?php } //第四个Tab分页显示页面导航
          global $notfound;
          if (is_page() && ($notfound != ‘1′)) {
          $current_page = $post->ID;
          while ($current_page) {
          $page_query = $wpdb->get_row(”SELECT ID, post_title, post_status, post_parent FROM $wpdb->posts WHERE ID = ‘$current_page’”);
          $current_page = $page_query->post_parent;
          }
          $parent_id = $page_query->ID;
          $parent_title = $page_query->post_title;
          if ($wpdb->get_results(”SELECT * FROM $wpdb->posts WHERE post_parent = ‘$parent_id’ AND post_status != ‘attachment’”)) { ?>
    <li><a href=”#tab-4″>Subpages</a></li>
    <?php } } ?>
   </ul>
   <div class=”tabs”>
    <div id=”tab-1″>
     <h4>Comments</h4>
     <ul><?php if ((function_exists(’get_recent_comments’))) { get_recent_comments(); } //评论 ?></ul>
    </div>
    <div id=”tab-2″>
     <h4>Latest</h4>
     <ul><?php wp_get_archives(’type=postbypost&limit=10′); //最新文章 ?></ul>
    </div>
    <div id=”tab-3″>
     <h4>Tags</h4>
     <?php st_tag_cloud(”); //Simple Tag 标签云 ?>
    </div>
    <?php if(is_home()) { //第四个Tab在首页显示友情链接 ?>
    <div id=”tab-4″>
     <ul><?php wp_list_bookmarks(); ?></ul>
    </div>
    <?php } if(is_single()) { //第四个Tab在单篇汇整页面显示基于 Simple Tag 的相关文章 ?>
    <div id=”tab-4″>
     <?php st_related_posts(’number=10&title=&include_page=false&xformat=<a href=”%permalink%” title=”%title% (%date%)”>%title%</a>’); ?>
    </div>
    <?php } if(is_archive()) { //第四个Tab在存档页面显示按月汇整 ?>
    <div id=”tab-4″>
     <h4>Monthly</h4>
     <ul><?php wp_get_archives(’type=monthly’); ?></ul>
    </div>
    <?php } if (($wpdb->get_results(”SELECT * FROM $wpdb->posts WHERE post_parent = ‘$parent_id’ AND post_status != ‘attachment’”)) && is_page()) { //第四个Tab分页显示页面导航 ?>
    <div id=”tab-4″>
     <h4>Subpages</h4>
     <ul>
      <?php wp_list_pages(’sort_column=menu_order&title_li=&child_of=’. $parent_id); ?>
      <?php if ($parent_id != $post->ID) { ?>
      <li><a href=”<?php echo get_permalink($parent_id); ?>”>Back to <?php echo $parent_title; ?></a></li>
      <?php } ?>
     </ul>
    </div>
    <?php } ?>
   </div>
</div>

代码已注释，就不再另行说明了，最后修改样式表，使 Tabs 的样式符合主题风格。