Портал о бытовой технике
›

Происходящие добавить комментарий comment. Настраиваем комментарии в WordPress

(в которой мы убирали теги h3 в заголовке перед формой комментирования) — сегодня заставим функцию формы комментов WP работать целиком по нашим правилам:

получим возможность задавать собственные стили, менять на своё усмотрение заглавие «Добавить комментарий», исключать при необходимости определённые окошки ввода информации, например форму url, настраивать placeholder и т.д. а, главное, не потерять всё это при обновлении движка.

Нынче мы запросто выполним нашу цель, всего лишь редакцией файла функций. И коли вы чувствуете в себе силы редактировать код сайта (этот способ чуть сложнее от того, который описан ранее)…

Начнём концерт:

стоит ли редактировать ядро WordPress

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

стоит ли обновлять WordPress

Непременно да! …тут не может быть и разногласий! …однако это чревато, как и говорилось, тем что обновление движка затирает редакции администратора!

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

Таким образом выводить необходимые регулировки в файлы темы, чтобы на уровне шаблона управлять государством сайта: без всяких потерь)

Приступим к редакции, но!!

…напоминаю всякий раз: заведите какой-то документ «запоминалку» всех совершаемых эксов с блогом. Копируйте редактируемые файлы. Пригодится!

Поверьте: так короче до профессионализма, ибо возможность переварки накопленных крупиц знаний в кашу маловероятна!

Что нам нужно для достижения цели:

перенести из ядра WP (из файла comment-template.php) отработку функции comment_form в директорию шаблона.

где найти файл comment-template.php

Переходим по этому пути ваш_домен/wp-includes файл comment-template.php

…открываем его (или прямо на хостинге — я делаю так), или скачиваем и редактируем в Нотепад++ — читать: как настроить Notepad++

Ищите такую строку (примерный № строки 2111)

