Посторінкова навігація wordpress без плагіна і wp-pagenavi

Продовжую писати статті, присвячені навігації сайту на движку WordPress.

І в даному матеріалі я покажу, як робиться посторінкова навігація без плагінів і за допомогою всім відомого WP-PageNavi. Як і у випадку з хлібними крихтами. я покажу реалізацію декількома способами, щоб ви вибрали найбільш підходящий для вас. Та й бувають випадки, коли якийсь спосіб не працює у кого-то. Тому, буде якась підстраховка.

Матеріал вийшов дуже об'ємний і, мабуть, самий вичерпний в мережі.

Дизайн може бути різний. Але суть її одна і та ж - розбиття інформації на сторінки. Як ви знаєте, за замовчуванням, на головній сторінці сайту виводяться анонси записів, яких може бути певна кількість (залежить від виставлених налаштувань в пункті "Написання").

Якщо ми не будемо розбивати їх кількість, то вони будуть виводитися на одній сторінці. А це не є добре, тому що незручно буде користуватися сайтом і головна сторінка буде довго грузиться, адже з плином часу анонсів буде величезне кількість.

Як правило, зараз в сучасних шаблонах Wodpress посторінкова навігація вже вбудована. Але є варіант, коли її і немає. Тоді доведеться реалізувати. Замість неї може бути розбиття анонсів на сторінки у вигляді посилань на попередні і наступні записи. Це яскраво виражено в стандартних шаблонах.

Такий варіант також незручний, так як при заході на 3 сторінки назад ми не зможемо в один крок повернутися на початкову сторінку. Доведеться 3 рази кликати на попередні записи або на наступні. Посторінкова навігація ж дозволяє більш гнучко управлятися з даними моментом.

Робимо без плагіна

Зараз я покажу спосіб, після якого у вас буде точно така ж посторінкова навігація WordPress, як і у мене. Робиться все дуже просто. Буде потрібно 2 частини коду, які потрібно буде розмістити в файлах шаблону, а потім прописати стилі, щоб задати оформлення. Приступимо!

Ось перша частина коду. Її необхідно розмістити у файлі functions.php шаблону оформлення.

Також необхідно завантажити картинки стрілок переміщення вперед і назад на хостинг в папку images шаблону оформлення. Скачайте їх звідси. Для завантаження можете користуватися стандартним файловим менеджером хостинг провайдера. Я ж використовую Filezilla.

Коли розмістили коди в файлах functions.php, у всіх файлах, виводять сторінки з анонсами і прописали стилі, можемо перевірити працездатність навігації. У мене все працює і в стандартному шаблоні вона має такий вигляд.

Вид точно такий же. Тільки посилання іншим кольором. Але це вже залежить від загальних стилів у вашому файлі. Ви можете з ними попрацювати, якщо вас не влаштує їх оформлення після установки навігації по сторінках.

Плагін WP-PageNavi

Для початку завантажуєте плагін з офіційної сторінки і встановлюєте його на сайт.

Після встановлення плагіну потрібно буде також розмістити код, який виведе навігацію внизу сторінки.

Все робимо точно так же, як і в попередньому випадку без використання плагіна. Замінюємо стандартну навігацію у вигляді попередніх і наступних посилань.

Тепер плагін буде виконувати своє завдання і номера сторінок матимуть наступне оформлення.

З одного боку оформлення не дуже, а з іншого дуже навіть нічого, тому що не муляє очі. Користувачі люблять простоту! Тому, можна все так і залишити. Якщо ж хочете чогось більш яскравого, то зараз ми з вами розглянемо деякі варіанти. А поки ми обговоримо таку річ, як настройка wp pagenavi. Налаштування є і про них варто поговорити.

Що стосується першого пункту налаштувань "Шаблони списку сторінок", то в ньому нічого змінювати не потрібно. Нас все влаштовує. Ми рухаємося до пункту "Налаштування списку сторінок".

Зазначу, що з усіма параметрами в цьому пункті потрібно експериментувати, щоб знайти оптимальне значення для себе. Я лише поясню коротко, за що відповідає кожен параметр.

• Використовувати стиль - якщо поставимо значення "No", то стилі плагіна заберуться і номера сторінок не будуть оформлені;

• Стиль списку сторінок - крім звичайного списку номерів сторінок ми можемо вибрати варіант списку;

• Завжди показувати список сторінок-настройку не включаємо. Потрібно, щоб список відображався тільки там, де це необхідно;
• Кількість сторінок для показу - відповідає за кількість виведених номерів сторінки на початку списку. За замовчуванням, значення коштує 5 і на скріншотах вище ви можете подивитися, що саме 5 сторінок виводяться;
• Діапазон сторінок для показу - якщо на вашому сайті дуже багато сторінок, то дана функція буде дуже корисна. Вона буде виводити номери сторінок після основного списку зі значеннями 10, 20, 30, 40 і так далі. Інтервал між цими значеннями визначається наступним параметром;
• Коефіцієнт для діапазонів сторінок - якщо виставив значення 5, то діапазон сторінок буде мати вигляд - 10, 15, 20, 25 і т.д. Якщо 10, то 10, 20, 30, 40 і так далі. Значення 10 цілком достатньо.

Це все настройки, які вам потрібно виставити відповідно до своїх потреб. Тут уже кожен по себе відрегулює.

Йдемо далі і розглянемо варіанти, як можна змінити оформлення списку номерів сторінок в даному плагіні.

Найпростіший варіант - установка додаткового плагіна, який має вже заготовлені стилі, а також дає можливість налаштувати кожен параметр індивідуально. Називається плагін Wp Pagenavi Style.

Після його установки в адмін-панелі 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". Тому, якщо ми його відредагуємо, то після поновлення плагіна, всі стилі заміняться на стандартні. Щоб кожен раз на замінювати даний файл і не прописувати стилі заново я рекомендую зробити наступну річ:

1. Відредагувати стилі в цьому файлі на свої, надавши потрібну оформлення посторінковою навігації;
2. Вимкніть параметр "Використовувати стиль pagenavi-css.css";
3. Розмістити ці стилі в основному файлі стилів шаблону оформлення style.css.

Таким чином ці стилі будуть працювати незалежно від плагіна. І при оновленні вони не будуть збиватися. Це, мабуть, найкращий варіант оформлення навігації в даному плагіні, який я сам би зробив. Але, на щастя, я використовую варіант без плагіна, що і вам раді.

На даній ноті вже хочу скоріше закінчити цей пост, так як сил він відняв безліч. Це я і зроблю. Попрощаюся і піду відпочивати, а потім уткнемся в написання нового контенту.

З повагою, Костянтин Хмельов!

40 років Перемоги 51937 Україна, Дніпропетровська обл. м Дніпродзержинськ, +38 093 338 11 41