hs.graphicsDir ="http://mixyblog.ru/wp-content/plugins/auto-highslide/highslide/graphics/"; hs.outlineType = "rounded-white"; hs.outlineWhileAnimating = true; hs.showCredits = false; window._wp_rp_static_base_url ='http://dtmvdvtzf8rz0.cloudfront.net/static/'; window._wp_rp_wp_ajax_url ="http://mixyblog.ru/wp-admin/admin-ajax.php"; window._wp_rp_plugin_version = '2.5'; window._wp_rp_post_id = '2683'; window._wp_rp_num_rel_posts = '7'; /* */ VK.init({apiId: 2857685, onlyWidgets: true}); VK.init({apiId: 3242173, onlyWidgets: true});
CqQRcNeHAv

Древовидные комментарии в Вордпресс, как сделать с помощью WordPress Thread Comment и без плагина

Tweet

Здравствуйте, уважаемые посетители блога Mixyblog.ru! Продолжая рубрику о CMS WP, хочу по подробней остановится на комментариях. Комментарии для блога необходимы так же, как нам воздух, поэтому стоит доработать стандартные комменты в WordPress и сделать их более удобными и функциональными для посетителей.

Древовидные комментарии в WordPress

Говоря о стандартной реализации общения в WP, я подразумеваю обычную форму ввода текста с тремя полями для имени, почты, адреса сайта, если таковой имеется и списком самих комментариев, идущих друг за другом. Смотрится это не презентабельно и крайне неудобно. Поэтому появилось много расширений, позволяющих улучшить это безобразие. И первым, о чем хотелось бы поговорить, будут древовидные комментарии для WordPress, которые я сделаю с помощью плагина, а так же покажу, как это реализовать не прибегая к использованию расширений.

В этом посте решил описать два способа создания и оформления комментарий. Первый, как обычно, с помощью плагинов, второй будет относится к тем, у кого Вордпресс выше версии 2.7, который стал поддерживать данное новшество. Так же хотел написать про третий способ, где нужно будет заменять код вывода комментариев, править файл «functions.php» и так далее, но передумал, потому что у всех наверняка обновлены движки и темы поддерживают подобный вид комментов.

Плагин WordPress Thread Comment, создание древовидных комментариев

Сей плагин давным давно не обновлялся и разработчики наверно не помнят о его существовании, но это не мешает ему исправно работать на всех версиях движков и быть самым популярным среди блоггерской аудитории. Добавить вы его, сможете из админки WP. Для этого перейдите «Плагины» — «Добавить новый», в строку вводим название и устанавливаем. Либо скачать его отсюда затем распаковать архив и залить на сервер с помощью фтп клиента, например файлзила в папку вашей темы, предназначенную для плагинов «/wp-content/plugins».

Следующим шагом, является активация плагина и настройка. Для этого нужно перейти: «Плагины» — «Установленные». В списке ищем название и активируем, затем во вкладке «Параметры» в левой колонке админки Wp, ищем «Древовидные комментарии» и переходим в настройки.

Если вы попали на страничку настроек плагина WordPress Thread Comment, то наверняка обратили внимание на две строчки, выделенные жёлтым цветом, не стоит пугаться это не сообщения о какой-либо ошибке. Так разработчики благодарят нас за использование и просят оказать материальную помощь в сумме одного доллара, чтобы они и дальше оказывали нам свою поддержку. Но так как плагин не обслуживается уже два года, мы не будем обращать на это внимание.)) Ну что ж, перейдём, непосредственно, к настройкам, коих к счастью не так много.

WordPress Thread Comment

1. Первый пункт, думаю не вызовет у вас желания устанавливать ограничения памяти на комментарии, поэтому пропускаем и идём дальше.

2. AJAX настройки. Вот здесь уже по интересней, технология AJAX позволяет осуществлять, какие-либо действия без перезагрузки страницы в браузере, с использованием AJAX, кстати написан скрипт обратной связи, о том, как его поставить на сайт можно прочесть здесь. Итак, второй пункт, предоставляет возможность посетителям, редактировать комменты. Поставив галочку, у меня перестали отображаться кнопки «Ответить». Не знаю с чем это связано, поэтому убрал.

