Главная » Wordpress » Как выделить комментарии автора блога WordPress без плагина
как выделить комментарии автора

Как выделить комментарии автора блога WordPress без плагина

Совсем недавно я правил шаблон блога и делал страницу захвата для Алены. И одним из пожеланий в переделке шаблона было выделение комментариев автора блога. Попробовав всеми любимый плагин для этого дела, я столкнулся с его некорректной работой. А на самом деле чтобы выделить комментарии администратора плагин – это через чур!как выделить комментарии автора

Так как же повел себя плагин на блоге? Дело в том, что данный плагин (не буду его называть) некорректно ведет себя с древовидными комментариями на некоторых блогах. Вообще каждый шаблон – это отдельная долгая тема для обсуждений, и единого решения никогда не будет, так что в некоторых случаях приходится отказываться от плагинов и править шаблон самому или обращаться за помощью к специалистам.

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

Комментарии автора выделились цветом, но:

  • 1 помарка: фоновый цвет стал применяться ко всей ветке комментариев;
  • 2 помарка: все комментарии, независимо оставлены они автором или нет так же выделились.

Так как же применить выделение к комментариям автора самому и без использования плагина. Оказывается ответ лежит на поверхности – почти всю работу за нас сделала сама CMS WordPress – система управления контентом уже задала отдельный класс для комментариев автора, осталось только дописать необходимые стили для него.

Поэтому я решил попробовать на этом блоге как-то выделить мои комментарии и вот что из этого получилось:выделение комментария автора

Как мы видим комментарий admin’a отличается:

  • Фоновый цвет сменился фоновой картинкой;
  • Цвет текста стал черным;
  • Добавлена тень под блоком;
  • Изменены цвета границ;
  • Немного измены отступы вокруг аватара и др. незначительные изменения.

Как выделить комментарии автора.

А теперь опишем те действия, которые были предприняты. Для того чтобы понять с чего начать нам потребуется воспользоваться функцией браузера Google Chrome – “Просмотр кода элемента”, которая вызывается правой кнопкой мышки и кликом по соответствующему пункту. Затем отыскиваем ту часть, чтобы комментарий админа был полностью подсвечен.

Оказывается WordPress присваивает комментариям автора отдельный класс, у меня это выглядит вот так (обратите внимание, что весь комментарий выделен):класс комментария автора

В данном случае нас интересует только часть названия класса, у каждого оно может отличаться, в моем случае это “comment-author-admin” – не трудно догадаться, что именно так называются комментарии автора – admina.

Теперь находим ту площадь, которую нам необходимо поменять, например прямоугольник, где представлен текст комментария, аватарка и кнопка “Ответить”:выделяем текст комментария

За эту площадь у меня отвечает класс pcom.

Теперь наша задача состоит в следующем: необходимо чтобы фоновый цвет этой части в комментариях автора отличался. Для этого все лишь нужно дописать 1-2 строки в файле стилей – вот и вся работа плагина. Как считаете стоит ли устанавливать плагин ради нескольких слов? Я считаю, что это не очень рационально и все таки основы строения сайтов нужно знать – это всегда пригодится.

Итак, открываем файл style.css (Дизайн → Редактор) и добавляем в самый конец этого файла следующие строки:


/* Комментарии админа */
.comment-author-admin .pcom {
background: #f9f9f9;
}

Этой строчком мы дали следующую команду: фоновый цвет в комментарии админа должен быть таким #f9f9f9. А конкретнее: если это комментарий автора (comment-author-admin), то поле комментария (pcom) будет залито оттеноком белого цвета.

Как подобрать фоновый цвет можете посмотреть в этой статье: Коды цветов в html и css – все что нужно знать. Вместо цвета можно подставить картинку, а так же изменить размер, цвет текста и так далее.

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

Каждый шаблон по своему выводит комментарии и классы (блоки) практически всегда названы по-разному, поэтому данная статья лишь направит Вас в нужном направлении. Не существует такого метода, который бы подходил ко всем темам WordPress.

Вот таким вот не очень сложным способом мы выделили комментарии автора без плагина!

Если выделить комментарии ну никак не получается, можете обратиться ко мне. Будет интересно показать через скайп как это можно осуществить и на вашем блоге.

