Стилизируем комментарии в WordPress. Часть 1

В сегодняшней статье мы расскажем как использовать стандартные классы WordPress для стилизации расположения комментариев на вашем блоге, а также еще несколько интересных вещей, с этим связанных.
Для этого примера мы будем модифицировать дефолтный шаблон WordPress — Twenty Twelve. Примечание: Эта статья написала для начинающих разработчиков тем и пользователей, которые модифицируют ВП своими руками, при этом разбирающихся в HTML и CSS.

Стандартные классы для WordPress для комментариев

По-умолчанию WordPress генерирует следующие классы для элементов в шаблоне комментариев:

/*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 {}

Как выяснить какой CSS класс необходимо редактировать

Прежде, чем мы приступим к стилизации, небольшая подсказка для новичков. Браузеры Google Chrome и Mozilla Firefox имеют встроенный инструмент, который позволит вам улучшить навыки разработки темы WordPress. Этот инструмент называется «Исследовать элемент». Просто наведите ваш курсор мыши на элемент веб-страницы, щелкните правой кнопкой и выберите «Исследовать элемент». Ваше окно браузера разделится на две строки и в нижней части окна вы увидите исходный код выбранного элемента. Также в этом окне вы увидите элементы CSS и как они стилизированы. Их можно даже редактировать в целях отладки. Важно запомнить, что все, что вы изменяете в Инспекторе видно только вам. После обновления страницы эти изменения исчезнут. Чтобы внести изменения непосредственно на сайт, вам нужно редактировать файл style.css или любой другой, в зависимости от шаблона.

Добавляем фоновые цвета четным и нечетным комментариям

Наличие различного фонового цвета для четных и нечетных комментариев — тренд дизайна уже на протяжении нескольких лет. Это повышает удобство чтения, особенно когда у вас много комментариев. Также фишка выглядит реально интересно с определенными цветами темы, что и вынуждает многих дизайнеров использовать этот функционал. И именно для того, чтобы помочь дизайнерам достичь этого, WordPress добавляет классы для четных/нечетных комментариев соответственно.

Вы же самостоятельно можете добавить стилизацию четных/нечетных комментариев в файл style.css вашей темы просто добавив туда следующий код:

.commentlist .even .comment { 
background-color:#ccddf2; 
} 
.commentlist .odd .comment {
background-color:#CCCCCC;
}

Результат будет выглядеть примерно так:

Стилизируем автора комментария и мета-информацию

WordPress также добавляем классы элементам, отображаемым в в каждом заголовке комментария. Это позволяет дизайнерам тем настроить вывод информации об авторе и другую мета-информацию (как например дату и время). Вот простой код, который нужно вставить в файл style.css вашей темы для стилизации этих элементов. В этом примере мы добавили цвет фона для мета-информации с некоторыми отступами.

.comments-area article header {
	margin: 0 0 48px;
	overflow: hidden;
	position: relative;
	background-color:#55737D;
	color:#FFFFFF;
	padding: 10px;
}

Выглядит результат вот так:

Продолжение статьи ищите по ссылке Стилизируем расположение комментариев в WordPress. Часть 2