WordPress 主题 Index 模板

作者：Young | 发表于：2009年07月2日

原文：The WordPress Theme Index Template

原文作者：Ian Stewart

译文：WordPress 主题 Index 模板

译文作者：Young

Index.php 文件是 WordPress 主题最重要的模板，不仅当其他相关的模板（例如 category.php 或者 tag.php) 缺失时，需要用到它，而且建好这个模板还有助于建好其他的模板（除了评论模板 —— 不管您怎么看，这个模板的确不好弄）。

关于循环

Index.php 主要代码在模板中间，并都在一个循环里面。没有循环，就没有 index.php。循环就像这个样子：

  1.  
  2.  
  3. <?php while ( have_posts() ) : the_post() ?>
  4. <?php endwhile; ?>
  5.  
  6.  

真的很简单。当数据库里面有文章的时候，您的主题就会循环检查每篇文章并起些作用，至于起什么作用则是棘手问题，不过也可能简单。

我们就从上面那个循环开始。把下面的代码插入到 index.php 文件的 #content DIV 标签中间：

  1. <?php while ( have_posts() ) : the_post() ?>
  2.  
  3. <?php the_content(); ?>
  4. <?php endwhile; ?>

这样做会产生什么结果呢？会显示整篇文章的内容。但是我们可以改改：

  1. <ul>
  2. <?php while ( have_posts() ) : the_post() ?>
  3.  
  4. <li>
  5.     <?php the_excerpt(); ?>
  6. </li>
  7. <?php endwhile; ?>             
  8.  
  9. </ul>

您发现改了哪里了吗？修改之后的代码就只会显示随机的文章摘要。现在您知道 the_content() 和 the_excerpt() 代码是干什么用的了吧？

基本上，您建一个循环（以 while 开始 endwhile 结束）并在中间添加一些东西——即 WordPress 模板标签——以便从循环文章里面提取相关信息，就像上一课的 bloginfo() 一样从 WordPress 设置里面提取博客标题。

下面我们来建一个真正复杂的循环。先从一些基本的精简代码开始，但是这些代码需要包括 More 和 Next Page 标签，并且这些标签要包含于一个独立的 class="entry-content" 的 DIV 标签里面，即：

  1.                <div class="entry-content">     
  2. <?php the_content( __( ‘Continue reading <span class="meta-nav">&raquo;</span>’, ‘your-theme’ )  ); ?>
  3.  
  4. <?php wp_link_pages(‘before=<div class="page-link">’ . __( ‘Pages:’, ‘your-theme’ ) . ‘&after=</div>’) ?>
  5.  
  6.                                         </div><!– .entry-content –>

那么文章标题怎么办呢？也很简单。我们将使用模板标签 the_title() 来获取文章标题并且通过 <a> 标签 和 the_permalink() 使它链接到原文。同时，我们还将添加一个 title 和一个 bookmark 属性，以便告诉谷歌等机器那是博客文章的永久链接。把下面代码插入到 <div class="enty-content"> 前面：

  1.                                <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __(‘Permalink to %s’, ‘your-theme’), the_title_attribute(‘echo=0′) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
  2.  
  3.  

关于任意一篇文章的作者、发表时间、分类、标签、评论链接等内容，我想把它们分开两个部分：其中一个部分是元（包括作者和发表时间），会放在文章正文之前；另一个部分是实用工具（包括分类、标签和评论链接），会放在文章正文之后。

