利用Bootstrap构建你的响应式WordPress主题( 七)

1、建立基本主题模板和安装主题
2、页头和页脚,加载引入我们主题必须的css,js文件
3、主题注册Bootstrap菜单、搜索框和导航
4、首页设计index.php
5、创建single.php页
6、创建sidebar.php页
7、创建comments.php页
8、创建archive.php页

1、在single.php文章内容下面要显示评论的地方加入以下代码,通过comments_template();函数调用评论页面comments.php。

  1.  <?php comments_template(); ?>

2、在我们的主题根目录下建立评论模板comments.php,设计评论样式。

  1. <section id="comments">
  2.   <h2>评论标题 </h2>
  3.   <ol> 评论内容列表</ol>
  4. </section>
  5.  <ul class="pager">
  6.     <li class="previous"> 上一页 </li>
  7.     <li class="next"> 下一页   </li>
  8.   </ul>

3、加入代码

  1. <section id="comments">
  2.   <h2>
  3.   <?php printf( 
  4.     _n( '&ldquo; %2$s &rdquo; comment %1$s', 
  5.         '&ldquo; %2$s &rdquo; comments %1$s', 
  6.          'bootstrapwp'
  7.        ),
  8.       '<span class="badge badge-important">' . get_comments_number() . '</span>',  
  9.         get_the_title()
  10.        );
  11.   ?>
  12.   </h2>
  13.   <ol>
  14.   <?php wp_list_comments(); ?>
  15.   </ol>
  16. </section>

get_comments_number() 获得评论的数量
get_the_title() 获得标题
wp_list_comments() 获取评论内容列表
4、使用自定义bootstrap评论列表
修改如下,首先我们要自定义评论列表,其中bootstrapwp_comment自定义的回调函数。建议你必须阅读 wp_list_comments()使用回调函数自定义评论展示方式

  1. <ol>
  2.   <?php wp_list_comments( array(
  3.     'callback'     =>  'bootstrapwp_comment',
  4.   ) ); ?>
  5.   </ol>
  1.  /**          
  2.  * 评论列表的显示
  3.  */
  4. if ( ! function_exists( 'bootstrapwp_comment' ) ) :
  5. function bootstrapwp_comment( $comment, $args, $depth ) {
  6. 	$GLOBALS['comment'] = $comment;
  7. 	switch ( $comment->comment_type ) :
  8. 		case 'pingback' :
  9. 		case 'trackback' :
  10. 	  // 用不同于其它评论的方式显示 trackbacks 。
  11. 	?>
  12. 	<li <?php comment_class(); ?> id="comment-<?php comment_ID(); ?>">
  13. 		<p><?php _e( 'Pingback:', 'bootstrapwp' ); ?> <?php comment_author_link(); ?> <?php edit_comment_link( __( '(Edit)', 'bootstrapwp' ), '<span class="edit-link">', '</span>' ); ?>
  14. 		</p>
  15. 	<?php
  16. 		break;
  17. 		default :
  18. 		// 开始正常的评论
  19. 		global $post;
  20. 	 ?>
  21. 	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
  22. 		<article id="comment-<?php comment_ID(); ?>" class="media comment">
  23. 			<div class="pull-left">
  24.   			<?php // 显示评论作者头像 
  25.   			  echo get_avatar( $comment, 64 ); 
  26.   			?>
  27. 			</div>
  28. 			<?php // 未审核的评论显示一行提示文字
  29. 			  if ( '0' == $comment->comment_approved ) : ?>
  30.   			<p class="comment-awaiting-moderation">
  31.   			  <?php _e( 'Your comment is awaiting moderation.', 'bootstrapwp' ); ?>
  32.   			</p>
  33. 			<?php endif; ?>
  34. 			<div class="media-body">
  35. 				<h4 class="media-heading">
  36.   				<?php // 显示评论作者名称
  37.   				    printf( '%1$s %2$s',
  38.   						get_comment_author_link(),
  39.   						// 如果当前文章的作者也是这个评论的作者,那么会出现一个标签提示。
  40.   						( $comment->user_id === $post->post_author ) ? '<span class="label label-info"> ' . __( 'Post author', 'bootstrapwp' ) . '</span>' : ''
  41.   					);
  42.   				?>
  43.   		    <small>
  44.     				<?php // 显示评论的发布时间
  45.     				    printf( '<a href="%1$s"><time datetime="%2$s">%3$s</time></a>',
  46.     						esc_url( get_comment_link( $comment->comment_ID ) ),
  47.     						get_comment_time( 'c' ),
  48.     					  // 翻译: 1: 日期, 2: 时间
  49.     						sprintf( __( '%1$s %2$s', 'fenikso' ), get_comment_date(), get_comment_time() )
  50.     					);
  51.     				?>
  52.   				</small>
  53. 				</h4>
  54. 				<?php // 显示评论内容
  55. 				  comment_text(); 
  56. 				?>
  57. 				<?php // 显示评论的编辑链接 
  58. 				  edit_comment_link( __( 'Edit', 'bootstrapwp' ), '<p class="edit-link">', '</p>' ); 
  59. 				?>
  60. 				<div class="reply">
  61. 					<?php // 显示评论的回复链接 
  62. 					  comment_reply_link( array_merge( $args, array( 
  63. 					    'reply_text' =>  __( 'Reply', 'bootstrapwp' ), 
  64. 					    'after'      =>  ' <span>&darr;</span>', 
  65. 					    'depth'      =>  $depth, 
  66. 					    'max_depth'  =>  $args['max_depth'] ) ) ); 
  67. 					?>
  68. 				</div>
  69. 			</div>
  70. 		</article>
  71. 	<?php
  72. 		break;
  73. 	endswitch; // end comment_type check
  74. }
  75. endif;

