У сьогоднішній статті мова піде про популярну через свою виняткову корисність плагіну під назвою WP-PageNavi. Зручний плагін надає можливість організувати посторінкову навігацію блогу WordPress зручніше, ніж якщо ви користувалися способом, включеним за умовчанням. В принципі, зручність стандартної посторінкової навігації - питання відносне і цілком можна використовувати і так звані за промовчанням, проте WP-PageNavi пропонує нам набагато привабливіший варіант. Якщо за умовчанням як посторінкова навігація ми маємо дві кнопки «раніше» і «пізніше», тобто прогортаємо сторінки послідовно в пошуках потрібної нам, то після того, як WP-PageNavi остаточно встановлений і налаштований, ми отримуємо кнопки із зазначенням номерів сторінок, що дозволяє нам легко перейти на потрібну сторінку. Залежно від вибраних налаштувань панель навігації може виглядати по-різному, проте це ми розглянемо трохи згодом.

Які конкретні причини можуть бути у блогера-початківця для того, щоб використовувати саме плагін PageNavi для того, щоб організувати навігацію в блозі? Можливо, спочатку такої необхідності і не виникає, і двох кнопок цілком достатньо для того, щоб орієнтуватися в п'яти сторінках блогу. Але з часом кількість інформації, а значить, і сторінок, неухильно зростає, і звичайна навігація стає незручною, а читачеві простіше запам'ятати, на якій сторінці він закінчив читання або знайшов необхідну статтю, ніж запам'ятовувати, скільки разів натиснути кнопку «далі». Ось чому PageNavi – це логічний розвиток навігації практично кожного блоґу; звичайно, існують і інші аналогічні плагіни, проте саме WP-PageNavi набув найбільшої популярності та популярності.

Встановлення WP-PageNavi

Природно, що перед тим, як працювати з цим плагіном, ми завантажуємо його та встановлюємо. Після того, як ми завантажили потрібний архів із плагіном, його необхідно розпакувати; в результаті ми отримуємо папку під назвою WP-PAGENAVI, яку потім завантажуємо на сервер вашого хостингу до папки з плагінами Вордпрес, яку ми знаходимо за назвою wp-content/plugins/. Для того, щоб зробити це, необхідно отримати доступ до папок вашого блогу WordPress, використовуючи протокол FTP.

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

Після того, як копіювання файлів плагіна WP-PageNavi завершено, наступним вашим кроком буде вхід до адміністраторської зони WordPress та вибору пункту «Плагіни». Після цього перед вами з'явиться вікно управління плагінами, де вашим вибором стає посилання «Неактивні» (Inactive, в англійській версії). Ця дія дозволяє відкрити список встановлених, але ще не активованих плагінів вашого блогу.
У цьому списку необхідно знайти потрібний нам плагін WP-PageNavi і клацнути на посилання «Активувати» (вона знаходиться прямо під назвою плагіна).

Вставка коду виведення плагіна WP-PageNavi у шаблони теми WordPress

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

Треба сказати, що на сьогоднішній день багато шаблонів вже вбудована повноцінна підтримка плагіна PageNavi. У цьому випадку вам потрібно, лише активувати плагін. При цьому треба розуміти, що все це залежить від конкретної обраної теми оформлення блогу.

Як правило, використання посторінкової навігації актуальне на головній сторінці (це файл INDEX.PHP у папці з темою оформлення, що використовується), а також ще у двох випадках - на сторінці архівів (ARHIVE.PHP) і сторінці результатів пошуку по всьому блогу (SEARCH.PHP ). Тому саме в ці три файли нам і потрібно буде вставити службовий код плагіна PageNavi, який дозволить вивести зручну навігаційну панель у потрібне місце нашого блогу на WordPress. Для того щоб вставити службовий код плагіна PageNavi в потрібні файли шаблону необхідно підключаємося до блогу по FTP-протоколу і зайти в папку з темою оформлення, що використовується зараз.

Для початку знайдемо файл з назвою INDEX.PHP у папці з темою та почнемо його редагування в найбільш зручному та звичному редакторі (особисто я використовую з цією метою просунутим блокнотом Notepad++).

У файлі, що відкрився, вам потрібно знайти ту ділянку коду, яка явно відповідає за навігацію по численних сторінках вашого блогу. Треба сказати, що у деяких випадках це стає досить складним завданням. Втім, сам файл INDEX.PHP невеликий та уважне вивчення його не займе багато часу. Ваше завдання – знайти коментарі, пов'язані з навігацією, наприклад, в. У подібні коментарі автори тем оформлення зазвичай і укладають ту область службового коду, яка відповідає за побічну навігацію на блозі WordPress.

