Главная›JavaScript

jQuery-скрипт для WordPress “Привет, комментатор!”

88 комментариев

Написал небольшой jQuery-скриптик, который призван несколько повысить удобство комментирования на WordPress-блоге.

Как работает скрипт

Все очень просто. Он проверяет, заполнены ли обязательные поля Имя/E-mail, и выполняет следующее:

  • Если посетитель блога ранее оставлял комментарий, то при следующем комментировании его встречает надпись: “С возвращением, %Имя комментирующего%!”
  • При этом поля Имя/E-mail/URL спрятаны, как ненужные в данный момент элементы, остается только поле для комментария.
  • Комментатор может поменять свои данные, нажав на ссылку “Изменить”.
  • Если у комментатора в браузере отключена поддержка JavaScript, то он увидит полную форму.

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

Обязательно убедитесь, что ваш блог выполняет второе условие (выводит ранее введенные данные в форму), иначе никакого смысла в подключении скрипта не будет. Я знаю, что некоторые WordPress-плагины каким-то образом предотвращают появление ранее указанных посетителем данных в коммент-форме. К примеру, так было на моем блоге, когда у меня стоял плагин “Paged Comments”.

Пример

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

Установка

  1. В файле comments.php найдите код полей <input /> для ввода Имени/E-mail/URL и оберните его в контейнер <div id="author-data"></div>. Этот блок – то, что будет прятаться, если поля заполнены.
  2. Затем создайте какой-либо файл с расширением .js, например, scripts.js и поместите в него скрипт (либо в ранее существующий js-файл): 
    (function($) {
$(function() {

	var author_val = $('#author').val();
	if( author_val !='' && $('#email').val() !='' ) {
		$('#author-data').hide();
		$('#author-data').before('<div id="welcome">С возвращением, <strong>'+author_val+'</strong>! <a href="#">Изменить &raquo;</a></div>')
		$('#welcome a').toggle(
			function() {
				$('#author-data').show(300);
				$(this).html('Свернуть &raquo;');
				return false;
			},
			function() {
				$('#author-data').hide(300);
				$(this).html('Изменить &raquo;');
				return false;
			}
		);
	}

})
})(jQuery)
  3. Закиньте этот файл в папку с вашей темой.
  4. Теперь подключите скрипт, добавив следующий код в файл header.php перед тегом </head>: 
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/scripts.js"></script>
  5. Если в вашей теме не подключен фреймворк jQuery, то перед строкой из предыдущего пункта добавьте такую: 
    <?php wp_enqueue_script('jquery'); ?>
  6. Вот и все.

Теперь, я думаю, вашим посетителям-комментаторам будет приятно, если вы встретите их приветом и спрячете “лишние” поля из формы комментариев =)

Смотрите также

jQuery-скрипт: прокрутка к родительскому комментарию и обратно

26 комментариев

Мне нравятся, как оформлены комментарии на популярном Хабрахабре. В частности приглянулись такие финтифлюшки в виде стрелок “Ответа на” и “Обратно“, которые при клике плавно прокручивают страницу до родительского комментария и ...

Коллекция jQuery-скриптов от Димокса

16 комментариев

Это, можно сказать, некий итоговый пост того, что я успел “настряпать” за время ведения этого блога, используя замечательный фреймворк jQuery. Скрипт для блоков с вкладками (табами) – два очень простеньких ...

jQuery-скрипт для куков при использовании кэша MaxCache на WordPress

75 комментариев

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

jQuery-cкрипт "Добавить в закладки"

135 комментариев

Данный скрипт – это усовершенствованная версия JS-скрипта “Добавить в закладки”, который я представил читателям более года назад. Прежде всего хочу поблагодарить Женю Самборского за то, что помог мне его “добить”. ...

