Красивая форма комментариев для WordPress

Красивая форма комментариев для WordPressНемного ранее я писала о том, как создать оригинальную форму комментариев в Ucoz. Мои читатели попросили рассказать, как сделать нечто подобное в WordPress. Об этом и пойдет сейчас речь.

Я не буду тут рассписывать каждый свой шаг, а дам четкую инструкцию к действию:
1. Меню — Дизайн (или Внешний вид) — Редактор — файл Комментарии (comments.php)

Находим строчку примерно такого вида

Code
<ul class=»commentlist»>
  <?php wp_list_comments(‘type=all&callback=art_comment’); ?>
  </ul>

Аргументы функции wp_list_comments будут отличаться в каждом используемом шаблоне. Но нас интересует кусок
Codecallback=art_comment
Это задание функции в файле function.php, которая и определяет внешний вид наших комментариев. Мы добавим нашу функцию mytheme_comment , поэтому код должен будет выглядеть так:
Code<ul class=»commentlist»>  
<?php wp_list_comments(‘type=all&callback=mytheme_comment’); ?>  
</ul>

Обратите внимание, что есть у Вас в аргументах функции wp_list_comments вообще нет callback, то просто добавьте его.
И еще один маленький момент по этому файлу. После этого кода добавьте вот эту строчку, дабы форма добавления комментария не наезжала на сами комментарии

Code<div style=»clear:both;»></div>

2. Меню — Дизайн (или Внешний вид) — Редактор — файл Функции темы (functions.php)

Добавляем в самый конец нашу функцию

Code
function mytheme_comment($comment, $args, $depth) {
  $GLOBALS[’comment’] = $comment; ?>
  <li <?php comment_class(); ?> id=»li-comment-<?php comment_ID() ?>»>
  <div id=»comment-<?php comment_ID(); ?>»>
  <div class=»comment-author-wrap vcard»>
  <div class=»avatar-wrap»>
  <?php echo get_avatar($comment,$size=’48’,$default='<path_to_url>’ ); ?>
  </div>  
  <div class=»comment-author»><?php echo get_comment_author_link(); ?></div>
  <div class=»comment-time»><?php echo get_comment_time(); ?></div>

  </div>
  <div class=»comment-content»>
  <?php if ($comment->comment_approved == ‘0’) : ?>
  <em><?php _e(‘Your comment is awaiting moderation.’) ?></em>
  

  <?php endif; ?>

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

  <?php comment_text() ?>

  <div class=»reply»>
  <?php comment_reply_link(array_merge( $args, array(‘depth’ => $depth, ‘max_depth’ => $args[’max_depth’]))) ?>
  </div>
</div>
  </div>
<?php
  } ?>

3. Осталось оформление

Меню — Дизайн (или Внешний вид) — Редактор — файл Список стилей (style.css)

так же в конец добавляем стили комментариев
Code.commentlist {  
  list-style: none;  
  padding-top: 5px;  
  margin: 0 0 30px 0;  
}
.comment {  
  position: relative;  
  margin: 0 0 20px 0;  
  font-size: 16px;
  clear: both;
}
.comment-content {
  width: 70%;
  float: right;
  background: #e8e8e8; //фон текста комментариев
  padding: 15px;  
  overflow: hidden;
  position: relative;
  -webkit-border-radius: 15px; // радиус закругления текста комментариев
  -moz-border-radius: 15px;  
  border-radius: 15px;
  border-top: 1px solid #ccc;
  z-index: 2;
}
.comment-author-wrap {  
  position: absolute;  
  left: 0;
  top: 0;  
  display: block;  
  margin-top: 10px;  
  color: black;  
  font-size: 12px;
  text-align:center;  
}
.comment-author-wrap a {
  border: 0;
  color: black;
}
.comment-author {
  font-size: 15px;
}
.avatar-wrap {  
  width: 68px;  
  height: 68px;  
  -webkit-border-radius: 42px; // радиус закругления аватарки
  -moz-border-radius: 42px;  
  border-radius: 42px;
  position: relative;  
  border: 8px solid #e8e8e8; // ширина и цвет рамки у аватарки
  z-index: 1;
}
.avatar-wrap:before {  
  content: «»;  
  position: absolute;  
  width: 500%;  
  height: 8px;  
  background: #e8e8e8; // цвет линии, которая соединяет аватар с текстом комментариев
  left: 75px;  
  top: 30px;  
  border-top: 1px solid #ccc;
}
.comment-author-wrap .avatar-wrap img{
  position: relative;
  width: 60px;
  height: 60px;
  -moz-border-radius: 38px;
  -webkit-border-radius: 38px;
  border-radius: 38px;
  }

.comment-content:hover > .reply .comment-reply-link {
  opacity: 0.6;  
}
.comment-reply-link:hover {  
  opacity: 1;  
}
// стили комментариев- ответов  
.children {  
  padding-left: 25px;
}
.children .children {
  padding-left: 0;
}
.children .comment {
  margin: 0;
}
.children .avatar-wrap {  
  border-color: #f2f2f2; //рамка вокруг аватарки
}
.children .avatar-wrap:before {  
  background: #f2f2f2; // цвет линии, которая соединяет аватар с текстом комментариев
}
.children .comment-content {
  width: 70%;
  background: #f2f2f2; // сам комментарий
  margin-top: 10px;
}

Вот собственно и все.

Комментарии на Facebook
Поделиться...

Жми «Нравится» и получай только лучшие посты в Facebook ↓