Нашел интересную, более удобную листалку страниц(пейджинг) написанную на jQuery. Называется она Paginator 3000+ и ее все чаще можно встретить многих на сайтах.
Его (Paginator 3000+) немного доработал некто по имени «Сергей», вот тут (http://habrahabr.ru/blogs/jquery/80415/) можно взять его рабочую версию. В ней добавлены кнопки навигации, такие как «Следующая», «Предыдущая», «Первая», «Последняя». При помощи этих кнопок, становится гораздо удобнее перемещаться по страницам.
Paginator 3000+ можно прикрутить его к своему сайту при помощи небольшого изменения плагина page_navi для WordPress.
Если у вас уже установлен плагин wp-pagenavi, то для начала вам потребуется немного модифицировать код для вызова пейджинга. Выглядеть он должен теперь так:
<?php if(function_exists('wp_pagenavi')) { ?>
<?php echo wp_pagenavi_my('<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/ и так далее. У меня таким образом работает сортировка записей на сайте.
Второй пункт более важен для меня и нужно будет подумать как решить данную недоделку.
h++p://pion.ru/wpress/2010/01/11/udobnyj-plagin-postranichnoj-navigacii-na-jquery-dlya-vashego-sajta/
Оставьте первый комментарий