Как украсить комментарии в Вордпресс — часть 3.

Как украсить комментарии в вордпресс - часть 3Этот пост тоже из серии Украшаем комментарии в WordPress и Украшаем комментарии в WordPress — часть 2. На самом деле, я, прикрутив кнопку во второй части, грешным делом подумал, что вроде уже все сделал, и вот-вот, чуть-чуть осталось. Ан нет! Сев вчера в очередной вечер за компьютер, я оглядел грустным взором порядка двадцати открытых вкладок в опере с тем, что я еще хотел бы попробовать сделать на этом незатейливом авторском проекте, и относящихся именно к комментированию.

Должен покаяться, я немного покривил душой, данные действия относятся не только к украшению комментариев, но и к их улучшению и тюнингу. Так или иначе, но я приступил к реализации. Первым делом, естественно, проглядел по диагонали все вкладки, четверть из них закрыл, как не несущих никакой смысловой нагрузки, и представляющих из себя явное передирание контента с одного блога на другой без внесения чего-либо своего, а еще четверть — как не имеющее к теме никакого отношения, ну либо не очень заинтересовавшее меня. Но тем не менее, еще с десяток оставалось, ими-то я и занялся вплотную.

Начал я естественно с того, что попроще. Всем известно, что в случае, если комментарии не допускаются до опубликования, а отправляются в очередь на модерацию, то к автору блога приходит соответствующее письмо, предлагающее заняться выполнением непосредственно супружеского авторского долга. Мелкая неувязка заключается в том, что приходят они с е-мэйл адреса типа WordPress <wordpress@site.ru>.

Отображавшийся до правки адрес

А по слухам, если кто-то подписался на комментарии, то, цитирую: «в поле “От” вставляет имя, которое у вас указано в профиле, и e-mail оттуда же» .  Так вот если мы хотим изменить это на любой другой е-мэйл — то нет ничего проще: используем весьма подробно описанный здесь хак, и добавляем код из 6 строк в самый конец файла functions.php. У меня, к примеру, код получился такой:

Как мне кажется, теперь присылаемое письмо стало выглядеть слегка получше.

Отображавшийся после правки адрес

Также несложной задачей оказалась настройка самоочистки корзины, в которую тоннами летели тестовые комментарии, когда я применял ту, или иную функцию, и смотрел, как она работает. С удивлением я узнал, что корзина самоочищается сама через 30 дней (RTFM!). Но можно этот процесс и ускорить, и даже вообще — свести на нет, т.е. комментарии будут удалятся, что называется, минуя корзину — сразу и навсегда. Прекрасно описано вот здесь.

Мудрить я ничего не стал, а взял wp-config.php, находящийся в корневой папке сайта, и вставил в него, ближе к концу, описанный код, правда изменив число дней с 1 на 3:

Следующей задачей по украшательству стало желание пронумеровать комментарии. Вообще, чтобы выполнить ту, или иную задачу, я где-то в 50% пользуюсь каким-либо плагином, либо вношу изменения в код — либо темы, либо самого вордпресса. В этом случае я посмотрел на самый популярный плагин — и как-то он мне не понравился, и нумерацию комментариев решил делать вручную. Описание и код этого нашел здесь. Но оказалось все не так просто. Во-первых, когда я открыл файл моей темы comments.php, то естественно, ничего похожего на mytheme_comment я там не нашел. Стал смотреть, где же они вызываются, т.е. искать строчку wp_list_comments в нем. Ну, это оказалось не сложно — вот она:

Отлично, мы теперь знаем, что она вызывается и называется templatelite_comment. Открываем functions.php темы, и начинаем там ее искать. Ничего не находим. Ну ладно, открываем каталог с темой на локальном компьютере в Total Commandere, и запускаем поиск по тексту во всей папке темы в php файлах. Через 5 секунд получаем результат: файл theme-functions.php. Оказалось, что его запихнули не в корень темы, а аж в httpdocs/wp-content/themes/coffeedesk/includes/ — попробуй там его найди.

Ок, открываем, начинаем редактировать. Находим функцию templatelite_comment, у меня она выглядела так:

Поскольку комментарии у меня (теоретически) бьются на страницы, то вставить простой код не получится. Поэтому разбиваем ее на пополам, и вставляем мудреный код, найденный по вышеуказанной ссылке. В итоге получилось так:

Теперь начиналось самое сложное — куда именно вставить счетчик комментариев. Автор у себя предлагал использовать достаточно простой вариант — в нужное место вставить код

