三步制作自己的WP主题评论样式

作者: 郑元水 分类: Wordpress 发布时间: 2018-07-05 18:48 ė 110 6 1条评论

很多的朋友不会制作WP主题,都会选择在网上下载主题,有的主题制作的不是特别的完善,前段时间我也自己更换了一套WP模板,美中不足的就是主题中的评论需要多说插件来实现,但现在多说插件已经不能用了,就只能制作一个wordpress模板中的comment文件了。

第一步:新建comments.php,将下面的代码全部复制到里面去

  1. <?php  
  2. if ( post_password_required() )  
  3.     return;  
  4. ?>  
  5. <div id="comments" class="responsesWrapper">  
  6.     <meta content="UserComments:<?php echo number_format_i18n( get_comments_number() );?>" itemprop="interactionCount">  
  7.     <h3 class="comments-title">共有 <span class="commentCount"><?php echo number_format_i18n( get_comments_number() );?></span> 条评论</h3>  
  8.     <ol class="commentlist">  
  9.         <?php  
  10.         wp_list_comments( array(  
  11.             'style'       => 'ol',  
  12.             'short_ping'  => true,  
  13.             'avatar_size' => 48,  
  14.             'type'        =>'comment',  
  15.             'callback'    =>'simple_comment',  
  16.         ) );  
  17.         ?>  
  18.     </ol>  
  19.     <nav class="navigation comment-navigation u-textAlignCenter" data-fuck="<?php the_ID();?>">  
  20.     <?php paginate_comments_links(array('prev_next'=>true)); ?>  
  21.     </nav>  
  22.     <?php if(comments_open()) : ?>  
  23.         <div id="respond" class="respond" role="form">  
  24.             <h2 id="reply-title" class="comments-title"><?php comment_form_title( '', '回复给 %s' ); ?> <small>  
  25.                     <?php cancel_comment_reply_link(); ?>  
  26.                 </small></h2>  
  27.             <?php if ( get_option('comment_registration') && !$user_ID ) : ?>  
  28.                 <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>">logged in</a> to post a comment.</p>  
  29.             <?php else : ?>  
  30.                 <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" class="commentform" id="commentform">  
  31.                     <?php if ( $user_ID ) : ?>  
  32.                         <p class="warning-text" style="margin-bottom:10px">以<a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>身份登录 | <a class="link-logout" href="<?php echo wp_logout_url(get_permalink()); ?>">注销 »</a></p>  
  33.                         <textarea class="form-control" rows="3" id="comment" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};" placeholder="当你的才华还撑不起你的野心时,那你就应该静下心来评论下..." class="form-control" tabindex="1" name="comment"></textarea>  
  34.                     <?php else : ?>  
  35.                         <textarea class="form-control" rows="3" id="comment" onkeydown="if(event.ctrlKey&&event.keyCode==13){document.getElementById('submit').click();return false};" placeholder="当你的才华还撑不起你的野心时,那你就应该静下心来评论下..." tabindex="1" name="comment"></textarea>  
  36.                         <div class="commentform-info">  
  37.                             <label id="author_name" for="author">  
  38.                                 <input class="form-control" id="author" type="text" tabindex="2" value="<?php echo $comment_author; ?>" name="author" placeholder="昵称[必填]" required>  
  39.                             </label>  
  40.                             <label id="author_email" for="email">  
  41.                                 <input class="form-control" id="email" type="text" tabindex="3" value="<?php echo $comment_author_email; ?>" name="email" placeholder="邮箱[必填]" required>  
  42.                             </label>  
  43.                             <label id="author_website" for="url">  
  44.                                 <input class="form-control" id="url" type="text" tabindex="4" value="<?php echo $comment_author_url; ?>" name="url" placeholder="网址(可不填)">  
  45.                             </label>  
  46.                         </div>  
  47.                     <?php endif; ?>  
  48.                     <div class="btn-group commentBtn" role="group">  
  49.                         <input name="submit" type="submit" id="submit" class="btn btn-sm btn-danger btn-block" tabindex="5" value="发表评论" /></div>  
  50.                     <?php comment_id_fields(); ?>  
  51.                 </form>  
  52.             <?php endif; ?>  
  53.         </div>  
  54.     <?php endif; ?>  
  55. </div>  

