Доктор Лексиум
Главная » Блог » PHP » Комментарии для WordPress (адаптивная версия)
https://www.lexium.ru/2018/04/kommentarii-dlya-wordpress-adaptivnaya-versiya/

Комментарии для WordPress (адаптивная версия)

По сути, эта запись является маленьким складом. Все как всегда — не хочу потом искать шаблон комментариев для WordPress не пойми где.

Зачем это нужно?

Так получилось, что я завел еще один блог. Не тематический, а, как говорится, для души. Потому, что должен быть порядок: шапочка — для душа, блог — для души.

За основу взял шаблон от этого блога. Кое что переделал, кое что нет.

Если вы заметили, на lexium.ru комментарии оставляются через виджет социальной сети ВКонтакте. Собственная система комментирования здесь вырвана и выброшена куда подальше. Новый блог унаследовал тот же подход.

Проблема в том, что автономные блоггеры не спешат комментировать новый блог через ВКонтакте.

  • Во-первых, не все в ней состоят.
  • Во-вторых, не каждый готов показывать свою настоящую страничку в соцсети. Кому захочется создавать фальшивую ради одного блога.
  • В-третьих, там нельзя ненавязчиво вставить ссылку на свой блог.

Пришлось делать систему комментирования здорового автономного блоггера.

Вот так она выглядит. Посмотреть в работе можно в любой записи на www.trolloblog.ru

Как это работает?

Всё просто, но есть пара моментов.

  • Во-первых, перед изменениями в шаблоне сайта, сделайте резервную копию всего! Иначе в случае чего, не сможете восстановить сайт.
  • Во-вторых, если навыков программирования не имеете, лучше обратиться к специалисту «до», а не «после». «После» — обходится дороже.
  • В-третьих, если все-таки решитесь повторить описанное тут и что-нибудь пойдет не так, претензии не принимаются. Все что вы делаете, вы делаете на свой страх и риск. Я лишь описал то, что делал сам.

В шаблоне сайта находим файл single.php и в то место, где нужно вывести комментарии, вставляю этот код.

<div class="post-wrapper comments">
<?php comments_template(); ?>
</div>

Далее, содержимое comments.php заменяю на это. Если файла нет, то сначала создаю его. Там добавлены граватары, ссылка на их изменение и ссылка для редактирования комментария (для зарегистрированных пользователей).

<?php // Do not delete these lines
	if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');

        if (!empty($post->post_password)) { // if there's a password
            if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {  // and it doesn't match the cookie
				?>
				
				<p><?php _e("This post is password protected. Enter the password to view comments."); ?><p>
				
				<?php
				return;
            }
        }


?>

<!-- You can start editing here. -->

<?php if ($comments) : ?>

<div id="commentlist"><!-- Лист комментариев -->


	<?php foreach ($comments as $comment) : ?>

<div class="commenti row" id="comment-<?php echo comment_ID(); ?>">

	<div class="avanic col-lg-2 col-md-2 col-sm-12 col-xs-12">

<?php 
		$avtoramilo = get_comment_author_email();
		$avtora = get_user_by('email', $avtoramilo);
		if($avtora->ulogin_photo){
?>
			<img class="ava gravatar" src="<?php echo $avtora->ulogin_photo;?>" width="64" height="64" alt="" />
<?php 	}else{ ?>
			<img class="ava gravatar" src="https://www.gravatar.com/avatar.php?gravatar_id=<?php echo md5(get_comment_author_email()) ?>&amp;size=64&amp;default=<?php echo urlencode(get_bloginfo('template_directory').'/images/default-gravatar.jpg') ?>" width="64" height="64" alt="" />
<?php 	} ?>

<!--noindex--><span class="nic"><?php comment_author_link() ?></span><!--/noindex-->

	</div>
	<div class="commenttxt col-lg-10 col-md-10 col-sm-12 col-xs-12">
		<span class="commentverh">
			Ответ написан <?php comment_date('j F Y') ?> в <?php comment_time() ?>. <?php edit_comment_link(__("Ред."), ' &#183; ', ''); ?>
			<?php if(!$user_ID){ ?>
			&#183;
			<!--noindex-->
			<a href="https://ru.gravatar.com/" title="Изменить Аватар" target="_blank" rel="nofollow">Изменить грАватар</a>
			<!--/noindex-->
			<?php } ?>
		</span>
		<div class='commentcontent'><?php comment_text() ?></div>
		<div style="clear:both;"></div>
	</div>


