января 27, 2010 | by Макс | Нашел интересную, более удобную листалку страниц(пейджинг) написанную на jQuery. Называется она Paginator 3000+ и ее все чаще можно встретить многих на сайтах. Его (Paginator 3000+) немного доработал некто по имени “Сергей”, вот тут (http://habrahabr. ru/blogs/jquery/80415/) можно взять его рабочую версию. В ней добавлены кнопки навигации, такие как “Следующая”, “Предыдущая”, “Первая”, “Последняя”. При помощи этих кнопок, становится гораздо удобнее перемещаться по страницам. Paginator 3000+ можно прикрутить его к своему сайту при помощи небольшого изменения плагина page_navi для Wordpress. Если у вас уже установлен плагин wp-pagenavi, то для начала вам потребуется немного модифицировать код для вызова пейджинга. Выглядеть он должен теперь так: ‘,”);?> В принципе изменения здесь только в добавлении тегов noscript, которые нужны для того, чтобы обернуть в них оригинальный пейджинг от page_navi для которого не требуется наличия Javascipt. В общем если в браузере пользователя отключен Javascript, то будет показан обычный пейджинг, иначе покажется наш новый гламурный Paginator 3000+ на jQuery. Далее нам нужно подключить в файле Footer. php вашей темы, где-нибудь в самом низу до тегов , Javascipt-код нового пейджинга который мы предварительно должны были скачать здесь. Распаковать и загрузить на сервер все файлы в папочку вашей темы.
Строки подключения должна выглядеть так: /jquery-1.3.2.pack. js”> /jquery. paginator. js”> Файла jquery-1.3.2.pack. js – это jQuery библиотека и возможно она уже была подключена в на вашем сайте, по этому попробуйте удалить эту строку и проверить работоспособность пейджинга без нее. В файл header. php мы подключаем стили от пейджинга, который называется paginator. css, кстати не забудьте изменить в нему путь к одному изображению(стрелочка). Можно конечно и не подключать отдельно стилевой файл, а просто все, что находится в этом файле скопировать в файл стилей вашей темы, обычно он называется style. css и лежит в папке вашей текущей темы. Второй вариант возможно даже лучше, т. к. чем меньше будет запросов от сайта к файлам на сервере, тем быстрее будет загружаться сайт, но решать в общем вам. Строка подключения выглядит так: /paginator. css” rel=”stylesheet” media=”all” /> Ну и последнее и самое главное – это конечно модификация самого плагина page_navi. Он должен находиться в папке wp-pagenavi, в папке плагинов вашего сайта и называется файл который мы будем править wp-pagenavi. php. Находим строку: echo ”.$after.”\n”; И сразу после нее добавляем следующий код: ### My paginator 3000 echo ”; 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 “\n”; echo ”; Главное не забывать, что после автоматического обновления плагина 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/ Теги: jQuery