WordPress 主题之评论模板

原文:The WordPress Theme Comments Template

原文作者:Ian Stewart

译文:WordPress 主题之评论模板

译文作者:Young

是的,我讨厌评论模板,因为它可能相当令人困惑。在 2.7 版本上,WordPress 介绍了一个简单的创建评论模板的方法,但是那种方法不能使留言和引用分开,也不能自定义评论结构,并且仍然令人困惑。

您很幸运,我把问题解决了,虽然还是有点令人困惑,但毕竟解决了问题。在这个评论模板的教程上,我将基本上介绍每一步会发生什么,展示您那些自定义代码,以及需要添加到 function.php 的代码,最后给出整个模板代码。希望这对您有帮助。但是至少您将会有一个漂亮的评论模板。

让我们简要的看一下这个评论模板会发生什么事:

  1. 阻止机器人抓取评论内容以及受密码保护的文章;
  2. 检查是否有评论;
  3. 计算留言和引用 (trackbacks or pings) 的数量;
  4. 如果有评论,显示评论,并链接到评论;
  5. 如果有引用,显示引用;
  6. 如果评论被启用,显示评论“回复”框。

这个模板的代码很多,但是总结起来也就这几个功能,直截了当。

自定义回调留言和引用

WordPress 2.7 允许通过 wp_list_comments() 函数方便有序地调用单独日志的留言和引用。如果您喜欢那样,那就很方便。但是我们不喜欢,我想要把评论里面的留言和引用分开。