Комментарии (88)

  1. Allpa
    18 июля 2011 г. в 00:23

    Димокс, дорогой!
    Я чуть выше писала, что ты молодец, — так оно и есть, подтверждаю)
    То есть с прежним шаблоном всё работало прекрасно, о чём я тут и сообщила.
    Теперь я перешла на другой шаб, на нём скрипт работать не хочет ни в какую. Перепробовала всё, что ты предлагал другим в комментариях, — не помогает :(
    Может, дело в различных кодах на том и этом шаблоне. На старом input выглядел так →

    <p>
<input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><small><?php _e('Name <span style="color: red">*</span>','MyProduct') ?>
<?php if ($req) _e('','MyProduct'); ?>
</small></label>
</p>
...
и так далее

    На новом же шаблоне каждый input обрамлён дивами по такому принципу →

    <div class="author <?php if ($req) echo "required"; ?>">
<input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
<label for="author"><?php _e('Имя', 'warp'); ?> <?php if ($req) echo "*"; ?></label>
</div>
...
Дальше другие дивы: с email и url

    Я заключила в →

    <div id=”author-data”></div>

    все три дива: перед самым первым

    <div id=”author-data”>

    (кавычки правила), после самого последнего

    </div>

    ещё один

    </div>

    .
    Наверное, это неправильно.. А как правильно?

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

    1. Dimox
      18 июля 2011 г. в 10:15 / ответ на коммент Allpa

      То, что поменялся html-код, сути не меняет, причина не в этом. Отладчик указывает на ошибку в этом файле – /wp-content/themes/yoo_vanilla_wp/warp/js/search.js. Возможно, что в этом причина, я в этих ошибка не разбираюсь.

      1. Allpa
        18 июля 2011 г. в 20:28 / ответ на коммент Dimox

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

        <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/scripts.js"></script>

        конфликтует, во-первых, со скриптом для тултипов vtip.js, который подключен выше (при наличии твоего кода тултипы перестают показываться).
        И, во-вторых, при наличии твоего кода перестаёт работать поиск по блогу так, как он задумывался авторами шаблона: при введении слова/фразы в строку поиска выпадает окошко с результатами, где юзеру предлагаются варианты на выбор (ну, как это организовано в любом и-нет поисковике).

        Подумала, бог с ними, с тултипами, другие заюзаю. И с Поиском — ну, заюзаю поиск от Гугла, чёрт с ними, с красивостями. Поудаляла все другие скрипты для чистоты эксперимента, оставила только твой — не работает :(

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

        Что же делать-то.. обидно как!

        Слава богу, без проблем работает другой твой мануал/скрипт: dimox.name/adding-comments-rules/

        1. Dimox
          18 июля 2011 г. в 21:11 / ответ на коммент Allpa

          Вывод – отключить мой скрипт и не мучаться.

  2. Виктория
    24 июля 2011 г. в 22:07

    А что сделать, чтобы WordPress-блог выводил ранее введенные данные в форме комментирования??? Есть ли какие-то решения кроме Disqus Comment System?

    1. Dimox
      25 июля 2011 г. в 10:10 / ответ на коммент Виктория

      Смотрите выше комментарий №51.

  3. XA3AP
    10 августа 2011 г. в 23:54

    Спасибо за скрипт и за отличный сайт.

  4. Руслан
    12 августа 2011 г. в 16:16

    Пишу комментарий, чтобы увидеть как это работает… иначе ведь не проверишь. Идея потрясная! А еще мне понравилось, что под окном записи комментария есть “правила комментирвания” есть такой плагин или это тоже собственное ноу-хау?
    Спасибо!

    1. Dimox
      12 августа 2011 г. в 17:19 / ответ на коммент Руслан

      К сожалению, в данный момент на блоге это не работает из скрипта кэширования. А на счет правил комментирования – это не плагин.

      1. Allpa
        13 августа 2011 г. в 02:29 / ответ на коммент Dimox

        Почему “не работает”? Я вижу “С возвращением, Allpa!”, значит, работает?

        1. Dimox
          14 августа 2011 г. в 11:36 / ответ на коммент Allpa

          Точно, я уже и сам забыл, что делал одну штуку, чтобы запоминалка работала. Так что да, с этим все в порядке. Поэтому забираю обратно свои слова из предыдущего моего коммента =)

  5. Scorpione
    11 сентября 2011 г. в 23:32

    Большое спасибо:)

  6. Allpa
    17 сентября 2011 г. в 20:01

    Димокс, ай нид ё хелп :)
    В очередной раз переползаю на новый шаб, на котором не работало сохранение кукисов (если ты помнишь, я тут тебя уже бомбирдировала вопросами на эту тему). Проблема с кукисами была решена подстановкой в файл comments.php строчек →

    <?php 
    $commenter = wp_get_current_commenter(); 
    $comment_author = $commenter['comment_author']; 
    $comment_author_email = $commenter['comment_author_email']; 
    $comment_author_url = esc_url($commenter['comment_author_url']); 