Код посторінкової навігації у файлі INDEX.PHP вашій темі може виглядати як завгодно, але зараз вам необхідно правильно ідентифікувати його і після цього замінити рядком виклику плагіна wp_pagenavi. Цей рядок виглядає так: . Зберігаємо зміни, зроблені у файлі, заходимо на головну сторінку блогу та переконуємось, що все працює саме так, як нам і було потрібно.

В принципі код стандартної навігації, розташований у файлі INDEX.PHP, можна і не видаляти, щоб згодом при видаленні нашого плагіна посторінкова навігація вашого блогу працювала адекватно. Для цього замість стандартного коду для посторінкової навігації необхідно буде прописати умову, яка визначить, коли має відображатися стандартна навігація WordPress, а коли та панель навігації по сторінках, яка створюється за допомогою плагіна WP-PageNavi.

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

Після того, як ви закінчили роботу з файлом INDEX.PHP, вам потрібно буде зробити ті ж операції для інших файлів (SEARCH.PHP і ARCHIVE.PHP) з тієї ж папки з темою оформлення, що використовується у вашому блозі. Після успішного завершення даних операцій, можна вважати, що ми повністю розібралися з тим, як встановити відображення панелі, що забезпечує посторінкову навігацію на нашому блозі WordPress. Однак, це ще далеко не все, оскільки тепер ми маємо знайомство з налаштуваннями плагіна, що дозволяють змінити структуру панелі посторінкової навігації.

Детальна настройка WP-PageNavi

Щоб розпочати налаштування плагіна, необхідно вибрати в лівому меню адмінки WordPress з області «Налаштування» пункт «PageNavi» або, у русифікованому варіанті – «Список сторінок». Ця дія відкриває вікно, що містить список параметрів плагіна WP-PageNavi в області шаблонів списку сторінок.

Перше поле під назвою "шаблон загального списку сторінок" містить задане відображення поточної сторінки та загальної кількості сторінок. Якщо обрано саме такий варіант, то в блозі WordPress панель посторінкової навігації буде послідовним переліком сторінок з виділеним номером поточної сторінки; у це полі можна також додати слово, наприклад, «Сторінка» — це не вплине на сам функціонал. Якщо є таке бажання, це поле можна зовсім очистити.

Наступні поля мають назву «Елемент «Поточна сторінка», далі - «Елемент «Сторінка». Зміст даних полів ми не чіпаємо, оскільки саме тут встановлено відображення сторінок (як поточної, так і всіх інших) у вигляді порядкового номера. Що стосується панелі WP-PageNavi, тут все буде виглядати досить стандартно та природно. Аналогічну систему посторінкової навігації зараз можна зустріти на багатьох блогах.

Поля тексту для першої та останньої сторінки призначені для того, щоб задати текст, що відображається на кнопках переходу до першої та до останньої сторінки. Класичне рішення - написати замість тексту для поля першої сторінки одиницю, а "Text For The Last Page" заповнити рядком %TOTAL_PAGES% - завдяки цьому в останньому рядку буде виводитись загальна кількість сторінок вашого блогу.

Наступні поля призначені для виведення кнопок переходу на попередню та наступну сторінку блогу. Вони мають назви "Text For The Previous Post"та "Text For The Next Post" відповідно. Як правило, тут прописуються звичні стрілочки відповідного спрямування.

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

Тепер настав час зайнятися подальшими налаштуваннями плагіна WP-PageNavi і перейти до налаштувань списку сторінок. Перше, що ми зустрічаємо у вікні «Налаштування списку сторінок»— це пункт «Use pagenavi-css.css» , що дозволяє установкою галочки відключати або підключати файл з каскадними таблицями стилів, що йде в комплекті з плагіном, що обговорюється сьогодні.

Наступне поле, що носить назву "Стиль списку сторінок", пропонує нам відкрити список CSS стилів, що по суті пропонує нам вибрати один стиль з двох пропонованих. Звичайний стиль – це вже згадані нами кнопки посторінкової навігації, тоді як стиль під назвою «Drop-down list» виводить нам навігацію у вигляді лаконічного списку, що випадає, з номерами сторінок.

Наступне поле налаштування пропонує нам встановити або зняти галочку в пункті "Always Show Page Navigation". Якщо ви поставите галочку тут, то навігація відображатиметься навіть для тих сторінок, на яких ще недостатньо постів для розбиття - наприклад, на головній сторінці.

Поле Number Of Pages To Show призначене для того, щоб ви вказали, скільки сторінок буде відображатися як послідовний ряд чисел, тоді як перехід на інші сторінки вашого блогу буде здійснюватися за допомогою кнопок «наступна» та «попередня» (тих самих, які ми відзначили стрілочками), а також кнопок для переходу на першу сторінку та на останню.

