WordPress 主题 Index 模板

原文: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 */ ?>)是可以删掉的。

发布在博客技术 已有标签 , , , . 将该链接存入书签。 评论和互链已关闭。
  • :: 《100 个免费翻墙工具》免费电子书

    100 个免费翻墙工具