第二步:在主题中的functions.php文件中添加自定义样式

  1. //自定义评论列表模板  
  2. function simple_comment($comment$args$depth) {  
  3.    $GLOBALS['comment'] = $comment; ?>  
  4.    <li class="comment" id="li-comment-<?php comment_ID(); ?>">  
  5.         <div class="media">  
  6.             <div class="media-left">  
  7.                 <?php if (function_exists('get_avatar') && get_option('show_avatars')) { echo get_avatar($comment, 48); } ?>  
  8.             </div>  
  9.             <div class="media-body">  
  10.                 <?php printf(__('<p class="author_name">%s</p>'), get_comment_author_link()); ?>  
  11.                 <?php if ($comment->comment_approved == '0') : ?>  
  12.                     <em>评论等待审核...</em><br />  
  13.                 <?php endif; ?>  
  14.                 <?php comment_text(); ?>  
  15.             </div>  
  16.         </div>  
  17.         <div class="comment-metadata">  
  18.             <span class="comment-pub-time">  
  19.                 <?php echo get_comment_time('Y-m-d H:i'); ?>  
  20.             </span>  
  21.             <span class="comment-btn-reply">  
  22.                 <i class="fa fa-reply"></i> <?php comment_reply_link(array_merge$argsarray('reply_text' => '回复','depth' => $depth, 'max_depth' => $args['max_depth']))) ?>   
  23.             </span>  
  24.         </div>  
  25.    
  26. <?php  
  27. }  
  28. ?>  