Поле під назвою «Number of Larger Page Numbers To Show»задає, як багато далеких номерів, які більше відображаються чисельного значення, побачить відвідувач блогу після того, як натисне кнопку переходу на наступну по порядку сторінку.

Зрештою, поле під назвою «Show Larger Page Numbers In Multiples Of»надає можливість встановити той крок, з яким будуть відображені номери далеких сторінок вашого блогу. Наприклад, у першому з цих описаних полів ми поставимо трійку, а другого – двійку. Це призведе до того, що в результаті на панелі WP-PageNavi при поточній сторінці під номером 1 і кількості сторінок, що відображаються, заданою цифрою 5, після послідовно відображених сторінок з першої по п'яту будуть видно сторінки під номерами 6, 8, 10 – тобто три сторінки вашого блогу з кроком (інтервалом), що дорівнює двійці. Втім, можна і не використовувати цю функцію, для чого достатньо поставити 0 в полі кількості далеких номерів, що відображаються.

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

Робота із зовнішнім виглядом панелі посторінкової навігації

Природно, що вам може захотітись змінити стандартну колірну гаму панелі навігації або її шрифт та іншу зовнішню атрибутику на ті, які більш пасують до стилю оформлення вашого блогу. Для того, щоб зробити це вам потрібно прописати у файлі каскадних таблиць стилів необхідні CSS властивості.

Однак, можна додавати додаткові властивості безпосередньо до файлу CSS поточної теми оформлення WordPress ( wp-content/themes/поточна тема/style.css), а чи не у відповідний файл плагіна, що розташовується за адресою: .

Ще один спосіб зміни зовнішнього вигляду нашої панелі посторінкової навігації, що розміщується на сторінках блогу при використанні плагіна WP-PageNavi, - це зміна файлу стильового оформлення безпосередньо самого плагіна. Цей файл розташований у папці /wp-content/plugins/wp-pagenavi/pagenavi-css.css.

(3)

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. Next Post Fly Box для WordPress

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

8. JQuery Paginator Plugin

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

9. Smart Pagination

Відмінний плагін, який пропонує 11 різних варіантів пагінації.

Бонус. CSS стилі для WP-PageNavi плагіна

Відмінні збори CSS-стилів для популярних плагінів для WordPress - WP-PageNavi та WP-Paginate. Включає HTML сторінки з демонстрацією стилів, а кожен стиль містить окремий CSS файл.

Посторінкова навігація- Це те, на що кожен блогер повинен звертати особливу увагу. Вона полягає у відображенні записів WordPress на посторінковій основі. Зазвичай записи відображаються в ієрархічному порядку, і, незважаючи на те, що у вас є опція вибору, така як «Старі записи» та «Нові записи», у вас відсутня опція відображення записів на сторінці з пронумерованими сторінками.

Користуючись посторінковою навігацією, користувач може відразу переходити на сторінку 6 або 8, не переходячи послідовно зі сторінки на сторінку. Така навігація також корисна для SEO, пошуковики надають перевагу такій навігації, вона дозволяє ботам легко переходити за записами на сторінках сайту. За допомогою безкоштовних плагінів WordPress, наведених у цій статті, ви можете встановити сторінкову навігацію на ваш веб-сайт.

1 – WP Page Navi

WP Page Navi– популярний плагін, який дозволить відвідувачам вашого сайту легко переходити зі сторінки на сторінку. Він замінить опцію «Старі записи»/«Нові записи» на навігацію із пронумерованими сторінками. Плагін не потребує великих ресурсів та не впливає на швидкість завантаження сторінок.

Цей плагін сумісний з більшістю існуючих тем.

• Потребує мало ресурсів.
• Дружні до SEO.
• Дуже популярний.

2 – WP Paginate

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

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

Основні моменти та особливості:

• Використовує просту навігацію сторінками.
• Дружні до SEO.
• Зручна для користувачів.

3 – Simple Pagination
Simple Pagination– це плагін, який дозволить вам мати навігацію як за вашими записами, так і за коментарями. Як підказує назва, цей плагін дуже простий у використанні. Ви можете навіть підібрати стиль навігації, який відповідає темі вашого блогу, з використанням таблиць стилів.

Існує 6 таблиць стилів для відповідності вашому сайту, а також підтримка двох мов.

Основні моменти та особливості:

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

4 – Page Links Plus

