WordPress 主题之单独日志、附档和 404 模板

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

原文：The WordPress Theme Single Post, Post Attachment, & 404 Templates

原文作者：Ian Stewart

译文：WordPress 主题之单独日志、附档和 404 模板

译文作者：Young

您已经为所有的文件创建了一个 Index，现在您需要为每一篇单独的文章（或者缺失的内容）创建一个单独的模板。

模板中的模板

single.php （以及以后将要创建的几乎所有的其他模板）的结构很多都是和 index.php 一样的，事实上，您可以把它看成模板中的模板。相同结构如下：

  1. <?php get_header(); ?>
  2.  
  3.  
  4.                 <div id="container">   
  5.                         <div id="content">
  6.  
  7.                                 <div id="nav-above" class="navigation">
  8.  
  9.                                 </div><!– #nav-above –>
  10.  
  11.                                 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  12.  
  13.                                 </div><!– #post-<?php the_ID(); ?> –>                
  14.                                 <div id="nav-below" class="navigation">
  15.  
  16.                                 </div><!– #nav-below –>                                      
  17.  
  18.  
  19.                         </div><!– #content –>        
  20.                 </div><!– #container –>
  21.  
  22.                
  23. <?php get_sidebar(); ?> 
  24. <?php get_footer(); ?>

但是也会有些显著的不同，先从 the_post() 和 comments_template() 开始吧。

在 <div id="content"> 之后以及 <div id="nav-above" class="navigation"> 之前，我们将调用 the_post() 函数（即 <?php the_post(); ?>）。这个模板不需要循环，因为通过之前创建的 the_permalink() 函数， WordPress 知道我们要找什么。

既然这是一篇单独日志，我们需要调用 comments_template() 函数。因为我们要把留言和引用分开，所以代码该是这样：

  1. <?php comments_template(”, true); ?>

上面的代码需要放在 </div><!– #content –> 之前，</div><!– #nav-below –> 之后。

单独日志导航

这里，我们将会用 next_post_link() 替代 previous_posts_link(), 用 previous_post_link() 替代 next_posts_link()，他们的作用就和他们的名称一样。

  1.         <div id="nav-above" class="navigation">
  2.                                         <div class="nav-previous"><?php previous_post_link( ‘%link’, ‘<span class="meta-nav">&laquo;</span> %title’ ) ?></div>
  3.  
  4.                                         <div class="nav-next"><?php next_post_link( ‘%link’, ‘%title <span class="meta-nav">&raquo;</span>’ ) ?></div>
  5.  
  6.                                 </div><!– #nav-above –>
  7.  
  8.                                 <div id="nav-below" class="navigation">
  9.  
  10.                                         <div class="nav-previous"><?php previous_post_link( ‘%link’, ‘<span class="meta-nav">&laquo;</span> %title’ ) ?></div>
  11.  
  12.                                         <div class="nav-next"><?php next_post_link( ‘%link’, ‘%title <span class="meta-nav">&raquo;</span>’ ) ?></div>
  13.  
  14.                                 </div><!– #nav-below –>

单独日志标题

如果您还记得 header.php 那一课，就会发现我们用一个动态的 IF 语句方便屏幕浏览器识别单独日志标题。在这里以及后面的主题模板，我们将用 H1 标签获取文章标题。

  1.         <h1 class="entry-title"><?php the_title(); ?></h1>

[代码放于 <div id="post-<?php the_id()? >" <?php post_class(); ?>> ] 之后。——译者注]

您会发现这个代码也有点简单，不需要任何链接。

单独日志实用性链接

文章的实用性很复杂。您从中将会发觉一次性获得答案以及站在他人肩膀上的好处。

在看代码之前，我们应该想一下它为什么那么复杂。由于 WordPress 评论的特殊性，我们需要考虑几种不同的方式：同时开放留言和引用方式、只开放引用、只开放留言或者留言和引用都关闭。这就意味着要用上一大堆 IF 语句，当然，还有 ELSEIF 语句。

