Главная WordPress

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

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

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 (другого способа определить Оперу не нашел). Поэтому, если у посетителя вашего сайта Опера замаскирована под другой браузер, то прокрутка будет работать некорректно. Спасибо Владимиру за подсказку, теперь в Опере все налажено.

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

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

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

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

    var isOpera = !!window.opera;
    • Владимир, большое спасибо! Супер!

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

      • Ну 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;
        

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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