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

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

HIT

29.06.2015

5599

9

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

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

<?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; ?>

Поделится информацией с друзьями

  • Комментарии
  • Вложения

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

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

  1. Аватар
    1

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

    1. Alexandr
      Alexandr

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

  2. Аватар
    Спартак

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

    1. Alexandr
      Alexandr

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

  3. Аватар
    Спартак

    Спасибо.

  4. Аватар
    Галина

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

  5. Аватар
    Сергей

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

  6. Аватар
    Федот

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

  7. Аватар
    Atkham

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

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