Page Links Plus– плагін, який виконує функцію додавання навігації до запису. Бувають випадки, коли ваш запис стає таким великим, що вам треба розділити його на частини. У таких випадках вам допоможе плагін Page Links Plus, який розіб'є ваш запис на сторінки, показуючи зв'язок між ними, що дозволяє переглянути весь запис цілком.

У плагіні є безліч настроювань для того, щоб отримати бажані результати для вашого запису.

Основні моменти та особливості:

• Дозволяє нумерувати записи та сторінки.
• Існує опція для перегляду всього запису.
• Є багато налаштувань.
• Є доступна версія Pro.

5 – Alphabetic Pagination

Alphabetic Paginationбуде нумерувати записи та сторінки вашого сайту в алфавітному порядку. Якщо ви займаєтеся продажем товарів на вашому сайті WordPress, то цей плагін творитиме чудеса, він нумеруватиме всі ваші товари в алфавітному порядку.

Він може бути використаний у будь-якому місці вашого сайту за допомогою шорткоду.

Основні моменти та особливості:

• Є навігація за абеткою.
• Є підтримка торгівлі.
• Може бути розміщений будь-де за допомогою шорткоду.
• Може показати список користувачів у алфавітному порядку.

6 – Gallery Pagination for WordPress

Плагін Gallery Pagination for WordPressдопоможе вам у навігації по галереях зображень вашого WordPress сайту. Він відображатиме всі зображення в галереї, що допоможе користувачеві перейти безпосередньо до будь-якого зображення без необхідності прокручування зображень одного за іншим.

Підтримка CDN допоможе зробити галереї зображень дружніми для SEO. Існує також кешування для того, щоб збільшити швидкість завантаження сторінки, а також Ajax, щоб робити зміни без необхідності перезавантаження сторінку.

Основні моменти та особливості:

• Є навігація галереями зображень.
• Є підтримка CDN.
• Дружні до SEO.
• Є кешування.

7 – Advanced Post Pagination
Плагін Advanced Post Paginationбуде здійснювати навігацію за вашими записами. Якщо ваш запис занадто великий, ви можете за допомогою цього плагіна розбити його на кілька сторінок. Щоб не заплутатися у звичних цифрових кнопках, за допомогою цього плагіна можна помістити на кнопки текст і картинки. Ви можете використовувати шорткод для того, щоб розбивати запис на сторінки так, як вам подобається.

Ajax допоможе вам перейти до розділу без необхідності перезавантаження всієї сторінки.

Основні моменти та особливості:

• Розбиття окремого запису.
• Використання тексту та картинок на кнопках.
• Використання шорткодів.
• Використання Ajax.

8 – WP Smart Pagination
WP Smart Pagination– це зручний спосіб відображення записів з поділом на сторінки, разом із полем, у яке ви можете ввести номер сторінки, що дозволить вам миттєво опинитися на потрібній сторінці. Це дуже корисно, якщо у вас на сайті багато записів, що ускладнює користувачам перехід на сторінку, яка знаходиться дуже далеко. У тому випадку, якщо у вас є 4000 сторінок записів, а користувач хоче подивитися 2555 сторінку, цей плагін може надати вам неоціненну послугу.

Основні моменти та особливості:

• Використовує просту навігацію сторінками.
• Є поле для прямого переходу до потрібної сторінки.
• Відповідність тем.
• Є модифікація стилів.

9 – jPages Pagination For WordPress
Це jQuery плагін, натхненний jPages, за допомогою якого ви легко зможете розбити на сторінки ваші галереї зображень і коментарі. Це повною мірою чуйний плагін, який здійснюватиме навігацію за контентом для всіх видів пристроїв з різними розмірами екрану. jPages Pagination For WordPress – невеликий плагін, який дозволить легко інтегрувати навігацію з jQuery.

Всі основні браузери підтримують цей плагін, тому відвідувачі вашого сайту не будуть мати проблем із переглядом контенту при використанні для навігації даного плагіна.

Основні моменти та особливості:

• Використовується jQuery.
• Чуйний плагін.
• Є підтримка основними браузерами.
• Проста інтеграція.

Висновок
У цій статті наведено список найкращих безкоштовних плагінів WordPress для посторінкової навігації, які можуть допомогти вам здійснити розбивку вашого сайту по сторінках якнайкраще. Всі плагіни мають різні особливості, тому оберіть для себе той, який найкраще підходить для вашого сайту.

4 761

У цій статті розповім, як створити меню навігації WordPress. Використовуючи простий інструмент drag & drop ви зробите гарне меню, що випадає на вашому сайті.

Меню навігації WordPress

Навіщо потрібне меню? Воно дозволяє уявити структуру вашого сайту користувачам – допомагає їм переглядати розділи та швидко знаходити потрібну інформацію.

