Рубрика: WordPress без плагинов

Выделить комментарии автора без плагинов

В этой статье я расскажу как выделить комментарии автора и как подсветить само имя автора в блоге WordPress без плагинов. Комментарии в блоге WordPress по значимости, стоят рядом с самими постами. Есть блоги, в которых статьи являются, только «затравкой» к большому древовидному дереву комментариев и обсуждений.

Как выделить комментарии автора

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

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

Есть еще один момент. Начать нужно с изучения своего файла style.css. С них и начнем.

Найти в файле style.css раздел комментарии

Авторизуйтесь в административной панели. В консоли найдите и откройте Внешний вид >>>Редактор. Справа в открывшемся окне найдите файл style.css и откройте его для редактирования.

В открывшемся файле CSS (Таблица стилей (style.css)) найдите часть кода, отвечающую за оформление комментариев. Эта часть может быть закомментирована как:

/*================== Comments ==================*/

Или просто сформирована в группу, в строках которых есть значения [comments].

Немного о классах комментариев

Наиболее используемые классы комментариев такие:

Общие комментарии это класс commentlist
Комментарии автора это класс commentlist.bypostautor;
Комментарии зарегистрированных пользователей: commentlist.byuser

Общий список системных классов для комментирования такой:

/*Comment Output*/
.commentlist .reply {}

.commentlist .reply a {}

.commentlist .alt {}

.commentlist .odd {}

.commentlist .even {}

.commentlist .thread-alt {}

.commentlist .thread-odd {}

.commentlist .thread-even {}

.commentlist li ul.children .alt {}

.commentlist li ul.children .odd {}

.commentlist li ul.children .even {}

.commentlist .vcard {}

.commentlist .vcard cite.fn {}

.commentlist .vcard span.says {}

.commentlist .vcard img.photo {}

.commentlist .vcard img.avatar {}

.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {}

.commentlist .comment-meta a {}

.commentlist .commentmetadata {}

.commentlist .commentmetadata a {}

.commentlist .parent {}

.commentlist .comment {}

.commentlist .children {}

.commentlist .pingback {}

.commentlist .bypostauthor {}

.commentlist .comment-author {}

.commentlist .comment-author-admin {}

.commentlist {}

.commentlist li {}

.commentlist li p {}

.commentlist li ul {}

.commentlist li ul.children li {}

.commentlist li ul.children li.alt {}

.commentlist li ul.children li.byuser {}

.commentlist li ul.children li.comment {}

.commentlist li ul.children li.depth-{id} {}

.commentlist li ul.children li.bypostauthor {}

.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}

#cancel-comment-reply a {}

/*Comment Form */
#respond { }

#reply-title { }

#cancel-comment-reply-link { }

#commentform { }

#author { }

#email { }

#url { }

#comment

#submit

.comment-notes { }

.required { }

.comment-form-author { }

.comment-form-email { }

.comment-form-url { }

.comment-form-comment { }

.form-allowed-tags { }

.form-submit

Пример: выделим имя автора блога в комментариях

Для того чтобы выделить имя автора в комментарии, нужно найти код типа:

class="theme:tomorrow-night lang:default decode:true">.comment-author .fn {
line-height: 30px;
background: #dddddd; /*цвет фона Имени автора*/color: #eeeeee;
font-weight: bold;
font-size: 1.3em; /*Размер шрифта имени автора*/font-style: normal; /*Стиль шрифта: normal | italic | oblique | inherit */}

Если такой код есть, меняете значения строк, которые вам нужно поменять и получить нужный результат.

Фон это значение свойства: background. Если такого кода нет, вставляете его и файл и устанавливаете нужные значения. Затем сохраняете файл и проверяете результат.

Выделим фон всего комментария от автора

Ищем в файле style.css часть кода:

/* Выделить сообщение автора  подсветкой*/.commentlist > li.bypostauthor {
 background: #dddddd; /*Цвет фона комментария автора*/ border-color: #eeeeee;/*Цвет рамки комментария*/}

Если такая часть есть в файле style.css меняете значения в строке background: #, сохраняетесь и проверяете результат. Если такого кода нет, вставляете его в файл style.css, меняете значения свойства background, сохраняетесь и проверяете результат.

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

Пример трех чистых кодов

Выделить фон комментария автора:

/* Выделить сообщение автора  подсветкой*/.commentlist > li.bypostauthor {
 background: #; /*Цвет фона комментария автора*/ border-color: #;/*Цвет рамки комментария*/}

Эти коды, «подсветят» только комментарии первого уровня: типа вопрос-ответ.

Выделить фон Имени автора:

/* Подсветка Имени автора*/.comment-author .fn {
 line-height: 30px;
  background: #; /*цвет фона Имени автора*/ color: #;
 font-weight: bold;
 font-size: 1.3em; /*Размер шрифта имени автора*/ font-style: normal; /*Стиль шрифта: normal | italic | oblique | inherit */}

Выделение фона комментариев Автора не первого уровня:

/* Выделение сообщения Автора не первого уровня*/.commentlist .children > li.bypostauthor {
 background: #;   /*Цвет фона комментария автора*/ border-color: #; /*Цвет рамки комментария*/}

Важно! Перед редактированием файла style.css сделайте его копию. Если совсем запутаетесь в редактировании кода, то сможете его восстановить. Лучше используйте инструмент дочерней темы или customize настроек темы.