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

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

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

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

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

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

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

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

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

   1	<?php if ($comment->comment_parent != 0) { ?><a class="up2parent" title="Ответ на" href="#comment-<?php echo $comment->comment_parent; ?>">&uarr;</a><?php } ?>

4. Если это еще не сделано ранее, подключите в своему шаблон фреймворк jQuery, например, вот так:

   1 2 3 4 5

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

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

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

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

   1	<script type="text/javascript" src="полный_путь_до_скрипта/script.js"></script>

6. В шаблоне комментариев вашей темы обязательно должна стоять вот такая штука:

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

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

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

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

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

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

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

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

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

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