Этот пост тоже из серии Украшаем комментарии в WordPress и Украшаем комментарии в WordPress – часть 2. На самом деле, я, прикрутив кнопку во второй части, грешным делом подумал, что вроде уже все сделал, и вот-вот, чуть-чуть осталось. Ан нет! Сев вчера в очередной вечер за компьютер, я оглядел грустным взором порядка двадцати открытых вкладок в опере с тем, что я еще хотел бы попробовать сделать на этом незатейливом авторском проекте, и относящихся именно к комментированию.
Должен покаяться, я немного покривил душой, данные действия относятся не только к украшению комментариев, но и к их улучшению и тюнингу. Так или иначе, но я приступил к реализации. Первым делом, естественно, проглядел по диагонали все вкладки, четверть из них закрыл, как не несущих никакой смысловой нагрузки, и представляющих из себя явное передирание контента с одного блога на другой без внесения чего-либо своего, а еще четверть – как не имеющее к теме никакого отношения, ну либо не очень заинтересовавшее меня. Но тем не менее, еще с десяток оставалось, ими-то я и занялся вплотную.
Начал я естественно с того, что попроще. Всем известно, что в случае, если комментарии не допускаются до опубликования, а отправляются в очередь на модерацию, то к автору блога приходит соответствующее письмо, предлагающее заняться выполнением непосредственно супружеского авторского долга. Мелкая неувязка заключается в том, что приходят они с е-мэйл адреса типа WordPress <wordpress@site.ru>.
А по слухам, если кто-то подписался на комментарии, то, цитирую: “в поле “От” вставляет имя, которое у вас указано в профиле, и e-mail оттуда же” . Так вот если мы хотим изменить это на любой другой е-мэйл – то нет ничего проще: используем весьма подробно описанный здесь хак, и добавляем код из 6 строк в самый конец файла functions.php. У меня, к примеру, код получился такой:
|
1 2 3 4 5 6 |
<?php function res_fromemail($email) { return 'chewriter@chewriter.ru'; } function res_fromname($email){ return 'Дмитрий Черайтер'; } add_filter('wp_mail_from', 'res_fromemail'); add_filter('wp_mail_from_name', 'res_fromname'); ?> |
Как мне кажется, теперь присылаемое письмо стало выглядеть слегка получше.
Также несложной задачей оказалась настройка самоочистки корзины, в которую тоннами летели тестовые комментарии, когда я применял ту, или иную функцию, и смотрел, как она работает. С удивлением я узнал, что корзина самоочищается сама через 30 дней (RTFM!). Но можно этот процесс и ускорить, и даже вообще – свести на нет, т.е. комментарии будут удалятся, что называется, минуя корзину – сразу и навсегда. Прекрасно описано вот здесь.
Мудрить я ничего не стал, а взял wp-config.php, находящийся в корневой папке сайта, и вставил в него, ближе к концу, описанный код, правда изменив число дней с 1 на 3:
|
1 2 |
/* Очищаем корзину раз в три дня, если будет 0 - значит она будет отключена, и в нее вообще ничего попадать не будет */ define('EMPTY_TRASH_DAYS', 3); |
Следующей задачей по украшательству стало желание пронумеровать комментарии. Вообще, чтобы выполнить ту, или иную задачу, я где-то в 50% пользуюсь каким-либо плагином, либо вношу изменения в код – либо темы, либо самого вордпресса. В этом случае я посмотрел на самый популярный плагин – и как-то он мне не понравился, и нумерацию комментариев решил делать вручную. Описание и код этого нашел здесь. Но оказалось все не так просто. Во-первых, когда я открыл файл моей темы comments.php, то естественно, ничего похожего на mytheme_comment я там не нашел. Стал смотреть, где же они вызываются, т.е. искать строчку wp_list_comments в нем. Ну, это оказалось не сложно – вот она:
|
1 2 3 |
<?php wp_list_comments(array( 'callback' => 'templatelite_comment' )); ?> |
Отлично, мы теперь знаем, что она вызывается и называется templatelite_comment. Открываем functions.php темы, и начинаем там ее искать. Ничего не находим. Ну ладно, открываем каталог с темой на локальном компьютере в Total Commandere, и запускаем поиск по тексту во всей папке темы в php файлах. Через 5 секунд получаем результат: файл theme-functions.php. Оказалось, что его запихнули не в корень темы, а аж в httpdocs/wp-content/themes/coffeedesk/includes/ – попробуй там его найди.
Ок, открываем, начинаем редактировать. Находим функцию templatelite_comment, у меня она выглядела так:
|
1 2 3 4 5 |
function templatelite_comment( $comment, $args, $depth ) { $GLOBALS['comment'] = $comment; switch ( $comment->comment_type ) : case '' : ?> |
Поскольку комментарии у меня (теоретически) бьются на страницы, то вставить простой код не получится. Поэтому разбиваем ее на пополам, и вставляем мудреный код, найденный по вышеуказанной ссылке. В итоге получилось так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
function templatelite_comment( $comment, $args, $depth ) { $GLOBALS['comment'] = $comment; // Сюда вставили калькулятор страниц, чтобы правильно посчитать комментарии, если страниц больше одной #Get the current comment page and calculate preceeding comments if ( '' === $args['per_page'] && get_option('page_comments') ) $args['per_page'] = get_option('comments_per_page'); if ( empty($args['per_page']) ) { $args['per_page'] = 0; $args['page'] = 0; } if ( $args['per_page'] ) { if ( '' == $args['page'] ) $args['page'] = get_query_var('cpage'); } $ccomp = ($args['page']-1) * $args['per_page'] ; #Comment counter global $comment_num; if(isset($comment_num)) { $comment_num++; } else { $comment_num = 1; } // Здесь он заканчивается switch ( $comment->comment_type ) : case '' : ?> |
Теперь начиналось самое сложное – куда именно вставить счетчик комментариев. Автор у себя предлагал использовать достаточно простой вариант – в нужное место вставить код
|
1 |
<?php echo $comment_num + $ccomp; ?> |
Но мы пойдем другим путем. У меня блок с комментарием выводился таким образом – сразу после функции шел следующий код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>"> <div id="comment-<?php comment_ID(); ?>"> <div> <?php echo get_avatar( $comment, 40 ); ?> <?php printf( __( '%s <span>says:</span>', 'templatelite' ), sprintf( '<cite>%s</cite>', get_comment_author_link() ) ); ?> </div><!-- .comment-author .vcard --> <div> <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"> <?php printf( __( '%1$s at %2$s', 'templatelite' ), get_comment_date(), get_comment_time() ); /* translators: 1: date, 2: time */ ?> </a> <?php edit_comment_link(__('Edit','templatelite'),'(',') ');?> </div><!-- .comment-meta .commentmetadata --> |
Вот его то я и решил курочить. Самое простое – было бы просто вставить функцию, выводящую номер комментария перед строкой, где выводится дата комментария, т.е. перед вот этим:
|
1 |
<a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"> |
Но выглядело не очень красиво, и не очень понятно – к чему вообще там эта цифра, что она означает. Тогда было решено, что номер надо снабдить словом комментарий, и вынести на отдельную строчку, выше всех. Да так, чтобы он еще и ссылкой на сам комментарий был, т.е. если кто-то захочет сослаться не на статью, а на комментарий к ней – мог бы просто скопировать ее, и вставить у себя в текст. Сначала не получалось вообще ничего – слово не выводилось, стиль из css тот же, что дату выводит – не применялся, а если применялся – то выводил следующую строку на другом уровне, смещая ее по окончании первой фразы. В результате было решено переделать код с echo на printf, и взять стили не из css, а напрямую прописать, и для перевода строки поставить тег br вместо пхп-шного /n. В итоге. Было:
Визуально стало выглядеть так:
Что к чему – подробно в тексте статьи рассказывать не буду – просто приведу код, в который я внес поясняющие комментарии – там все понятно.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>"> <div id="comment-<?php comment_ID(); ?>"> <div> <?php echo get_avatar( $comment, 50 ); ?> <!-- Поменяли размер аватара с 40 на 50 --> <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>" style="color:#000000; text-decoration:none; font-size:10px; border:none;"><!-- Привязали к номеру комментария ссылку на него --> <?php printf( __( '%1$s %2$s', 'templatelite' ), '<i>Комментарий № </i>', $comment_num + $ccomp ); ?><!-- Вывели фразу Комментарий № и сам номер --> </a><br /><!-- Перенесли автора на следующую строку --> <?php printf( __( '%s <span>says:</span>', 'templatelite' ), sprintf( '<cite>%s</cite>', get_comment_author_link() ) ); ?> </div><!-- .comment-author .vcard --> <div> <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"> <?php printf( __( '%1$s at %2$s', 'templatelite' ), get_comment_date(), get_comment_time() ); /* translators: 1: date, 2: time */ ?> </a> <?php edit_comment_link(__('Edit','templatelite'),'(',') ');?> </div><!-- .comment-meta .commentmetadata --> |
Итак, все стало ну просто замечательно, за исключением того, что встала небольшая проблема – аватарки – рассчитаны на две строки, а у нас – три. Ну, это фиксится просто, в строчке
|
1 |
<?php echo get_avatar( $comment, 40 ); ?> |
Меняем 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%;
}
И понятно, что за расположение этой картинки как раз отвечала самая последняя строчка
|
1 |
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 просидел, прежде чем догадался сделать
|
1 |
background-position: 300px 3px; |
без всяких аргументов top и left. После чего все браузеры стали отображать ее в нужном месте. Ну или почти в нужном. Потому что в древовидных комментариях форма немного смещается, и чтобы это компенсировать, я сделал то, что в руководстве описано не было – а именно объединил одновременно проценты % и пиксели px. Таким образом, моя картинка стала плавающей влево-право, и жестко привязанной сверху.
А код получился такой (сверху стало не 3 пикселя, а 6, т.к. я слегка увеличил шапку комментария, введя туда его номер:
|
1 2 3 4 5 6 7 |
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% 6px; } |
Очень долго промучался с наследованием стиля древовидных комментариев – если я давал ответ на какой-нибудь комментарий, то стиль CSS 3 наследовался и на всю дальнейшую его ветку, т.е. у человека, ответившего уже на мой комментарий, тоже возникали все радости – картинка автора, белый фон и бордюрчик, отличить его от меня – было нереально. Копался чертову тучу времени, прежде чем прочитал наконец-то про дочерние селекторы здесь. Посмотрел, как выводится у меня. Оказалось, что так:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<ol class="commentlist"> <li class="comment even thread-even depth-1" id="li-comment-531">/* Это чей-то комментарий №531 */ <div id="comment-531"></div> /* Это чей-то комментарий №531 */ <ul class="children"> <li class="comment byuser comment-author-chewriter bypostauthor odd alt depth-2" id="li-comment-532">/* Это мой ответ на комментарий №531 */ <div id="comment-532"></div> /* Это мой ответ на комментарий №531 */ <ul class="children"> <li class="comment even depth-3" id="li-comment-689"></li>/* Это уже мне ответили №689 */ <div id="comment-689"></div> /* Это уже мне ответили №689 */ </ul> </li> <li class="comment odd alt depth-2" id="li-comment-688"></li> </ul> </li> </ol> |
Т.е. комментарий 689 тоже становился авторским из-за наследования свойств div-а. После этого все сразу стало на свои места. И всего-то – первую строчку надо было изменить буквально чуть-чуть:
|
1 |
ol.commentlist li.bypostauthor>div{ |
Что она означает? Очень просто. Список, имеющий тег ol c class=commentlist, в котором в обязательном порядке должен содержится список li c class=bypostauthor (не важно, на каком уровне), в случае, если будет иметь внутри себя какой-либо див, не важно с каким классом – то этот див получит этот стиль. А знак “>” означает, что это будет действовать только для самого первого уровня вложенности тега дива в тег li, не распространяясь на все последующие дивы, (как было бы, если бы мы знак “>” не поставили). И всего-то.
А потом еще и скруглил уголки у бордюрчиков, вставив код под бордюр:
|
1 2 3 4 |
-o-border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; |
Код -o – озночает, что это для оперы, -webkit – для сафари/хрома, -moz – для файрфокса. Обычных пользователей тоже не забудем, добавив тот же код под
|
1 |
ol.commentlist .comment div, |
Ну и до кучи – добавим тени, чтобы было вроде-как трехмерно.
|
1 2 3 |
li.comment>div { box-shadow:2px 2px 4px 0px #555555; } |
Обращаю внимание, что тень необходимо добавлять отдельной строкой, чтобы она добавилась только ко всему контейнеру с комментарием, а не к каждой его части. Итого получилось:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
ol.commentlist .comment div, ol.commentlist .trackback div, ol.commentlist .pingback div{ padding:5px; background: #FAF5D3; -o-border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; } li.comment>div { box-shadow:2px 2px 4px 0px #555555; } |
и
|
1 2 3 4 5 6 7 8 9 10 11 |
ol.commentlist li.bypostauthor>div{ /* CSS стиль для автора */ padding: 5px; border: 2px solid #8bb549; -o-border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; background: url('http://chewriter.ru/wp-content/themes/coffeedesk/images/avtor.png') no-repeat scroll 0 0 transparent; background-position: 95% 6px; } |
И тоже самое для формы отправки комментирования:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#respond { clear:both; padding:5px 10px 5px 5px; margin:15px 0px 0px 0px; font-size:11px; background: #FAF5D3; border:1px #B1A074 solid !important; -o-border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; box-shadow:2px 2px 4px 0px #555555; } |
Вот что получается:
О том, как я делал поля для ввода такими, как они на этом скриншоте – я расскажу отдельно.
Честное слово, css, особенно его 3 реинкарнация – это гениальнейшая штука.
Следующим пунктом моей программы – стало изменение текста под полем для ввода комментария (только отмечу, что все нижеприведенные скриншоты были сняты еще до того, как было прикручено скругление уголков и теней). По умолчанию там выводится информация о том, какие теги можно использовать при комментировании:
Но мы-то помним, что не так давно прикрутили визуальный редактор к комментариям, поэтому смысла в этой строке нет никакого. Конечно, можно ее просто удалить, закомментировав одну строчку кода
|
1 |
<?php echo $args['comment_notes_after']; ?> |
в файле comment-template.php, лежащего в папке wp-include (не в теме!). Но лучше – изменить его на что-нибудь полезное, например – на правила, по которым комментарии допускаются к публикации. Для этого ищем в том же самом файле строчку, начинающуюся на
|
1 |
'comment_notes_after' => '<p class="form-allowed-tags">' |
и в ней меняем информацию, выводимую тегом sprintf. При этом – заголовок немного причешем, заключив его в тег span с атрибутами, меняющими его цвет, стиль и размер, а непосредственно информацию – выведем нумерованным списком, заключив ее в теги ol и li. У меня получилось так:
|
1 |
'comment_notes_after' => '<p class="form-allowed-tags">' . sprintf( __( '<span style="color:#81993B; font-weight:bold; font-size:12px; border:none;">Комментируя, помни:</span><ol><li> Предупреждение первое</li><li> О благодарностях</li><li>Дисклаймер/li></ol>' ), ' <code>' . allowed_tags() . '</code>' ) . '</p>', |
Возможно, правильнее было бы отредактировать файл ru_RU.po, но больно уж ломало. Также по причине излишней лени и желания, чтобы информация всегда была перед глазами, не стал делать скрывание посредством ява-скрипта, как описано здесь. В результате картинка выглядит следующим образом:
Ну и совсем последнее, что я хотел добавить – это описанный здесь (кстати, там много чего еще интересного описано, кое-что я уже сделал, кое-что – решил не делать, но вдруг кому пригодится) хак, который позволяет выводить на самой странице статьи в комментариях ссылку не только на редактирование поста, но и на его удаление и размещение в спам.
Все оказалось собственно, как и рассказывал автор – вставляем в functions.php который лежит в теме код:
|
1 2 3 4 5 6 |
function delete_comment_link($id) { if (current_user_can('edit_post')) { echo ' <a href="'.admin_url("comment.php?action=cdc&c=$id").'">(Удалить)</a>'; echo ' <a href="'.admin_url("comment.php?action=cdc&dt=spam&c=$id").'">(Спам)</a>'; } } |
А потом – опять небольшая загвоздка, которую, впрочем, мы уже проходили. Код
|
1 |
<?php delete_comment_link(get_comment_ID()); ?> |
вставляется после кода редактирования
|
1 |
<?php edit_comment_link(__('Edit', |
не в указанном файле wp-includes/comment-template, а в файле wp-content/themes/coffeedesk/includes/theme-functions.php. А я минут 5 удивлялся, почему же у меня не появилось ссылок.
Вот что вышло:
Ну а продолжение того, как я украшал комментарии – будет завтра. Нас ждет добавление возможности для пользователей редактировать свои комментарии (и много чего еще интересного с ними делать для админа), а также прикручивание подписки на комментарии.
Добавить комментарий