Главная › WordPress

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

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

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

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

Раньше я на это внимание как-то особо не обращал, а где-то с недельку назад глаз вдруг туда “упал”. И я, конечно же, захотел на своем блоге реализовать точно такую же штуку. Ну и, как вы уже наверняка поняли, я это сделал. И… угадайте на чем… естественно, на jQuery =)

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

Установка скрипта на WordPress

Я создал отдельную страницу с примером, в исходном коде которого вы найдете написанный мною jQuery-скрипт. В примере я использовал HTML-код комментариев, создаваемый WordPress-темой “по умолчанию” (default).

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

Несмотря на то, что следующее описание процесса установки может вас ужаснуть, на самом деле, все просто.

  1. Если вы не дружите с HTML и CSS, то лучше не стоит браться за установку скрипта.
  2. Скрипт имеет смысл использовать только в том случае, если на блоге используются древовидные комментарии. Т.е. должна быть активирована соответствующая опция в админке WordPress.
  3. В шаблон комментариев в нужное вам место необходимо добавить следующий код, который выводит стрелку “Ответ на”:

    <?php if ($comment->comment_parent != 0) { ?><a class="up2parent" title="Ответ на" href="#comment-<?php echo $comment->comment_parent; ?>">&uarr;</a><?php } ?>
  4. Если это еще не сделано ранее, подключите в своему шаблон фреймворк jQuery, например, вот так:

    <?php
	wp_deregister_script('jquery');
	wp_register_script('jquery', ("http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"), false, '1.3.2');
	wp_enqueue_script('jquery');
?>

    Этот код нужно поместить до следующего кода (в файле header.php):

    	<?php wp_head(); ?>
</head>

    иначе фреймворк не подключится.

  5. Подключите мой скрипт либо аналогично примеру, либо поместив в отдельный файл, например, script.js:

    <script type="text/javascript" src="полный_путь_до_скрипта/script.js"></script>
  6. В шаблоне комментариев вашей темы обязательно должна стоять вот такая штука:

    id="comment-<?php comment_ID() ?>"

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

    <li class="тут_куча_классов" id="comment-45">

    (цифра после comment- может быть любая).

    Если у вас вместо тега <li> используется другой, например, <div>, тогда в моем скрипте необходимо найти вот такую строку:

    var thisID = $(this).parents('li').attr('id').replace('comment-', '');

    и заменить li на имя соответствующего тега.

  7. В примере стрелки размещены в контейнере <div class="commentmetadata"></div>.

    Если вы в своем шаблоне помещаете их в контейнер с другим классом, то необходимо внести соответствующие корректировки в следующих двух строках моего скрипта:

    $('#comment-' + parentID + ' div.commentmetadata:first a.down2child').remove();
$('#comment-' + parentID + ' div.commentmetadata:first').append('<a class="down2child" title="Обратно" href="#comment-' + thisID + '">&darr;</a>');

    Т.е., например, если у вас используется контейнер <span class="meta"></span>, тогда в вышеуказанных строчках необходимо заменить div.commentmetadata на span.meta.

  8. Если нужно, оформите стрелки с помощью CSS. Для стрелки “вверх” используется класс .up2parent, для стрелки “вниз” – .down2child.

Вот, в принципе, и все.

P.S. В браузере Opera обнаружился один косяк, и мне пришлось для него использовать проверку браузера на userAgent (другого способа определить Оперу не нашел). Поэтому, если у посетителя вашего сайта Опера замаскирована под другой браузер, то прокрутка будет работать некорректно. Спасибо Владимиру за подсказку, теперь в Опере все налажено.

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

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

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

Написал небольшой jQuery-скриптик, который призван несколько повысить удобство комментирования на WordPress-блоге. Как работает скрипт Все очень просто. Он проверяет, заполнены ли обязательные поля Имя/E-mail, и выполняет следующее: Если посетитель блога ...

UserJS-скрипт на jQuery для авторизации в WordPress

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

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

WordPress плагин “jQuery Comment Links”

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

Описание Плагин “jQuery Comment Links” заменяет ссылку автора комментария и (или) ссылки в тексте комментария на jQuery-ссылки, т.е. по сути превращает все внешние ссылки в комментариях во внутренние. Что такое ...

Плагин для WordPress “Предпросмотр комментария” на jQuery

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