?>

    Потом я взялась прикручивать “Привет, автор!”, потому как до решения вопроса с кукисами скрипт не работал, есссно. Всё прикрутилось, но работает странно: любой автор приветствуется как undefined.
    То есть кто бы ни отправлял камент, строчка приветствия всегда одна →

    С возвращением, undefined! Войти под другим именем »

    Я совершенно растерялась.. о.О
    Ты не знаешь, случаем, что это, почему и где подправить, если можно вообще подправить?

    Спасибо!

  7. Allpa
    17 сентября 2011 г. в 20:41

    Димокс, я как всегда — поспешила с вопросом :(
    А потом взяла да и тупо скопировала кусок кода →

    <div id="author-data">... и тут поля для имени, мейла и урла ...</div>

    из оттуда, где он у меня работал, туда, где он у меня не работал :)
    И всё получилось!
    Прошу извинить за панику, мне стыдно.
    Но чисто теоретически.. просто ради интересу: почему же выскакивал undefined, который, как я почитала, выскакивает, когда скрипт не могёт, в данном случае, идентифицировать комментатора.
    Тут, небось, проблема в коде шаблона: скрипт и шаблон просто не поняли друг друга :)

    1. Dimox
      18 сентября 2011 г. в 12:38 / ответ на коммент Allpa

      Вот вы уже сами и ответили на свой вопрос.

  8. TopClans
    6 января 2012 г. в 11:37

    Хочется проверить, придется комментировать)

  9. Soohar
    23 июня 2012 г. в 20:13

    Спасибо за скрипт и разъяснение!

  10. Александр
    14 июля 2012 г. в 16:47

    Сума сойти! У меня сразу заработало ! :) Спасибо, Dimox! За все твои велосипеды с которыми делишься :)))

  11. Dmitriy
    29 июля 2012 г. в 22:10

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

    <input />

    что я нашел в comment-template.php, т.к. в файле темы comments.php даже близко похожего ничего нет ):

    	$fields =  array(
		'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		            '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
		'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		            '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
		'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .
		            '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
	);

    Пытался задивить, прописывал в header… Не хочет. Обидно. Идея очень неплохая.

    1. Dimox
      30 июля 2012 г. в 09:51 / ответ на коммент Dmitriy

      Да, у вас код совершенной другой, так что, похоже, не получится сделать.

  12. Евгений
    4 октября 2012 г. в 12:36

    Спасибо!

  13. Александр
    6 октября 2012 г. в 09:24

    Интересная фишка, буду пробовать осуществить у себя на блоге

  14. Ольга
    2 января 2013 г. в 02:27

    Здравствуйте!
    Недавно захотела сделать ссылку в тексте, которая бы вела сразу к форме комментирования. Но хотелось бы, чтобы это было плавно. Но к сожалению не получалось. Попробовала убрать Ваш скрипт “С возвращением, автор!”, всё заработало, вернула – всё то-же, не работает. С чем это может быть связано и можно ли их как-то “подружить”, чтобы работало и то и другое? Скрипт плавного перехода к форме комментирования такой:

    $(document).ready(function() {
    $("a.topLink").click(function() {
        $("html, body").animate({
            scrollTop: $($(this).attr("href")).offset().top + "px"
        }, {
            duration: 500,
            easing: "swing"
        });
        return false;
    });
});

    Если это не слишком сложно…
    Спасибо!

    1. Dimox
      2 января 2013 г. в 14:06 / ответ на коммент Ольга

      Проверил с этим кодом – у меня работает.

      1. Ольга
        2 января 2013 г. в 16:32 / ответ на коммент Dimox

        И правда – работает…???? Что это я? Ну бывает – праздники и всё такое ))) Спасибо, за быстрый ответ. Непонятно, в чем была проблема…

  15. Alex
    13 марта 2013 г. в 22:23

    Великолепно, как раз ищу такие маленькие фишки! Спасибо. Жаль подключение нудное, другие плагины только копируешь и активизируешь, а тут еще делать что-то нужно:)) Но сама идея мне очень понравилась.

  16. Alex
    13 марта 2013 г. в 22:27

    Может, сделаете из этого плагин?:)

    1. Dimox
      14 марта 2013 г. в 09:52 / ответ на коммент Alex

      Нет смысла, процесс установки от этого никак не поменяется.

  17. Юрий
    30 марта 2013 г. в 03:27

    Спасибо за скрипт- заработал сразу! Я ещё добавил к приветственной надписи прикольную картинку.
    Подскажите, как сделать, чтобы скрипт заработал (на другом блоге) если форма комментирования выводится через файл comments_template вордпресса, а не через comments.php шаблона?

    1. Dimox
      30 марта 2013 г. в 10:10 / ответ на коммент Юрий

      Не знаю, я всегда вывожу через comments.php.

  18. rutulets
    17 июня 2013 г. в 01:09

    У меня почему то ссылка “изменить” не появляется

  19. rutulets
    18 июня 2013 г. в 01:02

    Я его у себя реализовал с помощью такого кода

    <?php $fields =  array(
	'author' => '<div id="author-data"><p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
	            '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
	'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
	            '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
	'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .
	            '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p></div>',
);?>

<?php $comments_args = array(
		'fields' => $fields,
		'comment_notes_after' => '',
);
comment_form($comments_args);?>

    Может что то неправильно?

  20. Роман
    16 октября 2013 г. в 17:57

    Огромное спасибо! Все очень доступно и понятно расписано, да и сам скрипт классный.
    Я был приятно удивлен, когда попытался установить скрипт у себя и все вышло с первого раза :)

Ваш комментарий

Жирный текст

Ссылка

Цитата

Внутристрочный код

CSS-код

HTML-код

JavaScript-код

PHP-код

© 2006–2024 Dimox.name. Все права защищены. Перепечатка запрещена.