Плагин для навигации страниц wordpress. Постраничная навигация для WordPress с помощью плагина WP-PageNavi. Работа с внешним видом панели постраничной навигации
В этой статье рассмотрим как сделать постраничную навигацию (пагинацию) для WordPress сайта с помощью плагинов WP-PageNavi и WP Page Numbers .
Не на всех сайтах работает постраничная навигация, а если быть точным не во всех WordPress темах есть встроенная нумерация страниц. Тем не менее, ее легко можно организовать с помощью простенького плагина.
Плагин постраничной навигации WP-PageNavi
Скачать WP-PageNavi . Плагин есть в официальном каталоге плагинов для Вордпресс и доступен для скачивания из консоли.
Сразу после активации можно увидеть работу плагина:
Вид будет во много зависеть от дизайна WordPress шаблона , так что не пугайтесь аскетичного вида плагина нумерации страниц изображенного на скрине выше.
У плагина постраничной навигации есть ряд настроек, которые можно найти в разделе «Настройки» - «Список страниц» .
Шаблон общего списка страниц позволяет сделать первичное оформление:
В результате получим следующее:
Об элементах оформления писать не буду, как правило, никто их не меняет.
Можно настроить постраничную навигацию так, чтобы она отображалась в виде выпадающего списка:
Вид конечно не совсем привлекательный, но зато все очень компактно.
Так же можно настроить количество страниц, которые будут отображаться на панели постраничной навигации.
Диапазон страниц для показа и коэффициент для диапазонов страниц позволят упростить навигацию в тех случаях, если на сайте или блоге очень много страниц.
Плагин пагинации WP Page Numbers
Скачать Плагин . Устанавливаем.
Этот плагин мне понравился несколько больше чем предыдущий, так как имеет ряд неоспоримых преимуществ.
Одно из которых оценят те, кто не силен в CSS. А именно - плагин поддерживает 5 стилей оформления панели постраничной навигации WordPress . Так что владелец сайта сможет подобрать необходимое стилистическое оформление, сочетающееся с общими тонами сайта.
Переходим в Настройки – Page numbers .
Выбираем оптимальное оформление:
Делаем перевод основных элементов:
Настраиваем какие элементы постраничной навигации должны быть скрыты и какие будут отображаться на сайте:
Остался последний штрих – добавить код вывода работы плагина.
Как это сделать? Прежде всего, необходимо найти код, который отвечает за вывод стандартной навигации:
Этот код обязательно содержит в себе 2 WordPress функции: previous_post() и next_post() .
Вывод панели навигации осуществляется на главной странице, в рубриках, в метках, архивах, поэтому нужно искать этот код в соответствующих файлах:
wp-content\themes\ваша_тема\index.php
wp-content\themes\ваша_тема\category.php
wp-content\themes\ваша_тема\tag.php
wp-content\themes\ваша_тема\archives.php
Найденный код необходимо заменить на код, указанный в настройках плагина:
Что делать если такого кода там не оказалось? В некоторых Вордпресс темах эти функции могут быть вынесены в отдельный файл. Для того чтобы их найти, необходимо воспользоваться текстовым редактором, который поддерживает поиск по файлам, например: Notepad++, либо же Dreamweaver, он с этой функцией так же неплохо справляется.
Задать нужно следующие условия поиска:
Мне нашло следующий код:
Который необходимо заменить на.
Постраничная навигация – это то, на что каждый блоггер должен обращать особое внимание. Она заключается в отображении записей WordPress на постраничной основе. Обычно записи отображаются в иерархическом порядке, и, несмотря на то, что у вас есть опция выбора, такая, как «Старые записи» и «Новые записи», у вас отсутствует опция отображения записей на постраничной основе с пронумерованными страницами.
Используя постраничную навигацию, пользователь может сразу переходить на страницу 6 или 8, не переходя последовательно со страницы на страницу. Такая навигация также полезна для SEO, поисковики предпочитают такую навигацию, она позволяет ботам легко переходить по записям на страницах сайта. С помощью бесплатных плагинов WordPress, приведённых в этой статье, вы можете установить постраничную навигацию на ваш веб-сайт.
1 – WP Page Navi
WP Page Navi – популярный плагин, который позволит посетителям вашего сайта с лёгкостью переходить со страницы на страницу. Он заменит опцию «Старые записи»/«Новые записи» на навигацию с пронумерованными страницами. Плагин не требует больших ресурсов и не влияет на скорость загрузки страниц.
Этот плагин совместим с большинством существующих тем.
- Требует мало ресурсов.
- Дружественный к SEO.
- Очень популярный.
Этот плагин является неплохим средством для добавления постраничной навигации на ваш сайт WordPress, с его помощью вы можете добавить разбиение на страницы с номерами, отображающее номера начальной страницы, средней страницы и конечной страницы.
С его помощью вы можете даже добавить навигацию по комментариям к записям, это приведёт к облегчению загрузки страницы.
Основные моменты и особенности:
- Использует простую навигацию по страницам.
- Дружественный к SEO.
- Удобный для пользователей.
Simple Pagination – это плагин, который позволит вам иметь навигацию как по вашим записям, так и по комментариям. Как подсказывает название, этот плагин очень прост в использовании. Вы можете даже подобрать стиль навигации, соответствующий теме вашего блога, с использованием таблиц стилей.
Имеется 6 таблиц стилей для соответствия вашему сайту, а также поддержка двух языков.
Основные моменты и особенности:
- Использует простую навигацию по страницам.
- Использует навигацию по комментариям.
- Имеются таблицы стилей для разных типов отображения.
- Имеются 6 типов стилей.
Page Links Plus – плагин, который выполняет функцию добавления навигации в запись. Бывают случаи, когда ваша запись становится такой большой, что вам надо разделить её на части. В таких случаях вам поможет плагин Page Links Plus, который разобьёт вашу запись на страницы, показывая связь между ними, позволяющую посмотреть всю запись целиком.
В плагине имеется множество настроек для того, чтобы получить желаемые результаты для вашей записи.
Основные моменты и особенности:
- Позволяет нумеровать записи и страницы.
- Имеется опция для просмотра всей записи.
- Имеется множество настроек.
- Имеется доступная Pro версия.
Alphabetic Pagination будет нумеровать записи и страницы вашего сайта в алфавитном порядке. Если вы занимаетесь продажами товаров на вашем сайте WordPress, то этот плагин будет творить чудеса, он будет нумеровать все ваши товары в алфавитном порядке.
Он может быть использован в любом месте вашего сайта с помощью шорткода.
Основные моменты и особенности:
- Имеется навигация по алфавиту.
- Имеется поддержка торговли.
- Может быть размещён в любом месте с помощью шорткода.
- Может показать список пользователей в алфавитном порядке.
Плагин Gallery Pagination for WordPress поможет вам в навигации по галереям изображений вашего WordPress сайта. Он будет отображать все изображения в галерее, что поможет пользователю перейти непосредственно к любому изображению без необходимости прокрутки изображений одного за другим.
Поддержка CDN поможет вам сделать галереи изображений дружественными для SEO. Имеется также кэширование для того, чтобы увеличить скорость загрузки страницы, а также Ajax, чтобы делать изменения без необходимости перезагрузки страницу.
Основные моменты и особенности:
- Имеется навигация по галереям изображений.
- Имеется поддержка CDN.
- Дружественный к SEO.
- Имеется кэширование.
Плагин Advanced Post Pagination будет осуществлять навигацию по вашим записям. Если ваша запись слишком большая, вы можете с помощью этого плагина разбить её на несколько страниц. Чтобы не запутаться в привычных цифровых кнопках, с помощью этого плагина вы можете поместить на кнопки текст и картинки. Вы можете использовать шорткод для того, чтобы разбивать запись на страницы так, как вам нравится.
Ajax поможет вам перейти к разделу без необходимости перезагрузки всей страницы.
Основные моменты и особенности:
- Разбиение отдельной записи.
- Использование текста и картинок на кнопках.
- Использование шорткодов.
- Использование Ajax.
WP Smart Pagination – это удобный способ отображения записей с разделением на страницы, вместе с полем, в которое вы можете ввести номер страницы, что позволит вам моментально оказаться на нужной странице. Это очень полезно, если у вас на сайте много записей, что затрудняет пользователям переход к странице, которая находится очень далеко. В том случае, если у вас в наличии 4000 страниц записей, а пользователь хочет посмотреть 2555 страницу, этот плагин может оказать вам неоценимую услугу.
Основные моменты и особенности:
- Использует простую навигацию по страницам.
- Имеется поле для прямого перехода к нужной странице.
- Соответствие темам.
- Имеется модификация стилей.
Это jQuery плагин, вдохновлённый jPages, с помощью которого вы без труда сможете разбить на страницы ваши галереи изображений и комментарии. Это в полной мере отзывчивый плагин, который будет осуществлять навигацию по контенту для всех видов устройств с различными размерами экрана. jPages Pagination For WordPress – небольшой плагин, который позволит легко интегрировать навигацию с jQuery.
Все основные браузеры поддерживают этот плагин, так что посетители вашего сайта не будут иметь проблем с просмотром контента при использовании для навигации данного плагина.
Основные моменты и особенности:
- Используется jQuery.
- Отзывчивый плагин.
- Имеется поддержка основными браузерами.
- Простая интеграция.
В данной статье приведён список лучших бесплатных плагинов WordPress для постраничной навигации, которые могут помочь вам осуществить разбивку вашего сайта по страницам самым наилучшим образом. Все плагины имеют различные особенности, поэтому выберите для себя тот, который лучше всего подходит для вашего сайта.
Приветствую читателей моего блога сайт сегодня поделюсь с Вами настройками постраничной навигации без плагина на блоге . Для чего вообще нужна постраничная навигация на сайте и что полезного она в себе несет? это юзабилити блога, благодаря которому посетители сайта с легкостью могут найти полезную дляних информацию.
Итак, прежде чем перейти к настройкам навигации необходимо настроить удобный режим чтения ваших постов, которые будут отображаться на странице блога. Для этого переходим в Панель Администрирования — Настройки -Чтение:
и устанавливаем количество отображаемых постов, которые будут отображаться на каждой странице:
В данном случае установлено 5 записей. Обычно на блога отображается от 5 до 7 записей на каждой странице. Теперь когда с данными настройками мы разобрались внизу страницы мы видим стандартную постраничную навигацию WordPress, которая имеет примерно такой вид:
Когда у Вас на блоге количество постов предположим 10-15 и они занимают не более 2-3 страниц то такая навигация вполне удобна, но когда важ блог регулярно наполняется контентом и количество статей близится к 100 или 200 и все эти посты размещены 5 на каждой странице. То Я думаю не сложно будет подсчитать сколько страниц будет размещено на блоге. При этом чтоб посетителю Вашего блога найти какой либо пост не приходилось пролистывать все страницы блога на WordPress, постраничная навигация должна иметь более удобный и функциональный вид для пользователя:
Подобная навигация поможет придержать читателя у Вас на блоге так, ему более удобно пролистывать Ваш сайт в поиске актуальных для него постов. Тем самым мы опять таки улучшаем , которые помогают нам в продвижении нашего блога.
Подобная навигационная панель может выводится при помощи плагина WP-PageNavi. При этом Я считаю, что блог должен функционировать с найменьшим количеством плагинов, чтоб не создавать дополнительные нагрузки при отображении сайта. Поэтому мы будем рассматривать не сложную настройку отображения WordPress постраничная навигация без плагина.
Технические настройки
Окрываем Панель администрирования- Настройки -Редактор -открываем файл 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 ‘
’;’;
if ($total == 1 && $max > 1) $pages = ‘Страница ‘ . $current . ‘ из ‘ . $max . ‘’.»\r\n»;
echo $pages . paginate_links($a);
if ($max > 1) echo ‘
}
или же вот такой вид:
и заменяем выделенный код на следующий:
После этого проверяем настройки на вашем сайте должно отобразится стандартоное отображение настроек навигации:
Панель навигации
*/
.wp-pagenavi {
height: 50px;
clear: both;
color:#BB7B00;
}
.wp-pagenavi span.pages{
color: #BB7B00;
}
.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
padding: 6px 9px;
margin: 2px;
background:#ffffff;
font: bold 14px Verdana,sans-serif;
color: #85B6C5;
border-radius:5px ;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #BB7B00;
background:#85B6C5;
color:#ffffff;
}
.wp-pagenavi span.current {
color: #f5f5f5;
background:#85B6C5;
padding: 8px 9px;
}
Теперь когда мы подключили стили для отображения в WordPress панели навигации без использования плагина мы сможемувидеть подобный вид:
Для того, чтоб избавиться от дополнительных дублей страниц, которые не любят поисковые системы нам необходимо закрыть от индексации страницы page. Для этого в начале файла functions.php нам необходимо добавить следующий код:
/*** ДОБАВЛение meta robots noindex,nofollow ДЛЯ СТРАНИЦ ***/
function my_meta_noindex () {if (
is_paged() // Все и страницы навигации
) {echo «».’’.»\n»;}
}add_action(‘wp_head’, ‘my_meta_noindex’, 3); // добавляем noindex,nofollow в head
Сохраняемся и проверяем наши настройки. Для этого открываем любую из страниц 2, 3-10 и т.д нажимаем Ctrl+U и в кодировке страницы должен отображаться следующий код:
При этом важно в файле robots.txt не должны закрываться Disallow: /page от индексации. На этом настройки завершены надеюсь Вы разобрались во всех этих кодировках. Если остались вопросы пишите в комментариях, обязательно отвечу. До скорых встреч!
Привет всем!
Продолжаю писать статьи, посвященные навигации сайта на движке 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, который позволяет вывести постраничную навигацию вашего блога под управлением WordPress на новый качественный уровень.
В принципе, постраничная навигация (пагинация), которая используется по умолчанию, вполне удобоваримая, но все же гораздо более привлекательно выглядит вариант, который предлагает это расширение.
Зачем использовать плагин WP-PageNavi
Судите сами, вот так выглядит разбиение на страницы по умолчанию:
А так после установки плагина:
или же так:
это зависит от тех опций, которые вы выберите в окне его настроек.
По-моему, второй вариант намного симпатичнее первого, который используется по умолчанию. Если вы тоже так считаете, то вам стоит дочитать эту статью до конца и узнать все о нюансах установки и о настройке этого замечательного расширения.
Плагин предварительно нужно будет скачать отсюда . Найдите справа кнопку «Download» и сохраните архив wp-pagenavi.zip у себя на компьютере. Затем распакуйте его и загрузите получившуюся в результате разархивирования папку на сервер хостинга в директорию с плагинами wp-content/plugins/ .
Для этого вам понадобится получить доступ к файлам и папкам вашего WP блога по протоколу FTP ().
При разархивировании бывает, что появляется лишняя внешняя папка, поэтому проверьте это и при необходимости избавьтесь от нее. Надеюсь понятно объяснил? Иначе в противном случае WordPress не увидит установленный вами плагин. Ладно продолжим.
После того, как вы скопируете файлы плагина на сервер хостинга в папку wp-content/plugins/ , вам нужно будет зайти в админку Вордпресса (http://vash_sait.ru/wp-admin/) и выбрать из левого меню админки пункт «Плагины». В верху открывшегося окна «Управление» вам нужно нажать на ссылку «Неактивно» (или же, если нет перевода, то «Inactive»).
Откроется окно со всеми установленными, но еще не активированными расширениями. Найдите среди них «WP-PageNavi» и нажмите на ссылку «Активировать», расположенную под его названием.
Вставляем код вывода плагина в нужные шаблоны Вордпресса
Плагин активирован, но для того, чтобы увидеть на своем блоге результаты его работы, нужно будет еще вставить код вызова функции wp_pagenavi в файлы вашей темы оформления, которая используется в данный момент. .
Обычно постраничная навигация используется на главной странице блога (файл INDEX.PHP из папки с вашей темой), на вебстраницах архивных материалов (ARCHIVE.PHP) и в результатах поиска (файл SEARCH.PHP). Собственно, в эти файлы (шаблоны) нам и нужно будет вставить код вызова нужной нам функции.
Т.е. нужно будет опять подключиться по FTP и зайти в папку с текущей темой:
Wp-content/themes/Название папки с вашей темой оформления
Найдите в ней INDEX.PHP и откройте его на редактирование в удобном для вас редакторе (я использую для этой цели продвинутый Нотепад++ — у меня есть статья по работе с ним). Теперь ваша задача состоит в том, чтобы найти в INDEX.PHP участок кода, отвечающий за переход на предыдущую или последующую страницу. Непростая задачка, не правда ли? Хотя, конечно же, для кого как.
INDEX.PHP не очень большой, изучите внимательно его содержимое на предмет поиска комментариев, связанных с пагинацией, например, таких:
Обычно создатели тем оформления для WordPress заключают в подобные комментарии область кода, отвечающую за вывод постраничной навигации. Сам стандартный код которой может выглядеть, например, так:
После того, как идентифицируете нужный фрагмент, вам нужно будет заменить его строкой вызова функции wp_pagenavi:
Теперь необходимо сохранить произведенные в INDEX.PHP изменения, зайти на главную страницу своего блога и убедиться, что все работает как надо. Т.е. вместо стандартной пагинации, используемой в WordPress, у вас используется красотища от WP-PageNavi.
Кстати, стандартную пагинацию можно и не удалять из кода INDEX.PHP, для того, чтобы при удалении этого плагина у вас не возникло потом проблем с ней. Для этого вы должны будете прописать в INDEX.PHP вместо стандартного кода навигации условие, определяющее, когда отображать стандартную, а когда панель WP-PageNavi.
Условие будет зависеть от того, установлен плагин WP-PageNavi на вашем блоге или нет. Выглядеть оно может примерно так:
В этом коде условие:
If(function_exists("wp_pagenavi"))
проверяет установлен ли плагин, и если он не установлен, то будет работать стандартный скрипт:
Else {?>
А если WP-PageNavi установлен, то навигационная панель будет формироваться его силами:
{ ?>
Хотя, конечно же, можно не заморачиваться и просто заменить одно на другое, но это дело ваше.
Так, теперь все тоже самое вы должны будете проделать для файлов ARCHIVE.PHP и SEARCH.PHP из папки с вашей темой (wp-content/themes/Название папки с вашей темой оформления).
Настройки плагина WP-PageNavi для блога на WordPress
Для того, чтобы в них попасть, вам нужно будет в админке выбрать из левого меню, в области «Параметры», пункт «Список страниц». Откроется окно с активной вкладкой «Шаблоны списка страниц»:
В поле «Шаблон общего списка страниц», на приведенном выше рисунке, задано отображение текущей странички и общего количества страниц. При таком варианте заполнения этого поля, панель WP-PageNavi будет выглядеть так:
Можно добавить слово «Страница» в это поле, если вам так больше нравится:
Страница %CURRENT_PAGE% из %TOTAL_PAGES%
А при желании можно вообще его очистить. В графах «Элемент "Текущая страница"» и «Элемент "Страница"» оставляйте все как есть. Здесь задается отображение надписи для текущей и всех остальных вебстраниц в виде порядкового номера. Получится примерно так:
В полях «Text For First Page» и «Text For Last Page» вы можете задать текст для кнопок перехода к первой и последней:
Вместо текста в графе «Text For First Page» вы можете написать единицу, а поле «Text For Last Page» — %TOTAL_PAGES% (вместо этой надписи будет отображаться число всех вебстраниц):
В полях «Text For Next Post» и «Text For Previous Post» прописываются знаки стрелочек для отображения на кнопках перехода на следующую и предыдущую:
Следующие два поля я очистил, т.к. в противном случае вместо них отображались две белые кнопки без текста. Возможно, что у вас этого не будет и вы сами решите, для чего они нужны.
Переходим к дальнейшим настройкам под названием «Настройки списка»:
Галочка в «Use pagenavi-css.css» позволяет отключить или подключить файл каскадных таблиц стилей (CSS), идущий в комплекте с плагином. В поле «Стиль списка» можете выбрать из выпадающего списка один из двух CSS стилей.
«Обычный» вы видели на предыдущих скриншотах, а при выборе стиля «Drop-down List» вы получите, примерно, такой вид панели WP-PageNavi в WordPress:
Если вы поставите галочку в поле «Always Show Page Navigation», то даже для вебстраниц, у которых пока не требуется вводить нумерацию (допустим, что на главной еще не достаточно постов, чтобы осуществилось разбиение), все равно будет отображаться навигация примерно в таком виде:
В «Number Of Pages To Show» вы можете задать, сколько страничек будет отображаться в виде непрерывного (последовательного) ряда чисел. Переход на остальные будет возможен с помощью кнопок следующей и предыдущей, а так же кнопок перехода на первую и последнюю. Я поставил там пятерку, в результате чего получил:
В «Number Of Larger Page Numbers To Show» можете задать, сколько далеких номеров вебстраниц (большего, чем текущие отображаемые номера численного значения) будет показано после кнопки перехода на следующую.
А в поле «Show Larger Page Numbers In Multiples Of» можете задать шаг, с которым будут отображаться номера далеких вебстраниц. Допустим, что в первом поле я поставлю тройку, а во втором двойку:
В результате панель PageNavi будет выглядеть так:
Т.е. выводятся номера всего трех далеких вебстраниц с интервалом (шагом) равным двойке (6, 8, 10). Для того, чтобы не использовать показ далеких номеров, вам достаточно будет поставить ноль в графе «Number Of Larger Page Numbers To Show».
Для применения и отображения заданных вами изменений, в настройках плагина нужно будет нажать на кнопку «Сохранить изменения», расположенную внизу.
Изменение внешнего вида панели постраничной навигации
Для того, чтобы изменить цветовую гамму, отступы, шрифты и прочие атрибуты внешнего вида панели пагинации, отображаемой на вашем блоге, вам понадобится добавить в файл таблиц каскадных стилей этого плагина необходимые CSS свойства.
Правда для того, чтобы она приняла вид, показанный на приведенных в этой статье скриншотах, я добавил дополнительные свойства не в файл CSS плагина (/wp-content/plugins/wp-pagenavi/pagenavi-css.css), а в файл используемой мною темы оформления (wp-content/themes/название папки с темой оформления/style.css).
В этом файле свойства CSS, задающие внешний вид панели WP-PageNavi, выглядят так:
#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active { padding: 3px 8px 3px 8px; margin: 2px; text-decoration: none; color: #fff; border: 0px line-height:24px; background-color: #2b99ff; } #content .wp-pagenavi a:hover { color:#fff; background-color: #154b7d; } #content .wp-pagenavi span.pages { padding: 3px 8px 3px 8px; margin: 2px 2px 2px 2px; } #content .wp-pagenavi span.current { padding: 3px 8px 3px 8px; margin: 2px; line-height:25px; font-weight: bold; color: #add352; background:#26343c; }
Обращаю ваше внимание, что названия классов и ID (), которые используются здесь, относятся именно к моему шаблону. Поясню назначение некоторых правил и свойств CSS.
#content .wp-pagenavi a, #content .wp-pagenavi a:link, #content .wp-pagenavi a:active { padding: 3px 8px 3px 8px; margin: 2px; text-decoration: none; color: #fff; border: 0px line-height:24px; background-color: #2b99ff; }
задает внешние и внутренние отступы ( про них смотрите) для кнопок панели (фактически для ссылок с этих кнопок, т.к. эти свойства будут применены именно к ссылкам задаваемым тегом A и размещенным в контейнере wp-pagenav).
Так же в этом правиле задается цвет текста ссылок (белый цвет задается в свойстве color: #fff; — ).
Рамка вокруг ссылок будет отсутствовать (свойство border: 0px), а фоновый цвет для контейнеров с этими ссылками будет определяться свойством background-color: #2b99ff; . Именно этот цвет вы можете видеть на скриншотах расположенных выше для неактивных кнопок панели постраничной навигации.
Правило CSS:
#content .wp-pagenavi a:hover { color:#fff; background-color: #154b7d; }
задает цвет для текста и фона контейнера (кнопки) с ссылкой, к которой в данный момент подведен курсор мыши (CSS свойства ссылки при наведении — a:hover — ).
Цвет текста ссылки по прежнему остается белым, а вот цвет фона (фактически цвет кнопки) меняется на более темный (background-color: #154b7d;). Т.е. посетитель, подводя курсор мыши к кнопкам панели навигации, будет видеть изменение цвета этой кнопки, что создает ощущение интерактивности.
Правило CSS:
#content .wp-pagenavi span.current { padding: 3px 8px 3px 8px; margin: 2px; line-height:25px; font-weight: bold; color: #add352; background:#26343c; }
Задает внешний вид кнопки с номером, открытой в данный момент странички блога (в коде у этой ссылки будет прописан тег SPAN с классом CURRENT). Такая кнопка будет выглядеть так же, как кнопка с цифрой один, на приведенном ниже рисунке:
В этом CSS правиле задается изменение цвета фона этой активной кнопки (свойство background:#26343c), цвета текста ссылки на этой кнопке (свойство color: #add352), а кроме этого шрифт текста ссылки будет жирным в силу этого CSS свойства — font-weight: bold ().
Но для изменения внешнего вида панели постраничной навигации можно прописать нужные свойства CSS и в файл стилевого оформления самого плагина. Этот файл таблиц каскадных стилей вы сможете открыть на редактирование из папки:
/wp-content/plugins/wp-pagenavi/pagenavi-css.css
Например, для того, чтобы получить панель такого вида:
Вам нужно будет скачать этот архив, распаковать его и скопировать папку IMAGES в папку с плагином WP-PageNavi, которую вы сможете найти по следующему пути:
/wp-content/plugins/wp-pagenavi
В папке IMAGES лежит графический файл fon.gif , который будет формировать фон для панели PageNavi. Теперь вам нужно будет открыть на редактирование файл /wp-content/plugins/wp-pagenavi/pagenavi-css.css и заменить имеющийся там код следующими правилами:
Wp-pagenavi { width: 100%; overflow:hidden; padding: 4px 0px 4px 0px; margin-left: 0px; border: 1px solid #00598F; background: url("images/fon.gif") center left repeat-x; } .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited { padding: 4px 5px 4px 5px; margin: 2px 0px 2px 0px; color: #ffffff; font-weight: bold; text-decoration: none; } .wp-pagenavi a.last { padding: 4px 5px 4px 5px; } .wp-pagenavi a.first { padding: 4px 5px 4px 5px; } .wp-pagenavi a:hover { background-color: #00598F; color: #FFFFFF; font-weight: bold; } .wp-pagenavi span.pages { padding: 4px 5px 4px 5px; margin: 2px 0px 2px 0px; color: #FFFFFF; background: url("images/fon.gif") center left repeat-x; background-color: #4f4f4f; font-weight: bold; } .wp-pagenavi span.current { padding: 4px 7px 4px 7px; margin: 2px 0px 2px 0px; font-weight: bold; border-top: 1px solid #00598F; border-bottom: 1px solid #00598F; color: #FFFFFF; background-color: #00598F; font-weight: bold; } .wp-pagenavi span.extend { padding: 4px 0px 4px 0px; margin: 2px 0px 2px 0px; margin-right: 0px; margin-left: 0px; border-top: 1px solid #00598F; border-bottom: 1px solid #00598F; color: #FFFFFF; background: url("images/fon.gif") center left repeat-x; font-weight: bold; } .wp-pagenavi span.next-prev { font-family: Arial; /* IE fix */ }
Сохраните произведенные в файле pagenavi-css.css изменения и зайдите на свой блог, чтобы проверить, изменился ли внешний вид навигации. Если не изменился, то попробуйте обновить содержимое окна в браузере, удерживая кнопку SHIFT, а если это не помогает, то очистите кеш браузера.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Easy Social Share Buttons - плагин по добавлению кнопок социальных сетей в WordPress, включая Вконтакте и Одноклассники
Subscribe To Comments для WordPress - подписка на комментарии к статьях в Вордпресс
Хлебные крошки в WordPress средствами плагина Breadcrumb NavXT (усиливаем перелинковку)
Simple Counters и Category and Page Icons - красивые счетчики RSS и Twitter, а так же иконки для категорий и страниц в WordPress
Установка и настройка плагинов для WordPress, решение возможных проблем
All in One SEO Pack и внутренняя поисковая оптимизация блога на WordPress (метатеги Canonical, Description и Title)
Галерея для WordPress на основе плагина NextGEN Gallery - создание и вывод фотогалерей и слайдшоу в статьях
Google XML Sitemaps - создание карты сайта для WordPress
Better Feed для WordPress - как не отдавать в RSS полные тексты постов и защититься от воровства контента через новостной канал
Перелинковка страниц сайта на примере плагина upPrev (выезжающей панели) для Вордпресс