Но мы пойдем другим путем. У меня блок с комментарием выводился таким образом — сразу после функции шел следующий код:

Вот его то я и решил курочить. Самое простое — было бы просто вставить функцию, выводящую номер комментария перед строкой, где выводится дата комментария, т.е. перед вот этим:

Но выглядело не очень красиво, и не очень понятно — к чему вообще там эта цифра, что она означает. Тогда было решено, что номер надо снабдить словом комментарий, и вынести на отдельную строчку, выше всех. Да так, чтобы он еще и ссылкой на сам комментарий был, т.е. если кто-то захочет сослаться не на статью, а на комментарий к ней — мог бы просто скопировать ее, и вставить у себя в текст. Сначала не получалось вообще ничего — слово не выводилось, стиль из css тот же, что дату выводит — не применялся, а если применялся — то выводил следующую строку на другом уровне, смещая ее по окончании первой фразы. В результате было решено переделать код с echo на printf, и взять стили не из css, а напрямую прописать, и для перевода строки поставить тег br вместо пхп-шного /n. В итоге. Было:

Комментарий без номера
Визуально стало выглядеть так:

Номер комментария в первой строчке

Что к чему — подробно в тексте статьи рассказывать не буду — просто приведу код, в который я внес поясняющие комментарии — там все понятно.

Итак, все стало ну просто замечательно, за исключением того, что встала небольшая проблема — аватарки — рассчитаны на две строки, а у нас — три. Ну, это фиксится просто, в строчке

Меняем 40 на 50 — в коде выше я тоже это на всякий случай указал, и аватар становится побольше.

После того, как разобрались аватаркой, встал вопрос, как же быть с описанной в 1-ой части, и выплывшей не сразу проблемой отображения комментария автора, а вернее картинки, символизирующей ее. Картинка, смещавшаяся на комментарийНу, такого облачка с текстом, размещенного в правом верхнем углу.

Все дело в том, что ее (картинки) координаты были заданы в css стиле в процентах смещения от левой стороны и от верха. Т.е. после редактирования css-код в style.css, относящийся к комментарию автора, выглядел так:

ol.commentlist .bypostauthor .fn,
ol.commentlist .bypostauthor .fn a,
ol.commentlist .comment-author-admin .fn,
ol.commentlist .comment-author-admin .fn a,
ol.commentlist .comment-author-author .fn,
ol.commentlist .comment-author-author .fn a,
ol.commentlist .comment-author-editor .fn,
ol.commentlist .comment-author-editor .fn a,
ol.commentlist .comment-author-contributor .fn,
ol.commentlist .comment-author-contributor.fn a{
font-style:italic;
text-decoration:none;
border:none;
}
ol.commentlist .bypostauthor .fn,
ol.commentlist .bypostauthor .fn a{
text-decoration:underline;
}

ol.commentlist .bypostauthor div{
/* CSS стиль для ав бло */
padding: 5px;
border: 2px solid #8bb549;
background: url(«http://chewriter.ru/wp-content/themes/coffeedesk/images/avtor.png») no-repeat scroll 0 0 transparent;
background-position: 95% 3%;
}

И понятно, что за расположение этой картинки как раз отвечала самая последняя строчка

И если на коротеньких комментариях все было отлично — картинка находилась в верхней части комментария, примерно зеркально отражая аватарку (скриншот снят еще до прикручивания нумерации комментариев),

Положение картинки автора на коротких комментариях

то как оказалось, если комментарий автора был слишком длинный :), то эти 3%, на которые отступала верхняя граница картинки, оказывалась аккурат уже на самом тексте комментария.

Картинка налезает на текст

И эта проблема требовала решения. Вначале я залез в спецификацию css, и увидел, что их можно задать следующим образом, цитирую:

background-position: bottom 10px right 20px’ represents a ‘10px’ vertical offset up from the bottom edge and a ‘20px’ horizontal offset leftward from the right edge.

Ну, отлично, обрадовался я, сейчас пропишу что-то типа background-position: left 300px top 3px; он ее разместит в 300 пикселях от левого края, и в 3 пикселях от верхнего, и все будет хорошо. Ага, счаз. Opera отработала эту функцию —  ну просто на ура, выставив картинку куда надо. А вот  Google Chrome оказался совсем не восприимчивым к такой конструкции, и отказался background-position: размещать в заданном месте, закинув ее в левый верхний угол. Я, наверное, минут 20 просидел, прежде чем догадался сделать