3. Использование поддержки AJAX. Установив галочку, при нажатии на кнопку отправить комментарий, страница в браузере перезагружаться не будет, что очень удобно.

4. Здесь ничего менять не следует. Далее идут два окна, содержащие коды с настройками стилей и вида ответов.

Настройка вида ответов:

<div class="comment-childs<?php echo $deep%2 ? ' chalt' : ''; ?>" id="comment-[ID]">
<?php if(function_exists("get_avatar")) echo get_avatar( $comment, 32 ); ?>
<p><cite>[author]</cite>Reply:[moderation]<br /><small class="commentmetadata">[date] at [time]</small></p>[content]</div>

Можно оставить всё, как есть, но я убрал отображение даты и поменял слово «Reply» на «Пишет». Больше тут мудрить нечего. Чтобы убрать дату, удалите следующую строчку:

<small class="commentmetadata">[date] at [time]</small>

Далее идёт настройка стилей, куда вы можете добавить своё оформление, подходящее под дизайн сайта.

.editComment, .editableComment, .textComment{
	display: inline;
}
.comment-childs{
	border: 1px solid #999;
	margin: 5px 2px 2px 4px;
	padding: 4px 2px 2px 4px;
	background-color: white;
}
.chalt{
	background-color: #E2E2E2;
}
#newcomment{
	border:1px dashed #777;width:90%;
}
#newcommentsubmit{
	color:red;
}
.adminreplycomment{
	border:1px dashed #777;
	width:99%;
	margin:4px;
	padding:4px;
}
.mvccls{
	color: #999;
}

Я оставил все, как есть. Изменил лишь цвет фона (background) на белый, чтобы мои ответы не были на синем фоне, а только обрамлялись рамкой.

.chalt{
	background-color: white;
}

Далее идет настройка ответов. Добавьте туда число побольше, вдруг начнётся дискуссия, которую не будет возможности унять!)) На этом настройка плагина WordPress Thread Comment закончена. Там, конечно присутствуют ещё несколько пунктов. Установку галочек в них не рекомендую, потому что половина из них не работают, а принудительно досаждать и засорять почту читателей письмами о том, что на коммент получен ответ, я бы не стал. В результате всей проделанной работы, должно получиться, что-то подобное:

Плагин WordPress Thread Comment

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

Как сделать древовидные комментарии на WordPress 2.7 и выше без плагина

При обновлениях данного движка, в нём появилась функция установки древовидных комментарий по умолчанию. Это значит, что не нужно использовать сторонние плагины для реализации данной идеи. Это всё очень хорошо, но есть несколько минусов.

Во первых, опять же, эти комментарии будут выглядеть, как обычный упорядоченный на этот раз, список сообщений ничем не обрамлённый и никак не оформленный. Во вторых в индексе поисковых систем окажутся сотни а то и тысячи, в зависимости от количества комментариев на вашем блоге, дублированных постов такого вида:

http://mixyblog.ru/kak-sozdat-blog/plagin-all-in-one-seo-pack-nastrojka-optimizaciya-wordpress-bloga.html?replytocom=266

