Практически любой блоггер, который ведет свой блог на движке WordPress, знаком с плагином WP-PageNavi, который выводит постраничную навигацию такого вида:
Но не каждый знает (включая меня до недавнего времени), что WordPress имеет встроенную функцию (начиная аж с версии 2.1), которая реализует практически тот же самый функционал . Т.е. необходимость в использовании плагина отпадает.
Некоторое время я пользовался другим аналогичным решением , за что большое спасибо его автору Тимуру.
Функция, которую я вам предлагаю, совсем небольшая по размеру:
function wp_corenavi() { global $wp_query; $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 = 1; //1 - выводить текст "Страница N из N", 0 - не выводить $a["mid_size"] = 3; //сколько ссылок показывать слева и справа от текущей $a["end_size"] = 1; //сколько ссылок показывать в начале и в конце $a["prev_text"] = "«"; //текст ссылки "Предыдущая страница" $a["next_text"] = "»"; //текст ссылки "Следующая страница" if ($max > 1) echo "
"; }Данный код необходимо поместить в файл functions.php вашего шаблона. В функции всего пять опций, они отделены разрывами строк. Комментарии я написал, думаю, тут все понятно.
Для того, чтобы вывести навигацию в нужном месте, вставляйте в шаблон следующий код:
HTML-код, который получается в результате вывода функции, выглядит следующим образом:
Как видите, присутствуют все необходимые CSS-классы, которые можно использовать для оформления любого элемента навигации (например, текущую страницу, ссылки на предыдущую и следующую страницы).
Проверял данную функцию на версиях WordPress, начиная с 2.3.3, а также тестировал варианты с включенным и отключенным ЧПУ. Все работает, как и полагается.
Пользуйтесь.
Если вам нужен надежный хостинг и регистрация доменов , то вас ждет крупнейших украинский хостинг-провайдер FREEhost.UA, который готов предложить любой вид хостинга, начиная от виртуального, заканчивая арендой готового сервера.
Популярный WP PageNavi прост в настройках, легко встраивается в WordPress и имеет аккуратный внешний вид.
Всем привет! Как обычно, я очень рад, что вы посетили страницы . Сегодня поговорим об улучшении постраничной навигации на блоге . Разработчики WordPress изначально почему-то должным образом не озаботились этим вопросом. Не знаю, может, посчитали, что классический блог должен состоять из двух-трех десятков записей.
Вот как выглядит постраничная навигация в блоге WP без всяких плагинов:
А вот так – если перелистнуть главную страницу:
Согласитесь, не очень удобно. Да и красоты мало в этом. В дефолтных настройках Вордпресс указано, что главная страница показывает только 10 последних постов, предыдущие посты можно посмотреть перелистнув «Вперед» или «Раньше». А если записей в блоге две сотни? И хотелось бы посмотреть, о чем автор писал в начале. Это ж сколько листать пришлось бы! Если бы… если бы добрые люди не придумали плагины постраничной навигации.
WP PageNavi – плагин для удобства читателей
В рунете наиболее распространены два плагина постраничной навигации – WP Page Numbers и WP PageNavi . Они очень похожи, поэтому что ставить на свой блог – решайте сами..ru я поставлю PageNavi. Просто сообщение администрации на официальной странице плагина не вселяет большого оптимизма:
Кто так же, как и я не силен в английском – сообщение примерно следующее: «Плагин не обновлялся уже 2 года, поэтому могут возникнуть проблемы его совместимости с новыми версиями WordPress».
Вообще во многих сборках WordPress уже стоит плагин ПейджНави, только он не настроен, поэтому не работает. Посмотрите у себя в в плагинах строчку с названием «Список страниц»
Как устанавливать (не путать с «активировать») плагины, я писал в статье . Единственный момент: если будете скачивать плагин сначала на свой компьютер (мало ли, может, решите предварительно его на вирусы проверить или еще что), перед установкой на WP не распаковывайте плагин, а оставьте в папке архива.zip. – то многие распакованные плагины через админку не устанавливаются.
Можно, конечно, пойти другим путем. Через файловый менеджер забросить на сервер в соответствующую папку вашего блога распаковаванный архив плагина (папку).
Кстати, FileZilla – прекрасный файловый менеджер, сам пользуюсь и обязательно расскажу о ней в ближайших статьях. Подписывайтесь на обновления моего блога – будете в курсе всех полезностей.
Настройка плагина WP PageNavi: изменение кода
Итак, вы установили плагин (если его не было в начальном пакете) на свой wordpress блог. Теперь его нужно активировать. Делается это одним нажатием кнопочки «Активировать» (путь такой: Админпанель – Плагины – Установленные – «Список страниц» – «Активировать»).
В меню админки «Параметры» появится новая строчка «Список Страниц»
Следующий этап может вызвать затруднения у новичков – будем чуть-чуть менять код в нескольких файлах темы вашего WP-блога. Для этого нам понадобится простой блокнот, а еще лучше ++, потому что в нем очень легко работать с файлами и есть возможность откатить все назад. Еще нужен будет файловый менеджер FileZilla (я говорил о ней чуть выше) – если ваш блог уже на хостинге, а если нет – то хватит Notepad++.
Все загруженные на ваш блог темы находятся в корневом каталоге в папке WP-content/themes/ваша тема. В вашей теме находите файлы index.php и archive.php. У кого-то в теме может быть еще поисковый файл search.php.
Далее перетаскиваем (копируем) эти файлы к себе на компьютер (это если вы уже на хостинге) или просто открываем файлы через блокнот Notepad++. Но в обоих случаях не забудьте сделать резервные копии – так всегда делается для подстраховки.
Итак, открываем редактором файл index.php и ищем там строчки кода, отвечающие за навигацию по страницам.
В каждой теме коды, конечно же, отличаются деталями. Может быть такой:
’)); ?>;
Или такой
В теме, в которую я буду вставлять код плагина из начально навигация выглядит так:
То есть вы поняли, что шаблоны разные и коды разные. Но все же понять, какие строчки отвечают за навигацию по страницам, можно. Маленький секрет, правда, работает он не во всех темах:
Если не можете найти нужный участок кода или сомневаетесь, что это он, наберите в открытом в Notepad++ файле index.php в поиске (значок бинокля в верхней строке) nav и это сочетание букв высветится в документе.
После того, как вы нашли нужный код, меняем его (не дописываем, а заменяем весь блок) на код плагина WP PageNavi:
Сохраняете файл и забрасываете его обратно в папку с темой. Затем обновите главную страницу своего блога и вуаля:
Как вы видите, изображение страниц встало косо: прижалось к левому краю. Чтобы это исправить, я отцентровал . Для этого код плагина заключил в тег
с атрибутом align. Вот так:
Получилось так:
Те же манипуляции вы проделываете с кодом файлов archive.php search.php.
Настройка плагина WP PageNavi: отображение списка страниц
Что теперь? Плагин загрузили, активировали, интегрировали в файлы темы – что-то еще? Да. Теперь нужно настроить внешний вид постраничной навигации. Для этого переходим в настройки плагина WP PageNavi в админке wordpress. Находится нужная нам страница по адресу: Админка/Параметры/Список страниц. Здесь можно настроить структуру отображения страниц. А можно все оставить как есть – дело ваше. Коротко расскажу, что здесь что.
Настройки разделены на две части: «Шаблоны списка страниц» и «Настройки списка страниц».
WP Page Navi – шаблоны списка страниц
Вот первая часть настроек
Элемент №1 (первая строка) – это вид вот этой части списка:
Здесь можно сделать окошко пустым, если считаете, запись «5 страница из 14» портит внешний вид. Можно убрать слово «страница». Я, наверное, вообще уберу эту запись. Мне кажется, она лишняя.
Элемент №2 – «Текущая страница». Этим элементом как-то (рамочкой, цветом) выделяется страница, на которой открыт блог. Если это поле оставить пустым, внешний вид текущей страницы в ряду других ничем не будет выделяться.
Элемент №3 – «Страница». Если оставить это поле пустым, в навигации будет виден только номер текущей страницы – список остальных страниц будет скрыт.
Элемент №4 – «Первая страница». Здесь можно поставить «первая», «в начало» или что-то в этом роде. Когда на вашем блоге будет много страниц (100-200) и вы будете просматривать какую-нибудь 130-ю страницу и захотите вернуться на первую, слева от списка страниц и будет кнопочка со словом «первая», «в начало».
Элемент №5 – «Последняя страница». Все то же самое, только для последней страницы.
Элемент №6 – «Предыдущая страница» и «Следующая страница». Стрелочки, перехода на страницу вперед или назад. Я другие знаки пробовал вставить – либо не то, либо они просто не работают.
Элемент №7 – «Предыдущие…» и «Следующие…». Как я понял, это не кнопки, а просто информационный элемент. Сейчас объясню.
Как видно из рисунка, в настройках я поставил в поле «Количество страниц для показа» (об этих настройках я расскажу чуть ниже) значение «3». И у меня отображается ряд только из трех страниц. А белый квадратик (как раз он и есть элемент №7) показывает, что и дальше (или ближе) есть еще страницы, которые сейчас не отображены. Вроде понятно.
Настройки списка страниц
Переходим ко второй части настроек плагина WP Page Navi.
Элемент №8 – «Использовать стиль pagenavi-css.css». Если вы не поставите (или уберете, если она стояла) здесь галочку, то, во-первых, отображение страниц станет таким:
А во-вторых, вы не сможете изменить стиль отображения списка путем редактирования файла стилей плагина. Так что лучше с галочкой.
Элемент №09 – «Стиль списка страниц». Обычный или выпадающий. Мне выпадающий категорически не понравился, поэтому оставил обычный.
Элемент №10 – «Всегда показывать список страниц». Довольно бессмысленная функция.
Элемент №11 – «Количество страниц для показа». Рад страниц, который будет отображаться. Поставите 3 – будет «1,2,3… последующие», поставите 10 – будет «предыдущие… 4,5,6,7,8,9,10,11,12,13…последующие». Понятно, думаю.
Элемент №12 – «Диапазон страниц для показа». Какую вы цифру поставите в это окошко, столько страниц, не вошедших в список непрерывных страниц (элемент №13) и будет отображаться. Например, поставите 5, список будет выглядеть так:
«первая … 4,5,6,7,8 … 21,22,23,24,25 … последняя»
Элемент №13 –« Коэффициент для диапазонов страниц». Это шаг для станиц из элемента №14. Если в окошках №№13, 14 и 15 поставить, например, 5, все будет смотреться так:
«первая … 4,5,6,7,8 … 20,25,30,35,40 … последняя»
Все, наконец-то мы разобрались с настройками плагина постраничной навигации по имени WP PageNavi .
Все да не все. Можно еще кое-что сделать полезное и красивое.
Редактирование pagenavi-css.css
Здесь не буду вдаваться в подробности. Для начинающих самостоятельно копаться здесь – темный и опасный лес.
Но небольшие изменения все же можно попытаться внести. Например, такие:
Я сделал фон для цифириков, добавив в контейнер wp-pagenavi a, .wp-pagenavi span цвет фона background-color: #bbbbbb;
Я увеличил размер цифры текущей страницы, добавив в контейнер wp-pagenavi span.current размер font-size: 150%;
Вы также. Если хотите, можете поэкспериментировать. Только обязательно предварительно сделайте резервную копию файла, чтоб потом, если что, можно было заменить результаты вашего эксперимента на исходник.
На этом заканчиваю, устал уже писать 🙂
Итак, сегодня мы рассматривали плагин постраничной навигации WP PageNavi . Надеюсь, объяснил я все подробно. Но если что, спрашивайте, будем разбираться.
Сегодняшний пост будет о том, как сделать постраничную навигацию 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. Если у вас возникнут вопросы, задавайте их в комментариях, а чтобы не пропустить новые статьи, подписывайтесь на обновления блога.
Приветствую читателей моего блога сайт сегодня поделюсь с Вами настройками постраничной навигации без плагина на блоге . Для чего вообще нужна постраничная навигация на сайте и что полезного она в себе несет? это юзабилити блога, благодаря которому посетители сайта с легкостью могут найти полезную дляних информацию.
Итак, прежде чем перейти к настройкам навигации необходимо настроить удобный режим чтения ваших постов, которые будут отображаться на странице блога. Для этого переходим в Панель Администрирования — Настройки -Чтение:
и устанавливаем количество отображаемых постов, которые будут отображаться на каждой странице:
В данном случае установлено 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 - это очень универсальная платформа для ведения блога, а с помощью плагинов ее можно сделать еще более удобной для пользователя.
Это касается и постраничной навигации (пагинации) страниц, которая изначально отсутствует на WordPress. Но это легко можно исправить, выбрав для своего сайта один из 10-ти лучших плагинов.
1. WP-PageNavi
Один из наиболее популярных и часто используемых плагинов. С помощью встроенной функции wp_pagenavi() привычные линки ← Назад | Далее → изменятся на привлекательную нумерацию страниц.
2. WP Smart Pagination
Еще один полезный плагин, который имеет очень удобную функцию. Вы можете перейти на нужную страницу, вписав ее номер в дополнительное окошко.
3. Simple Pagination
Один из лучших и самых простых плагинов, с помощью которого можно установить дополнительное разбиение на страницы для записей и комментариев, значительно упростив навигацию на вашем сайте на WordPress.
4. Alphabetic Pagination
С помощью этого плагина можно сделать фильтр записей и страниц по алфавиту. Он прост не только в установке, но и в использовании.
5. jPages pagination for WordPress
Это один из лучших плагинов для создания пагинации страниц галереи, комментариев, прочее. С его помощью галереи превращаются в галерею с нумерацией страниц.
6. Paginate
Этот плагин позволяет создать пагинацию страниц в соответствии с вашими требованиями. Можно увеличить нумерацию на одной странице, выбрать количество единиц для отображения. По умолчанию их может быть 10.
7. Easy Pagination for WordPress
Сделайте длинные записи и страницы более привлекательными с помощью слайдеров: Horizontal Slider, Vertical Slider или Fade. Горизонтальный и вертикальный слайдеры можно комбинировать с 32 jQuery эффектами.
8. Next Post Fly Box For WordPress
Один из лучших плагинов, который создает навигацию между следующим и предыдущим постом в виде всплывающего бокса в левой или в правой части окна. Когда пользователь скролит страницу, появляется всплывающий бокс, на котором можно выбрать следующую или предыдущую запись.
9. JQuery Paginator Plugin
Плагин позволяет выбрать между 3-мя типами пагинации, если задать нужный параметр. Это один из наиболее привлекательных плагинов для разбиения на страницы.
10. Smart Pagination
Отличный плагин, который предлагает 11 разных вариантов пагинации.
Бонус. CSS стили для WP-PageNavi плагина
Отличное собрание CSS-стилей для популярных плагинов для WordPress - WP-PageNavi и WP-Paginate. Включает в себя HTML страницы с демонстрацией стилей, а каждый стиль содержит отдельный CSS файл.