</div>
	<?php endforeach; /* end foreach comment */ ?>



	</div><!-- END Лист комментариев -->

	<p id='comment-rss'>
		<?php comments_rss_link(__('Следить за темой по RSS')); ?>
		<?php if ( pings_open() ) : ?>
		&#183; <a href="<?php trackback_url() ?>" rel="trackback"><?php _e('TrackBack <abbr title="Uniform Resource Identifier">URI</abbr>'); ?></a>
		<?php endif; ?>
	</p>

<?php else : // this is displayed if there are no comments so far ?>

	<?php if ('open' == $post-> comment_status) : ?> 
		<?php /* No comments yet */ ?>
		
	<?php else : // comments are closed ?>
		<?php /* Comments are closed */ ?>
		<p><?php _e('Comments are closed'); ?></p>
		
	<?php endif; ?>
	
<?php endif; ?>

<?php if ('open' == $post-> comment_status) : ?>

	<h3 class="postcomment"><?php _e('Напишите комментарий'); ?></h3>
	<div class="postcomment">
	
	<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
	
		<div><?php _e('Вы должны'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>"><?php _e(' авторизоваться '); ?></a> <?php _e('чтобы писать ответы.'); ?></div>
	
	<?php else : ?>
	
		<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
		<div class="row">
		<?php if ( $user_ID != true ){ ?>
			
				<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
					<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1" placeholder="<?php _e('Ник:'); ?> <?php if ($req) _e('*'); ?>" /></p>
					<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2" placeholder="<?php _e('E-Mail:'); ?> <?php if ($req) _e('*'); ?>" /></p>
					<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" placeholder="<?php _e('Ваш сайт:'); ?>" /></p>
					<p>
						<input name="submit" type="submit" class="submit" tabindex="5" value="<?php _e('Отправить'); ?>" />
						<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
					</p>
				</div>
				<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
		<?php }else{ ?>
				<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<p><?php _e('Вы вошли, как '); ?> <a href="/wp-admin/profile.php"><?php echo $user_identity; ?></a>. Выход <a href="/wp-login.php?action=logout" title="<?php _e('Выход') ?>"><?php _e('здесь'); ?></a>.</p>
		<?php } ?>

				<p><textarea name="comment" id="comment" rows="6" cols="15" tabindex="4" placeholder="<?php _e('Комментарий'); ?>"></textarea></p>
				<?php if ( $user_ID == true ){ ?>
				<p>
						<input name="submit" type="submit" class="submit" tabindex="5" value="<?php _e('Отправить'); ?>" />
						<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
				</p>
				<?php } ?>
			</div>
		</div>
	

	
		<?php do_action('comment_form', $post->ID); ?>
	
		</form>

	<?php endif; // If registration required and not logged in ?>
	</div>

<?php endif; // if you delete this the sky will fall on your head ?>

В файл стилей style.css добавляю это. Оптимизировать не стал. Мне норм, а вы, скорее всего, станете переделывать под себя и полностью переиначите.

/* Comments */

#comment-rss{display:block;text-align:center;}

#commentlist{margin:40px 0;padding:0 15px;}

.commenti{-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background:#fff;}

.ava{-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}

.avanic{padding-top:10px;padding-bottom:10px;text-align:center;color:#111;}

img.ava{display:inline-block;width:90px;margin:10px auto 5px;float:none;}

.nic{display:block;text-align:center;}


.commenttxt{padding-bottom:10px;}

.commentverh{float:right;}

.commentverh, .commentverh a{font-size:12px;color:#555;}
.commentverh a{color:#575;}

.commentcontent{color:#111;margin:15px;}

#comment{width:100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color:#111;padding:10px 20px;border:none;}

#commentform input{width:100%;padding:10px 20px;border:none;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}

#commentform input.submit{color:#111;border:none;background:#cfc;max-width:200px;float:right;margin-bottom:20px;}

Вот и всё. Верстка адаптивная (если подключен бутстрап). Если не подключен — скорее всего блок комментарие будет кривым и косым.

А на сегодня это всё. С вами был Доктор Лексиум.
Подписывайтесь, делитесь ссылкой на этот пост с друзьями. И до новых публикаций.

Напишите комментарий