让我们来看一下整个循环，其中我把一些 PHP 评论代码也插了进去，供参考：

  1. <?php /* The Loop — with comments! */ ?>                    
  2. <?php while ( have_posts() ) : the_post() ?>
  3.  
  4.  
  5. <?php /* Create a div with a unique ID thanks to the_ID() and semantic classes with post_class() */ ?>         
  6.                                 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>                              
  7.  
  8. <?php /* an h2 title */ ?>                                                     
  9.                                         <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __(‘Permalink to %s’, ‘your-theme’), the_title_attribute(‘echo=0′) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
  10.  
  11.  
  12. <?php /* Microformatted, translatable post meta */ ?>                                                                          
  13.                                         <div class="entry-meta">
  14.                                                 <span class="meta-prep meta-prep-author"><?php _e(‘By ‘, ‘your-theme’); ?></span>
  15.  
  16.                                                 <span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( ‘View all posts by %s’, ‘your-theme’ ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
  17.  
  18.                                                 <span class="meta-sep"> | </span>
  19.                                                 <span class="meta-prep meta-prep-entry-date"><?php _e(‘Published ‘, ‘your-theme’); ?></span>
  20.  
  21.                                                 <span class="entry-date"><abbr class="published" title="<?php the_time(‘Y-m-d\TH:i:sO’) ?>"><?php the_time( get_option( ‘date_format’ ) ); ?></abbr></span>
  22.  
  23.                                                 <?php edit_post_link( __( ‘Edit’, ‘your-theme’ ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
  24.  
  25.                                         </div><!– .entry-meta –>
  26.  
  27. <?php /* The entry content */ ?>                                       
  28.                                         <div class="entry-content">     
  29.  
  30. <?php the_content( __( ‘Continue reading <span class="meta-nav">&raquo;</span>’, ‘your-theme’ )  ); ?>
  31.  
  32. <?php wp_link_pages(‘before=<div class="page-link">’ . __( ‘Pages:’, ‘your-theme’ ) . ‘&after=</div>’) ?>
  33.  
  34.                                         </div><!– .entry-content –>
  35.  
  36. <?php /* Microformatted category and tag links along with a comments link */ ?>                                
  37.                                         <div class="entry-utility">
  38.  
  39.                                                 <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( ‘Posted in ‘, ‘your-theme’ ); ?></span><?php echo get_the_category_list(‘, ‘); ?></span>
  40.  
  41.                                                 <span class="meta-sep"> | </span>
  42.                                                 <?php the_tags( ‘<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">’ . __(‘Tagged ‘, ‘your-theme’ ) . ‘</span>’, ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
  43.  
  44.                                                 <span class="comments-link"><?php comments_popup_link( __( ‘Leave a comment’, ‘your-theme’ ), __( ’1 Comment’, ‘your-theme’ ), __( ‘% Comments’, ‘your-theme’ ) ) ?></span>
  45.  
  46.                                                 <?php edit_post_link( __( ‘Edit’, ‘your-theme’ ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>
  47.  
  48.                                         </div><!– #entry-utility –>   
  49.                                 </div><!– #post-<?php the_ID(); ?> –>
  50.  
  51.  
  52. <?php /* Close up the post div and then end the loop with endwhile */ ?>               
  53.  
  54. <?php endwhile; ?>

关于导航：

现在我们需要一种方法来导航我们的文章。这种方法会用到两个 WordPress 模板标签，即 next_posts_link() 和 previous_posts_link()。这两个标签的功能并非您想象的那样，我想 WordPress codex 的下面解释最恰当：

next posts link
这是链接到较旧的文章的，但是 “next posts” 一词令人困惑。
 
previous posts link
这是链接到较新的文章的，但是 “previous posts” 一词令人困惑。

和 index.php 里面的所有内容一样，第一次创建文章导航需要非常细心，因为几乎博客的每一个页面都会用到它。

我喜欢在正文的上面和下面分别使用文章导航。当然这取决于具体的情况，您也可以不用。不过用了也没关系，您可以随时通过以下代码隐藏它：

  1. .single #nav-above {
  2.     display:none;
  3. }

这个 CSS 代码将会隐藏单独日志内容上面的文章导航功能。

如果没有导航网页，我们也想隐藏文章导航功能。比如，如果没有较旧的文章，我们就不想输出任何的导航代码。这点可以通过以下代码实现：

  1. <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
  2.  
  3. <?php } ?>

这个代码表示如果循环页面里最大的页码大于1，那么就输出导航代码，执行导航功能。

下面就是我们需要的代码，其中顶部导航代码在循环开始之前，底部导航代码在循环结束之后：

  1. <?php /* Top post navigation */ ?>
  2.  
  3. <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
  4.  
  5.                                 <div id="nav-above" class="navigation">
  6.                                         <div class="nav-previous"><?php next_posts_link(__( ‘<span class="meta-nav">&laquo;</span> Older posts’, ‘your-theme’ )) ?></div>
  7.  
  8.                                         <div class="nav-next"><?php previous_posts_link(__( ‘Newer posts <span class="meta-nav">&raquo;</span>’, ‘your-theme’ )) ?></div>
  9.  
  10.                                 </div><!– #nav-above –>
  11. <?php } ?>
  1. <?php /* Bottom post navigation */ ?>
  2.  
  3. <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
  4.  
  5.                                 <div id="nav-below" class="navigation">
  6.                                         <div class="nav-previous"><?php next_posts_link(__( ‘<span class="meta-nav">&laquo;</span> Older posts’, ‘your-theme’ )) ?></div>
  7.  
  8.                                         <div class="nav-next"><?php previous_posts_link(__( ‘Newer posts <span class="meta-nav">&raquo;</span>’, ‘your-theme’ )) ?></div>
  9.  
  10.                                 </div><!– #nav-below –>
  11. <?php } ?>

还差一样 index.php 文件就完成了，那就是在 get_footer() 之前添加以下代码：

  1. <?php get_sidebar(); ?>

如何创建 WordPress 主题

这篇文章是如何创建 WordPress 主题教程系列的其中一部分，该系列将会教您如何从零开始创建强大的 WordPress 主题。建议您从头开始阅读这个系列并自己动手编写一些漂亮的代码。

注释：

1. 根据本文和 index.php 之前已有的内容，最终的 index.php 文件里面的代码如下：

  1. <?php get_header(); ?>
  2.  
  3. <div id="container">            
  4.  
  5.                 <div id="content">
  6.                 <?php /* Top post navigation */ ?>
  7.  
  8.  
  9. <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
  10.  
  11.  
  12.                                 <div id="nav-above" class="navigation">
  13.                                         <div class="nav-previous"><?php next_posts_link(__( ‘<span class="meta-nav">&laquo;</span> Older posts’, ‘eblog’ )) ?></div>
  14.  
  15.  
  16.                                         <div class="nav-next"><?php previous_posts_link(__( ‘Newer posts <span class="meta-nav">&raquo;</span>’, ‘eblog’ )) ?></div>
  17.  
  18.  
  19.                                 </div><!– #nav-above –>
  20. <?php } ?>
  21.  
  22.                 <?php while ( have_posts() ) : the_post() ?>
  23.  
  24. <?php /* Create a div with a unique ID thanks to the_ID() and semantic classes with post_class() */ ?>         
  25.                                 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>                              
  26.  
  27.  
  28. <?php /* an h2 title */ ?>                                                     
  29.                                         <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( __(‘Permalink to %s’, ‘eblog’), the_title_attribute(‘echo=0′) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>
  30.  
  31.  
  32. <?php /* Microformatted, translatable post meta */ ?>                                                                          
  33.                                         <div class="entry-meta">
  34.                                                 <span class="meta-prep meta-prep-author"><?php _e(‘By ‘, ‘eblog’); ?></span>
  35.  
  36.  
  37.                                                 <span class="author vcard"><a class="url fn n" href="<?php echo get_author_link( false, $authordata->ID, $authordata->user_nicename ); ?>" title="<?php printf( __( ‘View all posts by %s’, ‘eblog’ ), $authordata->display_name ); ?>"><?php the_author(); ?></a></span>
  38.  
  39.  
  40.                                                 <span class="meta-sep"> | </span>
  41.                                                 <span class="meta-prep meta-prep-entry-date"><?php _e(‘Published ‘, ‘eblog’); ?></span>
  42.  
  43.  
  44.                                                 <span class="entry-date"><abbr class="published" title="<?php the_time(‘Y-m-d\TH:i:sO’) ?>"><?php the_time( get_option( ‘date_format’ ) ); ?></abbr></span>
  45.  
  46.  
  47.                                                 <?php edit_post_link( __( ‘Edit’, ‘eblog’ ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t" ) ?>
  48.  
  49.  
  50.                                         </div><!– .entry-meta –>
  51.  
  52. <?php /* The entry content */ ?>       
  53.  
  54.                                                 <div class="entry-content">     
  55.  
  56. <?php the_content( __( ‘Continue reading <span class="meta-nav">&raquo;</span>’, ‘eblog’ )  ); ?>
  57.  
  58.  
  59. <?php wp_link_pages(‘before=<div class="page-link">’ . __( ‘Pages:’, ‘eblog’ ) . ‘&after=</div>’) ?>
  60.  
  61.  
  62.                                         </div><!– .entry-content –>
  63.  
  64. <?php /* Microformatted category and tag links along with a comments link */ ?>                                
  65.                                         <div class="entry-utility">
  66.  
  67.                                                 <span class="cat-links"><span class="entry-utility-prep entry-utility-prep-cat-links"><?php _e( ‘Posted in ‘, ‘eblog’ ); ?></span><?php echo get_the_category_list(‘, ‘); ?></span>
  68.  
  69.  
  70.                                                 <span class="meta-sep"> | </span>
  71.                                                 <?php the_tags( ‘<span class="tag-links"><span class="entry-utility-prep entry-utility-prep-tag-links">’ . __(‘Tagged ‘, ‘eblog’ ) . ‘</span>’, ", ", "</span>\n\t\t\t\t\t\t<span class=\"meta-sep\">|</span>\n" ) ?>
  72.  
  73.  
  74.                                                 <span class="comments-link"><?php comments_popup_link( __( ‘Leave a comment’, ‘eblog’ ), __( ’1 Comment’, ‘eblog’ ), __( ‘% Comments’, ‘eblog’ ) ) ?></span>
  75.  
  76.  
  77.                                                 <?php edit_post_link( __( ‘Edit’, ‘eblog’ ), "<span class=\"meta-sep\">|</span>\n\t\t\t\t\t\t<span class=\"edit-link\">", "</span>\n\t\t\t\t\t\n" ) ?>
  78.  
  79.  
  80.                                         </div><!– #entry-utility –>   
  81.                                 </div><!– #post-<?php the_ID(); ?> –>
  82.  
  83.  
  84.  
  85. <?php /* Close up the post div and then end the loop with endwhile */ ?>               
  86.  
  87. <?php endwhile; ?>
  88. <?php /* Bottom post navigation */ ?>
  89.  
  90.  
  91. <?php global $wp_query; $total_pages = $wp_query->max_num_pages; if ( $total_pages > 1 ) { ?>
  92.  
  93.  
  94.                                 <div id="nav-below" class="navigation">
  95.                                         <div class="nav-previous"><?php next_posts_link(__( ‘<span class="meta-nav">&laquo;</span> Older posts’, ‘eblog’ )) ?></div>
  96.  
  97.  
  98.                                         <div class="nav-next"><?php previous_posts_link(__( ‘Newer posts <span class="meta-nav">&raquo;</span>’, ‘eblog’ )) ?></div>
  99.  
  100.  
  101.                                 </div><!– #nav-below –>
  102. <?php } ?>
  103.  
  104.                 </div><!– #content –>         
  105.  
  106.  
  107.                 </div><!– #container –>              
  108.  
  109.                 <div id="primary" class="widget-area">
  110.                 </div><!– #primary .widget-area –>    
  111.  
  112.  
  113.                 <div id="secondary" class="widget-area">
  114.                         </div><!– #secondary –>
  115.                         <?php get_sidebar(); ?>
  116.  
  117.                         <?php get_footer(); ?>

2、最后 <?php the_content(); ?> 和 <?php the_excerpt(); ?> 都不见了。

3、包含 /* 这个符号的整个语句 （例如 <?php /* Top post navigation */ ?>）是可以删掉的。

相关博文：

  1. WordPress 主题之搜索模板和静态页面模板
  2. WordPress 主题之存档、作者、分类和标签模板
  3. WordPress 主题之单独日志、附档和 404 模板
  4. WordPress 主题之评论模板
  5. WordPress 主题 Header 模板

此文发表于 博客技术 以及标签 , , , ； 收藏永久链接. 发表评论或者留下引用： 引用链接.
Post comment as
twitter logo facebook logo
Sort: Newest | Oldest