WordPress 主题之评论模板

想要一个既简单又稳定而且还便宜的云服务器吗?那就选择 DigitalOcean 吧,仅需 5 块钱一个月,现在注册还可以马上获赠 10 美元。

原文: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 个免费翻墙工具