第三步:添加展示评论的css样式

  1. /*
  2. comments
  3. */
  4. #comments{
  5. padding-bottom:30px;
  6. line-height:1;
  7. }
  8. .comments-title{
  9. position:relative;
  10. padding-bottom:10px;
  11. font-size:18px;
  12. color:#666;
  13. border-bottom:1px solid #f1f1f1;
  14. }
  15. h3.comments-title:after{
  16. position:absolute;
  17. content:'';
  18. top:29px;
  19. left:0;
  20. width:135px;
  21. height:1px;
  22. background:#fa2a2a;/*main-color*/
  23. }
  24. .commentCount{
  25. color:#fa2a2a;/*main-color*/
  26. }
  27. .commentlist{
  28. list-style: none;
  29. margin:10px 0 0;
  30. padding:0;
  31. }
  32. .commentlist ol{
  33. list-style: none;
  34. }
  35. .comment{
  36. padding:10px 0 5px;
  37. }
  38. .comment .media-left{
  39. display: table-cell;
  40. vertical-align: top;
  41. padding-right: 10px;
  42. }
  43. .comment .media-left img{
  44. border-radius:50%;
  45. }
  46. .comment .media-body{
  47. display: table-cell;
  48. vertical-align: top;
  49. }
  50. .comment .media-body .author_name{
  51. margin-bottom:5px;
  52. font-size:14px;
  53. color:#777;
  54. }
  55. .comment .media-body p{
  56. font-size:14px;
  57. line-height:1.5em;
  58. color:#777;
  59. }
  60. .comment .media-body p a{
  61. color:#000;
  62. }
  63. .comment .comment-metadata{
  64. margin-left:58px;
  65. padding:5px 0;
  66. }
  67. .comment .comment-metadata span{
  68. margin-right:15px;
  69. font-size:13px;
  70. }
  71. .comment .comment-metadata span{
  72. font-size:12px;
  73. color:#999;
  74. }
  75. .comment .comment-metadata span.comment-btn-reply a:hover{
  76. color:#666;
  77. }
  78. .comment .comment-metadata span.comment-btn-reply i{
  79. color:#d1d1d1;
  80. }
  81. .comment .comment-metadata span.comment-btn-reply a{
  82. color:#999;
  83. }
  84. .commentlist > .comment{
  85. border-bottom:1px dotted #d9d9d9;
  86. }
  87. .commentlist .children{
  88. padding-left:58px;
  89. }
  90. .commentlist .children > .comment{
  91. border-top:1px dotted #d9d9d9;
  92. }
  93. #reply-title{
  94. font-size:14px;
  95. color:#666;
  96. border-bottom:0;
  97. color:#999;
  98. }
  99. #reply-title a:first-child,.warning-text a:first-child{
  100. display:inline-block;
  101. margin:0 2px;
  102. padding:2px 5px;
  103. background:#fa2a2a;/*main-color*/
  104. color:#fff;
  105. font-size:14px;
  106. }
  107. #reply-title #cancel-comment-reply-link{
  108. background:#fff;
  109. color:#999;
  110. }
  111. #reply-title #cancel-comment-reply-link:hover{
  112. text-decoration:underline;
  113. }
  114. .warning-text{
  115. color:#999;
  116. }
  117. .link-logout{
  118. color:#999;
  119. }
  120. .comment-navigation{
  121. width:100%;
  122. margin:0 auto;
  123. padding:15px 0;
  124. text-align: center;
  125. }
  126. .comment-navigation .page-numbers{
  127. display:inline-block;
  128. padding:9px 16px;
  129. color:#999;
  130. background:#f1f1f1;
  131. }
  132. .comment-navigation .page-numbers:hover{
  133. background:#e8e8e8;
  134. color:#666;
  135. }
  136. .comment-navigation .current,
  137. .comment-navigation .current:hover{
  138. background:#fa2a2a;/*main-color*/
  139. color:#fff;
  140. }
  141. textarea#comment{
  142. display: block;
  143. width: 100%;
  144. margin-bottom:10px;
  145. background:#f5f5f5;
  146. color:#777;
  147. border:0;
  148. box-shadow:none;
  149. height:90px;
  150. padding:10px;
  151. resize:none;
  152. border-radius:5px;
  153. transition:background .3s;
  154. }
  155. textarea#comment:focus{
  156. background:#e9e9e9;
  157. }
  158. .commentform-info{
  159. float:left;
  160. }
  161. .commentform-info input{
  162. margin-right:10px;
  163. width:230px;
  164. border:0;
  165. border-radius:0;
  166. box-shadow:none;
  167. background:#f5f5f5;
  168. font-weight:normal;
  169. transition:background .5s;
  170. }
  171. .commentform-info input:focus{
  172. box-shadow:none;
  173. color:#fff!important;
  174. background:#fa2a2a/*main-color*/
  175. }
  176. .commentform-info input:focus:-moz-input-placeholder {
  177. color: #fff;
  178. }
  179. .commentform-info input:focus::-moz-input-placeholder {
  180. color: #fff;
  181. }
  182. .commentform-info input:focus::-webkit-input-placeholder {
  183. color: #fff;
  184. }
  185. .commentform-info input:focus:-ms-input-placeholder {
  186. color: #fff;
  187. }
  188. .commentBtn .btn{
  189. padding:8px 0;
  190. width:140px!important;
  191. text-align: center;
  192. background:#fa2a2a;/*main-color*/
  193. border:0;
  194. }
  195. .commentBtn .btn:hover{
  196. opacity:0.8;
  197. }
  198. input#submit{color: #fff;}

修改完成 以后,上传到自己使用的wordpress主题中就可以实现wordpress评论显示,

本文出自郑元水博客,转载时请注明出处及相应链接。

本文永久链接: http://www.zhengyuanshui.com/1000.html

一条评论

  1. 闺房独自乐 2018年7月13日 16:38 回复

    炎热的夏天,看到这样的博客瞬间清凉了许多!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ɣ回顶部