Сегодня мы рассмотрим: Настоящие ценители музыки знают, что для качественного...
Привет всем!
Продолжаю писать статьи, посвященные навигации сайта на движке WordPress.
И в данном материале я покажу, как делается постраничная навигация без плагинов и с помощью всем известного WP-PageNavi. Как и в случае с , я покажу реализацию несколькими способами, чтобы вы выбрали наиболее подходящий для вас. Да и бывают случаи, когда какой-то способ не работает у кого-то. Поэтому, будет некая подстраховка.
Материал вышел очень объемный и, пожалуй, самый исчерпывающий в сети.
Постраничная навигация (пагинация) - это разбиение информации на страницы. Если взять массу сайтов на Wordpres, то данный феномен ярко выражен в видео списка номеров страниц внизу каждой страницы с анонсами. На моем блоге данная функция имеет следующий вид.
Дизайн может быть разный. Но суть ее одна и та же - разбиение информации на страницы. Как вы знаете, по умолчанию, на главной странице сайта выводятся анонсы записей, которых может быть определенное количество (зависит от выставленных настроек в пункте "Написание").
Если мы не будем разбивать их количество, то они будут выводиться на одной странице. А это не есть хорошо, так как неудобно будет пользоваться сайтом и главная страница будет долго грузиться, ведь с течением времени анонсов будет громаднейшее количество.
Как правило, сейчас в современных шаблонах Wodpress постраничная навигация уже встроена. Но имеется вариант, когда ее и нет. Тогда придется реализовать. Вместо нее может быть разбиение анонсов на страницы в виде ссылок на предыдущие и следующие записи. Это ярко выражено в стандартных шаблонах.
Такой вариант также неудобен, так как при заходе на 3 страницы назад мы не сможем в один шаг вернуться на изначальную страницу. Придется 3 раза кликать на предыдущие записи или на следующие. Постраничная навигация же позволяет более гибко управляться с данным моментом.
В общем, давайте перейдем к ее реализации и первым шагом встроим ее в шаблон без плагина. Данный способ я разобрал в видео-уроке. Рекомендую сначала его посмотреть, а потом уже проштудировать текстовую версию инструкции.
Делаем без плагина
Сейчас я покажу способ, после которого у вас будет точно такая же постраничная навигация WordPress, как и у меня. Делается все очень просто. Потребуется 2 части кода, которые нужно будет разместить в файлах шаблона, а затем прописать стили, чтобы задать оформление. Приступим!
Вот первая часть кода. Ее необходимо разместить в файле functions.php шаблона оформления.
function wp_corenavi() { global $wp_query, $wp_rewrite; $pages = ""; $max = $wp_query->max_num_pages; if (!$current = get_query_var("paged")) $current = 1; $a["base"] = str_replace(999999999, "%#%", get_pagenum_link(999999999)); $a["total"] = $max; $a["current"] = $current; $total = 0; //1 - выводить текст "Страница N из N", 0 - не выводить $a["mid_size"] = 1; //сколько ссылок показывать слева и справа от текущей $a["end_size"] = 1; //сколько ссылок показывать в начале и в конце $a["prev_text"] = ""; //текст ссылки "Предыдущая страница" $a["next_text"] = ""; //текст ссылки "Следующая страница" if ($max > 1) echo ""; }
function wp_corenavi () { global $wp_query , $wp_rewrite ; $pages = "" ; $max = $wp_query -> max_num_pages ; if (! $current = get_query_var ("paged" ) ) $current = 1 ; $a [ "base" ] = str_replace (999999999 , "%#%" , get_pagenum_link (999999999 ) ) ; $a [ "total" ] = $max ; $a [ "current" ] = $current ; $total = 0 ; //1 - выводить текст "Страница N из N", 0 - не выводить $a [ "mid_size" ] = 1 ; //сколько ссылок показывать слева и справа от текущей $a [ "end_size" ] = 1 ; //сколько ссылок показывать в начале и в конце $a [ "prev_text" ] = "" ; //текст ссылки "Предыдущая страница" $a [ "next_text" ] = "" ; //текст ссылки "Следующая страница" if ($max > 1 ) echo " if ($total == 1 && $max > 1 ) $pages = "Страница " . $current . " из " . $max . "" . "\r\n" ; echo $pages . paginate_links ($a ) ; if ($max > 1 ) echo "" ; |
Я разместил код в самое начало файла после открывающего тега
В данном коде мы можем отрегулировать некоторые параметры:
- Строка 10 - если изменить значение 0 на 1, то рядом с номерами страниц будет выводиться надпись вида, например "Страница 3 из 45". Можете сделать такой вариант, но я считаю, что в данном случае он не нужен, так как в номерах страниц и так понятно, сколько страниц на сайте. А активная страница выделяется другим цветом;
- Строки 11 и 12 - слева и справа номера активной страниц должно отображаться определенное количество предыдущих или следующих номеров соответственно. Тут мы выставляем их количество. В данном коде стоит значение 1. Можно поставить 2 или 3. Тут нужно будет немного поэкспериментировать, так как чем больше количество номеров, тем шире будет навигация. Все зависит от ширины шаблона.
wp_corenavi () ; |
Так как постраничная навигация должна отображаться везде, где выводится список анонсов,то необходиммо данный код разместить во всех файлах, где это происходит:
- Главная страница - index.php;
- Страницы рубрик и архивов - category.php и archive.php;
- Страница поиска - search.php.
Кстати, в некоторых шаблонах вывод страниц рубрик и архивов может осуществляться одним файлом. У меня за это отвечает файл archive.php.
Если в вашем шаблоне отсутствует какая либо навигация для разбиения анонсов на страницы, то второй код мы размещаем после вывода контента. Если же у вас имеются предыдущие и следующие ссылки, что более вероятно, то такой вариант легче осуществим, так как вам просто нужно будет их заменить на предоставленный код выше.
Как правило, стандартная навигация в виде предыдущих и след. ссылок выводится с помощью подобного кода.
< div class = "nav-previous" > ← Older posts" , "twentyten" ) ) ; ?> < / div > < div class = "nav-next" > "Newer posts " , "twentyten" ) ) ; ?> < / div > |
У каждого данный код может быть разным, но его основная начинка будет одинаковой. Вам нужно будет найти код, который будет содержать код с названиями next_posts_link и previous_posts_link.
Когда найдете, то смело удаляете данное содержимое из файла и на его место копируете нужный код, выводящий постраничную навигацию.
Таким образом нужно заменить стандартную навигацию на постраничную во всех файлах, где имеется вывод анонсов. Названия файлов я давал выше.
Кстати, если у вас имеются проблемы с данным процессом, то можете обратиться ко мне за помощью в комментариях. Постараюсь помочь.
/* NAVIGATION */.navigation { float: left; width: auto; margin-left: 216px; margin-top: -2px; font-size: 16px; } .navigation > a { float: left; width: 32px; font-weight: 700; text-align: center; color: #637b93; text-decoration: none; margin-left: 1px; padding-top: 7px; } .navigation > .current { float: left; font-weight: 700; width: 29px; text-align: center; color: #c4c8cc; margin-left: 5px; padding-top: 7px; } .navigation > .prev { float: left; width: 32px; height: 34px; background: url("images/bow_left.png") no-repeat; margin-left: 0; } .navigation > .next { float: left; width: 34px; height: 34px; background: url("images/bow_right.png") no-repeat; margin-left: 14px; } .navigation > .dots { float: left; font-size: 14px; font-weight: 700; width: 32px; text-align: center; color: #c4c8cc; padding-top: 7px; }
/* NAVIGATION */ Navigation { float : left ; width : auto ; margin-left : 216px ; margin-top : -2px ; font-size : 16px ; Navigation > a { float : left ; width : 32px ; font-weight : 700 ; text-align : center ; color : #637b93 ; text-decoration : none ; margin-left : 1px ; padding-top : 7px ; Navigation > .current { float : left ; font-weight : 700 ; width : 29px ; text-align : center ; color : #c4c8cc ; margin-left : 5px ; padding-top : 7px ; Navigation > .prev { float : left ; width : 32px ; height : 34px ; background : url ("images/bow_left.png" ) no-repeat ; margin-left : 0 ; Navigation > .next { float : left ; width : 34px ; height : 34px ; background : url ("images/bow_right.png" ) no-repeat ; margin-left : 14px ; Navigation > .dots { float : left ; font-size : 14px ; font-weight : 700 ; width : 32px ; text-align : center ; color : #c4c8cc ; padding-top : 7px ; |
Также необходимо загрузить картинки стрелок перемещения вперед и назад на хостинг в папку images шаблона оформления. . Для загрузки можете пользоваться стандартным файловым менеджером хостинг провайдера. Я же .
Когда разместили коды в файлах functions.php, во всех файлах, выводящих страницы с анонсами и прописали стили, можем проверить работоспособность навигации. У меня все работает и в стандартном шаблоне она имеет следующий вид.
Способ без плагина мы разобрали. Уверен на все 100%, если все сделали, как описал выше, то у вас должно все работать на ура. Был еще второй вариант без плагина, но просмотрев его я понял, что по сути это тот же самый вариант, только немного измененный. Поэтому, я перехожу к способу реализации постраничной навигации с помощью плагина.
Плагин WP-PageNavi
Для начала скачиваете плагин с официальной страницы и устанавливаете его на сайт.
После установки плагина нужно будет также разместить код, который выведет навигацию внизу страницы.
Теперь плагин будет выполнять свою задачу и номера страниц будут иметь следующее оформление.
С одной стороны оформление не ахти, а с другой очень даже ничего, так как не мозолит глаза. Пользователи любят простоту! Поэтому, можно все так и оставить. Если же хотите чего-то более красочного, то сейчас мы с вами рассмотрим некоторые варианты. А пока мы обсудим такую вещь, как настройка wp pagenavi. Настройки имеются и о них стоит поговорить.
Касаемо первого пункта настроек "Шаблоны списка страниц", то в нем ничего менять не нужно. Нас все устраивает. Мы двигаемся к пункту "Настройки списка страниц".
Отмечу, что со всеми параметрами в этом пункте нужно экспериментировать, чтобы найти оптимальное значение для себя. Я лишь объясню вкратце, за что отвечает каждый параметр.
- Использовать стиль - если поставим значение "No", то стили плагина уберутся и номера страниц не будут оформлены;
- Стиль списка страниц - кроме обычного списка номеров страниц мы можем выбрать вариант выпадающего списка;
- Всегда показывать список страниц- настройку не включаем. Нужно, чтобы список отображался только там, где это необходимо;
- Количество страниц для показа - отвечает за количество выводимых номеров страницы в начале списка. По умолчанию, значение стоит 5 и на скриншотах выше вы можете посмотреть, что именно 5 страниц выводятся;
- Диапазон страниц для показа - если на вашем сайте очень много страниц, то данная функция будет крайне полезна. Она будет выводить номера страниц после основного списка со значениями 10, 20, 30, 40 и так далее. Интервал между этими значениями определяется следующим параметром;
- Коэффициент для диапазонов страниц - если выстави значения 5, то диапазон страниц будет иметь вид - 10, 15, 20, 25 и т.д. Если 10, то 10, 20, 30, 40 и так далее. Значения 10 вполне достаточно.
Это все настройки, которые вам нужно выставить в соответствии со своими нуждами. Тут уже каждый по себя отрегулирует.
Самый простой вариант - установка дополнительного плагина, который имеет уже заготовленные стили, а также дает возможность настроить каждый параметр индивидуально. Называется плагин .
После его установки в админ-панели WordPress появляется новый пункт.
После перехода в него сразу можем выбрать уже имеющиеся заготовки дизайна.
Если же хотим настроим стили индивидуально, то в первом пункте настроек "Select Stylesheet" выбираем вариант "Custom" и настраиваем параметры всех элементов (границ и их цветов, цветов и размеров шрифтов, цвета ссылок при наведении курсора мышки и так далее).
Переведу вам все параметры.
- Heading Color - цвет текста "Страница 3 из 45";
- Background Color - цвет фона;
- Active/Current Background color - цвет фона активного номера страницы;
- Font Size - размер шрифта;
- Link Color - цвет ссылки;
- Link Mouse Hover/ Active Hover - цвет ссылки при наведении мышки на номер и при активности номера;
- Link Border Color - цвет границы;
- Link Border Mouse Hover/Active Color - цвет границы при наведении курсора мышки и пи активности номера;
- Align Navigation - расположение навигации (слева, справа, центр).
Значения цветов вы можете искать в интернете или же в программе Photoshop, когда выбираете нужный цвет для заливки.
Вариант с плагином неплохой, но я всегда говорю, что нужно избавляться от лишних плагинов и в данном случае он таковым и является.
Второй вариант осуществляется с помощью редактирования файла стилей, который расположен в папке с плагином Wp-pagenavi на хостинге - pagenavi-css.css.
Данный файл подключается, когда в настройках плагина активна настройка "Использовать стиль pagenavi-css.css". Поэтому, если мы его отредактируем, то после обновления плагина, все стили заменятся на стандартные. Чтобы каждый раз на заменять данный файл и не прописывать стили заново я рекомендую сделать следующую вещь:
- Отредактировать стили в этом файле на свои, придав нужное оформление постраничной навигации;
- Отключить настройку "Использовать стиль pagenavi-css.css";
- Разместить эти стили в основном файле стилей шаблона оформления style.css.
Таким образом эти стили будут работать независимо от плагина. И при обновлении они не будут сбиваться. Это, пожалуй, самый лучший вариант оформления навигации в данном плагине, который я сам бы сделал. Но, к счастью, я использую вариант без плагина, что и вам совету.
Итак, друзья. Материал получится очень хорошим, как на меня. Что вы думаете на этот счет? Надеюсь, что вы все сделали. Если что-то не получается, то в комментариях постараюсь помочь. Пишите, не бойтесь! Я также когда-то очень мучился и мне удалось разобраться.
На данной ноте уже хочу поскорей закончить этот пост, так как сил он отнял уйму. Это я и сделаю. Попрощаюсь и пойду отдыхать, а затем уткнусь в написание нового контента.
С уважением, Константин Хмелев!
Здравствуйте уважаемые читатели блога . В этой статье рассмотрим, как настроить постраничную навигацию с помощью плагина WP-PageNavi для .
После установки этого полезного плагина постраничная навигация будет иметь вид:
Согласитесь, так намного лучше. Причем это только первоначальный вариант. А ведь можно настроить вид постраничной навигации так, чтобы она гармонично вписывалась в вашего сайта. Да и как может быть по другому, если мы говорим про блог вебмастера ?
Как установить и настроить плагин для вывода постраничной навигации PageNavi.
Для начала нужно скачать плагин PageNavi с официального сайта себе на компьютер и распаковать архив. В результате вы получите папку PageNavi с несколькими файлами. Далее настраивает соединение с с помощью ftp-менеджера FileZilla и , в директорию /wp-content/plugins/ .
После чего открываем админ-панель WordPress, заходим во вкладку плагины, находим PageNavi и нажимаем «активировать ».
На этом установка и активация плагина PageNavi завершена. Осталось только прописать в файлах index.php, archive.php и search.php код, который отвечает за вывод постраничной навигации. Для этого откройте файлы с помощью текстового редактора и найдите следующие строки:
Замените их на:
< ?php if(function_exists("wp_pagenavi")) { wp_pagenavi(); } ?>После этого постраничная навигация будет выводиться на этих страницах. Но зачастую ее оформление не вписывается в дизайн блога, поэтому ее нужно настроить. Для этого открываем в админке блога «Настройки» и выбираем пункт «Список страниц». Откроется такое окно:
В нем вы можете внести изменения по своему вкусу . Например, убрать слово «страница» в первой строке или вообще ее очистить и т. д. В общем экспериментируйте, пока не получите вариант, который вас устроит. Для этого блога я оставил все как есть. Ниже укажите стиль списка страниц, сколько страниц показывать и нажмите сохранить.
Теперь переходим непосредственно к настройке внешнего вида постраничной навигации. Для этого придется отредактировать файл стилей плагина PageNavi — pagenavi-css.css . Откойте его с помощью текстового редактора Notepad++ и внесите необходимые изменения в следующий код:
.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:active { padding: 2px 4px 2px 4px; margin: 2px; text-decoration: none; border: 1px solid #0066cc; color: #0066cc; background-color: #FFFFFF; } .wp-pagenavi a:hover { border: 1px solid #114477; color: #114477; background-color: #FFFFFF; } .wp-pagenavi span.pages { padding: 2px 4px 2px 4px; margin: 2px 2px 2px 2px; color: #000000; border: 1px solid #000000; background-color: #FFFFFF; } .wp-pagenavi span.current { padding: 2px 4px 2px 4px; margin: 2px; font-weight: bold; border: 1px solid #000000; color: #000000; background-color: #FFFFFF; } .wp-pagenavi span.extend { padding: 2px 4px 2px 4px; margin: 2px; border: 1px solid #000000; color: #000000; background-color: #FFFFFF; }Можете изменить цвет текста, фона, будет ли изменяться цвет текста после наведения курсора и т. д. После того, как внесете все изменения, сохраните файл и оцените результат. Кстати, значительно облегчит работу плагин FireBug для браузера Firefox.
В настройках вашего блога WordPress в параметрах "Чтение " в пункте "На страницах блога отображать не более " по умолчанию стоит - 12 записей. И когда их количество на блоге или в отдельно взятой рубрике перевалит за 10, внизу главной страницы или страницы этой рубрики появится плохо заметная ссылка "Раньше ".
При большом числе записей не все посетители замечают эту ссылку, к тому же такая навигация очень неудобна. Согласитесь, не самое лучшее юзабилити.
Исправить эту досадную оплошность поможет плагин постраничной навигации WordPress - WP PageNumbers. После установки, активации и настройки плагина, ваш блог приобретет вот такую удобную постраничную навигацию:
Установка WP PageNumbers .
- Скачать плагин WP PageNumbers можно .
- Активировать плагин.
Настройка WP PageNumbers .
Перейдите в вашей панели администратора Параметры → Page Numbers .
1. Page Number Themes
Поставьте галочку (если не стоит) пункта "Include theme stylesheet for page numbers " и тем самым разрешите отображать одну из тем плагина в постраничной навигации. Ниже выберите наиболее подходящий для вашего шаблона стиль постраничной навигации.
2. Settings-Text
В этих настройках я вместо "Page " прописал "Страница " и полем ниже заменил "of " на "из ".
3. Settings-show/hide
Здесь лучше оставить все галочки для отображения полной информации в выбранной теме вашей постраничной навигации.
4. Settings-Misc
Впишите количество страниц, отображаемые в навигационной панели подряд до троеточия. Если оставить поле пустым, то по умолчанию будет 10 страниц, если ноль, то без ограничений.
5. Instructions-Code to add to your theme
Откройте файл index.php для чего перейдите в вашей панели администратора Внешний вид → Редактор → Основной шаблон (index.php) . Найдите там код, содержащий в себе слова "Предыдущая запись " и "Следующая запись ".
Замените его на новый код, предоставленный под пунктом "Code to add in your theme ".
То же самое проделайте с файлом "archive.php ", отвечающем за вывод записей в каждой отдельной рубрике.
Не в каждой теме в файле index.php можно найти слова "Предыдущая запись " и "Следующая запись ". В этом случае вставьте наш код перед кодом в конце файла. А для удаления, уже ставшими лишними, ссылок "Предыдущая запись " и "Следующая запись ", удалите в файле loop.php строки со следующим содержимым:
Доброго времени суток, дорогие друзья! Сегодня мы поговорим с вами о том, как сделать на WordPress такую красивую и удобную вещь как постраничную навигацию с помощью плагина WP-PageNavi или простого кода. Не знаю как вам, а мне лично встроенная навигация в движке WordPressсовсем не нравится.
Вот что это за навигация такая? Ладно, если блог был бы еще молодой, и на нем было бы не так много статей, но что если их уже более 200-300? В таком случае такая вот навигация может запросто отпугнуть многих ваших читателей, ведь никому не хочется нажимать на кнопку «предыдущая запись» до потери пульса, чтобы добраться до нужного материала. К тому же данная надпись выглядит столь незаметно, что ее могут просто не увидеть, что в итоге приведет к уменьшению просмотра страниц на посетителя, и времени проведенному на сайте, а это сейчас очень при раскрутке любого сайта, которые нельзя игнорировать. Итак, если вы все же собрались делать постраничную навигацию, то можете воспользоваться любым способом представленным ниже.
Постраничная навигация для WordPress с помощью плагина WP-PageNavi.
Способ 1 . Скачиваем плагин WP-PageNavi здесь и закачиваем его на блог, активируем, переходим в адмике блога в «настройки» «список страниц». Тут нам нужно настроить только один параметр это «количество страниц для показа». Я лично указал 10, чтобы моя навигация была очень видна посетителям. Кстати, если вдруг у вас вся постраничная навигация не влезет в шаблон вашей темы, то есть если она будет выглядеть примерно в таком виде:
то можете просто убавить это число или еще лучше — убрать из настроек плагина надпись «страница» и заменить их стрелочками. Ок, после этого нажимаем сохранить, и наблюдаем, как у нас появилась простая постраничная навигация на блоге. Если этого не произошло, то идем во «внешний вид» « редактор» открываем файл основной шаблон (index.php) и ищем примерно вот такой код: или что-то в этом роде и меняем его на: , сохраняем запись.
Ту же самую операцию проделываем и с файлами archive.php и search.php если хотите, чтобы данная навигация была не только на главной странице, но еще и в отдельных рубриках и при поиске. Гуд, хочу вас предупредить на всякий пожарный, что данный плагин не у всех работает, так что если у вас ничего не получилось, то можете установить себе аналогичный плагин WP-Page Numbers . Если будете его устанавливать, то вам также надо будет вставить специальный код в тех же самых файлах.
Красивые стили-оформления для постраничной навигации плагина WP-PageNavi и WP-Page Numbers.
Вы наверняка уже заметили, что у меня постраничная навигация выглядит намного лучше и привлекательнее чем у вас. Это связано с тем, что у меня стоит дополнительный плагин WP-Page Numbers style , который работает как для WP-PageNavi так и для WP-Page Numbers. Если вдруг вы в кодах, как и я, так сказать не профи, чтобы самим прописывать оформления в файлах плагина, то можете просто поставить себе данный плагин. После того как установите его, у вас в адмике появится новая вкладка PageNavi Style. В ней вы можете выбрать любой на свой вкус стили-оформления постраничной навигации.
Всего в плагине 20 видов стилей со всеми цветами, которые только есть. Также, если вам вдруг ничего из списка не понравится, то вы можете во вкладке Select StyleSheet поменять настройки с «Existing Styles» на «Custom», перед вами появится редактор, где вы сможете указать нужные вам настройки, цвета и т.д. Если что, вот вам их перевод:
Heading Color - цвет заголовка.
Background Color - цвет заднего фона.
Active / Current Background Color - цвет кнопки при наведении на нее курсора мыши.
Font Size - размер шрифта.
Link Mouse Hover / Active Color - цвет ссылки при наведении на нее курсора мыши.
Link Border Color - цвет границы кнопки с номером страницы.
Link Border Mouse Hover/Active Color - цвет границы, при наведении курсора мыши.
Align Navigation - выравнивание на странице: по центру, по левому или правому краю.
Как сделать постраничную навигацию без плагина WP-PageNavi?
Если вы не из любителей ставить очередные ради того чтобы улучшить функционал и , то можете пойти обходным путем — просто установить код, который и будет выводить данную навигацию, но перед этим сделайте на всякий случай.
Способ 2 . Переходим во «внешний вид» « редактор» и открываем файл функции темы (functions.php) и в самом конце перед тегом?>
function wp_corenavi () {
$pages = "";
$max = $wp_query->max_num_pages;
$a["total"] = $max;
$a["current"] = $current;
$total = 1; //1 — выводить текст «Страница N из N», 0 — не выводить
$a["mid_size"] = 3; //сколько ссылок показывать слева и справа от текущей
$a["end_size"] = 1; //сколько ссылок показывать в начале и в конце
$a["prev_text"] = "«"; //текст ссылки «Предыдущая страница»
$a["next_text"] = "»"; //текст ссылки «Следующая страница»
if ($max > 1) echo "
if ($total == 1 && $max > 1) $pages = ""."\r\n";
if ($max > 1) echo "
}
Кстати, в коде есть некоторые пояснения на русском, так что можете поиграться немного с числами, если вам это нужно. Теперь, как и с плагином WP-PageNavi заходим в файлы: functions.php, index.php и archive.php находим там строчку и после нее или еще несколько строчек, добавляем код
Способ 3 . Данный способ аналогичен второму, но все же код немного отличается. В файле функции темы (functions.php) в самом конце перед тегом?> вставляем вот такой код и сохраняем запись.
function navigation () {
global $wp_query, $wp_rewrite;
$pages = "";
$max = $wp_query->max_num_pages;
if (!$current = get_query_var ("paged")) $current = 1;
$a["base"] = str_replace (999999999, "%#%", get_pagenum_link (999999999));
$a["total"] = $max;
$a["current"] = $current;
$total = 0; //1 — выводить текст «Страница N из N», 0 — не выводить
$a["mid_size"] = 2; //сколько ссылок показывать слева и справа от текущей
$a["end_size"] = 5; //сколько ссылок показывать в начале и в конце
$a["prev_text"] = "« Предыдущая "; //текст ссылки «Предыдущая страница»
$a["next_text"] = "Следующая »"; //текст ссылки «Следующая страница»
if ($max > 1) echo "
if ($total = 1 && $max > 1) $pages = "Страница " . $current . " из " . $max . ""."\r\n";
echo $pages . paginate_links ($a);
if ($max > 1) echo "
}
. Теперь заходим в файл таблица стилей (style.css) и где-нибудь вставляем этот код стилей, где коды файла начинаются с точки, и сохраняем запись.
.navigator {margin:10px 7px;
background:#fff;
border:1px solid #aaa;
padding:15px;
overflow:hidden;
font-size:13px;
color:#000;}
.navigator a{background: #fff;
border: 1px solid #DDDDDD;
color: #000000;
font-size: 13px;
padding: 10px;
text-decoration: none;}
background:#f1f8f9;
border: 1px solid #C6D2D4;}
.navigator a:hover{background: #fff;
border: 1px solid #111;
color: #0000cc;
font-size: 13px;
padding: 10px;
text-decoration: none;}
.navigator span.pages {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}
.navigator span.current {background: #fff;
border: 1px solid #111;
color: #0000cc;
font-size: 15px;
padding: 10px;
text-decoration: none;}
.navigator span.extend {padding: 3px 5px;
background:#f1f8f9;
border: 1px solid #C6D2D4;}
.str{background: #fff;
border: 1px solid #DDDDDD;
color: #000000;
font-size: 13px;
padding: 10px;
text-decoration: none;}
Способ 4 . В файле функции темы (functions.php) в самом конце перед тегом?> вставляем вот такой код и сохраняем запись.
function my_pagenavi ($pages = "", $range = 2)
{
$showitems = ($range * 2)+1;
global $paged;
if (empty ($paged)) $paged = 1;
if ($pages == "")
{
global $wp_query;
$pages = $wp_query->max_num_pages;
if (!$pages)
{
$pages = 1;
}
}
if (1 != $pages)
for ($i=1; $i <= $pages; $i++)
{
echo «
if ($paged > 2 && $paged > $range+1 && $showitems < $pages) echo ««";
if ($paged > 1 && $showitems < $pages) echo «‹";
{
if (1 != $pages &&(!($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems))
{
echo ($paged == $i)? «».$i."":"".$i."";
}
}
if ($paged < $pages && $showitems < $pages) echo «›";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo «»";
echo «
}
}
В файлах: functions.php, index.php и archive.php находим там строчку и после нее или еще несколько строчек добавляем код . Теперь заходи в файл таблица стилей (style.css) и как в предыдущем примере вставляем этот код и сохраняем запись.
.pagination {
clear: both;
font-size: 12px;
margin-top: 10px;
text-align: center;
}
.pagination span, .pagination a {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}
.pagination a:hover{
border-color: #000;
}
.pagination .current{
font-weight: bold;
}
Способ 5 . Скачиваем этот файл , берем из него код и вставляем в (functions.php) в самом конце перед тегом?> и сохраняем запись. Если что заранее извиняюсь за неудобства, так как код был слишком большим для публикации. Теперь в файлах: functions.php, index.php и archive.php находим там строчку и после нее или еще несколько строчек добавляем код
Если что, все коды были проверены на работоспособность, так что один из примеров у вас должен работать в любом случае. На этом все, удачи.
Сегодняшний пост будет о том, как сделать постраничную навигацию WordPress сайта при помощи плагина WP-PageNavi.
Итак, у вас уже набралось достаточное количество постов, которые не помещаются на одной странице блога. WordPress автоматически разбивает блог на страницы при превышении числа опубликованных записей, указанного в настройках (Параметры - Чтение - На страницах блога отображать не более *число* записей). По умолчанию большое количество тем WordPress отображают переключение между страницами в таком виде:
Мне кажется, что это не очень удобно, ведь постраничная навигация WordPress намного функциональнее.
Итак, чтобы сделать постраничную навигацию WordPress-блога, мы установим плагин WP-PageNavi. Скачать его можно с официального сайта, но мы найдем его через поиск.
Заходим в раздел «Плагины - Добавить новый», вводим в поиск название «WP-PageNavi» и жмем «Поиск плагинов».
Нужный нам плагин для постраничной навигации WordPress будет первым в результатах поиска, жмем «Установить», затем «Активировать плагин».
Теперь у нас в параметрах появился раздел «Список страниц», в него зайдем чуть позже, а пока сделаем вывод новой постраничной навигации вместо стандартной.
Заходим в «Внешний вид - Редактор» и открываем код файла, который отвечает за навигацию между страницами. В большинстве случаев им является файл index.php. Находим в нем участок, отвечающий за вывод навигации. Выглядеть он должен приблизительно так:
Нам нужно удалить эти строчки и вместо них вставить следующий код:
Сохраняем изменения, переходим на наш блог и смотрим, как теперь отображается постраничная навигация. В моем случае она стала вот такой:
Согласитесь, это смотрится лучше, чем две кнопки «Назад» и «Вперед».
Теперь можно зайти в настройки плагина WP-PageNavi и посмотреть, что можно изменить в нем:
- шаблон общего списка страниц (вы можете заменить текст «Страница 1 из 12» на свой, если вам не нравится стандартный);
- элемент «Текущая страница» (не нужно изменять);
- элемент «Страница» (не нужно изменять);
- элемент «Первая страница» (можете заменить на «В начало» или на другую фразу, которая вам нравится);
- элемент «Последняя страница» (аналогично с предыдущим пунктом, например, «В конец»);
- элемент «Предыдущая страница» (можете заменить стандартное « на другой символ, например, на стрелку влево);
- элемент «Следующая страница» (аналогично с предыдущим пунктом можно заменить » на стрелку вправо);
- элемент «Предыдущие» (многоточие возле перехода на предыдущую страницу);
- элемент «Следующие» (многоточие возле перехода на следующую страницу).
- использовать стиль pagenavi-css.css (будет использоваться стандартный css плагина);
- стиль списка страниц (вы можете выбрать обычный список или выпадающий);
- всегда показывать список страниц (включение или отключение постраничной навигации, даже если страницы с записями отсутствуют);
- количество страниц для показа (число отображаемых страниц в списке);
- диапазон страниц для показа (в том случае, если у вас очень много страниц на сайте);
- коэффициент для диапазонов страниц (если он равен 5, то постраничная навигация будет выглядеть так: 5, 10, 15, 20 и т.д.).
Если вы разбираетесь в css, то сможете самостоятельно настроить WP-PageNavi так, как вам захочется.
Теперь вы знаете, как сделать постраничную навигацию при помощи плагина WP-PageNavi. Если у вас возникнут вопросы, задавайте их в комментариях, а чтобы не пропустить новые статьи, подписывайтесь на обновления блога.