Содержание: Описание Особенности плагина Скачать Плагин “jQuery Comment Preview” (предпросмотр комментария на WordPress) Установка HTML-код блока предпросмотра Если ничего не работает История версий Описание Плагин “Предпросмотр комментария” (jQuery Comment Preview) ...

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

  1. ioni
    14 лет 10 месяцев назад

    Шикарно1
    сделаю обязательно!

  2. Sosnovskij
    14 лет 10 месяцев назад

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

  3. Vladimir
    14 лет 10 месяцев назад

    Dimox, а не лучше ли сделать проверку на Оперу как

    var isOpera = !!window.opera;
    • Dimox
      14 лет 10 месяцев назад / ответ на коммент Vladimir

      Владимир, большое спасибо! Супер!

      Где можно найти аналогичные способы для других браузеров?

      • Vladimir
        14 лет 10 месяцев назад / ответ на коммент Dimox

        Ну Prototype делает такие проверки:

          Browser: {
    IE:     !!(window.attachEvent && !window.opera),
    Opera:  !!window.opera,
    WebKit: navigator.userAgent.indexOf('AppleWebKit/') > -1,
    Gecko:  navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1,
    MobileSafari: !!navigator.userAgent.match(/Apple.*Mobile.*Safari/)
  },

        var isChrome = !!window.chrome;

        А еще есть хорошая статья.

        • Dimox
          14 лет 10 месяцев назад / ответ на коммент Vladimir

          Т.е. от используемого фреймворка работоспособность этого кода не зависит?

          • Vladimir
            14 лет 10 месяцев назад / ответ на коммент Dimox

            Я вопрос не понял :-)

            Делаешь, например, так:

            var isIE = !!(window.attachEvent && !window.opera);
var isOpera = !!window.opera;
var isWebKit = navigator.userAgent.indexOf('AppleWebKit/') > -1;
var isKHTML = navigator.userAgent.indexOf('KHTML') != -1;
var isGecko = navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('KHTML') == -1;
var isMobileSafari = !!navigator.userAgent.match(/Apple.*Mobile.*Safari/);
var isChrome = !!window.chrome;

            Проверки используют возможности JavaScript и могут работать безо всяких фреймворков.

            А потом там, где нужно осуществлять проверку на браузер, делаешь так:

            if (isIE) {
   alert("Internet Explorer! Make me unsee it...");
}

            Что-то в таком духе.

  4. Бирамакс
    14 лет 10 месяцев назад

    Было бы еще интересней, если бы скролл был с некоторым замедлением перед остановкой :) Такое где-то видел несколько раз, не вспомню где…
    Еще, не в тему, но полезно знать успешному верстальщику – рекомендую в html или body этого сайта принудительно установить background-color белый, иначе в IE боковые поля будут такого же цвета, который пользователь установил себе в качестве цвета окна в Windows. Это смотрится нехорошо, а любителей такой персонализации Windows не мало.

  5. rotor
    14 лет 10 месяцев назад

    Поставил себе — всё отлично работает. Дмитрий, еще раз спасибо за оперативность.

  6. mechitov
    14 лет 10 месяцев назад

    Мне не понравилось, не понял смысла, и не очень удобно в использовании

  7. Biramax
    14 лет 10 месяцев назад

    Автор блога меня услышал :) Так стало гораздо лучше.

  8. WOLF BESPREDEL
    14 лет 10 месяцев назад

    А в случае использования WP Ajax Edit Comments на блоге делать всё по такому же принципу или придётся его отключить и использовать только стандартный вывод комментариев?

  9. alexpts
    14 лет 7 месяцев назад

    На jQuery браузер проверяется с так

    if ($.browser.opera) {
alert("opera");
}

    и по аналогии свойства
    msie
    mozilla
    safari
    webkit (jQuery 1.4)

    В версии jQuery 1.4 рекомендуется использовать jQuery.support – http://docs.jquery.com/Utilities/jQuery.support

  10. Евгений
    11 лет 11 месяцев назад

    Дмитрий, интересная реализация!) А где же взять сам скрипт? С примера вытянуть?

  11. Евгений
    11 лет 11 месяцев назад

    Думаю было бы не плохо в статью добавить еще вот такое вот подключение:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

    Есть блоггеры, у которых подключены скрипты табы и другие, вручную, без плагинов, так вот они не будут работать, если вот это вот:

    <?php
  wp_deregister_script('jquery');
  wp_register_script('jquery', ("http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"), false, '1.3.2');
  wp_enqueue_script('jquery');
?>

    будет подключаться после тех файлов.