Предыстория написания этой статьи — типична: решила я выделить свои комментарии отдельным стилем… Благо, уже не первый день кромсаю style.php и основные правила синтаксиса CSS мне известны. И, конечно, эта невинная затея обернулась небольшим конфузом, поисками решения… В финале все удалось. А теперь я хочу рассказать вам, какие магические пассы я применила для украшения собственных комментов.
Смысл всех манипуляций, которые описаны далее — выделить ваши комментарии и ответы читателям. Если не переборщить со стилями, то получится вполне элегантно. Конечно, это не жизненная необходимость. Тот, кто решил просмотреть ваши комментарии — смогут это сделать по нику. Но идея красоты — тоже важна для многих блоггеров.
К тому же, если обратить внимание, как оформлены ответы автора на многих крупных и продуманных сайтах (например, smashingmagazine) — мы увидим отдельный стиль для них. Очевидно, это поможет улучшить юзабилити.
Особенно важно применение отдельного стиля для комментов автора на блогах, где разрешены древовидные комментарии с достаточно глубокой степенью вложенности. Говоря проще, где пользователь может отвечать на комментарии, отвечать на ответы и так далее.
Посмотрим стили комментов, которые уже используются
Не удивляйтесь, что я предлагаю, как бы, начать с конца. Но для пользователей, которые не вполне свободно себя чувствуют в редактировании тем Вордпресс — это наиболее наглядный и явный путь.
Итак, выберите на своем блоге пост, к которому оставлены комментарии. Конечно, нужно, чтобы были здесь и ваши ответы. Открыв такую страницу, кликните по ней правой кнопкой мыши и выберите «Просмотр кода страницы» (в браузерах Гугл Хром и Файерфокс — точно есть такая возможность).
Не пугайтесь, увидев простыню кода. На самом деле, ничего сложного и тайного тут нет. Прокручивайте страницу вниз и заметите, что сначала выводятся общие сведения о посте, потом его текст с форматированием. Ниже, наконец, будет код, относящийся к комментариям. Можете просто набрать Ctrl+F , в появившемся окошке ввести commentlist и нажать Enter — вас сразу «перебросит» на нужную строку, где искомое слово будет ярко подсвечено.
Теперь смотрим, как размечены стили наших комментариев. Для наглядности код из моей темы. Конечно, у вас он может выглядеть и быть структурирован чуть иначе, но основной смысл отдельных частей кода должен быть понятен:
ТЕКСТ КОММЕНТА
- id="li-comment-">
comment_approved == "0") : ?>Обратите внимание, что мы не закрываем тег$depth,"max_depth" => $args["max_depth"]))); ?>
- , т.к. вордпресс автоматически создаст закрывающие теги в зависимости от разметки вложенных комментариев.
Будучи размещенным, данная функция будет вызываться при генерации комментариев и позволяет вносить в себя любые нужные правки. Фишка в том, что мы сделали все, что нам нужно, используя стандартную и достаточно ограниченную в настройках wp_list_comments()
А теперь давайте тряхнем стариной - вместе с wp_list_comments поставим цикл foreach
Такое использование позволит шаблону быть обратно совместимым со старыми версиями вордпресса.
Теперь, зная как настроить цикл комментариев, давайте модифицируем его под свои нужды и применим несколько прикольных трюков.
Реализуем постраничные комментарии
Заранее никто не знает, что контент на сайте может привлечь сотни комментариев. К чему я клоню — мы все суперзвезды и успех может придти неожиданно. Запись с сотней комментариев может быть безумно длинной для просмотра и перемотки. В общем, мы конечно не боимся вертикальной прокрутки (в отличие от горизонтальной), но границы должны быть у всего. Типичный пост с 60 комментариями может быть до 20 тыс. пикселей в высоту!
Великолепный способ навести порядок - это разбивать ленту комментариев на страницы и отображать их постранично.
Включив постраничную навигацию, не забудьте добавить в файл comments.php функции для вывода ссылок «Раньше» «Позже»
Эти ссылки будут автоматически появляться и разбивать простынку комментариев, при превышении заданного количества комментариев на одну страницу. Если комментариев меньше этого числа — ссылки не будут отображаться.
И здесь есть один подвох. Возникает известная сео проблема дублирования контента с постраничными комментариями. Это происходит из-за того, что создаются одинаковые урлы для каждой страницы комментариев
- https://yoursite.com/ghost-dad-rocked/
- https://yoursite.com/ghost-dad-rocked/comments-page-1/
- https://yoursite.com/ghost-dad-rocked/comments-page-2/
- https://yoursite.com/ghost-dad-rocked/comments-page-3/
Понятно, что на этих страницах разными будут только комментарии. Что еще больше ухудшает общую картину — каждый комментарий имеет свою собственную уникальную ссылку с временем публикации, что еще добавляет пачку дублей. Поэтому поисковый бот обнаружит один и тот же контент под огромным количеством разнообразных ссылок.
Чтобы избежать дублирования, есть несколько решений:
- Не использовать постраничные комментарии
- Использовать мета-теги для создания канонических урл для каждой записи
- Использовать плагин
Если ваш сайт супер-популярный или собирается таким стать, то конечно лучше использовать канонические урлы. Если же бурные обсуждения не планируются, то проще использовать традиционные простынки комментариев без разбития на страницы.
SEO for Paged Comments применяет еще более радикальный способ — убирая содержимое записи с страниц комментариев и заменяя на цитату или урезанную версию записи.
Реализуем вложенные комментарии
Вложенные древовидные комментарии позволяют посетителям писать ответ выбранному существующему комментарию, создавая развернутое обсуждение диалог. После активации этой возможности в настройках, возле каждого комментария появится ссылка «Ответить», позволяющая высказаться по конкретному комментарию.
До появления такой возможности существовал стиль ответа выбранному автору, используя в тексте комментария его имя и знак @, типа «@Вася ты не прав!» С некоторой трансформацией этот способ прижился во многих приложениях в интернете и живет до сих пор, например, в твиттере. А в современных версиях вордпресса такое упоминание не нужно использовать.
Теперь достаточно просто нажать на соответствующую ссылку «Ответить» и высказаться. После одобрения текста комментария он появится сразу же под комментарием, на который был написан.
Если ваш шаблон не поддерживает такой вид комментирования, есть легкий способ добавить такую возможность:
- Делаем резервные копии файлов, что по идее должно уже войти в привычку
- Включаем вложенные комментарии в настройках Параметры→Настройки обсуждения→Разрешить древовидные комментарии
- Добавляем следующий код в header.php сразу же перед wp_head()
- Добавляем в comments.php непосредственно перед закрывающим тегом
- Проверяем, что
Собственно, нам нужно найти только комменты с вашим ником (например, на этом блоге я пишу и отвечаю под ником Katyaru). И чуть выше нужная строка, которая начинается так:
Спасибо, у вас супер сайт!