我们还想添加一个页面永久链接以及 RSS 链接，这对跟踪开发交流有用。

  1.                 <div class="entry-utility">
  2.                                         <?php printf( __( ‘This entry was posted in %1$s%2$s. Bookmark the permalink. Follow any comments here with the RSS feed for this post.’, ‘your-theme’ ),
  3.  
  4.                                                 get_the_category_list(‘, ‘),
  5.                                                 get_the_tag_list( __( ‘ and tagged ‘, ‘your-theme’ ), ‘, ‘, ” ),
  6.  
  7.                                                 get_permalink(),
  8.                                                 the_title_attribute(‘echo=0′),
  9.                                                 comments_rss() ) ?>
  10.  
  11. <?php if ( (‘open’ == $post->comment_status) && (‘open’ == $post->ping_status) ) : // Comments and trackbacks open ?>
  12.  
  13.                                                 <?php printf( __( ‘<a class="comment-link" href="#respond" title="Post a comment">Post a comment</a> or leave a trackback: Trackback URL.’, ‘your-theme’ ), get_trackback_url() ) ?>
  14.  
  15. <?php elseif ( !(‘open’ == $post->comment_status) && (‘open’ == $post->ping_status) ) : // Only trackbacks open ?>
  16.  
  17.                                                 <?php printf( __( ‘Comments are closed, but you can leave a trackback: Trackback URL.’, ‘your-theme’ ), get_trackback_url() ) ?>
  18.  
  19. <?php elseif ( (‘open’ == $post->comment_status) && !(‘open’ == $post->ping_status) ) : // Only comments open ?>
  20.  
  21.                                                 <?php _e( ‘Trackbacks are closed, but you can <a class="comment-link" href="#respond" title="Post a comment">post a comment</a>.’, ‘your-theme’ ) ?>
  22.  
  23. <?php elseif ( !(‘open’ == $post->comment_status) && !(‘open’ == $post->ping_status) ) : // Comments and trackbacks closed ?>
  24.  
  25.                                                 <?php _e( ‘Both comments and trackbacks are currently closed.’, ‘your-theme’ ) ?>
  26. <?php endif; ?>
  27.  
  28. <?php edit_post_link( __( ‘Edit’, ‘your-theme’ ), "\n\t\t\t\t\t<span class=\"edit-link\">", "</span>" ) ?>
  29.  
  30.                                         </div><!– .entry-utility –>
  31.  
  32.  

上面的代码并没有那么复杂，不是吗？

单独日志内容

和 index.php 不一样，single.php 的内容很简单，只需要调用一个简单的 wp_link_page() 函数。

  1. <?php the_content(); ?>
  2.  
  3. <?php wp_link_pages(‘before=<div class="page-link">’ . __( ‘Pages:’, ‘your-theme’ ) . ‘&after=</div>’) ?>