CMS WP добавляет к адресу страниц, параметр «replytocom», что и является причиной многократного дублирования. Сей казус решается путём добавления в файл Robots.txt директивы Disallow с параметром (/*?*), который будет блокировать все адреса, содержащие знак вопроса. Казалось бы вопрос решён, но тут возникает ещё одна проблема для тех, у кого не настроены ЧПУ ( человеко-понятные-урлы ), так как по умолчанию в вордпресс все страницы имеют вид:

http://mixyblog.ru/?p=1409

Это значит, что вы запретите к индексации все страницы сайта, поэтому придётся настроить постоянные ссылки, либо отказаться от этого и использовать плагин.

Итак, чтобы включить древовидные комментарии, необходимо в админке WP перейти в «Параметры» — «Обсуждение» и установить галочку на «разрешить вложенные комментарии». Теперь у вас будет всё тоже, что и реализует плагин, если комменты выстроились в порядке вопроса-ответа и под каждым появилась кнопка «Ответить» или «Reply» то тема поддерживает эту функцию.

Для вывода списка комментариев, обычно используют функцию «wp_list_comments», чтобы изменять стили, нужно задать параметр «style» со значениями ‘div’, ‘ol’, или ‘ul’. Для этого, воспользовавшись фтп клиентом, открываем любым Html редактором, файл «comments.php», который находится в папке вашей темы: «wp-content/themes/название темы/comments.php».

Там ищем код:

<ol class="commentlist">
	<?php wp_list_comments(); ?>
	</ol>

Теперь, для функции «wp_list_comments» указываем параметр style со значениями div, ol, или ul в зависимости от того, в какие теги данная функция заключена в вашей теме. У меня это «ol» значит получится так:

<ol class="commentlist">
	<?php wp_list_comments(array('style' => 'ol')); ?>
	</ol>

Если у вас уже присутствуют этот параметр, то изменять не требуется. Как уже говорил, сейчас покажу, как немного оформить стандартные комменты. Для этого вы должны хоть чуть-чуть знать CSS и представлять себе, как устроена тема WP и какие шаблоны за что отвечают.

Важно!!! По ходу статьи будут даваться куски кода, взятые из моей темы, которые вы должны вставить в файл «style.css» Но! Шаблоны у всех разные, поэтому теги и классы, данные здесь вы должны заменить на свои а свойства: border, background и т.д копировать и вставлять. Например: стили кнопок «Ответить» у меня определяет тег «ol» и класс «commentlist li div.reply a», в другой теме эти же стили задает «a.comment-reply-link». Настоятельно рекомендую пользоваться Firebug для FileZilla.

Итак, что собственно мы будем делать? В моей теме, как и во многих, комментлист выглядел следующим образом:

Оформление древовидных комментариев

Я добавлю рамки, посредством параметра border и оформлю кнопку «Ответить», чтобы она не выглядела ссылкой. Для этого нам потребуется править шаблоны темы, а именно, файл «style.css». Он находится в папке, установленной на блоге темы «wp-content/themes/название темы/style.css».

Теперь следует определить, какой кусок кода отвечает за стили комментариев. Для этих целей советую воспользоваться расширением «Firebug» для браузера FileZilla. Этот плагин просто незаменим. При наведении мышкой на какой-либо объект, вы увидите, какой файл и какой код отвечает за стиль данного элемента.

Изменение commentlist

Как показано на скриншоте, за всё поле комментариев отвечает класс «commentlist». Я решил выделить все рамкой, вы можете этого не делать, так как в этом случае оформляются не отдельные комментарии, а вся страница. В итоге получился вот такой код:

.commentlist {
    padding: 0.2em 0.7em 0.4em;
    text-align: justify;
    background-color: white;
    border: 1px solid #E6E6DF; border-radius: 10px;
}

Свойство «border» задаёт рамку с толщиной один пиксель и цветом «E6E6DF». Также присутствует «border-radius», который закругляет углы. В строке «background» можно задать цвет фона, на котором будут располагаться комментарии.

Далее нужно узнать какой кусок кода соответствует стилю самих комментов. Для этого опять же пользуемся расширением и смотрим:

Правка commentlist li

У меня это «commentlist-li». Здесь я так же добавлю рамку и закруглю её края. Получился вот такой код:

.commentlist li {
    list-style: none outside none;
    background-color: white;
	border: 1px solid #E6E6DF; border-radius:5px;
	margin: 5px;
	padding: 0.2em 0.7em 0.4em;
}

Вы вольны, изменять так, как этого хотите. Менять фон, цвет, толщину рамки и так далее. После этих манипуляций, комментарии будут выглядеть немного лучше. Далее следует изменить кнопку ответить. Для этого опять же пользуемся расширением. У меня это просто ссылка, поэтому Firebug показывает стили всех ссылок на блоге.

a {
    color: #3366CC;
    text-decoration: none;
}
a:hover {
    color: #5588AA;
    text-decoration: underline;
}

Если в теме присутствуют какие-то стили для данных кнопок, тогда вы увидите классы со словом «reply», что значит ответить, вот для них и нужно будет править код.

Если у вас, как у меня этого нет, тогда добавьте в файл «style.css» после стилей комментариев следующий код:

ol.commentlist li div.reply a {
    background-color: #E6E6DF;
    border: 1px solid #DDDDDD; border-radius:4px;
    color: #666666 !important;
    font-size: 13px;
    padding: 2px 5px;
}

Эти стили будут отображать кнопку «Ответить» в том варианте, какой вы видите на этом блоге. Можно поменять цвета: background-color задаёт цвет самой кнопки, «color» цвет шрифта, «font-size» размер шрифта и «padding» отступы от верхнего и бокового краёв.

Если всё получилось добавляем второй код с классом «hover»:

ol.commentlist li div.reply a:hover {
    background-color: #3EA8CF;
    border: 1px solid #DDDDDD; border-radius:40px;
    color: #FFFFFF !important;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}

Данный класс определяет стиль элемента при наведении на него курсора мыши, то есть при наведении на кнопку она будет изменяться так, как вы укажете в style.css. У меня изменён цвет шрифта на белый и фон на синий а так же border-radius установлен на 40px, что будет изменять его до овальной формы.

Заметьте, приведённый класс с тегом «ol» в начале, вы должны поставить тот тег, который задавали выше, в файле «comments.php» функции «wp_list_comments». Иначе ничего отображаться не будет! На этом всё, я отредактировал древовидные комментарии, теперь нужно изменить саму форму ввода, которая мне тоже не нравится. По умолчанию она выглядит таким образом:

Оформление формы комментариев

Я изменю кнопку «Отправить», добавлю фон для полей ввода и поменяю размер. Для этого воспользуемся расширением и посмотрим какой стиль соответствует данным элементам. Сначала поля ввода имени, почты и сайта, у меня это:

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

Класс commentform с тегом input, который предназначен для полей ввода в различных формах, определяет стиль, туда я помещу следующий код:

#commentform input {
    background-color: #F8F8F8;
	border: 1px solid #E6E6DF; border-radius:4px;
	margin: 5px 3px 1px 0;
    padding: 5px;
    width: 170px;
}

Объяснять, за что отвечают параметры не буду, так как всё рассказывал выше. Теперь поменяем стиль для тега textarea, который создаёт поле для ввода текста комментария. Проинспектируем этот элемент и видим:

Правка commentform textarea

Туда я поместил следующий код:

#commentform textarea {
    background-color: #F8F8F8;
	border: 1px solid #E6E6DF; border-radius:5px;
	margin: 5px 3px 1px 0;
	padding: 5px;
    width: 500px;
    height: 150px;
}

Теперь пришло время править кнопку «Отправить». Сначала проинспектируем этот элемент и видим, что за стиль отвечает #commentform #submit, который я изменю:

Правка commentform submit

По аналогии, с выше написанным, задаем стили:

#commentform #submit {
    background-color: #E6E6DF;
	border: 1px solid #DDDDDD; border-radius:4px;
	color: #666666 !important;
	font-size: 17px;
	padding: 2px 5px 2px 5px;
	width: 120px;
	height: 30px;
}

Далее добавляем сразу после этого кода, класс «hover», как и для кнопок «ответить»:

#commentform #submit:hover {
    background-color: #3EA8CF;
    border: 1px solid #DDDDDD; border-radius:25px;
    color: #FFFFFF !important;
    font-size: 17px;
	cursor: pointer;
	text-decoration: none;
    transition: all 0.2s ease 0s;
}

Если хотите, чтобы форма ввода комментария отображалась сразу после записи, где вы нажали ответить, придётся в файл «header.php» перед выводом функции:

<?php wp_head(); ?>

Вставить следующий код:

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

На этом всё, результат проделанной работы можно посмотреть на этом блоге, оставив комментарий к статье.) Мне данное оформление нравится, поэтому изменять его не собираюсь. В следующих статьях вы узнаете, как добавить к комментариям смайлики, теги для публикации кода и прочую ерунду. Подписывайтесь на обновления. Желаю удачи!!!

Буду признателен, если вы воспользуетесь данными кнопками и подпишетесь на обновления!
8
Твитнуть
VK.Widgets.Like("vk_like", {type: "button"});
VK.init({apiId: 2857685, onlyWidgets: true});

'2683' id='comment_post_ID' />

  • Рубрики

  • Реклама:

    Заказывайте куню в Челябинске в магазине Мебель Всем.



    Популярные

  • //
    document.write("<\/a>")