Главная JavaScript

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

Написал небольшой 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. Вот и все.

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

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

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

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

  3. У меня почему-то ссылка «изменить» не появляется

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

    <?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);?>

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

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

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