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

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

Всем привет! Сегодня расскажу, как сделать подсветку комментариев быстро и легко без использования плагина. Это еще проще, чем «Кнопка Наверх», которую делали на прошлом занятии.

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

Подсветка комментариев без плагина

Обычно для того чтобы подсветить комментарии используют либо плагины либо редактируют файл comens PHP. Но, в самом деле, начиная с версии 2.6 на вордпресс, есть встроенная функция подсветки комментариев. И все что нам нужно, это прописать две строчки в каскадную таблицу стилей, что мы сейчас и сделаем.

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

Давайте перейдем в панель инструментов (админ панель блога) => нажмем на вкладку “внешний вид” => редактировать.

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

.commentlist. byuser {background:#ffffff; color:#006393;}

.commentlist. bypostauthor {background:#d4e0ed; color:#006393;}

Для большинства тем этого вполне достаточно. Если не получилось, то надо сделать следующее.

Решение возможных проблем

В браузере мозила файер фокс Mozilla Firefox делаем так: выделяем левой кнопкой мыши текст комментария кликаем правой клавишей на выделенной области выбираем — «Исходный код выделенного фрагмента»

Как тоже самое сделать в браузере Гугл Хром, смотрите в видеоуроке в конце статьи.

Приведу пример возможной ситуации (см скриншот).

И вот здесь давайте мы с вами посмотрим, какими классами описываются наши комментарии.

Skrin dlya comments 1

Мы видим, что для обозначения элементов используется id. Вообще для разных элементов используется либо id либо class. В данном случае coments-list обозначен id, а в class описано, что присвоено byuzer и author.

Что нам надо сделать.

Нам нужно немножко модифицировать этот id. Копируем это название – coments-list, переходим в таблицу стилей нашей темы, и вот здесь — .commentlist заменяем на #comments-list.

Сохраняем, переходим на сайт, если надо обновляем и смотрим. Комментарии должны теперь выделяться цветом.

Как поменять цвет фона и букв

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

Цвета в коде обозначены шестью цифрами с буквами вот так:

.commentlist. byuser {background:#ffffff; color:#006393;}

#ffffff — это белый цвет фона для юзера (для класса byuzer – это посетители)

#006393 – синий цвет букв

.commentlist. bypostauthor {background:#d4e0ed; color:#006393;}

#d4e0ed – синий цвет для класса, обозначающего автора поста(bypostauthor)

#006393 – более темно-синий цвет букв

Вы можете изменить для себя вот только эти цвета шрифтов, больше здесь ничего менять не нужно! После того как вы их замените не забывайте нажать на кнопочку «Обновить файл»

Чтобы вам удобней было определять цвета и их обозначения предлагаю Онлайн палитру подбора цветов.

<<Смотрите видеоурок>> ukazateli

Надеюсь, вам понравилась статья. Если возникли какие-либо затруднения, пишите в комментариях. На сегодня у меня все.

В следующем уроке я расскажу, как сделать карту сайта без плагина. Не пропустите, подписывайтесь на обновление по PSS каналу или введите свои данные в форму ниже.


Карта сайта


Информационный сайт Webavtocat.ru