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

原文: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(); ?>
发布在博客技术 已有标签 , , , . 将该链接存入书签。 评论和互链已关闭。
  • :: 《100 个免费翻墙工具》免费电子书

    100 个免费翻墙工具

1条评论

  1. 学习WP设计和PHP中
    发表于2010年12月28日 11:24 上午 | 永久链接

    老大,谢谢提醒single.php缺失了entry-meta类。但是相应的attachment.php也缺失了啊,因为是复制的singgle.php么,(只是不太非常一定确定single.php也需要entry-meta类),不过按照代码逻辑,这个类是一定要有的,对吧?不知我这么想是否正确,期待老大的回复,呵呵~