Удобный плагин постраничной навигации на jQuery для вашего сайта

Наконец то я заменил листалку страниц(пейджинг) на этом сайте, на более удобный написанный на jQuery. Называется он Paginator 3000+ и его все чаще можно встретить многих на сайтах.

Его немного доработал Сергей и опубликовал его на сайте Хабры, а вот тут можно взять его рабочую версию. В ней добавлены кнопки навигации, такие как "Следующая", "Предыдущая", "Первая", "Последняя". При помощи этих кнопок, становится гораздо удобнее перемещаться по страницам.

Ну и я сразу-же решил прикрутить его к своему сайту при помощи небольшого изменения плагина page_navi для WordPress. И вот как я это сделал.

Если у вас уже установлен плагин wp-pagenavi, то для начала вам потребуется немного модифицировать код для вызова пейджинга. Выглядеть он должен теперь так:

	<?php if(function_exists('wp_pagenavi')) { ?>
	<?php echo wp_pagenavi('<noscript>','</noscript>');?>
	<?php } ?>

В принципе изменения здесь только в добавлении тегов noscript, которые нужны для того, чтобы обернуть в них оригинальный пейджинг от page_navi для которого не требуется наличия Javascipt. В общем если в браузере пользователя отключен Javascript, то будет показан обычный пейджинг, иначе покажется наш новый гламурный Paginator 3000+ на jQuery.

Далее нам нужно подключить в файле Footer.php вашей темы, где-нибудь в самом низу до тегов </body></html>, Javascipt-код нового пейджинга который мы предварительно должны были скачать здесь. Распаковать и загрузить на сервер все файлы в папочку вашей темы.
Строки подключения должна выглядеть так:

<script language="javascript" src="<?php bloginfo('template_directory');?>/jquery-1.3.2.pack.js"></script>
<script language="javascript" src="<?php bloginfo('template_directory');?>/jquery.paginator.js"></script>

Файла jquery-1.3.2.pack.js – это jQuery библиотека и возможно она уже была подключена в на вашем сайте, по этому попробуйте удалить эту строку и проверить работоспособность пейджинга без нее.

В файл header.php мы подключаем стили от пейджинга, который называется paginator.css, кстати не забудьте изменить в нему путь к одному изображению(стрелочка). Можно конечно и не подключать отдельно стилевой файл, а просто все, что находится в этом файле скопировать в файл стилей вашей темы, обычно он называется style.css и лежит в папке вашей текущей темы. Второй вариант возможно даже лучше, т.к. чем меньше будет запросов от сайта к файлам на сервере, тем быстрее будет загружаться сайт, но решать в общем вам.

Строка подключения выглядит так:

<link href="<?php bloginfo('template_directory');?>/paginator.css" rel="stylesheet" media="all" />

Ну и последнее и самое главное – это конечно модификация самого плагина page_navi. Он должен находиться в папке wp-pagenavi, в папке плагинов вашего сайта и называется файл который мы будем править wp-pagenavi.php.

Находим строку:

	echo '</div>'.$after."\n";

И сразу после нее добавляем следующий код:

### My paginator 3000
echo '<script language="javascript">';
echo "jQuery(document).bind('ready', function (){\n";
echo "var page = /page\/([^#&\/]*)/.exec(window.location.href);\n";
echo "var tot = ".$max_page.";\n";
echo "page = page ? page[1] : 1;\n";

echo "jQuery('#paginator1').paginator({pagesTotal:tot, pagesSpan:10, pageCurrent:page, baseUrl: '".clean_url(get_pagenum_link())."page/'});})\n";
echo "</script>\n";
echo '<div class="paginator" id="paginator1"></div>';

Главное не забывать, что после автоматического обновления плагина wp-pagenavi, все ваши изменения потрутся, так что придется после каждого обновления снова вставлять туда этот код.

Вот собственно и все. У меня работает, будет работать и у вас.

P.S. Немного попользовав данный пейджинг обнаружил пару мелких недоделок. Возможно смогу решить их сам, но лучше бы это сделал автор плагина и тот, кто его модифицировал.

1. На последней странице не дизаблятся ссылки "Следующая" и "Последняя". Да и находясь именно на первой странице, если кликнуть сначала на любую страницу а потом на первую, то ссылки "Предыдущая" и "Первая" тоже не становятся не активными.
2. Если в адресной строке после номера страницы идут параметры передающиеся из формы методом GET, например /page/23/?r_sortby=highest_rated&r_orderby=asc, то ссылки в пейджинге будут поставляться уже после параметров и будут выглядеть так: /page/23/?r_sortby=highest_rated&r_orderby=asc/page/24/ и так далее. У меня таким образом работает сортировка записей на сайте.

Второй пункт более важен для меня и нужно будет подумать как решить данную недоделку.

Похожие записи:

1. Browsershots – Проверьте отображение вашего сайта в разных браузерах
2. Интерактивный редактор кода для jQuery
3. Таблица безопасных шрифтов для вашего сайта
4. Плагин для работы с Sape
5. Схема проезда для сайта при помощи Google Maps