Комментировать через ВКонтакте:
Отзывов к посту "Как выделить комментарии автора блога WordPress без плагина" уже 22:
  • Владимир Жданов | 06.03.2013 в 17:49

    Отличный пост. Последнее замечание к месту, но лишь для авторского кода. В основном код генерирует движок. Я заметил, что у тебя оригинально выделены твои комменты. Вообще, Тох, молодец, раскрываешь глаза на такие вещи, что и в голову многим не придут. Не останавливайся, генерируй идеи, находи новые фишки. Молоцом! :idea:

    • admin | 06.03.2013 в 18:18

      Спасибо :smile: Да темы для постов сами меня находят.
      Кстати, по идее плагин добавляет одну строчку:
      .comment-author-admin {
      background: Цвет;
      }
      Так как на всех блогах комментарии автора в этом контейнере – называется одинаково

  • Serpent | 06.03.2013 в 17:53

    +1, плагин для этого совершенно не нужен. Примерно то же самое недавно делал у себя, только по отношению к анонсам статей. Не доделал. ))

    • admin | 06.03.2013 в 18:20

      Да, плагин вообще ни к месту – он делает одну строчку, задает цвет.
      По отношению к анонсам – это когда на главное записи отдельного автора выделены от записей других. Если так, то действительно может пригодиться, когда сайт ведут несколько людей – сразу визуально будет узнаваться авторство :shock:

      • Serpent | 06.03.2013 в 18:25

        Нет, нет, я просто отдельный вывод блогов делал через функцию the excerpt, потом настраивал. Как это относится к этому посту? Очень просто – способом поиска стилей для редактирования. ;-)

      • Андрей | 24.10.2015 в 16:05

        Здравствуйте, а можете помочь настроить стиль комментариев как у Вас на сайте? Я сколько не пробовал, не получается:(

  • Anna | 06.03.2013 в 18:24

    Здорово! Давно хотела как-то выделить у себя комментарии админа, но не хотела плагин ставить (и так 14 штук стоит). Пока читала, пробовала – ничего не вышло, но попробую позже разобраться в чем причина. А за статью спасибо!!! Это отличный вариант замены плагина ;-)

  • Катерина Брынина | 06.03.2013 в 18:35

    Спасибо! Давно хотела себе так сделать. Но даже не знала, что для этого плагин есть. А тут, оказывается, и без плагина все просто делается :)

  • Алёна Семёнова | 06.03.2013 в 18:41

    Отлично. Да, у меня это работало некорректно, но я рада, что ты нашёл решение, Антон.
    Потому что всё, что ты сделал на моём блоге – безупречно. :idea: А я, знаешь ли, привереда ещё та :arrow: :|

  • Искандер | 06.03.2013 в 19:04

    в вордпрессе все нужно делать средствами стилей и дополнительной настройки и прибегать к плагинам в исключителных случаях

  • Seoexam | 11.03.2013 в 14:17

    Я попробовал и ничего не получилось. Просто не разбираюсь в дизайне

    • admin | 11.03.2013 в 15:04

      ммм…
      попробую в самом конце style.css дописать
      .comment-author-admin {
      background: #ffffcc;
      }
      Этот блок WordPress у всех одинаково задает. На твоем блоге должен сработать именно такой вариант, у меня же он будет не очень корректен :(

  • Иван | 11.03.2013 в 17:21

    Плохо, что для внешних систем комментариев этот скрипт не подходит.

  • Екатерина Ярусова | 20.03.2013 в 14:06

    Хотела тоже у себя попробовать, но у меня уже комментарий автора выделяется. Недавно плагин установила для древовидных комментариев. Видимо, эта возможность в нём предусмотрена.

    • admin | 20.03.2013 в 14:23

      Он выделяет комментарий автора. Посмотрел как у вас реализованы комментарии – каждый в отдельном блоке. Плагин в вашем случае можно заменить вот такой строчкой:
      .chalt {
      background-color: #E2E2E2;
      }

  • Екатерина Ярусова | 20.03.2013 в 14:29

    Нет, не выделяется всё же автор в комментариях у меня. Посмотрела внимательнее сейчас у себя. Просто выделяется ответ на предыдущий комментарий. А так как отвечаю в основном я, то мой ответ и выглядит иначе :smile: Комментариев не так много, чтобы наглядно отследить.

  • артем | 22.05.2014 в 11:10

    к моему блогу код не подошел, а жаль((( цвет блока коммента автора не меняется ни в какую…

  • Елена | 27.09.2014 в 16:36

    У меня ни-че-го не получается :cry:
    До обновления движка мои комментарии были выделены (и не помню, как я это делала), а теперь всё слилось одним цветом. Ни плагин не помогает, ни правка css… А мне ещё так хочется картинку подложить под фон. Можно ли более подробный урок сделать на эту тему?

    • admin | 01.10.2014 в 10:00

      Может в новой версии движка что поменяли. Я то вообще на старье пока сижу

  • Алексей | 23.02.2015 в 16:03

    comment-author-admin – это уже указывает на то, что у вас логин в админку блога стандартен – admin. А как быть кто сделал другой логин и скрыл его в комментариях, то есть без comment-author-admin?

    • Елена | 02.03.2015 в 5:14

      Да в том-то вся и засада, что выделение комментариев автора – палка о двух концах. Судите сами. В целях безопасности на всех углах нам твердят, что нужно менять логин admin на что угодно. И это логично. Если у вас стандартный логин, то хакеру облегчается задача – остается подобрать только пароль. Но если нестандартный и вам вдруг захотелось выделить свои комментарии, то тут вы делаете хорошую услугу злоумышленнику, поскольку в коде вашего комментария он спокойно может увидеть логин. Как вариант избежать этого можно следующим способом: создать нового пользователя с правами, допустим, редактора и комментировать под его именем.

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: