/ Wordpress / Шаблон комментариев

Шаблон комментариев

HIT

29.06.2015

15812

14

Создаем, настраиваем и оформляем шаблон комментариев.

В шаблоне верстки (записи или страницы), где нужно выводить ставим

<?php comments_template(); ?>

В functions.php

// шаблон вывода комментариев

function mytheme_comment($comment, $args, $depth){
    $GLOBALS['comment'] = $comment; ?>

      <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
		
		
<div class="comment-block">  
		  
		
<div class="comment-autor">
  
            <?php echo get_avatar($comment,$size='75',$default='<path_to_url>' ); ?>
            <?php printf(__('<cite class="fn">%s</cite> '), get_comment_author_link()) ?>
			
</div>
  
		  
<?php if ($comment->comment_approved == '0') : ?>

<em><?php _e('Your comment is awaiting moderation.') ?></em>
<br/>
<?php endif; ?>
  
 
<div class="comment-content">  
							  
<?php comment_text() ?>

<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>  
<div class="reply"><?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?></div>   
  
		  
</div>	

</div>  
		
  <?php }

В шаблоне вывода комментариев comments.php

<?php if ( post_password_required() ) 
{ return; }
?>


<?php if ( have_comments() ) : ?>


<div id="comments">
  

<h2 class="comments-title">
<?php printf( _nx ( 'Один комментарий к записи &ldquo;%2$s&rdquo;', '%1$s комментариев к записи &ldquo;%2$s&rdquo;', get_comments_number(), 'comments title', 'twentyfifteen' ),
			number_format_i18n( get_comments_number() ), get_the_title() ); ?>
</h2>



		<ol class="comment-list">
			<?php
				wp_list_comments( array(
					'style'       => 'ol',
					'short_ping'  => true,
				    'callback' => 'mytheme_comment'
				) );
			?>
		</ol>


<?php endif; ?>

</div>


<?php if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :	?>
		<p class="no-comments"><?php _e( 'Comments are closed.' ); ?></p>
<?php endif; ?>


<?php comment_form(); ?>

CSS

/* Комментарии */

#comments {
  width: 90%;
  padding: 2% 5%;
  text-align: left;
  float: left;
  background-color: rgb(187, 255, 203);
}

.comments-title {float: left; text-align: center; width: 100%; margin: 0 0 2% 0;}

.comment-block {
  width: 100%;
  float: left;
  box-shadow: 0px 0px 10px #4F8A5D;
  border-radius: 5px;
  background-color: #fff;
  overflow: hidden;
}

.comment-autor {width: 15%; float: left;}

.fn {
  width: 100%;
  float: left;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background-color: rgb(60, 60, 60);
}

.comment-content {width: 85%; float: left;}

.comment-content p {float: left; width: 90%; padding: 2% 5%;}

.commentmetadata {float: left; font-size: 12px; padding: 0 0 2% 5%; max-width: 50%;}
	
.reply {float: right; font-size: 12px; padding-right: 5%;}

.comment-list li {margin: 1% 0; list-style:none; width: 100%; float: left;}

ol .children {float: right; padding: 0 0 0 40px;}

ol .children li {margin: 0.5% 0;}

#respond {
  text-align: left;
  float: left;
  width: 90%;
  padding: 2% 5%;
  margin: 0;
  background-color: lavender;
}

Склонение слова «комментарий»

В файл functions.php

function plural_form($number, $after) {
  $cases = array (2, 0, 1, 1, 1, 2);
  echo $number.' '.$after[ ($number%100>4 && $number%100<20)? 2: $cases[min($number%10, 5)] ];
}

В шаблоне где нужно выводить:

<?php
plural_form(
  get_comments_number(),
  /* варианты написания для количества 1, 2 и 5 */
  array('комментарий','комментария','комментариев')
);
?>

или если нужен и 0 результат:

<?php
if (get_comments_number() == 0) {
  echo 'Нет комментариев';
} else {
  plural_form(
    get_comments_number(),
    /* варианты написания для количества 1, 2 и 5 */
    array('комментарий','комментария','комментариев')
  );
}
?>

Таким же образом можно изменять окончания и для других случаев (результаты поиска, количество товаров и т.д.)

Источник: http://dimox.name/plural-form-of-nouns/

Можно к форме комментария добавить панель форматирования

Выводим количество комментариев

<p><i class="fa fa-comment"></i> <a href="<?php comments_link(); ?>"><?php comments_number('0', '1', '%'); ?></a></p>

Выводим количество комментариев с проверкой: есть ли хотя бы 1 комментарий

<?php
$num_comments = get_comments_number();
if ($num_comments < 1) { ?>
нет комментариев
<?php } else { ?>
<p><i class="fa fa-comment"></i> <a href="<?php comments_link(); ?>"><?php comments_number('0', '1', '%'); ?></a></p>
<?php } ?>