(以上代码要放于 class="entry-content" 的 DIV 标签中间。——译者注）

单独日志附档

并没有多少人使用文章附档模板，但是它很有趣。当您在文章里添加图片的时候，您实际上是把图片附在文章上面。当然，您不仅可以附加图片。我们将要创建一个 attachment.php 文件，但是如果您喜欢，也可以添加 video.php、audio.php 以及 application.php，那样就可以在文章上面附视频、音频和其他应用了。创建附档模板的方法有很多种。

其中最简单的方法是复制 single.php 文件里面的内容，并重命名为 attachment.php，然后稍作修改：

首先，删除顶部的导航代码，这里完全不需要它，然后用链接到原始文章的的页面标题代替。

  1.         <h1 class="page-title"><a href="<?php echo get_permalink($post->post_parent) ?>" title="<?php printf( __( ‘Return to %s’, ‘your-theme’ ), wp_specialchars( get_the_title($post->post_parent), 1 ) ) ?>" rev="attachment"><span class="meta-nav">&laquo; </span><?php echo get_the_title($post->post_parent) ?></a></h1>

既然页面标题已经由 h1 标签调用，我们的文章标题应该使用 h2 标签。

  1.         <h2 class="entry-title"><?php the_title(); ?></h2>

由于很多的附档都是图片，为了正确显示附档，我们需要调用一个 IF 语句：

  1. <div class="entry-content">
  2.                                                 <div class="entry-attachment">                                 
  3.  
  4. <?php if ( wp_attachment_is_image( $post->id ) ) : $att_image = wp_get_attachment_image_src( $post->id, "medium"); ?>
  5.  
  6.                                                 <p class="attachment"><a href="<?php echo wp_get_attachment_url($post->id); ?>" title="<?php the_title(); ?>" rel="attachment"><img src="<?php echo $att_image[0];?>" width="<?php echo $att_image[1];?>" height="<?php echo $att_image[2];?>"  class="attachment-medium" alt="<?php $post->post_excerpt; ?>" /></a>
  7.  
  8.                                                 </p>
  9. <?php else : ?>        
  10.                                                 <a href="<?php echo wp_get_attachment_url($post->ID) ?>" title="<?php echo wp_specialchars( get_the_title($post->ID), 1 ) ?>" rel="attachment"><?php echo basename($post->guid) ?></a>         
  11.  
  12. <?php endif; ?>        
  13.                                                 </div>                         
  14.                                                 <div class="entry-caption"><?php if ( !empty($post->post_excerpt) ) the_excerpt() ?></div>
  15.  
  16.  
  17. <?php the_content( __( ‘Continue reading <span class="meta-nav">&raquo;</span>’, ‘your-theme’ )  ); ?>
  18.  
  19. <?php wp_link_pages(‘before=<div class="page-link">’ . __( ‘Pages:’, ‘your-theme’ ) . ‘&after=</div>’) ?>
  20.  
  21.  
  22.                                         </div><!– .entry-content –>

再删除底部的导航代码之后，attachment.php 模板就做好了。

404 模板

当访问页面不存在的时候（例如博客文章的 URL 输入错误，或者文章根本就没有发表），就会出现 404 错误。

我们可以创建一个空白的 404.php 文件，然后插入以下代码：

  1. <div id="post-0" class="post error404 not-found">
  2.  
  3.                                         <h1 class="entry-title"><?php _e( ‘Not Found’, ‘your-theme’ ); ?></h1>
  4.  
  5.                                         <div class="entry-content">
  6.                                                 <p><?php _e( ‘Apologies, but we were unable to find what you were looking for. Perhaps searching will help.’, ‘your-theme’ ); ?></p>
  7.  
  8.         <?php get_search_form(); ?>
  9.                                         </div><!– .entry-content –>
  10.  
  11.                                 </div><!– #post-0 –>

这样，当访问页面不存在的时候，就会出现一个对不起的提示以及一个搜索框，非常简单直接。

如何创建 WordPress 主题

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

译者注：

1、single.php 文件里面作者好像忘记了元标签，虽然这个也可以从 index.php 里面复制过来。

2、single.php 文件里面的全部代码如下：

  1. <?php get_header(); ?>
  2. <div id="container">   
  3.                         <div id="content">
  4.                         <?php the_post(); ?>
  5.  
  6.                         <div id="nav-above" class="navigation">
  7.                                         <div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">&laquo;</span> %title' ) ?></div>
  8.  
  9.  
  10.                                         <div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">&raquo;</span>' ) ?></div>
  11.  
  12.  
  13.                           </div><!-- #nav-above -->
  14.  
  15.                                 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  16.  
  17.                                                 <h1 class="entry-title"><?php the_title(); ?></h1>
  18.                                                 <div class="entry-meta">
  19.                                                 <span class="meta-prep meta-prep-author"><?php _e('By ', 'your_theme'); ?></span>
  20.  
  21.                                                 <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>
  22.  
  23.                                                 <span class="meta-sep"> | </span>
  24.                                                 <span class="meta-prep meta-prep-entry-date"><?php _e('Published ', 'your_theme'); ?></span>
  25.  
  26.                                                 <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>
  27.  
  28.                                                 <?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" ) ?>                                              
  29.                                         </div><!-- .entry-meta -->
  30.  
  31.                                                                                         <div class="entry-content">
  32. <?php the_content(); ?>
  33. <?php wp_link_pages('before=<div class="page-link">' . __( 'Pages:', 'your_theme' ) . '&after=</div>') ?>
  34.  
  35.                                         </div><!-- .entry-content -->
  36.  
  37.                                                                 <div class="entry-utility">
  38.                                         <?php printf( __( 'This entry was posted in %1$s%2$s. Bookmark the permalink. Follow any comments here with the RSS feed for this post.', 'your-theme' ),
  39.  
  40.  
  41.                                                 get_the_category_list(', '),
  42.                                                 get_the_tag_list( __( ' and tagged ', 'your-theme' ), ', ', '' ),
  43.  
  44.  
  45.                                                 get_permalink(),
  46.                                                 the_title_attribute('echo=0'),
  47.                                                 comments_rss() ) ?>
  48.  
  49.  
  50. <?php if ( ('open' == $post->comment_status) && ('open' == $post->ping_status) ) : // Comments and trackbacks open ?>
  51.  
  52.  
  53.                                                 <?php printf( __( '<a class="comment-link" href="#respond" title="Post a comment">Post a comment</a> or leave a trackback: Trackback URL.', 'your-theme' ), get_trackback_url() ) ?>
  54.  
  55.  
  56. <?php elseif ( !('open' == $post->comment_status) && ('open' == $post->ping_status) ) : // Only trackbacks open ?>
  57.  
  58.  
  59.                                                 <?php printf( __( 'Comments are closed, but you can leave a trackback: Trackback URL.', 'your-theme' ), get_trackback_url() ) ?>
  60.  
  61.  
  62. <?php elseif ( ('open' == $post->comment_status) && !('open' == $post->ping_status) ) : // Only comments open ?>
  63.  
  64.  
  65.                                                 <?php _e( 'Trackbacks are closed, but you can <a class="comment-link" href="#respond" title="Post a comment">post a comment</a>.', 'your-theme' ) ?>
  66.  
  67.  
  68. <?php elseif ( !('open' == $post->comment_status) && !('open' == $post->ping_status) ) : // Comments and trackbacks closed ?>
  69.  
  70.  
  71.                                                 <?php _e( 'Both comments and trackbacks are currently closed.', 'your-theme' ) ?>
  72. <?php endif; ?>
  73.  
  74.  
  75. <?php edit_post_link( __( 'Edit', 'your-theme' ), "\n\t\t\t\t\t<span class=\"edit-link\">", "</span>" ) ?>
  76.  
  77.  
  78.                                         </div>
  79.                                                                 <!-- .entry-utility -->
  80.  
  81.                                 </div><!-- #post-<?php the_ID(); ?> -->                
  82.                 <div id="nav-below" class="navigation">
  83.  
  84.  
  85.                                         <div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">&laquo;</span> %title' ) ?></div>
  86.  
  87.  
  88.                                         <div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">&raquo;</span>' ) ?></div>
  89.  
  90.  
  91.                                 </div>
  92. <!-- #nav-below -->                            
  93. <?php comments_template('', true); ?>
  94.  
  95.  
  96. </div>
  97.                         <!-- #content -->              
  98. </div><!-- #container -->
  99.  
  100. <?php get_sidebar(); ?> 
  101.  
  102. <?php get_footer(); ?>

原创文章，转载请注明： 转载自精品博客

本文链接地址: WordPress 主题之单独日志、附档和 404 模板

相关博文：

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

此文发表于 博客技术 以及标签 , , , ； 收藏永久链接. 发表评论或者留下引用： 引用链接.

一条评论

  1. 510博客
    发表于 2009年11月11日 4:17 下午 | 永久链接

    怎么读篇完整的就那么难呢?
    .-= 510博客´s last blog ..QQ农场推出健康模式了 =-.

发表评论

您的邮箱 永远 不会被公开。 带 * 的地方都是要填的。

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>