为了实现这种结果,您需要对留言和引用进行自定义回调,把下面代码插入到 functions.php 文件:

  1. // Custom callback to list comments in the your-theme style
  2. function custom_comments($comment, $args, $depth) {
  3.  
  4.   $GLOBALS[‘comment’] = $comment;
  5.         $GLOBALS[‘comment_depth’] = $depth;
  6.  
  7.   ?>
  8.         <li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>>
  9.                 <div class="comment-author vcard"><?php commenter_link() ?></div>
  10.  
  11.                 <div class="comment-meta"><?php printf(__(‘Posted %1$s at %2$s <span class="meta-sep">|</span> Permalink’, ‘your-theme’),
  12.  
  13.                                         get_comment_date(),
  14.                                         get_comment_time(),
  15.                                         ‘#comment-‘ . get_comment_ID() );
  16.  
  17.                                         edit_comment_link(__(‘Edit’, ‘your-theme’), ‘ <span class="meta-sep">|</span> <span class="edit-link">’, ‘</span>’); ?></div>
  18.  
  19.   <?php if ($comment->comment_approved == ‘0’) _e("\t\t\t\t\t<span class=’unapproved’>Your comment is awaiting moderation.</span>\n", ‘your-theme’) ?>
  20.  
  21.           <div class="comment-content">
  22.                 <?php comment_text() ?>
  23.                 </div>
  24.  
  25.                 <?php // echo the comment reply link
  26.                         if($args[‘type’] == ‘all’ || get_comment_type() == ‘comment’) :
  27.  
  28.                                 comment_reply_link(array_merge($args, array(
  29.                                         ‘reply_text’ => __(‘Reply’,’your-theme’),
  30.                                         ‘login_text’ => __(‘Log in to reply.’,’your-theme’),
  31.  
  32.                                         ‘depth’ => $depth,
  33.                                         ‘before’ => ‘<div class="comment-reply-link">’,
  34.                                         ‘after’ => ‘</div>’
  35.  
  36.                                 )));
  37.                         endif;
  38.                 ?>
  39. <?php } // end custom_comments
  1. // Custom callback to list pings
  2. function custom_pings($comment, $args, $depth) {
  3.        $GLOBALS[‘comment’] = $comment;
  4.  
  5.         ?>
  6.                 <li id="comment-<?php comment_ID() ?>" <?php comment_class() ?>>
  7.                         <div class="comment-author"><?php printf(__(‘By %1$s on %2$s at %3$s’, ‘your-theme’),
  8.  
  9.                                         get_comment_author_link(),
  10.                                         get_comment_date(),
  11.                                         get_comment_time() );
  12.                                         edit_comment_link(__(‘Edit’, ‘your-theme’), ‘ <span class="meta-sep">|</span> <span class="edit-link">’, ‘</span>’); ?></div>
  13.  
  14.     <?php if ($comment->comment_approved == ‘0’) _e(‘\t\t\t\t\t<span class="unapproved">Your trackback is awaiting moderation.</span>\n’, ‘your-theme’) ?>
  15.  
  16.             <div class="comment-content">
  17.                         <?php comment_text() ?>
  18.                         </div>
  19.  
  20. <?php } // end custom_pings

这些代码看起来有点乱,是吧?但它们是最好的。现在到创建评论结构了,我想下面那个结构很漂亮,并且能够让您只通过 CSS 就能更改很多 —— 如果您真的想修改这个结构。

我们还需要调用一个特殊的自定义函数,这个函数将会显示符合 microformat hcard 架构的头像结构。

  1. // Produces an avatar image with the hCard-compliant photo class
  2. function commenter_link() {
  3.         $commenter = get_comment_author_link();
  4.  
  5.         if ( ereg( ‘<a[^>]* class=[^>]+>’, $commenter ) ) {
  6.  
  7.                 $commenter = ereg_replace( ‘(<a[^>]* class=[\’"]?)’, ‘\\1url ‘ , $commenter );
  8.  
  9.         } else {
  10.                 $commenter = ereg_replace( ‘(<a )/’, ‘\\1class="url "’ , $commenter );
  11.  
  12.         }
  13.         $avatar_email = get_comment_author_email();
  14.         $avatar = str_replace( "class=’avatar", "class=’photo avatar", get_avatar( $avatar_email, 80 ) );
  15.  
  16.         echo $avatar . ‘ <span class="fn n">’ . $commenter . ‘</span>’;
  17.  
  18. } // end commenter_link

(以上代码插入于 functions.php 文件中。——译者注)

如果想改变头像的尺寸,您只需要改一下 get_avatar($avatar_email, 80) 里面的 80 就可以了,80 表示头像的大小,单位是像素。

评论模板

没有把您吓跑吧?诚然,并不是很可怕。下面是整个评论模板代码,上面有些 PHP 注释,以便您的理解。

  1. <?php /* The Comments Template — with, er, comments! */ ?>                   
  2.                         <div id="comments">
  3. <?php /* Run some checks for bots and password protected posts */ ?>   
  4. <?php
  5.  
  6.         $req = get_option(‘require_name_email’); // Checks if fields are required.
  7.         if ( ‘comments.php’ == basename($_SERVER[‘SCRIPT_FILENAME’]) )
  8.  
  9.                 die ( ‘Please do not load this page directly. Thanks!’ );
  10.         if ( ! empty($post->post_password) ) :
  11.  
  12.                 if ( $_COOKIE[‘wp-postpass_’ . COOKIEHASH] != $post->post_password ) :
  13.  
  14. ?>
  15.                                 <div class="nopassword"><?php _e(‘This post is password protected. Enter the password to view any comments.’, ‘your-theme’) ?></div>
  16.  
  17.                         </div><!– .comments –>
  18. <?php
  19.                 return;
  20.         endif;
  21.  
  22. endif;
  23. ?>
  24.  
  25. <?php /* See IF there are comments and do the comments stuff! */ ?>                                            
  26. <?php if ( have_comments() ) : ?>
  27.  
  28.  
  29. <?php /* Count the number of comments and trackbacks (or pings) */
  30. $ping_count = $comment_count = 0;
  31. foreach ( $comments as $comment )
  32.  
  33.         get_comment_type() == "comment" ? ++$comment_count : ++$ping_count;
  34.  
  35. ?>
  36.  
  37. <?php /* IF there are comments, show the comments */ ?>
  38. <?php if ( ! empty($comments_by_type[‘comment’]) ) : ?>
  39.  
  40.  
  41.                                 <div id="comments-list" class="comments">
  42.                                         <h3><?php printf($comment_count > 1 ? __(‘<span>%d</span> Comments’, ‘your-theme’) : __(‘<span>One</span> Comment’, ‘your-theme’), $comment_count) ?></h3>
  43.  
  44.  
  45. <?php /* If there are enough comments, build the comment navigation  */ ?>                                     
  46. <?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?>
  47.  
  48.                                         <div id="comments-nav-above" class="comments-navigation">
  49.                                                                 <div class="paginated-comments-links"><?php paginate_comments_links(); ?></div>
  50.  
  51.                                         </div><!– #comments-nav-above –>                                     
  52. <?php endif; ?>                                
  53.  
  54. <?php /* An ordered list of our custom comments callback, custom_comments(), in functions.php   */ ?>                          
  55.                                         <ol>
  56.  
  57. <?php wp_list_comments(‘type=comment&callback=custom_comments’); ?>
  58.                                         </ol>
  59.  
  60. <?php /* If there are enough comments, build the comment navigation */ ?>
  61.  
  62. <?php $total_pages = get_comment_pages_count(); if ( $total_pages > 1 ) : ?>                                   
  63.                                 <div id="comments-nav-below" class="comments-navigation">
  64.  
  65.                                                 <div class="paginated-comments-links"><?php paginate_comments_links(); ?></div>
  66.                 </div><!– #comments-nav-below –>
  67.  
  68. <?php endif; ?>                                
  69.  
  70.                                 </div><!– #comments-list .comments –>
  71.  
  72. <?php endif; /* if ( $comment_count ) */ ?>
  73.  
  74.  
  75. <?php /* If there are trackbacks(pings), show the trackbacks  */ ?>
  76. <?php if ( ! empty($comments_by_type[‘pings’]) ) : ?>
  77.  
  78.  
  79.                                 <div id="trackbacks-list" class="comments">
  80.                                         <h3><?php printf($ping_count > 1 ? __(‘<span>%d</span> Trackbacks’, ‘your-theme’) : __(‘<span>One</span> Trackback’, ‘your-theme’), $ping_count) ?></h3>
  81.  
  82.  
  83. <?php /* An ordered list of our custom trackbacks callback, custom_pings(), in functions.php   */ ?>                                   
  84.                                         <ol>
  85. <?php wp_list_comments(‘type=pings&callback=custom_pings’); ?>
  86.  
  87.                                         </ol>                          
  88.  
  89.                                 </div><!– #trackbacks-list .comments –>                      
  90.  
  91.  
  92. <?php endif /* if ( $ping_count ) */ ?>
  93.  
  94. <?php endif /* if ( $comments ) */ ?>
  95.  
  96. <?php /* If comments are open, build the respond form */ ?>
  97. <?php if ( ‘open’ == $post->comment_status ) : ?>
  98.  
  99.                                 <div id="respond">
  100.                                 <h3><?php comment_form_title( __(‘Post a Comment’, ‘your-theme’), __(‘Post a Reply to %s’, ‘your-theme’) ); ?></h3>
  101.  
  102.  
  103.                                 <div id="cancel-comment-reply"><?php cancel_comment_reply_link() ?></div>
  104.  
  105. <?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?>
  106.  
  107.                                         <p id="login-req"><?php printf(__(‘You must be logged in to post a comment.’, ‘your-theme’),
  108.  
  109.                                         get_option(‘siteurl’) . ‘/wp-login.php?redirect_to=’ . get_permalink() ) ?></p>
  110.  
  111.  
  112. <?php else : ?>
  113.                                         <div class="formcontainer">     
  114.  
  115.  
  116.  
  117.                                                 <form id="commentform" action="<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php" method="post">
  118.  
  119. <?php if ( $user_ID ) : ?>
  120.  
  121.                                                         <p id="login"><?php printf(__(‘<span class="loggedin">Logged in as %2$s.</span> <span class="logout">Log out?</span>’, ‘your-theme’),
  122.  
  123.                                                                 get_option(‘siteurl’) . ‘/wp-admin/profile.php’,
  124.                                                                 wp_specialchars($user_identity, true),
  125.  
  126.                                                                 wp_logout_url(get_permalink()) ) ?></p>
  127.  
  128. <?php else : ?>
  129.  
  130.  
  131.                                                         <p id="comment-notes"><?php _e(‘Your email is <em>never</em> published nor shared.’, ‘your-theme’) ?> <?php if ($req) _e(‘Required fields are marked <span class="required">*</span>’, ‘your-theme’) ?></p>
  132.  
  133.  
  134.               <div id="form-section-author" class="form-section">
  135.                                                                 <div class="form-label"><label for="author"><?php _e(‘Name’, ‘your-theme’) ?></label> <?php if ($req) _e(‘<span class="required">*</span>’, ‘your-theme’) ?></div>
  136.  
  137.                                                                 <div class="form-input"><input id="author" name="author" type="text" value="<?php echo $comment_author ?>" size="30" maxlength="20" tabindex="3" /></div>
  138.  
  139.               </div><!– #form-section-author .form-section –>
  140.  
  141.               <div id="form-section-email" class="form-section">
  142.  
  143.                                                                 <div class="form-label"><label for="email"><?php _e(‘Email’, ‘your-theme’) ?></label> <?php if ($req) _e(‘<span class="required">*</span>’, ‘your-theme’) ?></div>
  144.  
  145.                                                                 <div class="form-input"><input id="email" name="email" type="text" value="<?php echo $comment_author_email ?>" size="30" maxlength="50" tabindex="4" /></div>
  146.  
  147.               </div><!– #form-section-email .form-section –>
  148.  
  149.               <div id="form-section-url" class="form-section">
  150.  
  151.                                                                 <div class="form-label"><label for="url"><?php _e(‘Website’, ‘your-theme’) ?></label></div>
  152.  
  153.                                                                 <div class="form-input"><input id="url" name="url" type="text" value="<?php echo $comment_author_url ?>" size="30" maxlength="50" tabindex="5" /></div>
  154.  
  155.               </div><!– #form-section-url .form-section –>
  156.  
  157. <?php endif /* if ( $user_ID ) */ ?>
  158.  
  159.  
  160.               <div id="form-section-comment" class="form-section">
  161.                                                                 <div class="form-label"><label for="comment"><?php _e(‘Comment’, ‘your-theme’) ?></label></div>
  162.  
  163.                                                                 <div class="form-textarea"><textarea id="comment" name="comment" cols="45" rows="8" tabindex="6"></textarea></div>
  164.  
  165.               </div><!– #form-section-comment .form-section –>
  166.              
  167.               <div id="form-allowed-tags" class="form-section">
  168.                       <p><span><?php _e(‘You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes:’, ‘your-theme’) ?></span> <code><?php echo allowed_tags(); ?></code></p>
  169.  
  170.               </div>
  171.  
  172. <?php do_action(‘comment_form’, $post->ID); ?>
  173.  
  174.  
  175.                                                         <div class="form-submit"><input id="submit" name="submit" type="submit" value="<?php _e(‘Post Comment’, ‘your-theme’) ?>" tabindex="7" /><input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></div>
  176.  
  177.  
  178. <?php comment_id_fields(); ?>  
  179.  
  180. <?php /* Just … end everything. We’re done here. Close it up. */ ?>  
  181.  
  182.                                                 </form><!– #commentform –>                                                                           
  183.  
  184.                                         </div><!– .formcontainer –>
  185. <?php endif /* if ( get_option(‘comment_registration’) && !$user_ID ) */ ?>
  186.  
  187.                                 </div><!– #respond –>
  188. <?php endif /* if ( ‘open’ == $post->comment_status ) */ ?>
  189.                         </div><!– #comments –>
  190.  
  191.  

就这么多了,您已经创建了一个自定义的漂亮的评论模板。

如何创建 WordPress 主题

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

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

    100 个免费翻墙工具

21 条评论

  1. BennyTian
    发表于2009年07月19日 4:55 下午 | 永久链接

    您好

    请问下

    怎样才能把 评论留言用户 的网站连接在新窗口中打开呢` ?

    可以的话

    希望能在我 空间留个言 或者是 发到我邮箱内

    衷心的感谢!!!

  2. Young
    发表于2009年07月19日 6:47 下午 | 永久链接

    @BennyTian 关于这点,你可以参考 http://www.slyar.com/blog/wp-comments-target-blank.html

  3. 超自然之鸭
    发表于2009年07月28日 9:21 下午 | 永久链接

    你好,我有2个问题想请教你一下
    1。我的博客的评论和评论框都在正文的上方,我希望在下方啊,应该如何修改代码呢?
    2。评论中如果别人写上了 邮箱和个人网址 我这里没有显示啊?如果能都显示在旁边,那就最好了。
    你可以帮助我吗 谢谢了

  4. Young
    发表于2009年07月28日 10:00 下午 | 永久链接

    @超自然之鸭 你有修改过原来的模板吗?

  5. 超自然之鸭
    发表于2009年07月29日 10:32 上午 | 永久链接

    我没有什么语言基础
    真的不会
    所以没有修改过

  6. Young
    发表于2009年07月29日 8:01 下午 | 永久链接

    @超自然之鸭 如果你非要用那个主题,不妨把主题文件和你的问题列出来,然后发表在你的博客上或者论坛里,届时定会有人帮你解决,或者直接问主题作者。如果不是,那就可以换另外一个主题。

  7. 超自然之鸭
    发表于2009年07月30日 11:12 下午 | 永久链接

    不 我想直接请教你噢
    请问你有MSN吗?

  8. Young
    发表于2009年07月31日 9:20 上午 | 永久链接

    @超自然之鸭 哈哈,把你的主题通过邮箱发给我,我抽个时间帮你看看,但是不保证可以弄好哦。

  9. 超自然之鸭
    发表于2009年07月31日 11:13 上午 | 永久链接

    恩 我发过来了噢

  10. 超自然之鸭
    发表于2009年07月31日 12:12 下午 | 永久链接

    不对啊
    他自动回了复
    发送失败的邮件

  11. 超自然之鸭
    发表于2009年07月31日 12:17 下午 | 永久链接

    发不过来了
    模板在这里
    http://wordpress.org/extend/themes/simplixity
    麻烦你了

  12. Young
    发表于2009年08月2日 11:21 上午 | 永久链接

    @超自然之鸭 : 你那个 simplixity 主题我测试了一下,发现真的有问题,我把 single.php 文件改了一下并发到你的邮箱了,你替换掉原来那个应该就可以了。

  13. 发表于2010年03月9日 4:28 下午 | 永久链接

    如果能提供预览一下效果就更好了。。
    .-= 远走高飞´s last blog ..越南自助游 =-.

  14. Young
    发表于2010年03月9日 4:49 下午 | 永久链接

    @远走高飞 哈哈,你可以下载原作者写这篇教程所用的 Shape 主题,这个在《如何创建 WordPress 主题》一文有介绍。

  15. 发表于2010年03月9日 5:36 下午 | 永久链接

    @Young
    嗯,谢谢鸟~~
    .-= 远走高飞´s last blog ..越南自助游 =-.

  16. fia163
    发表于2010年05月16日 3:11 下午 | 永久链接

    能把function.php和comments.php发到我邮箱么?
    我把上面的代码贴进去发现无法使用。想对比下找找问题。

  17. Young
    发表于2010年05月16日 3:19 下午 | 永久链接

    @fia163 你可以通过以下链接下载整套模板:

    http://themeshapes.com/shape/

  18. MC
    发表于2010年07月11日 7:50 上午 | 永久链接

    真的是有点恐惧主题中 评论板块的制作,
    看了这些却不知所云

  19. Young
    发表于2010年07月11日 9:33 上午 | 永久链接

    @MC 哈哈。

  20. 发表于2011年01月4日 3:28 上午 | 永久链接

    光根据上面的代码编辑fun.php和com.php是不足够的,在singe模板里,还要加入一段与其相配合的代码,才可以调用。

  21. 发表于2011年01月4日 3:34 上午 | 永久链接

    应该说是 光用不行,要