5、使用自定义bootstrap表单元素
下面我们把姓名,email,url,提交按钮换成Bootstrap样式。

  1. <?php
  2. $commenter = wp_get_current_commenter();
  3. $req = get_option( 'require_name_email' );
  4. $aria_req = ( $req ? " aria-required='true'" : '' );
  5.  
  6. $comment_form_args = array(
  7.     // 添加评论内容的文本域表单元素
  8.   	'comment_field'         => '<label for="comment" class="control-label">' . 
  9.           	                    _x( 'Comment', 'noun' ) . 
  10.           	                   '</label>
  11.           	                    <textarea id="comment" name="comment" cols="45" rows="5" class="form-control" aria-required="true">
  12.           	                    </textarea>',
  13.     // 评论之前的提示内容
  14.   	'comment_notes_before'  => ' ',
  15.   	// 评论之后的提示内容
  16.   	'comment_notes_after'   => ' ',
  17.   	// 默认的字段,用户未登录时显示的评论字段
  18.   	'fields'                => apply_filters( 'comment_form_default_fields', array(
  19.     // 作者名称字段
  20. 		'author'                => '<label for="author" class="control-label">' .  __( 'Name', 'bootstrapwp' ) . '</label> ' .   ( $req ? '<span class="required help-inline">*</span>' : '' ) . 
  21.                 		            '<div class="controls">' . 
  22.                 		            '<input id="author"class="form-control" placeholder="author" name="author" type="text" value="' .  esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />'. 
  23.                 		            '</div>',
  24.     // 电子邮件字段              
  25. 		'email'                 => '<label for="email" class="control-label">' .    __( 'Email', 'fenikso' ) .   '</label> ' . ( $req ? '<span class="required help-inline">*</span>' : '' ) . 
  26.                 		            '<div class="controls">' . 
  27.                 		            '<input id="email" class="form-control" placeholder="email" name="email" type="text" value="' . 
  28.                 		             esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' />' . 
  29.                 		             '</div>',
  30.     // 网站地址字段            		             
  31.   	'url'                   => '<label for="url" class="control-label">' .     __( 'Website', 'bootstrapwp' ) .  '</label>' .   ( $req ? '<span class="required help-inline">*</span>' : '' ) . 
  32.                   		          '<div class="controls">' . 
  33.                   		          '<input id="url" class="form-control"  placeholder="url"authorname="url" type="text" value="' . 
  34.                   		           esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></br></div>' ) 
  35. ) );
  36. ?>
  37. <?php comment_form( $comment_form_args ); ?>

现在效果如下:

bootstrapcommens


发布日期:

所属分类: BootStrap, WordPress 主题 标签: