Главная › Новости

Постраничная навигация в WordPress с помощью плагина WP Pagenavi

Опубликовано: 01.09.2018

Плагин WP-pagenavi. Постраничная навигация.

Привет, Друзья! Продолжаем изучение плагинов для WordPress и сегодня разберем плагин WP Pagenavi . Данный плагин создает постраничную навигацию на блоге WordPress. Постраничная навигация будет удобна как автору блога, так и читателям, при перемещение по страницам Вашего сайта.

Я заметил на некоторых сайтах отсутствует постраничная навигация, а есть просто возможность перемещаться на страницу “назад” или “вперед” только на один шаг, что довольно неудобно в наше-то время))), да и для автора блога это также не айс… Ладно, давайте будем разбираться как это дело исправить!

Постраничная навигация. Виды и способы создания

Примерно таким образом выглядит постраничная навигация в WordPress изначально:

Постраничная навигация wordpress с плагином WP-PageNavi

Для того, чтобы перейти к предыдущим записям необходимо переходить по ссылки “более старые посты и т.д.” А представьте, что таких страниц очень много (и Вы знаете, что нужный материал находится на 14 странице…) – тогда это занятие становится достаточно обременительным!

А когда на блоге вы видите вот такую навигацию:

Я думаю тут без комментариев Ваще крутяк!!! Это и смотрится лаконичнее и навигация становится на порядок удобнее!!! И к тому же это еще один плюсик к юзабилити и поведенческим факторам нашего WordPress блога!!!

Удобная постраничная навигация встречается и в готовых шаблонах WordPress, но чаще шаблоны все же делают без такой навигации, поэтому на помощь нам приходит замечательный плагин WP Pagenavi.

Итак, как скачать и установить плагин на WordPress объяснять, думаю не стоит? Для тех, кто только начинает заниматься созданием блога и не знает как и где скачивать и устанавливать плагины на WordPress блог – читаем здесь (подробная статья о том, где можно найти плагины WordPress, как скачать, и несколько способов как установить плагины на WP блог).

Значит установили и активировали плагин WP Pagenavi, переходим на главную страницу блога и смотрим, появилась ли у нас постраничная навигация или нет.

Вот тут может быть два варианта:

либо навигация появляется сразу и ничего в файлах шаблона добавлять не нужно либо нужно добавить в файлы вашей WordPress темы строчку кода от плагина WP Pagenavi.

Хочу Вас сразу успокоить, что если даже и придется редактировать файлы, ничего сложного в этом нет, главное знать структуру шаблона WordPress и понимать в какой файл и куда добавить код от плагина, да и я это подробно объясню ниже.

Также замечу: этот плагин я устанавливал достаточное кол-во раз, и ни разу не пришлось лезть в файлы шаблона и добавлять код от плагина – активировал его и все, он начинал тут же выводить удобную постраничную навигацию на блоге, так что имейте в виду. Единственное, что может быть придется сделать, это подстроить стили css плагина под дизайн Вашего блога.

Теперь от теории переходим к практики.

Давайте начнем со сложного – если после активации плагина WP Pagenavi навигация на блоге не изменилась.

Добавляем код от плагина WP Pagenavi в файлы шаблона WordPress

Обычно постраничная навигация нужна на главной странице блога, на странице с архивами ваших записей, и на странице с результатами поиска по блогу. Чтобы вывести постраничную навигацию на этих страницах, нужно, как я писал выше, добавить функцию вызова плагина WP Pagenavi в файлы шаблона, отвечающие за вывод этих страниц (ознакомьтесь со статьей где я рассказывал о структуре шаблонов WordPress для того, чтобы понимать какой файл за что отвечает)

Итак, для того, чтобы вывести постраничную навигацию на главной странице вашего WP блога, открываем блокнотом notepad++ файл INDEX.PHP и ищем код, где хоть как-то упоминается о навигации

<div class="navigation navigation-index"> <div class="nav-prev"><?php next_posts_link ( __ ('&laquo; Older Entries', 'blank')) ?></div> <div class="nav-next"><?php previous_posts_link ( __ ('Newer Entries &raquo;', 'blank')) ?></div> </div>

и меняем весь код на код от плагина WP Pagenavi

<?php wp_pagenavi (); ?>

сохраняем изменения в файле и смотрим что получилось. Для этого просто обновляем главную страницу своего WP блога. Если постраничная навигация появилась, переходим к следующим файлам шаблона: аналогичным образом меняем код в файлах SEARCH.PHP и ARCHIVE.PHP

Как говорил выше, навигация во многих шаблонах может появиться и без редактирования файлов. В шаблоне уже заложена функция под плагин WP Pagenavi, т.е. после активации плагина – навигация меняется со стандартной на навигацию WP Pagenavi. Здесь даже и объяснять ничего не надо, активировали плагин и все!

Теперь давайте посмотрим:

Настройки плагина WP Pagenavi

Чтобы попасть в настройки идем в: “Админку блога – Параметры – Список страниц”

1. Шаблон общего списка страниц. На сайте это выглядит так:

(страница 2 из 6)

2 и 3. Элемент «Текущая страница» и Элемент «Страница» На сайте имеет вид:

То есть в пункте 2 задается текущая стр., а в пунке 3 все страницы. Таким образом менять ничего в этих пунктах не стоит.

4 и 5. Элемент «Первая запись» и Элемент «Последняя запись»

 

Если в пункты 4 и/или 5 пропишите вот это %TOTAL_PAGES%, то “Первая” и/или “Последняя” будет отображаться в виде цифр.

Дальше идут еще несколько настроек, с которыми Вы и без моей помощи сможете разобраться:

Элементы на сайте выглядят вот таким образом:

Стиль списка можно поставить выпадающий, но это, по-моему лишнее. Страниц показывать можете тоже сколько угодно.

Все, не забывайте сохранить изменения и обновить страницу Вашего WP блога.

Теперь, кого не устраивает внешний вид постраничной навигации, нужно открыть стили css плагина и настраивать как душе угодно! Стили находятся в папке с плагином по этому пути: /wp-content/plugins/wp-pagenavi/pagenavi-css.css

В этом уроке я не буду объяснять как настраивать css стили, просто потому, что это огромная тема, и чтобы ее раскрыть потребуется не один урок! Может быть позже открою рубрику по css стилям для новичков, а пока Вам в помощь хороший сайт которым я постоянно пользуюсь — http://htmlbook.ru/ . И вот еще бесплатные видео уроки по css , обязательно изучите!

Ну а на этом сегодня закончим! Вот мы разобрали еще один полезный плагин для WordPress, и благодаря этом плагину мы немного улучшили поведенческие факторы у нас на блоге! В чём суть поведенческих факторов вы можете узнать тут

Для тех, кто сейчас работает на локальном компьютере (денвере) хочу сказать следующее: Еще разберем несколько плагинов и будем выбирать и покупать домен и хостинг, так что готовьтесь!

Если кому-то, что-то осталось не понятно, не стесняйтесь, спрашивайте в комментариях, я постараюсь ответить на все Ваши вопросы.

Также я начал предоставлять услуги по установке и настройке плагинов WordPress, так что кто не хочет заморачиваться, пишите на почту — [email protected]

Удачи Вам!

Пока-пока!!!