Дизайн коментарів може виглядати дуже просто. І воно є! Але я думаю, що в цьому випадку ефективне просто. Коментарі - це така важлива частина 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 має одну фатальну ваду. Вкладені коментарі живуть у батьківському коментарі, і складно зробити так, щоб наші вкладені модулі виглядали так, ніби вони окремі. Можливо, нам доведеться піти на деякі компроміси тут.