Упрощенный код условия

<?php $num_comments = get_comments_number(); if ($num_comments >= 1) { ?>
<p><i class="fa fa-comment"></i> <a href="<?php comments_link(); ?>"><?php comments_number('0', '1', '%'); ?></a></p>
<?php } ?>

Готовая форма комментариев

Доработанный шаблон комментирования (comments.php):

<?php if( comments_open($post->ID) ) : ?>

	<div id="comments">

	<?php if ( post_password_required() ) { return; } ?>

	<?php $defaults = array(
		'fields'               => array(
									'author' => '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30" placeholder="ваше имя" />',
									'email'  => '<input id="email" name="email" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30" placeholder="e-mail" aria-describedby="email-notes" />',
								),
		'comment_field'        => '<textarea id="comment" name="comment" cols="45" rows="4"  aria-required="true" required="required" placeholder="комментарий"></textarea>',
		'must_log_in'          => '<p class="must-log-in">' . sprintf( __( 'You must be <a href="%s">logged in</a> to post a comment.' ), wp_login_url( apply_filters( 'the_permalink', get_permalink() ) ) ) . '</p>',
		'logged_in_as'         => '<p class="logged-in-as">' . sprintf( __( '<a href="%1$s" aria-label="Logged in as %2$s. Edit your profile.">Logged in as %2$s</a>. <a href="%3$s">Log out?</a>' ), get_edit_user_link(), $user_identity, wp_logout_url( apply_filters( 'the_permalink', get_permalink() ) ) ) . '</p>',
		'comment_notes_before' => '', // текст перед формой комментирования
		'comment_notes_after'  => '',
		'id_form'              => 'commentform',
		'id_submit'            => 'submit',
		'class_form'           => 'comment-form',
		'class_submit'         => 'submit',
		'name_submit'          => 'submit',
		'title_reply'          => __( 'Leave a Reply' ),
		'title_reply_to'       => __( 'Leave a Reply to %s' ),
		'title_reply_before'   => '<h3 id="reply-title" class="comment-reply-title">',
		'title_reply_after'    => '</h3>',
		'cancel_reply_before'  => ' <small>',
		'cancel_reply_after'   => '</small>',
		'cancel_reply_link'    => __( 'Cancel reply' ),
		'label_submit'         => __( 'Post Comment' ),
		'submit_button'        => '<input name="%1$s" type="submit" id="%2$s" class="%3$s" value="Комментировать" />',
		'submit_field'         => '<p class="form-submit">%1$s %2$s</p>',
		'format'               => 'xhtml',
	);

	comment_form( $defaults ); ?>  

	<?php if ( have_comments() ) : ?>

	<p class="comments-title">
	<?php if( function_exists('plural_form') ) {
		plural_form(
			get_comments_number(),
			array('комментарий','комментария','комментариев')
		);
	} ?>
	</p>

	<ol class="comment-list">
	<?php if( function_exists('mytheme_comment') ) {
		wp_list_comments( array(
			'style'       => 'ol',
			'short_ping'  => true,
			'callback' => 'mytheme_comment'
		) );
	} ?>
	</ol>

	<?php else: ?>

		<p class="comments-title">Пока нет комментариев. Будь первым!</p>		

	<?php endif; ?>

	<?php paginate_comments_links(); ?>  
  
	</div>

<?php elseif ( !comments_open() ) :	?>

		<p class="no-comments"><?php _e( 'Comments are closed.' ); ?></p>

<?php endif; ?>
[site-socialshare]
  • Комментарии
  • Вложения

Добавить комментарий

14 комментариев

  1. 1

    выложите скриншоты  как оно выглядит  

    1. Alexandr

      Форма комментирования, которая установлена на этом сайте и сделана по этой инструкции.

  2. Спартак

    Добрый день.  Подскажите как сделать чтобы форма комментариев была над комментриями (как у вас )

    1. Alexandr

      Выложил свой шаблон комментариев (см. выше под заголовком Готовая форма комментариев). По сути в выводе стоит сначала форма комментирования, а потом комментарии.

  3. Спартак

    Спасибо.

  4. Галина

    Большое спасибо!

  5. Сергей

    Добрый день. Спасибо за инструкцию, но кнопка «ответить » не работает, как поправить?

  6. Федот

    Респект тебе за код

  7. Atkham

    как добавить свой класс внутр li?

  8. ддд

    Форма комментирования, которая установлена на этом сайте и сделана по этой инструкции.

    1. Alexandr

      Да. Но конечно прошло уже много времени, может что-то и дорабатывал.

  9. Андрей

    Спасибо большое!

Шаблон комментариев
Стили и скрипты
Рекомендации для васСтили и скриптыOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.