Дизайн комментариев может показаться очень простым. И это! Но я думаю, что простое в этом случае эффективно. Комментарии являются такой важной частью CSS-трюков, что я хочу, чтобы они были удобочитаемыми и удобными.
Теперь мы собираемся перейти к WordPress и воплотить эту ветку комментариев в реальность. Первое, что мы делаем, это находим шаблон, в котором мы будем отображать комментарии. single.phpнаверное, самый важный (отдельные сообщения в блоге). В этом шаблоне мы обнаруживаем, что функция comments_template()- это все, что нам нужно вызвать, чтобы получить всю область комментариев. По сути, эта функция получает файл comments.phpи помещает его туда. Итак, мы начинаем смотреть на это.
Код в этом файле начинается с . Это очень уместно. Комментарии, безусловно, являются разделом, и у него должен быть идентификатор. Помните, что мы не делаем никаких стилей на основе идентификаторов, но если ваши комментарии будут заключены в элемент с идентификатором комментариев, это хорошо, потому что:
- Вы всегда можете добавить хэш-ссылку к комментариям, добавив #comments к URL-адресу.
- Люди, которые ненавидят комментарии, могут скрыть их в своей пользовательской таблице стилей с помощью предполагаемого идентификатора.
Мы продолжаем просматривать код в этом файле. Мы удаляем некоторые вещи, которые совершенно уверены, что не собираемся использовать. Мы меняем некоторые вещи, чтобы они соответствовали тому, что мы разработали в Photoshop.
Затем мы сталкиваемся с функцией, wp_list_comments()которая отвечает за вывод всей цепочки комментариев. Затем он выплевывает такие вещи, как форма для комментариев. В то же время существует логика, позволяющая показывать вещи в различных ситуациях, например, когда комментарии закрыты или когда комментарии открыты, но их нет.
Мы находим небольшую странную функцию, cancel_comment_reply_link()которую мы смотрим и видим, которая обрабатывает функциональность для перемещения формы комментария обратно вниз в случае, если была нажата ссылка ответа и форма переместилась вверх, но мы не хотели это к.
Затем мы копаемся в HTML, из которого получаем wp_list_comments(). Ничего не делая, мы получим HTML из этой функции, что вполне разумно. Но кроме того, это то, что есть, и не подходит для всех возможных дизайнов. Лично я предпочитаю полностью контролировать разметку. Поэтому вместо того, чтобы просто брать то, что он нам дает, мы берем на себя контроль, используя в нашем functions.phpфайле настраиваемую функцию, которая отменяет разметку по умолчанию.
Теперь, когда у нас есть элемент управления HTML, мы можем перейти в своего рода «режим дизайна», в котором мы перемещаемся между CSS и HTML, завершая наш дизайн. Комментарии CSS, как и любой другой небольшой модульный фрагмент CSS в этом проекте, мы передадим в файл _comments.scss, который мы можем включить в глобальный. Идеальный случай, когда имеет смысл выделить CSS в отдельный файл. Хотя мы должны использовать как можно больше глобальных стилей. Например, каждый комментарий определенно является a .module, стили заголовков здесь должны идеально подходить для имен, а типографика в целом должна исходить только из глобальных стилей типографики.
Мы даже используем нашу систему сетки в комментариях, поскольку каждый комментарий представляет собой сетку из двух столбцов. Другие мелочи полностью настраиваются для комментариев, например, где и как мы размещаем ссылки для ответа.
В конце скринкаста мы выясняем, что в нашем дизайне Photoshop есть один роковой недостаток. Вложенные комментарии живут внутри родительского комментария, и довольно сложно сделать так, чтобы наши вложенные модули выглядели как отдельные. Здесь нам, возможно, придется пойти на некоторые компромиссы.