Comments.php создание своей страницы комментариев wordpress
Понятие блог подразумевает собой что, возможно, статьи, написанные в нем, будут обсуждаться. Или просто комментироваться мнениями пользователей, благодарностями или наоборот критикой. В wordpress страница комментариев, код и внешний вид, содержится в файле comments.php. Его построение мы и рассмотрим…
Необходимый минимум страницы комментариев содержит в себе:
- проверку разрешено ли комментирование страницы (записи)
- кому разрешено оставлять комментарии
- предложение зарегистрироваться на сайте
- форма для ввода комментария
Код выглядит так:
1 2 3 4 |
<?php if ( comments_open() ) : // Проверка разрешено ли комментирование страницы ?> <?php if ( get_option( 'comment_registration' ) && !$user_ID) : //Если разрешено только для зарегистрированных пользователей ?> <p>Вы должны <a href="/wp-login.php">представиться</a> для размещения комментариев.</p> <?php else : // Если разрешено для всех пользователей ?> |
Далее следует форма для ввода комментариев:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post"> <?php if ( !$user_ID ) : // Вывод полей для гостей ?> <p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" /> <label for="author"><small>имя</small></label></p> <p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" /> <label for="email"><small>мейл</small></label></p> <p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" /> <label for="url">Сайт</small></label></p> <?php endif; // Конец вывода полей для гостей ?> <p><textarea name="comment" id="comment"></textarea></p> <p><input name="submit" type="submit" value="Отправить" /> <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p> </form> <?php endif; //Конец, если разрешено для всех пользователей ?> <?php endif; //Конец, если комментирование разрешено ?> |
size=»22″ — размер поля для ввода, количество символов.
В такие «комментарии» будут выводиться не только комментарии, но и пинги, трекбеки в одну сплошную кучу. Чтобы избежать помойки нужно определить что именно выводить. К примеру я отдельно вывожу только комментарии и отдельно все остальное.
Вывод только комментариев производится через проверку типа записи: $comment_type = get_comment_type(); $comment_type == ‘comment‘). Готовый код такого вывода выглядит следующим образом:
1 2 3 4 5 6 7 |
<?php foreach ($comments as $comment) : ?> <?php $comment_type = get_comment_type(); // определение типа сообщения ?> <?php if($comment_type == 'comment') { // вывод только тип = комметарий ?> <?php comment_author_link(); // вывод автора комментария ?> <?php comment_text(); // вывод текста комментария ?> <?php } ?> <?php endforeach; ?> |
Если на блоге установлена проверка комментариев администратором, то следует добавить сообщение об этом для пользователей:
1 2 3 4 5 6 7 8 9 10 |
<?php foreach ($comments as $comment) : ?> <?php $comment_type = get_comment_type(); ?> <?php if($comment_type == 'comment') { ?> <?php comment_author_link(); ?> <?php if ($comment->comment_approved == '0') : // если комментарий не одобрен ?> <p>Ваш комментарий ожидает модерации.</p> <?php endif; // конец проверки одобрения ?> <?php comment_text(); ?> <?php } ?> <?php endforeach; ?> |
Вывод трекбеков, пингов и прочего я делаю через исключение. То есть разрешен вывод всего кроме комментариев:
1 2 3 4 5 6 7 |
<?php foreach ($comments as $comment) : ?> <?php $comment_type = get_comment_type(); ?> <?php if($comment_type != 'comment') { // != 'comment' это значит все кромме комментариев ?> <?php comment_author_link(); // имя автора ?> <?php comment_text(); // текст ?> <?php } ?> <?php endforeach; ?> |
Это был «сухой» вывод без какого-либо оформления. Но сомнительно что кто бы то ни было захочет что-то писать на некрасивом сайте. У меня вывод комментариев оформлен в виде двух вкладок. В первой содержатся комментарии, во второй все остальное.
Вкладки работают через jQuery. Поэтому для начала подключим скрипт jQ для вкладок.
В первую очередь подключаем сам фреймворк jQuery, если он еще не подключен на вашем сайте. Вставляется между тегами head и /head (в wordpress head находится обычно в header.php) строчку:
1 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
Во-вторых, создаем скрипт my.js, внутри которого пишем:
1 2 3 4 5 6 |
(function($) { $(function() { $('ul.tabs').delegate('li:not(.current)', 'click', function() { $(this).addClass('current').siblings().removeClass('current') .parents('div.section').find('div.box').hide().eq($(this).index()).fadeIn(150); })})})(jQuery) |
Копируем его в папку к comments.php и подключаем, так же дописав тегами head и /head строчку:
1 |
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/my.js"></script> |
Теперь подробно рассмотрим полный код comments.php:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<div class="section"> <!-- начало блока --> <ul class="tabs"> <!-- построение вкладок как список --> <li class="current">Комментарии к статье</li> <!-- первая вкладка --> <li>Обратные ссылки</li> <!-- вторая вкладка --> </ul> <!-- Далее содержимое вкладок: --> <!-- Содержимое первой вкладки "комментарии к статье" --> <div class="box visible"> <ol id="thecomments"> <!-- нумерованный список --> <?php if ($comments && count($comments) > 0) { ?> <!-- проверка есть ли комментарии --> <?php if ( $comments ) : ?> <!-- если комменты есть, то выводим то что ниже --> <?php foreach ($comments as $comment) : ?> <?php $comment_type = get_comment_type(); ?> <!-- проверка типа комментария --> <?php if($comment_type == 'comment') { ?> <!-- выводим только коммены, без пингов и бэков --> <div class="comment-head"> <!-- начало информационного блока --> <li><center><strong><?php comment_author_link(); ?></strong><br /> <!-- имя автора --> <?php echo get_avatar($comment, 64); ?> <!-- аватар автора, ширина и высота 64 --> <span class="comment-i"><?php comment_date(); ?></span> <!-- дата комментария --> <?php edit_comment_link('редактировать',' ',''); ?></center> <!-- ссылка на редактирование --> </div><!-- конец информационного блока --> <?php if ($comment->comment_approved == '0') : ?> <!-- проверка на одобрение админом --> <span class="comment-i">Ваш комментарий ожидает модерации. </span> <?php endif; ?> <!-- конец вывода текста о проверки на одобрение админом --> <div class="comment-text"><?php comment_text(); ?> <!-- блок с текстом комментария --> </div> <div class="clear"></div> <!-- очистка позиционирования --> </li> <?php } ?> <?php endforeach; ?> </ol> <!-- конец нумерованного списка список --> <?php endif; ?> <!-- конец проверки наличия комментариев --> <?php } else { ?> <!-- если комментариев нет, то --> <span class="comment-i"><?php _e('No comments yet.'); ?></span> <?php } ?> <!-- эта строка скажет что их нет --> <!-- форма ввода комментария --> <?php if ( comments_open() ) : // проверка разрешены ли комментирование ?> <?php if ( get_option( 'comment_registration' ) && !$user_ID) : // если разрешено только для зареганных юзеров ?> <p>Вы должны <a href="/wp-login.php">представиться</a> для отправки комментариев.</p> <?php else : // если разрешено для всех посетителей ?> <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post"> <?php if ( !$user_ID ) : // выводим три поля для гостей ?> <div class="comment-area"> <!-- блок формы ввода комментариев --> <ul><li> <!-- построение списком, в моем случае горизонтальным --> <label for="author">Имя</label> <!-- поле ввода имени автора --> <input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="10" tabindex="1" /> <!-- ширина поля 10 символов --> </li> <li> <label for="email">e-mail (обязательно)</label> <!-- поле для ввода почты автора --> <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="20" tabindex="2" /> <!-- ширина 20 символов --> </li> <li> <label for="url">Ваш сайт</label> <!-- поле ввода ссылки на сайт --> <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="10" tabindex="3" /> <!-- ширина 10 --> </li></ul> <!-- конец построение списком --> </div> <!-- конец блока формы ввода комментариев --> <?php endif; // Конец вывода трех полей для гостей ?> <div> <!-- блок для формы ввода текста комментария --> <p><textarea name="comment" cols="83" rows="5" id="comment"></textarea></p> <!-- ширина 83 символа --> <p><input name="submit" type="submit" value="Отправить" /> <!-- кнопка отправить --> <input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" /></p></div> </form> <!-- конец формы --> <?php endif; // конец "если разрешено комментирование для всех посетителей" ?> <?php endif; // конец "если комментирование разрешено" ?> </div> <!-- содержимое второй вкладки, "Обратные ссылки" --> <div class="box"> <ol id="thecomments"> <!-- построение нумерованного списка --> <?php if ($comments && count($comments) > 0) { ?> <!-- если обратные ссылки есть --> <?php if ( $comments ) : ?> <!-- начинаем показывать то что ниже --> <?php foreach ($comments as $comment) : ?> <?php $comment_type = get_comment_type(); ?> <!-- определение типа записи --> <?php if($comment_type != 'comment') { ?> <!-- показываем все кроме комментариев --> <li><?php comment_author_link(); ?></strong> <!-- имя автора пинга --> <span class="comment-i"><?php comment_date(); ?></span> <!-- дата пинга --> <?php comment_text(); ?> <!-- текст пинга --> </li><?php } ?> <?php endforeach; ?> </ol> <!-- конец построения списка --> <?php endif; ?> <!-- конец "если есть обратные ссылки" --> <?php } else { ?> <!-- если обратных ссылок нет, то --> <span class="comment-i"><?php _e('Обратных ссылок нет'); ?></span> <!-- выводим это сообщение --> <?php } ?> </div> <!-- конец блока обратных ссылок --> </div><!-- конец блока страницы комментариев --> |
CSS оформление страницы комментариев:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
/* вид всей страницы */ .section { width: 100%; /* ширина 100% */ min-width:620px; /* минимальная ширина */ margin: 0 0 30px; /* отступ снизу*/ } /* вид вкладочек */ ul.tabs { /* вкладки */ height: 28px; /* высота вкладки */ line-height: 25px; /* высота строки во вкладке */ list-style: none; /* отсутствие маркеров списка */ border-bottom: 1px solid #DDD; /* рамочка */ background: #FFF; /* цвет фона */ } .tabs li { /* текст внутри вкладок */ float: left; /* выстраивать в линию по левому краю */ display: inline; /* показывать как встроенный элемент */ margin: 0 1px -1px 0; /* отступы */ padding: 0 13px 1px; color: #777; /* цвет текста */ cursor: pointer; /* внешний вид курсора при наведении */ background: #F9F9F9; /* фон */ border: 1px solid #E4E4E4; /* рамочка */ border-bottom: 1px solid #F9F9F9; /* рамочка снизу */ position: relative; /* позиционирование */ } .tabs li:hover, .vertical .tabs li:hover { /* реакция при наведении курсора */ color: #F70; /* изменение цвета */ padding: 0 13px; /* отступ */ background: #FFFFDF; /* изменение цвета фона */ border: 1px solid #FFCA95; /* изменение цвета рамки */ } .tabs li.current { /* нажатая вкладка */ color: #444; background: #EFEFEF; padding: 0 13px 2px; border: 1px solid #D4D4D4; border-bottom: 1px solid #EFEFEF; } /* вид блока комментариев */ .box { /* блок скрытой вкладки */ display: none; padding: 0 12px; } .box.visible { /* блок видимой вкладки */ display: block; } .comment-i {color: #CCC; /* цвет информации, даты */ } /* вид комментариев */ .comment-title{ margin-bottom: 20px; } .comment-head{ /* колонка информации о авторе */ width: 10%; /* ширина */ margin-right: 5px; /* отступ права */ margin-left: 10px; /* отступ слева */ float: left; /* выравнивание в полосу */ text-align: center; /* ориентация текста по центру */ margin-bottom: 10px; /* отступы снизу */ padding-bottom: 5px; } .comment-text{ /* оформление текста комментария */ word-wrap: break-word; /* включен перенос длинных слов */ margin-left: 5px; float: left; padding-left: 10px; max-width: 80%; min-width: 200px; text-align: justify; /* выравнивание текста по ширине блока */ } .comment-area{ /* обнуление отступов от всего блока комменатриев */ margin: 0; /* Обнуляем значение отступов */ padding: 0; /* Обнуляем значение полей */ } .comment-area li { /* постройка горизонтального списка вкладок */ display: inline; /* Отображать как встроенный элемент */ margin-right: 5px; /* Отступ слева */ padding: 3px; /* Поля вокруг текста */ } |
Большое спасибо автору много интересной информации нашелу вас.
Мало в сети таких красивых и полезных сайтов
подскажите как сделали подписку справа?
Интересная статья, спасибо давно искал…
Здравствуйте. Подскажите пожалуйста, в комментариях, которые размещают посетители моего блога, при наведении мышки на имя автора отсутствует возможность перейти к нему на блог. Как можно это исправить?
Ирина, для этого не мешало бы хозяевам комментариев указывать адрес URL своего блога\сайта. Если адрес указан, но ссылки не работают воспользоваться
либо
Спасибо за статью. Я пока чайник, поэтому разобраться будет полезно