function comment_form($args = array(), $post_id = null) {

do_action("comment_form_comments_closed");

Всё это копируете и переносите к себе в файл функций functions.php .

Обычно, все новые добавления кода помещают перед закрывающим тегом?> . Но я рекомендую добавляемый код группировать, так сказать, по теме, тогда всё запросто при необходимости отыщете.

Следующим шагом будет изменение имени функции: можете назвать её как угодно душе, хоть именным вензелем обозначить… У меня получилось так:

function my_my_ comment_form

Сохраняем наработки…

…и переходим в файл вашей темы comments.php .

В этом файле нам нужно поменять имя вызова функции, на то, которым обозвали на первом шаге:

Отыскиваете в документе такую фразу (она обычно в его финале): и просто-напросто добавляете my_my_ ну или своё имя.

Должно получиться так:

…теперь задача вызова новой функции выполнена: логика шаблона станет использовать именно наш перекопированный в тему код!

Что нам и требовалось!

Теперь всё что вам остаётся выполнить, так это подредактировать под свои нужды код новоиспечённой функции my_my_comment_form();

…или задают индивидуальную отработку placeholder — посмотрите как выглядит это у меня:

…у меня в окошке формы комментирования расположен вензель «Ваш комментарий…» который исчезает, как только комментатор набирает своё послание…

…и тому… и тому… подобное.

Есть какие-то вопросы по добавлению/уборке элементов формы комментирования, пишите, разберёмся…

или вот можете почесть пост о полезных сниппетах (

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

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

Вот что мы сделаем:

  • Полная пользовательская настройка
  • Оформление внешнего вида
  • Нумерация комментариев
  • Подсчет сообщений каждого пользователя
  • Присвоить статус каждому пользователю
  • И прочее мелочи

Разберем каждый пункт в отдельности, а в конце статьи будет уже полностью собраны все функции в один готовый код.

Пользовательская настройка комментариев

В WordPress’e вывод комментариев осуществляется через функцию wp_list_comments , обычно в файле comments.php . А формирование отдельных функций так же, как и сам цикл, используется из шаблона системного файла comment-template.php . Но в редких случаях бывает, что настройка может находиться в теме WordPress, файл functions.php или comments.php .

Так вот, если ваша тема не попадает в редкий случай и есть необходимости сделать свои настройки, тогда открываем файл functions.php и перед знаком?> добавляем следующий код:

If (! function_exists("my_comment")) : function my_comments($comment, $args, $depth) { global $commentnumber; $GLOBALS["comment"] = $comment; switch ($comment->comment_type) : case "pingback" : case "trackback" : ?>

    • После этих манипуляций ваши комментарии будут формироваться по шаблонной функции из файла functions.php текущей темы.

    Подсчет комментариев каждого пользователя

    С помощью ниже представленной функции мы сможем вывести возле комментатора общее его количество оставленных сообщений. Таким образом, можно наблюдать насколько активный пользователь, да и потом, статистика не бывает лишней, тем более в этом плане.

    Открываем уже знакомый нам файл functions.php и прописывает в конце перед знаком?> следующий код:

    //подсчет сообщений пользователей function bac_comment_count_per_user() { global $wpdb; $comment_count = $wpdb->get_var("SELECT COUNT(comment_ID) FROM ". $wpdb->comments. " WHERE comment_author_email = "" . get_comment_author_email() ."" AND comment_approved = "1" AND comment_type NOT IN ("pingback", "trackback")"); if ($comment_count == 1) { echo " 1 Сообщение"; } else { echo " " . $comment_count . " Сообщений"; } }

    Теперь осталось добавить функцию вызова в нужное вам место:

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

    Присваиваем статус каждому пользователю в зависимости от количества его комментариев

    Вот как раз тот случай, где статистика определенно играет важную роль. Поскольку функция построена за счет количества сообщений, а в итоге достигнутого числа дает пользователю должный статус. Это, по идее, используется на каждом форуме для показа авторитетности юзера на данном ресурсе.

    Снова открываем файл functions.php и перед знаком?> добавляем следующий код:

    //статус пользователя function get_author_class($comment_author_email,$user_id){ global $wpdb; $adminEmail = get_option("admin_email"); $author_count = count($wpdb->get_results("SELECT comment_ID as author_count FROM $wpdb->АдминUseR"; if($author_count>=1 && $author_count=50 && $author_count=100 && $author_count=250 && $author_count=400 &&$author_count=800 && $author_countПрофессор"; }

    И в желаемом месте выводим функцию вызова:

    Объяснение: функция, как и предыдущая, связана с электронной почтой юзера. Только здесь основной задачей является непросто счет сообщений, а количество от и до в зависимости от установленного числа. И как только пользователь достигает его он получает определенную должность. Всего статусов имеется 7, плюс админ и знак отличия для зарегистрированных участников.

    Полностью готовый код комментариев

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

    Открываем файл functions.php и в конце перед знаком?> добавляем следующий код:

    //подсчет сообщений пользователей function bac_comment_count_per_user() { global $wpdb; $comment_count = $wpdb->get_var("SELECT COUNT(comment_ID) FROM ". $wpdb->comments. " WHERE comment_author_email = "" . get_comment_author_email() ."" AND comment_approved = "1" AND comment_type NOT IN ("pingback", "trackback")"); if ($comment_count == 1) { echo " 1 Сообщение"; } else { echo " " . $comment_count . " Сообщений"; } } //статус пользователя function get_author_class($comment_author_email,$user_id){ global $wpdb; $adminEmail = get_option("admin_email"); $author_count = count($wpdb->get_results("SELECT comment_ID as author_count FROM $wpdb->comments WHERE comment_author_email = "$comment_author_email" ")); if($comment_author_email ==$adminEmail) echo "Админ"; if($user_id!=0 && $comment_author_email !=$adminEmail) echo "UseR"; if($author_count>=1 && $author_count=50 && $author_count=100 && $author_count=250 && $author_count=400 &&$author_count=800 && $author_count=1200 && $comment_author_email !==$adminEmail) echo "Профессор"; } //пользовательская настройка комментариев if (! function_exists("wordsmall_comment")) : function wordsmall_comment($comment, $args, $depth) { global $commentnumber; $GLOBALS["comment"] = $comment; switch ($comment->comment_type) : case "pingback" : case "trackback" : ?> @ Ответ для:

    Меняем на эту:

    Заключительный шаг. Открываем файл style.css и в конце прописываем следующие стили:

    My_commentlist{ border-top:none; } .my_commentlist .comment{ padding:0 0 15px 0; border:none; } .my_commentlist .pingback{ padding:0 0 15px 0; border:none; } .my_commentlist .comment .children { list-style-type: none; padding:0px; margin-left:0px;/*если нужен отступ для древовидных ком. поставьте 15px*/ } .my_commentlist .comment .children .comment{ margin:15px 0 0 0; border:none; padding: 0; } #comments { background: #fff; } #comments .my_commentlist { margin: 10px 0; padding: 0; list-style:none; background: #ebf0f3; padding: 5px; } #comments .my_commentlist .comment { margin:0; padding: 0 0 10px; background: #fff; } #comments .my_commentlist .my_comment-author { display: inline; border-right: 1px solid #e0e0e0; width: 100px; float: left; margin: 0px 15px 10px 0; } #comments .my_commentlist .commentmetadata { float:left; } #comments .my_commentlist p { clear:none; color: #555; font: 14px arial; line-height: 23px; } #comments .my_commentlist .comment-content { margin-left: 116px; padding-right: 10px; } #comments .my_commentlist .reply { text-align:right; } #comments .my_commentlist .reply a{ background: #f5f5f5; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 2px; color: #515456; display: inline-block; font-size: 13px; font-weight: normal; line-height: 30px; margin-right: 15px; min-height: 30px; padding: 0 12px; text-align: center; text-decoration: none; } .my_commentlist .avatar{ border: medium none; border-radius: 50%; float: none; margin: 5px auto; padding: 0px; display: table; } .my_commentlist .comment-header{ height: 30px; background: #DEE5EB; margin-bottom: 15px; } .my_commentlist cite.fn{ color: #444; font: bold 13px/30px arial; padding-left: 10px; } .my_commentlist .com_date { color: #8ca0b5; font: normal 13px/30px arial; float: right; padding-right: 15px; } .my_commentlist .commentnumber { color: #8ca0b5; float: right; font: italic 13px/30px arial; padding-right: 15px; } .my_commentlist .comment-body { overflow: hidden; position: relative; background:#fff; } .my_commentlist .rep-authorcom { color: #25394e; font-size: 13px; line-height: 30px; } .my_commentlist .edit-link a { background: none !important; border: none !important; border-radius: 0 !important; color: #999!important; display: inline-block; font-size: 11px !important; font-weight: normal; line-height: 30px; margin-right: 5px !important; min-height: 30px; padding: 0 !important; text-align: center; text-decoration: none; } .com_per { border: medium none; color: #666; display: block; font-size: 11px; text-align: center; } .vip1,.vip, .vp, .vip2, .vip3, .vip4, .vip5, .vip6, .vip7 { border: medium none; font: bold 13px arial; display: block; text-align: center; margin-bottom: 5px; text-decoration: none; } .vp {color: #e82e24;} .vip1 {color: #348be8;} .vip2 {color: #BE005E;} .vip3 {color: #2e517e;} .vip4 {color: #658a18;} .vip5 {color: #00A56D;} .vip6 {color: #e35d28;} .vip7 {color: #99A400;} .vip {color: #4c5176;font-size: 11px;margin: 0;}

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

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

    В этой заметке вы узнаете один из самый простых (но, субъективно, один из наиболее предпочтительных) способов добавить комментарии на сайт - простой пример для новичков + варианты для более продвинутых веб-мастеров.

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

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

    Преимущества сторонних решений:

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

    Недостатки:

    • Скудное или полное отсутствие возможности изменить внешний вид блока с комментариями.
    • Индексация в поисковых системах.

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

    Но довольно теории, перейдем к практике.

    1. Простейший вариант - добавить комментарии с использованием какой-то выбранной соцсети.

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

    1) Добавляем в :

    VK.init({apiId: 2951023, onlyWidgets: true});

    2) Добавляем в том месте, где хотим видеть виджет комментариев (например, после заметки, если речь идет о блоге):

    VK.Widgets.Comments("vk_comments", {redesign: 1, limit: 10, width: "665", attach: "*"});

    2. Добавить виджеты из нескольких сервисов. Например, как на этом ресурсе. Переключаются табами:


    Добавляем в разметку (для корректной работы должен быть подключен twitter bootstrap!) в месте, где нужно вывести виджет комментариев :

    • Vkontakte

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

    Этого можно избежать, реализовав ленивую инициализацию виджетов комментариев . Сначала код целиком, потом разъяснение:

    (function(global, $) { "use strict"; $(function() { var $tabToggler, initComments, initialized; initialized = { "#vk-comments": false, "#disqus_thread": false }; initComments = function(type) { var discussUserName, disqus_config, pageUrl; if (initialized) { return; } pageUrl = "page_url"; switch (type) { case "#disqus_thread": // You need to set this params using your platform"s appropriate way discussUserName = "discussUserName"; disqus_config = function() { this.page.url = pageUrl; return this.page.identifier = "page_identifier"; }; (function() { var d, s; d = document; s = d.createElement("script"); s.src = "//" + discussUserName + ".disqus.com/embed.js"; s.setAttribute("data-timestamp", +new Date()); return (d.head || d.body).appendChild(s); })(); break; case "#vk-comments": VK.Widgets.Comments("vk-comments", { limit: 5, attach: "*", pageUrl: pageUrl }); break; default: return; } initialized = true; }; $tabToggler = $(".comments-wrapper a"); $tabToggler.on("shown.bs.tab", function(e) { initComments($(e.target).attr("href")); }); initComments($tabToggler.closest(".active").find("a").attr("href")); }); })(window, jQuery);

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

    Для начала создаем маппинг типов виджетов комментариев , переменная initialized . Дальше, функция initComments(type) позволяет инициализировать виджет комментария , причем она ничего не делает, если он уже был инициализирован.

    И последний штрих - инициализируем дефолтный виджет комментариев, чтобы он отобразился сразу после загрузки страницы.

    Готовый скрипт на и coffeescript на gist. Пример работы - внизу (примеры кода взяты с этого сайта)

    В WordPress есть несколько видов содержания, такие как записи, страницы, комментарии. WordPress является очень гибкой платформой, которая позволяет настраивать основные виды содержания так, как нужно для сайта. Можно поменять внешний вид и функционал. В данном уроке мы покажем, как изменить поведение и внешний вид комментариев на сайте под управлением WordPress.

    Шаг 1. Разбираемся в функцией comment_form и ее аргументами

    Рассмотрим функцию WordPress comment_form . Она отвечает за вывод формы комментариев, которая выводится на странице или записи. Вызов данной функции в основном можно встретить в файле comments.php в папке темы. Данный файл включается в различных местах, например, в файлах single.php и page.php , непосредственно или через вызов функции comments_template .

    Описание функции можно найти в кодексе WordPress .

    Если использовать функцию comment_form для вывода формы, то она будет выводиться с использованием параметров по умолчанию и будет содержать такие поля как имя, email (оба поля являются обязательными), веб сайт и содержание комментария. В теме по умолчанию Twenty Eleven форма будет выглядеть следующим образом.

    Некоторые важные аргументы функции comment_form:

    • fields -с его помощью можно управлять выводом полей в форме комментария.
    • comment_notes_before и comment_notes_after - используются для вывода информации перед и после формы.
    • title_reply - используется для изменения названия ответа, которое по умолчанию имеет значение ‘Leave a Reply’.
    • label_submit - используется для изменения текста на кнопке отправки комментария.
    Шаг 2. Настраиваем форму комментария с помощью функции comment_form

    Теперь настроим нашу форму комментария с помощью передачи аргументов в функцию comment_form .

    В случае, если нам нужно настроить поля в форме комментариев, нужно передать их список в функцию comment_form . По умолчанию для функции используется следующий список полей:

    $fields = array("author" => "

    " . "" . __("Name") . " " . ($req ? "*" : "") . "

    ", "email" => "", "url" => "

    " . __("Website") . "" . "

    ",);

    Если нам нужно удалить поле, например, website , нужно просто исключить его из массива и передать массив в функцию comment_form .

    $commenter = wp_get_current_commenter(); $req = get_option("require_name_email"); $aria_req = ($req ? " aria-required="true"" : ""); $fields = array("author" => "

    " . "" . __("Name") . " " . ($req ? "*" : "") . "

    ", "email" => "",); $comments_args = array("fields" => $fields); comment_form($comments_args);

    В дополнение также сменим название формы на ‘Please give us your valuable comment’, а надпись на кнопке на ‘Send My Comment’.

    Для выполнения задачи передаем в функцию comment_form следующие аргументы:

    $commenter = wp_get_current_commenter(); $req = get_option("require_name_email"); $aria_req = ($req ? " aria-required="true"" : ""); $fields = array("author" => "

    " . "" . __("Name") . " " . ($req ? "*" : "") . "

    ", "email" => "",); $comments_args = array("fields" => $fields, "title_reply"=>"Please give us your valuable comment", "label_submit" => "Send My Comment"); comment_form($comments_args);

    Теперь форма комментария будет выглядеть следующим образом:

    Шаг 3 . Удаляем поля из формы с помощью крюка

    Также форма комментария WordPress может быть изменена с помощью крюков и фильтров. Такая настройка может быть особенно полезна при работе с плагином, когда нужно настроить несколько элементов, но не изменять файлы темы. Фильтр для добавления иди удаления полей из формы - ‘ comment_form_default_fields ‘

    Удалим поле адреса URL с помощью фильтра. Приведенный код можно использовать в плагине или в файле functions.php активной темы.

    Function remove_comment_fields($fields) { unset($fields["url"]); return $fields; } add_filter("comment_form_default_fields","remove_comment_fields");

    Шаг 4. Добавляем данные в форму комментария с помощью крюка

    Мы можем добавить поля в форму с помощью фильтра ‘ comment_form_default_fields ‘. Добавим поле возраста автора с помощью фильтра и сохраним данное поле дополнительные данные и будем их выводить в комментарии.

    Добавляем поле следующим образом:

    Function add_comment_fields($fields) { $fields["age"] = "

    " . __("Age") . "" . "

    "; return $fields; } add_filter("comment_form_default_fields","add_comment_fields");

    #respond .comment-form-author label, #respond .comment-form-email label, #respond .comment-form-url label, #respond .comment-form-age label, #respond .comment-form-comment label { background: #eee; -webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); -moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8); box-shadow: 1px 2px 2px rgba(204,204,204,0.8); color: #555; display: inline-block; font-size: 13px; left: 4px; min-width: 60px; padding: 4px 10px; position: relative; top: 40px; z-index: 1; }

    Теперь наша форма комментария будет выглядеть следующим образом:

    Теперь возраст хранится как дополнительная информация. Нужно использовать крюк в ‘ comment_post ‘:

    Function add_comment_meta_values($comment_id) { if(isset($_POST["age"])) { $age = wp_filter_nohtml_kses($_POST["age"]); add_comment_meta($comment_id, "age", $age, false); } } add_action ("comment_post", "add_comment_meta_values", 1);

    Как только данные сохранены, их можно выводить в комментарии следующим образом:

    Шаг 5 . Настройка комментариев для определенных типов записей

    Иногда требуется использовать поля в комментариях только для определенных типов записей. Изменим код для вывода поля возраста только для записи типа book :

    Function add_comment_fields($fields) { if(is_singular("books")) { $fields["age"] = "

    " . __("Age") . "" . "

    "; } return $fields; } add_filter("comment_form_default_fields","add_comment_fields");

    Шаг 6. Создаем возвратную функцию для вывода комментариев

    Функция wp_list_comments используется для вывода комментариев в записях. В кодексе WordPress функция описана подробно.

    wp_list_comments имеет аргумент ‘ callback ‘ в котором можно определить функцию, которая вызывается при выводе комментария.

    В теме Twenty Eleven в файле comments.php можно найти строку:

    Wp_list_comments(array("callback" => "twentyeleven_comment"));

    Изменим ее на:

    Wp_list_comments(array("callback" => "my_comments_callback"));

    Функция my_comments_callback будет вызываться для каждой записи.

    Шаг 7. Стилизация комментариев

    Теперь мы немного изменим стиль комментария. Просто будем выводить содержание записи и поле возраста, которое было добавлено нами ранее. Мы также изменим цвет фона для комментариев.

    Код функции ‘ my_comments_callback ‘:

    Function my_comments_callback($comment, $args, $depth) { $GLOBALS["comment"] = $comment; ?>

    Загрузка...