Меню може розташовуватися вгорі/внизу та праворуч/ліворуч на сторінці сайту.

Майже всі теми WordPress містять хоча б один тип розташування меню.

Створення меню WordPress

Ви можете додати меню панелі адміністратора WordPress — Зовнішній вигляд — Меню.

На екрані з'явиться нове вікно «Створити меню», яке складається з двох областей. У лівій області знаходяться ваші сторінки, довільні посилання та рубрики. А в правій – пункти меню, що настроюються.

Давайте створимо ваше перше меню.

Вкажіть ім'я для вашого меню, наприклад. "Моє перше меню", а потім натисніть кнопку "Створити меню".

Перед вами з'являться налаштування меню:

Як ви можете помітити, тема сайту Azbuka WordPress пропонує три варіанти розташування меню: main, secondary, footer.

Назви та розташування меню залежить від вибраної теми та можуть відрізнятися.

Потім виберіть сторінки, які потрібно додати, позначте сторінки, перелічені в лівій області, і натисніть «Додати в меню».

Потім виберіть місцезнаходження вашого меню та збережіть.

Можете спробувати різне розташування, щоб подивитися, як воно виглядатиме готовим.

Розміщення елементів меню

Ви помітили, що кожен доданий пункт меню стоїть у порядку, в якому ви його додали. Наприклад, сторінка "Про мене" відображається в кінці, а "Товари" - на початку.

Не турбуйтеся, пункти меню можна перетягувати мишкою і вибудовувати в потрібному порядку.

Так ви можете створювати потрібну кількість меню для різних областей сайту.

Створення меню навігації WordPress

Меню, що випадає, є навігаційним меню. З батьківськими та дочірніми елементами.

Коли користувач наводить мишку на батьківський елемент меню, всі інші, дочірні, елементи плавно з'являються одна одною під батьківським.

За допомогою меню, що випадаєВи можете створити правильно структуровану систему навігації.

Тепер додамо пункт підменю для нового меню.

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

Так ви можете створити кілька рівнів підменю. Але, на жаль, не всі теми підтримують створення таких багаторівневих меню – більшість дають можливість зробити лише 2 рівні.

Додавання рубрик у меню

Для створення меню в блозі використовуються рубрики. І додаються за таким же принципом, як і сторінки. Розгорніть вкладку «Рубрики», виберіть потрібні та додайте в меню.

Ви помітите, що рубрики відображатимуться у вигляді пунктів меню. Як і у випадку зі сторінками, ви можете перетягувати рубрики мишкою, щоб виставити їх у потрібному порядку.

На прикладі нижче, я зробила так, що всі рубрики стали дочірніми елементами сторінки з блогом.

Додавання довільних посилань у меню навігації WordPress

Редагування пункту меню

Коли ви додаєте сторінки або рубрику, WordPress автоматично використовує назву сторінки або назву рубрики як текст посилання.

Це не означає, що ви не можете змінити його.

Розгорніть елемент та відредагуйте так, як вам потрібно.

Тут можна змінити заголовок, текст посилання та додати атрибут title до посилання. Збережіть меню, щоб не втратити всі зміни.

Видалення з меню

Також розгорніть елемент меню та внизу ви побачите червоний текст «Видалити».

Області розміщення навігаційних меню

Кожна тема пропонує свої види розташування навігаційного меню.

У темі цього сайту, що я показувала у прикладах, є 3 види розташування меню. У вашій темі їх може більше чи менше. І називатися вони, звісно, ​​можуть по-різному.

Додавання навігаційного меню у сайдбарі

Крім стандартних областей, ви можете додавати меню в сайдбар та інші області з віджетами.

В адмінці виберіть «Зовнішній вигляд» — «Віджети» та додайте віджет «Довільне меню» до сайдбару.

Потім вам потрібно озаглавити віджет і вибрати одне зі своїх настроєних меню зі списку. Натисніть кнопку збереження.

Тепер перейдіть на сайт і перевірте, як відображається меню у сайдбарі.

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

Якщо їх немає у вашій темі, ви можете встановити плагін, наприклад Menu Social Icons , щоб додати кнопки самостійно.

Вам може бути цікаво:

Якщо у вас є запитання, пишіть у коментарях.

І підписуйтесь на нас у

Доброго часу, дорогі друзі! Сьогодні ми поговоримо з вами про те, як зробити на 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 "

";
}

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

";
}

. Тепер заходимо у файл таблиця стилів (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)
{
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 знаходимо там рядок і після неї або ще кілька рядків додаємо код

Якщо все коди були перевірені на працездатність, так що один з прикладів у вас повинен працювати в будь-якому випадку. На цьому все, удачі.