Создаём красивые комментарии в WordPress

Бывает, что внешний вид комментариев не шибко впечатляет веб-мастера, хочется визуальных изменений и как же поступить? Начать преобразовывать комментарии!

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

 

Я буду менять комментарии в браузере Google Chrome, чтобы настройки совпадали, вы можете тоже скачать сей браузер, в принципе, я думаю, действа не будут слишком различаться, если у вас другой браузер.

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

 

 

Имя комментатора в WordPress

Практически во всех темах WordPress за имя комменатора отвечает класс "fn", но для надёжности мы можем проверить сей факт. Оставляем комментарий на своем блоге и нажимаем правой кнопкой мышки по имени комментатора, а после, жмём «просмотреть код».

izmenit-imya-kommentatora

 

 

Вот и подсветилось имя и мы увидели предсказуемый class, всё верно, им оказался fn.

fn-class

 

 

Теперь надобно изменить внешний вид текста, сделать имя визуально заметным и чётким:

Внешний вид — редактор — Style.css 

Вбиваем такие параметры в style.css:

Кстати, укажите свой class, мало ли, вдруг в вашей теме за имя комментатора отвечает не "Fn"?

.fn {
Font-size: 25px !important;  
font-style: italic !important;  
font-family: century gothic !important;  
color: #002d87 !important;  
font-weight: 500 !important;  
text-shadow: black 0px 1px 1px !important; }

 

Получилось следующее (глядите на картинку). Уже имя комментатора выглядит иначе.

menyaem-kommentarii-v-wordpress

 

 

Аватарки в комментариях

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

Делаем по такому же принципу: правой кнопкой мышки по аватарке — просмотреть код — высвечивается стиль отвечающий за аватарку.

В данном случае мы видим, что в разделе Elements отобразился класс — это avatar

avatar

 

 

Бежим по адресу: внешний вид — редактор — style.css и задаём такие параметры для аватарок:

.avatar {

border-radius: 50%;

border: 2px solid #002d87;

}

avatarki-dlya-wordpress

 

 

Меняем содержимое (контент) комментариев

Надо поменять содержимое комментария (текст комментатора). Сделаем незначительные рамочки, зададим отступы, поменяем шрифт и размер букв, укажем фон.

kontent-kommentariya

.comment-content {
 border: 2px solid #e1eef2;
 padding: 8px;

background:white;
 color: black;
 font-family: verdana !important;
 font-size: 16px;
 }

 

 

Налаживаем тени в комментариях

Чтобы комментарии смотрелись эпично, их можно обернуть в обволакивающую пелену красок (добавить тени). Нам достаточно указать основной стиль т.е. который обволакивает блок комментариев полностью.

.comment {
 box-shadow: 2px 2px 4px 4px rgba(0,0,0,0.1);
 }

teni

 

 

Кнопка «Ответить»

Она была у нас невзрачная, но я придал ей синий фон, увеличил объём, задал нужную форму и в итоге получилась конфетка:

.reply a {
 background: #002d87;
 color: white !important;
 border-radius: 7%;
 padding: 9px 25px 9px 25px;
 font-family: century gothic !important;
 font-size: 15px;
 border: 1px solid #e1eef2;

}

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

.reply a { margin: 19px 0px 0px 0px; /* верх - право - низ - лево */ }

knopka-otvetit

 

 

Кнопку нужно сделать яркой, вызывающей при наводе на неё курсора мышки.

otvetit

Думаю, столь красочный кнопочный фактор вам пригодится:

.reply a:hover {
 text-decoration: none;
 background: red;
 color: white !important;
 border: 2px solid white;
 }

 

 

Какие комментарии получились?

Годно? Мне кажется, комментарии стали более яркими и вызывающими!) Как вам такая внешняя модернизация? Оставляйте комментарии, ну а мы поговорим про дальнейшую оптимизацию комментов.

kommentarii

 

 

Заголовки в комментах

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

zagolovok-kommentariev



h3.comment-reply-title {

font-family: verdana !important;

font-style: normal;

font-size: 30px;

font-weight: 500;

box-shadow: 4px 4px 4px 4px rgba(0,0,0,0.1);

padding: 15px 15px 15px 15px;

text-align: center;

text-shadow: #CCC 0px 2px 3px;

}

 

Создание контента

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

textarea#comment {
 font-family: verdana;
 font-size: 15px;
 font-style: italic;
 color: black;
 box-shadow: 2px 2px 4px 4px rgba(0,0,0,0.1);
 }

comment

 

В данном случае, был добавлен шрифт Verdana и задан размер букв, а также тенёчек и курсивный текст.

sostavlenie-kommentariya

 

 

Прилегающий Начальный заголовок

В начале у моих комментариев стоял заголовок, что мол уже есть три комментария, а также показано название статьи. Заголовок шибко прилегает к начальному комментарию, решил немного отдалить его.

h2.comments-title { 

margin: 20px 0px 50px 0px; /*Отступы, чтобы не прилегал заголовок другим блокам*/
}

otstupyi

 

 

Вот такое деление. Казалось бы ничего особенного, но в мелочах успех, так что и про отступы не надо забывать.

poyavilis-otstupyi

 

 

Виртуальная идентификация

Не забывайте выйти из админки и изменить внешний вид полей идентификации: добавить тени, сделать красивые буковки, в общем, это уже окончательный штрих! Думаю, справитесь!

input[type="text"] {

font-family: verdana;
font-size: 15px;
font-style: italic;
color: black;
box-shadow: 2px 2px 4px 4px rgba(0,0,0,0.1) !important; }

input[type="email"] {

font-family: verdana;
font-size: 15px;
font-style: italic;
color: black;
box-shadow: 2px 2px 4px 4px rgba(0,0,0,0.1);}

input[type="url"] {

font-family: verdana;
font-size: 15px;
font-style: italic;
color: black;
box-shadow: 2px 2px 4px 4px rgba(0,0,0,0.1); }

imya-e-mail-i-sayt

 

 

Конечно, у вас другие комментарии, но по данному образцу можно также поменять визуальную составляющую стандартных комментариев на своем WordPress блоге .


Добавить комментарий

insert emoticons