Как стилизовать макет комментариев WordPress

Недавно мы показали вам, как стилизовать форму комментариев WordPress, и мы подумали, что было бы неполным, если бы мы не написали о стилизации макета комментариев WordPress. В прошлом мы уже обсуждали, что существуют генерируемые по умолчанию WordPress классы CSS и идентификаторы, чтобы облегчить дизайнерам тем стилистику своих шаблонов. В этой статье мы будем использовать эти классы по умолчанию, чтобы показать вам, как стилизовать макет комментариев WordPress и некоторые классные вещи, которые вы можете с ним сделать.

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

Классы комментариев WordPress по умолчанию

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

/*Вывод комментария*/ .список комментариев .ответ <> .список комментариев .ответить а <> .список комментариев .alt <> .список комментариев .странный <> .список комментариев .даже <> .список комментариев .thread-alt <> .список комментариев .thread-odd <> .список комментариев .thread-even <> .список комментариев li ul.дети .alt <> .список комментариев li ul.дети .нечетный <> .commentlist li ul.дети .чётный <> .список комментариев .vcard <> .список комментариев .vcard cite.fn <> .список комментариев .vcard span.говорит <> .список комментариев .vcard img.фото <> .список комментариев .vcard img.аватар <> .список комментариев .vcard cite.fn a.url <> .список комментариев .comment-meta <> .список комментариев .comment-meta a <> .список комментариев .commentmetadata <> .список комментариев .commentmetadata a <> .список комментариев .родитель <> .список комментариев .комментарий <> .список комментариев .children <> .список комментариев .pingback <> .список комментариев .bypostauthor <> .список комментариев .комментарий-автор <> .список комментариев .comment-author-admin <> .список комментариев <> .commentlist li <> .список комментариев li p <> .commentlist li ul <> .список комментариев li ul.children li <> .список комментариев li ul.дети li.alt <> .список комментариев li ul.дети li.byuser <> .commentlist li ul.дети li.комментарий <> .список комментариев li ul.дети li.глубина- <> .список комментариев li ul.дети li.bypostauthor <> .список комментариев li ul.дети li.comment-author-admin <> #cancel-comment-reply <> #cancel-comment-reply a <>

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

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

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

Разный цвет фона для четных и нечетных комментариев — это тенденция дизайна, которая существует уже несколько лет. Это улучшает читабельность, особенно если у вас много комментариев. Она также очень хорошо смотрится с определенными цветами темы, поэтому многие дизайнеры хотят использовать эту функцию. Чтобы помочь дизайнерам достичь этой цели, WordPress добавляет четный и нечетный класс к каждому комментарию соответственно.

Вы можете легко добавить четный/нечетный стиль для комментариев в стиле вашей темы.css, вставив следующий код.

.список комментариев .даже .комментарий < background-color:#ccddf2; >.commentlist .странный .комментарий

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

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

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

.comments-area article header

Вот как это должно выглядеть:

Стилизация комментариев автора поста по-другому

Часто можно заметить, что комментарии автора поста выделяются либо другим цветом фона, либо каким-то дополнительным значком. WordPress добавляет класс bypostauthor по умолчанию ко всем комментариям, сделанным автором поста. Разработчики тем WordPress могут использовать этот класс для различной стилизации комментариев авторов постов.

Некоторые темы используют свою собственную функцию обратного вызова для отображения комментариев. Используя функцию обратного вызова, эти темы могут добавлять в комментарий дополнительную информацию по автору поста. Например, в Twenty Twelve используется следующая строка в функции обратного вызова комментария twentytwelve_comment() (находится в functions.php файл темы).

// Если текущий автор поста также является автором комментария, сделайте это визуально. ( $comment->user_id === $post->post_author ) ? ' ' . __( 'Post author', 'twentytwelve' ) . '' : '' );

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

Если вы используете тему, отличную от Twenty Twelve, то вам необходимо выяснить, как ваша тема обрабатывает комментарии. Просто откройте комментарии вашей темы.php файл. Если ваша тема использует собственную функцию обратного вызова, то вы увидите ее внутри функции wp_list_comments, вот так:

 'twentytwelve_comment', 'style' => 'ol' ) ); ?>

В приведенном выше примере видно, что тема использует twentytwelve_comment в качестве функции обратного вызова. Если указана функция обратного вызова, то наиболее вероятное место нахождения этой функции — в функциях вашей темы.php-файл.

В данном примере мы изменяем эту функцию, чтобы вместо автора поста отображался редактор. Для этого мы изменили функцию обратного вызова комментария следующим образом:

// Если текущий автор поста также является автором комментария, сделайте это визуально. ( $comment->user_id === $post->post_author ) ? ' ' . __( 'Editor', 'twentytwelve' ) . '' : '');

Мы также изменим то, как это выглядит, добавив в стиль нашей темы следующее.css-файл выглядит следующим образом:

li.bypostauthor cite span

Вот как это будет выглядеть:

Стилизация ссылки ответа на комментарий в комментариях WordPress

Большинство тем WordPress имеют ссылку для ответа под каждым комментарием. Эта функциональность отображается только в том случае, если у вас включены потоковые комментарии. Чтобы включить потоковые комментарии, перейдите в админку WordPress (Настройки » Обсуждение). Посмотрите раздел, где говорится о других настройках комментариев, и установите флажок для включения потоковых (вложенных) комментариев.

CSS-классы по умолчанию, генерируемые WordPress для ссылки ответа, — reply и comment-reply-link . Мы будем использовать эти классы для изменения ссылки ответа и превращения ее в кнопку CSS.

.ответ < float:right; margin:0 10px 10px 0; text-align:center; background-color: #55737D; border:1px solid #55737D; border-radius:3px; padding:3px; width:50px; box-shadow: 1px 1px 2px 2px #4f4f4f; >.статья комментария < padding-bottom:2.79rem; >a.comment-reply-link, a.comment-edit-link < color: #FFFFFF; font-size: 13px; font-size: 0.928571429rem; line-height: 1.846153846; text-decoration:none; >a.comment-reply-link:hover, a.comment-edit-link:hover

Вот как это будет выглядеть:

Стилизация кнопки редактирования комментария

В большинстве тем WordPress пользователи, вошедшие в систему и имеющие возможность редактировать комментарии, видят ссылку на редактирование комментария под каждым комментарием. Вот небольшой CSS, который использует класс по умолчанию comment-edit-link для изменения внешнего вида ссылки.

a.comment-edit-link

Вот как это будет выглядеть:

Стилизация Отменить комментарий Ответить Ссылка

В большинстве хороших тем WordPress, нажатие на ссылку Ответить открывает форму комментария чуть ниже комментария, на который вы отвечаете, со ссылкой для отмены ответа на комментарий. Давайте изменим эту ссылку отмены ответа на комментарий, используя стандартный CSS ID cancel-comment-reply .

#cancel-comment-reply-link

Вот как это будет выглядеть:

Стилизация формы комментариев WordPress

Удобные, эстетически приятные и стильные формы комментариев побуждают пользователей оставлять комментарии на вашем блоге. Ранее мы уже писали подробную статью о том, как стилизовать форму комментариев WordPress. Мы настоятельно рекомендуем вам проверить это, чтобы увидеть, как вы можете поднять форму комментариев WordPress на новый уровень.

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

Источник: www.wpbeginner.com