Итак, комментарии на AJAX. Перед написанием этого поста я потратил добрую половину дня на их разработку — хорошо, что я уже был с ними знаком. В самый первый раз, когда я ещё начинал изучать jQuery, на создание асинхронных комментариев с нуля у меня ушли первые две недели января.
Кстати, я долго думал, имеет ли смысл поставить комментарии со стороннего сервиса, например disqus — но в итоге решил что свои комментарии на AJAX будут покруче.
Допустим, мы только что решили поставить асинхронные комментарии у себя на сайте. Какую функциональность, на наш взгляд, они должны иметь?
alert()
пока что,Будем отталкиваться от стандартных тем WordPress, это Twenty Ten и Twenty Eleven. Разумеется, то, что представлено в следующем куске кода — всего лишь HTML-шаблон, который должен сориентировать вас по атрибутам class и id, а также по расположению элементов, а вообще все эти штуки делаются через php!
<!-- можно <ul> или <ol> --> <ol class="commentlist"> <!-- класс depth-1 показывает уровень вложенности --> <li class="comment depth-1" id="li-comment-4"> <div id="comment-4"> <!-- тут содержимое комментария --> <div class="reply"> <a class="comment-reply-link">Ответить</a> </div> </div> <!-- дальше идут ответы к предыдущему комментарию --> <ul class="children"> <!-- depth-2 - значит вложенность второго уровня --> <li class="comment depth-2" id="li-comment-5"> <div id="comment-5"> <!-- тут содержимое комментария --> <div class="reply"> <a class="comment-reply-link">Ответить</a> </div> </div> </li> </ul> </li> </ol> <div id="respond"> <!-- тут нужно обратить внимание также на атрибуты name --> <a id="cancel-comment-reply-link" style="display:none;">Отменить ответ</a> <form id="commentform"> <input name="author" id="author" type="text" /> <input name="email" id="email" type="text" /><!-- или type="email", как хотите --> <input name="url" id="url" type="text" /> <textarea name="comment" id="comment"></textarea> <input name="submit" type="submit" id="submit" value="Отправить" /> <!-- если у вас нет hidden-полей попробуйте вставить их через php-функцию comment_id_fields() --> <input type="hidden" name="comment_post_ID" /> <input type="hidden" name="comment_parent" /> </form> </div>
Так что, если у вас что-то добавляется не туда, куда надо, сверяйтесь по этому листингу.
Примерно так это будет выглядеть:
В код моего блога советую не залазить, у меня там структура немного другая, она может вас только запутать ещё больше. Если что-то не получается или есть вопрос — просто задайте его мне прямо в комментариях к этому посту.
Если у вас со структурой всё окей, то стили по сути и не понадобятся, за исключением оформления ошибок, возникающих в результате валидации полей. То есть, если кто-то ввёл неверный адрес email, поле должно стать красного цвета (например).
input.error, textarea.error{ background: #fe0000; /* или background:red или любой другой цвет, который больше вписывается в дизайн вашего блога */ }
Добавляем этот код в основной файл стилей вашей темы, обычно это — style.css
.
Во-первых, давайте в папке с темой создадим какой-нибудь файл JavaScript, в который мы потом добавим весь наш код. У меня это будет файл comments.js
.
Теперь наша задача — правильно подключить библиотеку jQuery и файл comments.js
. Для этого воспользуемся функцией wp_enqueue_script().
Следующий код вставляем в файл functions.php
вашей текущей темы:
function true_include_my_comment_script() { wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'commentjs', get_stylesheet_directory_uri() . '/comments.js', array('jquery'), null ); } add_action( 'wp_enqueue_scripts', 'true_include_my_comment_script' );
Зайдите в исходный код страницы (в Windows — Ctrl + U) и посмотрите, появился ли там comments.js,
если да — переходим к следующему шагу, если нет — открываем файлы header.php
и footer.php
и убеждаемся, что там присутствуют функции wp_head() и wp_footer() соответственно.
Открываем наш файл comments.js
и вписываем туда:
jQuery.extend(jQuery.fn, { /* * функция проверки, что длина поля не меньше 3х символов */ checka: function () { if (jQuery(this).val().length < 3) {jQuery(this).addClass('error');return false} else {jQuery(this).removeClass('error');return true} }, /* * функция проверки правильности введенного email */ checke: function () { var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; var emailaddressVal = jQuery(this).val(); if (!emailReg.test(emailaddressVal) || emailaddressVal == "") { jQuery(this).addClass('error');return false } else { jQuery(this).removeClass('error');return true } }, }); jQuery(function($){ $('#commentform').submit(function(){ // может такое случиться, что пользователь залогинен - нужно это проверить, иначе валидация не пройдет if($("#author").length) var author = $("#author").checka(); if($("#email").length) var email = $("#email").checke(); var comment = $("#comment").checka(); // небольшое условие для того, чтобы исключить двойные нажатия на кнопку отправки // в это условие также входит валидация полей if (!$('#submit').hasClass('loadingform') && !$("#author").hasClass('error') && !$("#email").hasClass('error') && !$("#comment").hasClass('error')){ $.ajax({ type : 'POST', url : 'http://' + location.host + '/wp-admin/admin-ajax.php', data: $(this).serialize() + '&action=ajaxcomments', beforeSend: function(xhr){ // действие при отправке формы, сразу после нажатия на кнопку #submit $('#submit').addClass('loadingform').val('Загрузка'); }, error: function (request, status, error) { if(status==500){ alert('Ошибка при добавлении комментария'); } else if(status=='timeout'){ alert('Ошибка: Сервер не отвечает, попробуй ещё.'); } else { // ворпдрессовские ошибочки, не уверен, что это самый оптимальный вариант // если знаете способ получше - поделитесь var errormsg = request.responseText; var string1 = errormsg.split("<p>"); var string2 = string1[1].split("</p>"); alert(string2[0]); } }, success: function (newComment) { // Если уже есть какие-то комментарии if($('.commentlist').length > 0){ // Если текущий комментарий является ответом if($('#respond').parent().hasClass('comment')){ // Если уже есть какие-то ответы if($('#respond').parent().children('.children').length){ $('#respond').parent().children('.children').append(newComment); } else { // Если нет, то добавляем <ul class="children"> newComment = '<ul class="children">'+newComment+'</ul>'; $('#respond').parent().append(newComment); } // закрываем форму ответа $("#cancel-comment-reply-link").trigger("click"); } else { // обычный коммент $('.commentlist').append(newComment); } }else{ // если комментов пока ещё нет, тогда newComment = '<ul class="commentlist">'+newComment+'</ol>'; $('#respond').before($(newComment)); } // очищаем поле textarea $('#comment').val(''); }, complete: function(){ // действие, после того, как комментарий был добавлен $('#submit').removeClass('loadingform').val('Отправить'); } }); } return false; }); });
Читайте подробнее о том, как обрабатываются асинхронные запросы в WordPress. Код обработчика:
<?php // если вы вставляете код не в новый файл, то <?php нужно удалить function true_add_ajax_comment(){ global $wpdb; $comment_post_ID = isset($_POST['comment_post_ID']) ? (int) $_POST['comment_post_ID'] : 0; $post = get_post($comment_post_ID); if ( empty($post->comment_status) ) { do_action('comment_id_not_found', $comment_post_ID); exit; } $status = get_post_status($post); $status_obj = get_post_status_object($status); /* * различные проверки комментария */ if ( !comments_open($comment_post_ID) ) { do_action('comment_closed', $comment_post_ID); wp_die( __('Sorry, comments are closed for this item.') ); } elseif ( 'trash' == $status ) { do_action('comment_on_trash', $comment_post_ID); exit; } elseif ( !$status_obj->public && !$status_obj->private ) { do_action('comment_on_draft', $comment_post_ID); exit; } elseif ( post_password_required($comment_post_ID) ) { do_action('comment_on_password_protected', $comment_post_ID); exit; } else { do_action('pre_comment_on_post', $comment_post_ID); } $comment_author = ( isset($_POST['author']) ) ? trim(strip_tags($_POST['author'])) : null; $comment_author_email = ( isset($_POST['email']) ) ? trim($_POST['email']) : null; $comment_author_url = ( isset($_POST['url']) ) ? trim($_POST['url']) : null; $comment_content = ( isset($_POST['comment']) ) ? trim($_POST['comment']) : null; /* * проверяем, залогинен ли пользователь */ $user = wp_get_current_user(); if ( $user->exists() ) { if ( empty( $user->display_name ) ) $user->display_name=$user->user_login; $comment_author = $wpdb->escape($user->display_name); $comment_author_email = $wpdb->escape($user->user_email); $comment_author_url = $wpdb->escape($user->user_url); $user_ID = get_current_user_id(); if ( current_user_can('unfiltered_html') ) { if ( wp_create_nonce('unfiltered-html-comment_' . $comment_post_ID) != $_POST['_wp_unfiltered_html_comment'] ) { kses_remove_filters(); // start with a clean slate kses_init_filters(); // set up the filters } } } else { if ( get_option('comment_registration') || 'private' == $status ) wp_die( 'Вы должны зарегистрироваться или войти, чтобы оставлять комментарии.' ); } $comment_type = ''; /* * проверяем, заполнил ли пользователь все необходимые поля */ if ( get_option('require_name_email') && !$user->exists() ) { if ( 6 > strlen($comment_author_email) || '' == $comment_author ) wp_die( 'Ошибка: заполните необходимые поля (Имя, Email).' ); elseif ( !is_email($comment_author_email)) wp_die( 'Ошибка: введенный вами email некорректный.' ); } if ( '' == trim($comment_content) || '<p><br></p>' == $comment_content ) wp_die( 'Вы забыли про комментарий.' ); /* * добавляем новый коммент и сразу же обращаемся к нему */ $comment_parent = isset($_POST['comment_parent']) ? absint($_POST['comment_parent']) : 0; $commentdata = compact('comment_post_ID', 'comment_author', 'comment_author_email', 'comment_author_url', 'comment_content', 'comment_type', 'comment_parent', 'user_ID'); $comment_id = wp_new_comment( $commentdata ); $comment = get_comment($comment_id); /* * выставляем кукисы */ do_action('set_comment_cookies', $comment, $user); /* * вложенность комментариев */ $comment_depth = 1; while($comment_parent){ $comment_depth++; $parent_comment = get_comment($comment_parent); $comment_parent = $parent_comment->comment_parent; } $GLOBALS['comment'] = $comment; $GLOBALS['comment_depth'] = $comment_depth; /* * ниже идет шаблон нового комментария, вы можете настроить его для себя, * а можете воспользоваться функцией(которая скорее всего уже есть в теме) для его вывода */ ?> <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>"> <div id="comment-<?php comment_ID(); ?>"> <div class="comment-author vcard"> <?php echo get_avatar( $comment, 40 ); ?> <cite class="fn"><?php echo get_comment_author_link(); ?></cite> </div> <?php if ( $comment->comment_approved == '0' ) : ?> <em class="comment-awaiting-moderation">Комментарий отправлен на проверку</em> <br /> <?php endif; ?> <div class="comment-meta commentmetadata"><a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"> <?php printf('%1$s в %2$s', get_comment_date(), get_comment_time() ); ?></a><?php edit_comment_link('ред.', ' ' ); ?> </div> <div class="comment-body"><?php comment_text(); ?></div> </div> </li> <?php die(); } add_action('wp_ajax_ajaxcomments', 'true_add_ajax_comment'); // wp_ajax_{значение параметра action} add_action('wp_ajax_nopriv_ajaxcomments', 'true_add_ajax_comment'); // wp_ajax_nopriv_{значение параметра action}
Комменты можете протестировать прямо на моем блоге, там совсем незначительные изменения в коде, также я протестировал весь код из статьи ничего не меняя, как есть, на теме Twenty Ten.
Со временем пост будет обновляться по мере совершенствования кода в нем, после появления каких-либо доработок.
Также есть доработки, которые я не буду добавлять, дабы не усложнять пост, но вам стоит попробовать сделать их самим:
ДОЖДАЛАСЬ!!!! Сегодня же буду пробовать встроить это в свой сайт. О результатах отпишусь ниже. А это, так сказать, тестовый коммент, ну и конечно с благодарностью!
окей) пиши, если какие вопросы будут
Зачет!
Все круть!
Выдает ошибку через alert
Какую?
Ого го
Спасибо
Проверка
Проверка
Спасибо!
проверка
Спасибо
Интересная статья... Надо будет попробовать это "внедрить" на свой блог. Спасибо за советы!
Протестируем, спасибо!
Вау! Круто!
Класс
100 комментов можно?
хоть тысячу) ты уж прости, удалил парочку твоих тестовых сообщений)
Тестирую ajax
Тестирую аякс)) Всем привет)
Прикольно!
Попробуем
Пробуем йопте
Проба))
Спасииибо))
Всю голову сломал уже с этим. Плагин WP Ajax Edit Comments так и не получилось заставить работать! Попробую с этим. Спасибо за твой труд! =)
Тест
вместо слова «Тест» можно написать например «Спасибо» 🙂 а то я уже устал подобного рода комменты удалять)
круто
спасибо за код.
в целях оптимизации js кода советую кэшировать получаемые jquery элементы.
и с прошедшим :)(
Довольно-таки интересный подход! Надо будет попробовать!) У меня может не по теме вопрос, вот стандартные комменты, когда добавляю коммент, у меня почему-то не перенаправляет на этот самый коммент, то есть нет в конце строки "/#comments-34", а просто редиректит на новость. Не подскажите как сделать чтоб на последний добавленный коммент редиректило? Спасибо
а что стоит в параметре action формы?
а вообще советую глянуть например стандартную тему Twenty Ten и сравнить со своей темой, посмотреть, что именно не так
Уже исправил!
Давно хотел разобраться что есть ajax а этот код прекрасная возможность ознакомится с технологией на практике. Спасибо!
Хаос) новичку ничерта не понять...
а я старался поподробнее описывать)
Вот сейчас пытаюсь установить, однако нифига не понятно с последним шагом: Последний шаг. PHP-обработчик
В коде комментарий: "// если вы вставляете код не в новый файл, то <?php нужно удалить" о каком файле речь? Куда вообще это вставлять.
Я вроде не новичек, уже хоть как-то в кодах разбираюсь, но куда эту штуку девать пока не понятно. Советую на последнем и первом шаге чуток подробней остановится. Первый я так понимаю чисто наглядный, для сравнения со своей темой? или опять неправильно понял?
Как в вордпресс создать еще одну форму комментариев во вкладке рядом с основной, 2 дня потратил на это и не смог сделать, подскажите пожалуйста
а чем будут отличаться эти формы комментариев?
1ая форма обычная,а вторая для анонимного комментирования. Подсунул их в две вкладки. Сделал, но один баг существует, если отвечаешь на чей то коммент анонимным, то комментарий публикуется как новый
в общем вот мой скайп misha_10000, разберемся на месте.
что то тебя в скайпе нету
отписался от комментариев, уведомления все-равно приходят) глюк? или....?
странно, я вот тут смотрю, ещё один тоже отписался - всё норм, а у тебя активная подписка отображается) попробуй ещё раз)
Подскажи пожалуйста что за плагин который после отправки комментария сразу показывает его в дереве комментов. в ссылке я указал сайт, где довел до середины этой отправки. Не могу только отобразить его без перезагрузки
если нужен плагин, попробуй wp-comment-master
Миша) не пашет функция отписаться от комментариев у тебя на сайте.
http://prntscr.com/tchox вот скрин) я это делаю каждый раз когда приходит уведомление о новом комменте)
Вопрос по существу - комментарии не будут разбиваться на страницы? У меня стоит в настройках блога разбитие комментариев на страницы
после обновления страницы будут)
В добавок к вопросу.
Этот вариант комментариев встроенный на ваш сайт видоизменялся с октября? я имею ввиду не по стилям, а по соответствию той части что в примере?
не изменялся
ну если только по мелочам, у меня там один блок по-другому встал после последней смены дизайна и счетчик комментов теперь просто цифрой
Привет! Возникла проблема, следующего характера, если авторизован то всё работает, а вот если я не авторизован выдается ошибка
Fatal error: Call to a member function exists() on a non-object in Z:\home\love-trip\www\wp-includes\comment.php on line 615
Круть. Заделай видео, или по подробней опиши, что и куда втыкать, чтобы работало.. Я сам разобраться долго буду. Если сделаешь, напиши в личку,- договоримся.
Беда этих древовидных комментариев в том что не найдешь последние сообщения если комментариев много. У себя отказался от них. Использую линейный стиль, и активно использую цитирование. На хабре тоже с этим беда. Считаю что маразм эти древовидные. Да и не зря на всех форумах используют линейные комментарии
Как прикрутить редактор WysiBB. офф сайт http://www.wysibb.com/?
ну там на офф сайте описано же,
1. подключить скрипт редактора
2. подключить CSS стили редактора
3. задействовать его для какой-либо textarea
Привет, Александр!
Слушай, а ты знаешь, как весь этот процесс прикрутить к шаблону вордпресс?
а то)
Круто. Опиши для меня по подробней, что куда втыкать. В личку, договоримся..
Александр, в посте всё объяснено, может у тебя есть более конкретные вопросы?
Здравствуйте Михаил наткнулся на ваш блог в нете очень интересно познавательно у меня к вам вопрос не могли бы вы более подробно описать прикручивание скрипта коментов AJAX для WordPress? А то местами понятно местами нет например не понятно куда встовлять код для
Подготовка. Структура HTML.
понятно что это листинг для удобства сверки и у вас написано что это пример стандартных тем ну я что то не пойму толе я не там смотрю толе версия wordpress не совпадает у меня 3.5 в результате чего я так понимаю выскакивает ошибка как писал человек выше
Fatal error: Call to a member function exists() on a non-object in Z:\home\wordp.ru\www\wp-includes\comment.php on line 615 это после того когда пытаешься не залогеный комент отправить и почему то вроде написал в поле текст а он запрашивает "вы забыли про комментарий"
правда со второго раза отправляет очень хотелось бы получить ответы на эти вопросы заранее спасибо
Добрый день)
в первом шаге прост дан пример чтобы не косячились результаты из ajax, то есть это - просто пример расположения элементов относительно друг друга и их идентификаторы\классы.
с версией WordPress проблем быть не должно
это значит что следует перепровить HTML атрибуты name у текстового поля, если все ок, то отследить его дальше по скриптам и в php
Скажу честно, пост написан полгода назад и не обновлялся - есть более безопасные методы использования ajax-обработчика. Но тем не менее тут всё рабочее, у меня на сайте оно используется)
почему со второго раза только отправляется - хз вообще если честно
в общем постараюсь ответить на любые конкретные вопросы в комментах.
Спасибо вам Михаил за ответ. Тогда подскажите пожалуйста вот этот листинг HTML с каким файлом PHP сверять надо? С файлом в шаблоне "contact.php" или в папке wp-includes файл comment-template.php?
А то я то как делал сначала подключил через шаблон файле functions.php
jQuery и за ним указал путь к JS файлу, Файл ajax_comment.php закинул в корень сайта все вроде заработало но как то корявенько я думаю что потому что я не совсем понял с каким PHP файлом сверять классы и ID
Заранее спасибо за ответ ?
ну для начала можно сверить со страницей на которой находится форма через Ctrl + U
а там уже, если в форме косяки, то - для комментариев обычно comments.php. В файлы движка не лезем! все делаем через тему.
да, всё верно
но реально самое трудное позади, главное что асинхронный запрос отсылается
Что-то частично получилось (частично ключевое слово)
Пока имею только то, что к адресу подтянулось окончание: #comment-3184
Форма комментариев не подтягивается к кнопке ответить в случае ее нажатия, а страница полностью вообще не загружается, уже 10 минут в браузере крутится загрузка страницы после добавления нового комментария...буду дальше пробовать
С PHP-обработчиком можете пока что не колдовать, ваша первая цель, чтобы отсылался запрос - если он успешно отошлется без обработчика, то вам будет возвращен "0".
У вас именно проблема с HTML / JS сейчас.
Миша, мои знания по ajax и jquery на низком уровне, поэтому мне не совсем ясно, в какие именно файлы втыкать данные скрипты своего шаблона. Я могу только предполагать.
Есть шаблон с файлами
http://www.fotolink.su/v.php?id=45bff0f0867e15b9d68dc52e494fc1fa
Куда ставить
HTML структуру
CSS
Счетчик Комментариев
Скрипты
PHP обработчик ??
Признателен тебе за ответ.
вероятнее всего comments.php
style.css
пока что не трогаем
тут уже нужно смотреть самому, в принципе создай и подключи новый файл
это отдельный файл в корне сайта, его тоже нужно создать самому
Спасибо, Миша.
Буду разбираться.
Вот непонятно...php разработчик как я понимаю это последний шаг. Ну создаю я файл в корне сайта и что? Куда и к чему его нужно подключать чтобы к комментариям пристал? Как его именовать? Что нужно сравнивать с чем из первого шага. Миш, очень бы хотелось чтобы статья была расчитана не на опытных программистов, а на средней руки блогеров
большое спасибо. опробуем
Тестовый =)
А мне в блог можете такой аякс коммент сделать?
да, могу конечно, свяжитесь со мной по email или по скайпу
P.S. сорри за долгий ответ, был в отъезде
тест аякса )
Что насчет supercache ? отключил в браузере яваскрипт, ваша форма комментов загрузилась, значит закеширует сие дело супер каче так? как сделать чтобы не закешировал и чтобы была премодерация
при чем тут кэш?)
да, я тупанул чот совсем, эта форма на аяксе защищает от спам ботов?
Миша!, форма защищает от спама через спамилки или нет?
сорри за долгий ответ
если отключить стандартную форму, то защищает
Спасибо,
Всмысле отключить? тоесть просто использовать ваш метод?
Может быть знаете еще способ как сделать так чтобы сделать проверку на ссылку, если ссылка вставлена в коммент, то его попросту нельзя было бы отправить?
в настройках админки
Я имел ввиду что его физически нельзя будет отправить, не будет работать кнопка опубликовать, или не будет работать параметр post или что там как называется не знаю.
Чот судя по ответам вам не интересно отвечать как я понял, если так, скажите прямо, я просто перестану спрашивать
Всё можно сделать. Но вы же хотите халявы? Сделайте то, сделайте это... А благодарности нет. Зато обида в вашем сообщении так и прёт. Этож какой Миша плохой! Сделал людям добро, а вам мало
я просто спросил вопрос у программиста, я жен спрашивал его уверстальщика, за 10 лет вордпресса или сколь он там существует я не нашел такого плагина почемуто...
Денис, вырубить стандартную вордпрессовскую форму нетрудно, достаточно удалить в форме параметр action, но я не считаю, что это хорошая идея, про защиту от спама я уже писал тут.
сорри, у меня порой не хватает времени на развернутый ответ в несколько абзацев,
Otshelnik-fm, спасибо за поддержку)
понятно, спасибо, успехов вам! я использую тот метод тоже, но и для ручных постеров хотел бы сделать неповадным 🙂
Спасибо. Сейчас себе тоже сделаю.
пвапвапва
Можно было и что-то путное написать.
Спасибо за вашу работу
пишу больше для теста) ... у себя тоже надо бы подобное сделать
у меня не работает когда пользователь не зарегистрирован, вернее отправляет но с ошибкой
Fatal error: Call to a member function exists() on a non-object in Z:\home\perchatki.ru\www\wp-includes\comment.php on line 629
Подскажите пожалуйста как исправить.
у меня не работает когда пользователь не зарегистрирован, вернее отправляет но с ошибкой
Fatal error: Call to a member function exists() on a non-object in Z:\home\perchatki.ru\www\wp-includes\comment.php on line 629
Подскажите пожалуйста как исправить.
Спасибо!
Спасибо хорошая статья
Спасибо за статью! Давно думал такое сделать...
А на joomla сможете повторить? Очень надо!
Уже три года прошло, как я полностью отказался от джумлы и перешёл на вордпресс.
Спасибо
Здравствуйте Миша.
Прежде всего, хочу поблагодарить вас за полезную статью.
Спасибо.
Сделал все как у вас, но столкнулся с проблемой такого рода:
Fatal error: Call to a member function exists() on a non-object in Z:\home\wordp.ru\www\wp-includes\comment.php on line 668
как я понял, почитав комментарии к статье, я не первый.
Ну, то есть, как и у других комментаторов, все отлично работает для зарегистрированных пользователей, а для остальных вылазит ошибка.
Полез в код, долго мучился, но решил проблему закомментировав вот эти строки в вашем скрипте:
все заработало как часы, проверял в разных браузерах, ни каких проблем.
Отсюда вопрос: правильно ли я сделал, вообще можно ли так делать и не повлияет ли такое вот решение на работу моего блога? Если можно поясните мне пожалуйста, что я отключил своим действием?
Добрый день, Сергей,
Спасибо за содержательный комментарий.
Думаю это не скажется отрицательно на работе блога, разве что после публикации коммента сайт не будет сохранять имя и email автора.
Здравствуйте Миша. Наверно уже сейчас можно сделать выводы, хотя прошло не так много времени и комментариев было оставлено на блоге не так много.
Скажу сразу, все работает отлично, грех жаловаться. Специально экспериментировал с настройками в админке на блоге, я имею ввиду "Обсуждение", ставил разные параметры, все отлично.
Вы писали:
все сохраняется, могу только еще раз вас поблагодарить за отличную работу. Спасибо!
Ели вы не против, позже напишу еще отчет, пусть подольше поработает ваш хук(если можно его так назвать).
Добрый вечер!
Рад, что всё отлично работает)
ок.
Ну так это же плохо, я правильно понимаю? Мыло же должно сохраняться, на будущее. Блин, вот как сделать чтобы все работало. 🙂 Все равно, большое спасибо вам. Пока оставлю, посмотрю как будет работать, а потом видно будет.
Ок,
отпишитесь пожалуйста о результатах)
Странно, писал ответ тут, а он опубликовался к другому вашему комментарию.
даже не знаю, проблем с ответами к комментариям не замечал.
Спасибо!
Спасибо
Крутяк!!!
Ув. Администратор сия блога если тема еще актуальна и этот хук будет работать на версии 3.9.1 ?
Подскажите пожалуйста куда пихать HTML и JS.
заранее огромное спасибо)
У меня же работает на блоге)
HTML - никуда - в посту дан просто пример (возможно надо будет поправить стандартный код).
JS - после подключения jQuery.
Понятно спасибо большое за подсказку
А что именно нужно подправить не подскажите?
Класс
супер
Список радио http://newsrbk.ru/radios.html
А можно ли узнать, как сделать так, чтобы поля "Имя" и "Электронная почта" появлялись после клика на поле "Оставить комментарий"?
Спасибо за статью.
это делается на jQuery, код будет выглядеть примерно следующим образом:
Бро, надо чтобы комменты подгружались по клику на кнопку load_more_comments
А мне нравится когда сразу все комменты на странице — можно сделать поиск Ctrl (Cmd) + F 🙂
А вообще ответ на твой комментарий — это материал для нового поста, который будет опубликован 18-го июля.
Спасибо. Использую.
спасибо
Здорово!
Здорово!
Попробую разобраться
Спасибо за статью, все получилось
Cпасибо за статью
Спасибо)
Спасибо! Статья класс!
Подскажите, с помощью какого плагина вы делаете цитаты в комментах http://take.ms/30QSV
Тут нет плагина, непосредственно jQuery-код. Он весь есть в файле
jcore.js
.У меня, если коммент оставляет админ, то коммент должен быть одобрен, хотя по сути такого быть не должно, от админа все комменты сразу должны высвечиваться....
Подскажите в чем причина если знаете!
все решил)
может кому то понадобится
в файле function.php после строки
$comment_author_url = $wpdb->escape($user->user_url);
добавить
$user_ID = get_current_user_id();
Рад, что разобрались 🙂 И спасибо — я добавлю вашу доработку в пост.
Миша, а ты можешь поделится темой, хотя бы просто с кодом работы комментариев, просто ни на одной теме не получается его запустить(
Сделал теперь начал отправлять, но вместо комментария просто цифра '0', что может быть?
Значит дело не доходит до обработчика PHP 🙂 нужно проверить параметр action в ajax запросе и в хуке.
Спасибо за статью, очень помогла
Спасибо!
Один нюанс - на кнопке отправки, после нажатия, должно быть написано "Отправка", а не "Загрузка".
коментарий
что то долго
Я делал комменты со встроенным редактором (wp_editor), так что мне не подошёл скрипт comment-reply.js, хотя у меня и не ajax. Но всё-таки завести полноценный редактор тоже была задача не из простых. Вам, Миша, видна моя почта, если интересно, киньте туда письмо, я вам ответным постараюсь описать, как у меня это вышло. В комментах, увы, этого не сделать и на треть.
А за статью спасибо, ajax + редактор будет вообще кибершедевр 🙂
Да, wp_editor в комментариях эт круто)) мне кажется что comment-reply.js у вас не работает из-за какой-то неучтенной мелочи.
С ajax-комментариями несколько сложнее — вам нужно будет поискать функции для работы с TinyMCE.
Вот об этом я и хотел написать. Нет, comment-reply.js в этом случае работать не будет, потому что перед переносом редактор нужно отключать, у него есть такая команда. Потом - включать обратно. То есть нужен переделанный скрипт, который будет содержать соответствующие команды для редактора. Но у него есть определённые проблемы с адаптивностью, которыми обычное текстовое поле не страдает.
В общем, сначала делаете так (отключает функциональность tinymce):
tinymce.EditorManager.execCommand('mceRemoveEditor', false, 'comment');
- потом переносите форму в другое место.
Далее включаете обратно и даёте ему фокус:
tinymce.EditorManager.execCommand('mceAddEditor', false, 'comment');
tinymce.EditorManager.execCommand('mceFocus', false, 'comment');
Ну фокус давать это как бонус, чтобы не надо было в него курсор руками ставить опять. Первый параметр это команда объекта EditorManager, второй не помню, третий - атрибут name у textarea, куда подключается редактор. В общем-то всё.
Про ajax+tinymce согласен, но не думаю что это очень уж тяжело, просто данные нужно брать из какого-то свойства этого объекта, а не из textarea, вот и всё.
Тестирую))
спасибо, полезный пост.
спасибоу!
Спасибо за статью.
Подскажите как прикрутить проверку "на лету", т.е. конструкцию .blur.
Пробовал.. как-то не особо получилось.
Заранее Спасибо.
Пожалуйста! Рад, что она вам помогла.
Попробуйте .keyup
Миша помогите плиз, не получается у меня!
Хотелось бы больше подробностей 🙂
Давно искал эту тему
Оставляю комментарий дабы опробовать сие чудо)
Спасибо Миша! все работает как часы)
Пожалуйста)
Спасибо!!!
Как можно переписать?
Нужно использовать
$wpdb->prepare
вместо$wpdb->escape
.не выходит
а
esc_sql
пробовали? (ну прост чтобы не менять параметры).как я уже только не пробовал
Попробуйте последнее — где-нибудь в начале функции:
Тестовый комментарий 🙂
тест 🙂
Спасибо большое Миша - заработало сразу без проблем. Только вот возник вопрос - как сделать чтобы комментарий добавлялся (встраивался) в уже готовый commentlist, а не создавал свою новую обертку. А то у меня идет сначала свой стандартный comentlist (с комментариями), потом навигация комментариев, потом comentlist который добавляется через ajax, получается 2 comentlist (причем через навигацию), и еще почему-то в таком случае не появляется кнопка "ответить" через функцию:
. Правда после обновления страницы - все становиться на свои места.
Если он добавляет второй .commentlist, то значит не выполняется условие:
Это значит, что элемента класса .commentlist у вас нет 🙂 Какие CSS классы у вашего блока с комментариями?
Всё! Спасибо за подсказку. Сразу вчера и не заметил, что у меня не class="commentlist", а id="commentlist, заменил в .js все на id - теперь работает. Теперь понятно почему создавался новый листинг. Еще раз спасибо! А вот кнопка "ответить" появляется только после обновления почему-то. А вы какой код используете для кнопки - такой же как я привел выше или может другой?
У меня тоже кнопка ответа не появляется же. Я прост решил, что зачем отвечать на свой только что созданный комментарий?
В принципе оно и верно.
класс
Не получается выводится 0 в чем дело?
Проверьте соответствие параметра
action
.Спасибо вам большое за статью.
У вас нас на сайте прекрасно реализованы комментарии. Хочется и себе и такой и благодаря вам немного приблизился к желаемому. )
Спасибо) У вас всё получится! Я с ними несколько недель голову ломал)
Миша, не подскажете, использую ваш скрипт и мечатю усовершенствовать его, чтобы можно было прикреплять фотографии к комментарию, но не один плагин не работает с ним.. Можете помочь?
А вы как хотите, чтоб вставлялись фотографии? Через img тег?
Чтобы была кнопка обзор, прямо под формой комментирования - через которую можно было выбрать фото и прикрепить его к комментарию, а еще замечательнее, если не будет ограничений и можно будет сразу несколько фото прикрепить.. Кликая по ссылке прикрепить еще.. И после отправки коммента.. Вложения отображались прямо под текстом комментария... Это будет очень полезно и удобно..
Идея хорошая, только не знаю, найду ли я пока что время на её реализацию.
Если вдруг появится время, то в мире станет точно на 1 человека счастливее. Остальные я думаю будут только рады) постоянно читаю ваш блог и все рассылки! Спасибо за ваши труды, очень надеюсь что получится это сделать)
Ок) Я очень постараюсь, но обещать не стану.
Хорошего дня и спасибо, что откликнулись так быстро) я подписан на ветку комментариев, буду надеяться на лучшее! ))
Спасибо, вам тоже отличного дня 🙂
Интересно будет попробовать. Станет ли это работать с плагином мемберлюкс?
Круто)
Спасибо за статью. Отсылаю комментарий для тестирования ajax
Добрый день!
Сделал все как написано получаю такую ошибку
Notice: Undefined index: _wp_unfiltered_html_comment in Z:\home\smeshariki\www\wp-content\themes\smeshariki\functions.php on line 243
Добрый день!
Сорри за задержку с ответом — был в отъезде.
Данное notice можно убрать, использовав условие с
isset()
:спасибо за ответ) после трех часовых танцев с бубном у меня все заработало)
Тестовый комент)) Спасибо автору.
Миш, я правильно понимаю:
последний шаг - Последний шаг. PHP-обработчик это подключение нового файла php с любым названием который по сути заменяет стандартный comment.php?
Прошу прощения, не указал в статье — PHP вставлять в файл
functions.php
в текущей теме.Спасибо огромное
Спасибо, все работает)
Михаил, а как ты реализовал форму заказа? Может, напишешь статью, как это делается?
А о чем там писать? Обычная форма 🙂
Что не пошло у меня, комментарии добавляются, как и раньше
файл comments.js создал, в function.php добавил подключение и обработчик, но увы(
Все работает, недоглядел просто(
Спасибо!))
Спасибо
Прошу вашей помощи! Сил нет уже искать причину неработоспособности кода.
Все сделала, как в статье. По отдельности все работает, но комментарии не добавляются и не показываются.
1) в js файле нет ошибок, выводит и код в success, и в complete
2) в коде php тоже нет ошибок, проверяла на отдельной странице, все работает, комментарии добавляются и выводятся
Но если я добавляю функцию через хук add_action, она не срабатывает вообще, ни одна строка. Соответственно комментарии не добавляются и не показываются. Проверяла тысячу раз соответствие названий (их не меняла, все скопировано с сайта).
Помогите, где искать проблему???
Можно глянуть сайт?
на локалхосте(
Очень жаль, потому что так очень трудно что-то сказать.
Опишите как можно подробнее, что происходит, после того, как вы нажимаете кнопку добавления комментария.
Ура! Ура! Несколько часов поисков, и я нашла ошибку!
Проблема была в названиях полей формы. Дело в том, что давным-давно я делала антиспам защиту на комментарии функцией, которая подменяет названия полей. И об этой функции совершенно забыла(( Блин, столько времени потратить...
Но я рада, что все-таки я это сделала! Спасибо вам большое за статью, за то, что не остались равнодушны)) Статья супер! Именно по этой теме ничего больше не нашла в интернете, так что вам респект!
Так, а где копилка сайта? За такую ценную информацию с удовольствием заплатила бы)
Михаил, сделайте пожалуйста возможность прикреплять неограниченное кол-во фото к комментариям!
Очень полезная функция
Подскажите, как вывести уведомление о том что комментарий слишком маленький?
В js я выставляю например length < 200, того что фон поля становиться красным недостаточно ...
Можете вывести сообщение при помощи
text()
илиhtml()
, ну либоalert()
.У меня по какой-то причине пропадает набранный текст в поле для комментария, в случае, если я нажал отправить и появилась ошибка о незаполненном к-либо поле.
Так-то в целом вроде работает нормально.
Может есть мысли на этот счет?
Разобрался:
код очистки поля в скрипте $('#comment').val(''); перенес ниже в действия после добавления комментария.
Спасибо
Дааа!
Не появляется кнопка ответить после того как оставил комментарий, появляется только после перезагрузки страницы, делал по вашему же уроку но не с этого сайта https://rudrastyh.com/wordpress/ajax-comments.html
Я прочитал ответ ранее и хотел бы узнать как всё таки прикрутить эту кнопку ответить
Как узнаете, буду благодарен, если поделитесь в комментариях! ✊🙃
Как сделать отображение сначала новых комментариев, если поставить в настройке wordpress то они отображаются как я устанавливаю сначала новые комментарии но только после перезагрузке страницы, а при использовании ajax по прежнему отображаются сначала старые комментарии
Извините что надоедаю но реально не у кого спросить)) у меня на сайте есть функция вывода комментариев и аватарки выводятся вот таким кодом
но они отображаются только после перезагрузки
test
Test