без всяких аргументов top и left. После чего все браузеры стали отображать ее в нужном месте. Ну или почти в нужном. Потому что в древовидных комментариях форма немного смещается, и чтобы это компенсировать, я сделал то, что в руководстве описано не было — а именно объединил одновременно проценты % и пиксели px. Таким образом, моя картинка стала плавающей влево-право, и жестко привязанной сверху.

Стало после редактирования

А код получился такой (сверху стало не 3 пикселя, а 6, т.к. я слегка увеличил шапку комментария, введя туда его номер:

Очень долго промучался с наследованием стиля древовидных комментариев — если я давал ответ на какой-нибудь комментарий, то стиль CSS 3 наследовался и на всю дальнейшую его ветку, т.е. у человека, ответившего уже на мой комментарий, тоже возникали все радости — картинка автора, белый фон и бордюрчик, отличить его от меня — было нереально. Копался чертову тучу времени, прежде чем прочитал наконец-то про дочерние селекторы здесь. Посмотрел, как выводится у меня. Оказалось, что так:

Т.е. комментарий 689 тоже становился авторским из-за наследования свойств div-а. После этого все сразу стало на свои места. И всего-то — первую строчку надо было изменить буквально чуть-чуть:

Что она означает? Очень просто. Список, имеющий тег ol c class=commentlist, в котором в обязательном порядке должен содержится список li c class=bypostauthor (не важно, на каком уровне), в случае, если будет иметь внутри себя какой-либо див, не важно с каким классом — то этот див получит этот стиль. А знак «>» означает, что это будет действовать только для самого первого уровня вложенности тега дива в тег li, не распространяясь на все последующие дивы, (как было бы, если бы мы знак «>» не поставили). И всего-то.

А потом еще и скруглил уголки у бордюрчиков, вставив код под бордюр:

Код -o — озночает, что это для оперы, -webkit — для сафари/хрома, -moz — для файрфокса. Обычных пользователей тоже не забудем, добавив тот же код под

Ну и до кучи — добавим тени, чтобы было вроде-как трехмерно.

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

и

И тоже самое для формы отправки комментирования:

Вот что получается:

 

Делаем комментарии и форму более трехмерными

О том, как я делал поля для ввода такими, как они на этом скриншоте — я расскажу отдельно.

Честное слово, css, особенно его 3 реинкарнация — это гениальнейшая штука.

Следующим пунктом моей программы — стало изменение текста под полем для ввода комментария (только отмечу, что все нижеприведенные скриншоты были сняты еще до того, как было прикручено скругление уголков и теней). По умолчанию там выводится информация о том, какие теги можно использовать при комментировании:

Возможность использовать html теги - сейчас заменим на что-нибудь полезное

Но мы-то помним, что не так давно прикрутили визуальный редактор к комментариям, поэтому смысла в этой строке нет никакого. Конечно, можно ее просто удалить, закомментировав одну строчку кода

в файле comment-template.php, лежащего в папке wp-include (не в теме!). Но лучше — изменить его на что-нибудь полезное, например — на правила, по которым комментарии допускаются к публикации. Для этого ищем в том же самом файле строчку, начинающуюся на

и в ней меняем информацию, выводимую тегом sprintf. При этом — заголовок немного причешем, заключив его в тег span с атрибутами, меняющими его цвет, стиль и размер, а непосредственно информацию — выведем нумерованным списком, заключив ее в теги ol и li. У меня получилось так:

Возможно, правильнее было бы отредактировать файл ru_RU.po, но больно уж ломало. Также по причине излишней лени и желания, чтобы информация всегда была перед глазами, не стал делать скрывание посредством ява-скрипта, как описано здесь. В результате картинка выглядит следующим образом:

Поменяли код на информацию

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

Все оказалось собственно, как и рассказывал автор — вставляем в functions.php который лежит в теме код:

А потом — опять небольшая загвоздка, которую, впрочем, мы уже проходили. Код

вставляется после кода редактирования

не в указанном файле wp-includes/comment-template, а в файле wp-content/themes/coffeedesk/includes/theme-functions.php. А я минут 5 удивлялся, почему же у меня не появилось ссылок.

Вот что вышло:

Добавили ссылку на удаление и отправку в спам

Ну а продолжение того, как я  украшал комментарии — будет завтра. Нас ждет добавление возможности для пользователей редактировать свои комментарии (и много чего еще интересного с ними делать для админа), а также прикручивание подписки на комментарии.

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
2 комментария
  1. У меня на сайте текст комментариев совсем невидим, такой бледный, что увидеть что-либо невозможно, только тень. Что это может быть?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Subscribe without commenting

QR Code Business Card