Стиль комментариев админа в Вордпресс
Предыстория написания этой статьи — типична: решила я выделить свои комментарии отдельным стилем… Благо, уже не первый день кромсаю style.php и основные правила синтаксиса CSS мне известны. И, конечно, эта невинная затея обернулась небольшим конфузом, поисками решения… В финале все удалось. А теперь я хочу рассказать вам, какие магические пассы я применила для украшения собственных комментов.
Смысл всех манипуляций, которые описаны далее — выделить ваши комментарии и ответы читателям. Если не переборщить со стилями, то получится вполне элегантно. Конечно, это не жизненная необходимость. Тот, кто решил просмотреть ваши комментарии — смогут это сделать по нику. Но идея красоты — тоже важна для многих блоггеров.
К тому же, если обратить внимание, как оформлены ответы автора на многих крупных и продуманных сайтах (например, smashingmagazine) — мы увидим отдельный стиль для них. Очевидно, это поможет улучшить юзабилити.
Особенно важно применение отдельного стиля для комментов автора на блогах, где разрешены древовидные комментарии с достаточно глубокой степенью вложенности. Говоря проще, где пользователь может отвечать на комментарии, отвечать на ответы и так далее.
Посмотрим стили комментов, которые уже используются
Не удивляйтесь, что я предлагаю, как бы, начать с конца. Но для пользователей, которые не вполне свободно себя чувствуют в редактировании тем Вордпресс — это наиболее наглядный и явный путь.
Итак, выберите на своем блоге пост, к которому оставлены комментарии. Конечно, нужно, чтобы были здесь и ваши ответы. Открыв такую страницу, кликните по ней правой кнопкой мыши и выберите «Просмотр кода страницы» (в браузерах Гугл Хром и Файерфокс — точно есть такая возможность).
Не пугайтесь, увидев простыню кода. На самом деле, ничего сложного и тайного тут нет. Прокручивайте страницу вниз и заметите, что сначала выводятся общие сведения о посте, потом его текст с форматированием. Ниже, наконец, будет код, относящийся к комментариям. Можете просто набрать Ctrl+F , в появившемся окошке ввести commentlist и нажать Enter — вас сразу «перебросит» на нужную строку, где искомое слово будет ярко подсвечено.
Теперь смотрим, как размечены стили наших комментариев. Для наглядности код из моей темы. Конечно, у вас он может выглядеть и быть структурирован чуть иначе, но основной смысл отдельных частей кода должен быть понятен:
<li class="comment even thread-even depth-1 parent" id="comment-8958"> <div id="div-comment-8958" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">НИК КОММЕНТАТОРА</cite><span class="says">:</span> </div> <div class="comment-meta commentmetadata">ЗДЕСЬ ВСЯКИЕ ТЕХНИЧЕСКИЕ ДАННЫЕ О КОММЕНТЕ, ССЫЛКИ ДЛЯ ЕГО РЕДАКТИРОВАНИЯ И Т.Д.</div> <p>ТЕКСТ КОММЕНТА</p> <div class="reply"> ЗДЕСЬ ДАННЫЕ ДЛЯ КНОПКИ "Ответить"</div> </div> <ul class="children"> <li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" id="comment-8961"> <div id="div-comment-8961" class="comment-body"> <div class="comment-author vcard"> <cite class="fn">ВАШ НИК</cite><span class="says">:</span> </div> <div class="comment-meta commentmetadata">ЗДЕСЬ ВСЯКИЕ ТЕХНИЧЕСКИЕ ДАННЫЕ О КОММЕНТЕ, ССЫЛКИ ДЛЯ ЕГО РЕДАКТИРОВАНИЯ И Т.Д.</div> <p> ТЕКСТ ВАШЕГО ОТВЕТА</p> <div class="reply"> ЗДЕСЬ ДАННЫЕ ДЛЯ КНОПКИ "Ответить" </div> </div> </li>
Собственно, нам нужно найти только комменты с вашим ником (например, на этом блоге я пишу и отвечаю под ником Katyaru). И чуть выше нужная строка, которая начинается так:
<li class="comment byuser comment-author-admin bypostauthor odd alt depth-2" ...
Вот эти обозначения класса — comment byuser comment-author-admin bypostauthor odd alt depth-2 — нас интересуют. Что они значат? — comment «стиль коммента» byuser «стиль зарегистрированного юзера» comment-author-admin «стиль автора-админа» bypostauthor «стиль автора поста» odd «стиль четного комментария» (или even — «нечетный») alt «стиль ответного комментария» depth-2 «глубина вложенности комментария — 2″
Внимание: если вы разумно поменяли свой логин для входа на блог с «admin» — на какой-нибудь другой, то название стиля будет выглядеть так comment-author-ВАШ ЛОГИН. Именно логин для входа в админку, а не тот ник, которым вы подписываетесь!!!
Тут возможны варианты. Возможно, комментаторы на вашем блоге должны быть зарегистрированными пользователями. Возможно, автором поста являетесь не вы, а другой зарегистрированный пользователь — без прав админа. Но админ-то на блоге только один — и это вы! Поэтому следует обратить внимание именно на comment-author-admin (или comment-author-ВАШ ЛОГИН) — он должен быть уникален для всех ваших комментариев.
В общем, алгоритм действий таков:
- Смотрим код комментариев и находим, чем (наличием какого стиля) ваши комменты отличаются от комментов всех остальных юзеров (просто читателей, зарегистрированных пользователей, авторов и т.д.)
- Потом находим этот стиль в таблице стилей и дописываем его
Добавление специального стиля для комментов админа блога
Открываем страницу с таблицами стилей в админке блога style.php — лучше предварительно сделать backup темы или, по крайней мере, скопировать весь код с этой страницы и сохранить его отдельным файлом в блокноте. Тогда вы сможете восстановить стили без ошибок, которые мы готовимся сделать 
Находим описание стиля комментариев, используя для поиска слово commentlist. Напоминаю, что, в разных темах код выглядит отлично, но смысл везде — одинаков. Например, у меня, кроме всего прочего, есть такие строки:
ТУТ МОЖЕТ БЫТЬ МНОГО РАЗНОГО
ol.commentlist li.alt{}
ol.commentlist li.bypostauthor p{}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin{ВПИСЫВАЕМ СВОЙ СТИЛЬ}
ol.commentlist li.comment{}
ol.commentlist li div.comment-author-admin{ВПИСЫВАЕМ СВОЙ СТИЛЬ}
ТУТ МОЖЕТ БЫТЬ МНОГО РАЗНОГО
ol.commentlist li ul.children li.bypostauthor{}
ol.commentlist li ul.children li.byuser{}
ol.commentlist li ul.children li.comment{}
ol.commentlist li ul.children li.comment-author-admin{ВПИСЫВАЕМ СВОЙ СТИЛЬ}
ol.commentlist li ul.children li.depth-2{}
ol.commentlist li ul.children li.depth-2 li.comment-author-admin{ВПИСЫВАЕМ СВОЙ СТИЛЬ}
ol.commentlist li ul.children li.depth-3{}
ol.commentlist li ul.children li.depth-3 li.comment-author-admin{ВПИСЫВАЕМ СВОЙ СТИЛЬ}
И ТАК ДАЛЕЕТакие пустые фигурные скобочки {} показывают, что специальный стиль не задан. Именно эту пустоту мы и должны заполнить своим кодом.
Внимание: сначала нужно поменять в коде слово «admin» на ваш логин!!! Во всех строках, где используется название этого стиля!!!
Возможные стили для комментов админа
Мы уже договорились, что сильно наворачивать админские комменты не станем. Нужно лишь слегка их подчеркнуть. Например, я сделала толстую зеленую полосочку слева от моих ответов:
{border-left: groove #99ff33}
Можно, также, задать:
- цвет фона — background: #номер цвета;
- цвет текста — color: #номер цвета;
- рамку, вокруг коммента — border: толщина стиль #цвета;
- и т.д.
Напоминаю, что для любой работы с CSS просто незаменим справочник htmlbook — здесь столько полезной информации, что можно сойти с ума!
Послесловие…
В статье я сильно упростила взгляд на многие аспекты оформления комментариев. Сузила тему до изменения стиля комментов админа. Но, мне показалось, что именно так легче сделать еще один шаг в понимании структуры темы Вордпресс и работы с ней.
Информации об этом в Сети — безбрежный океан. Но многие авторы не объясняют, почему используют тот или иной путь. Например, при попытках изменить стили bypostauthor (как советуют некоторые инструкции) — у меня менялся стиль и вложенных комментов других авторов. И только работа с comment-author-admin дала нужный результат.
Уверена, что данный пост может вызвать множество вопросов. Ну так — на то и блог — будем разбираться вместе!
| Читайте БлоготеЙ! на Google+ | |
| Читайте БлоготеЙ! на Фейсбуке |
Кать, так классно получилось! сразу видно, кто тут главный!
[Ответить]
katyaru отвечает:
Январь 13th, 2014 at 11:09
[Ответить]
Это на всех темах менять можно? Чуть позже на своем попробую…
[Ответить]
katyaru отвечает:
Январь 13th, 2014 at 11:15
Конечно! Обязательно попробуй. Если что, то спрашивай — вместе разберемся!
[Ответить]
Действительно, теперь комменты выглядят очень стильно. Спасибо за информацию!
[Ответить]
katyaru отвечает:
Январь 13th, 2014 at 11:46
Старалась)))
[Ответить]
Это все невероятно сложно, как для чайника ))
[Ответить]
katyaru отвечает:
Январь 13th, 2014 at 11:47
Катя, ну хотя бы можно посмотреть на коды, не менять ничего — если страшно. Но стоит как-то менять статус «чайника» — на «кофейник»)))
[Ответить]
Молодец! В Новый год — в новом стиле!
[Ответить]
katyaru отвечает:
Январь 13th, 2014 at 15:01
Ну уж не перехваливай меня! Зелененькая полосочка слева — это, все-таки, не такой уж новый стиль))) Главное, мы знаем, как это сделать!
[Ответить]
Не, у меня слишком много блогов, чтобы еще в кодах ковыряться. тем более, что иногда приходится переустанавливать темы на более свежие и редактировать некоторые папки. Пусть уж комменты будут просто и без излишеств)))
[Ответить]
Ох, любим мы с тобой покопаться везде. Я, правда, не заморачиваюсь этим. Единственно — на сайте «Мой балкончик» стоит дискусс и к меня не получается там настроить цветовую гамму в комментариях.
[Ответить]
Очень интересно и подробно рассказали, спасибо, но это обязательно нужно применять, а то не всегда понятно, кто отвечает.
[Ответить]