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

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

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

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

Раніше для реалізації цієї можливості використовували сторонні плагіни, або спеціальні функції, які розміщувалися у файлі functions.php. Однак з виходом WordPress версії 4.1 функція пагінації була вбудована в ядро ​​CMS, і тепер для реалізації посторінкової навігації достатньо внутрішніх функцій WordPress і немає необхідності додавати сторонній код або плагіни.

Я писав раніше про подібне покращення з боку WordPress щодо тега TITLE- https://aboutwordpress.ru/post/wordpress-title/.

Що таке пагінація

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

WP-PageNavi - плагін пагінації WordPress

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

Пагінація WordPress - плагін WP-PageNavi

Пагінація wordpress без плагіна

Для того, щоб зробити пагінацію на сайті без плагінів, ми скористаємося вбудованою WordPress функцією the_posts_pagination(). У потрібному місці необхідно вставити наступний код (як правило це файли index.php, category.phpі їм подібні):

Результатом роботи функції the_posts_pagination() буде приблизно такий HTML код:

Видаляємо заголовок H2 з пагінації

Відразу впадає у вічі H2-заголовок «Навігація по записам». Якому здебільшого не місце на сайті. Щоб його позбутися додамо наступний код у файл functions.php:

/* Видаляємо H2 з пагінації */ add_filter("navigation_markup_template", "my_navigation_template", 10, 2); function my_navigation_template($template, $class)( return "

Налаштовуємо сторінки пагінації

За промовчанням the_posts_pagination() відображає першу та останню сторінку, а також по одній сторінці навколо поточної. Всі інші замінюються крапкою. Цю поведінку можна змінити за допомогою аргументів:

• show_all – показувати всі сторінки
• end_size - кількість сторінок на початку та наприкінці списку
• mid_size - кількість сторінок зліва та праворуч від поточної сторінки

Наприклад так:

2, "end_size" => 2,)); ?>

Стилі пагінації CSS

Зручна навігація сайтом – це один з ключових факторів загального юзабіліті сайту. Коли користувач заходить на сайт, він хоче в найкоротші терміни знайти потрібну інформацію. Навігація сайту включає: зручний пошук, зрозумілі категорії, посторінкова навігація. У цій статті я розповім, як створити сторінкову навігацію для сайту на Wordpress.

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

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

Посторінкова навігація за допомогою плагіна.

Як я вже казав, найпростіший спосіб створити зручну посторінкову навігацію- це плагін WP-PageNavi. Плагін починає роботу відразу після його активації в консолі сайту, вам необов'язково щось додатково налаштовувати в опціях плагіна, щоб він заробив. Немає нічого складного і в установці. Хочу зазначити, що плагіни не завжди встановлюються через адмінку wordpress. Плагін також вручну можна встановити руками, просто завантаживши плагін прямо на хостинг в папку wpcontet-plagins, після завантаження потрібно буде активувати плагін в адмін панелі.

Посторінкова навігація без плагіна.

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

/*******************************

Навігація

*******************************/

function emm_paginate($args = null) (
$defaults = array(
'page' => null, 'pages' => null,
'range' => 3, 'gap' => 3, 'anchor' => 1,
‘before’ => ‘

', 'after' => '

’,
‘title’ => __(”),
‘nextpage’ => __(‘»’), ‘previouspage’ => __(‘«’),
'echo' => 1
);

$r = wp_parse_args($args, $defaults);
extract ($ r, EXTR_SKIP);
if (!$page && !$pages) (
global $wp_query;
$page = get_query_var('paged');
$page = !empty($page)? intval($page) : 1;
$posts_per_page = intval(get_query_var('posts_per_page'));
$pages = intval(ceil($wp_query->found_posts / $posts_per_page));
}

$ output = "";
if ($pages > 1) (
$output .= “$before $title”;
$ellipsis = “ …”;
if ($page > 1 && !empty($previouspage)) (
$output .= “$previouspage”;
}

$min_links = $range * 2 + 1;
$block_min = min($page – $range, $pages – $min_links);
$block_high = max($page + $range, $min_links);
$left_gap = (($block_min – $anchor – $gap) > 0) ? true: false;
$right_gap = (($block_high + $anchor + $gap)< $pages) ? true: false;
if ($left_gap && !$right_gap) (
$output .= sprintf(”,

$ellipsis,
emm_paginate_loop($block_min, $pages, $page));
}

else if ($left_gap && $right_gap) (
$output .= sprintf(”,
emm_paginate_loop(1, $anchor),
$ellipsis,
emm_paginate_loop($block_min, $block_high, $page),
$ellipsis,

}

else if ($right_gap && !$left_gap) (
$output .= sprintf(”,
emm_paginate_loop(1, $block_high, $page),
$ellipsis,
emm_paginate_loop(($pages – $anchor + 1), $pages));
}

else (
$output .= emm_paginate_loop(1, $pages, $page);
}

if ($page< $pages && !empty($nextpage)) {
$output .= “ for ($i = $start; $i<= $max; $i++) {
$output .= ($page === intval($i))
? “$i”
: “

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

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організується за допомогою популярного плагіна WP-PageNavi. На офіційному сайті wordpress.org цей модуль займає четверте місце за скачуванням. На момент написання цієї посади його завантажили вже 4065194 разів. Як влаштована зручна навігація сторінками Ви можете подивитися у мене на блозі. Якщо готові на своєму веб-ресурсі, тоді приступимо.

Посторінкова навігація WordPress за допомогою плагіна WP-PageNavi

Посторінкова навігація WordPress блогу

Як встановити та налаштувати плагін WP-PageNavi

Як видно зі скріншота, Ви можете замінити текст на свій або залишити все як є. Позначте Використовувати стиль pagenavi-css.css чи ні. Якщо вам потрібно настроїти CSS стиль WP-PageNavi зробити це можна у файлі плагіна. Треба для цього перейдіть в розділ "Плагіни" - "Редактор", виберете як плагін для зміни WP-PageNavi і знайдіть у списку файл wp-pagenavi/pagenavi-css.css. За налаштуваннями все зрозуміло. Наступний крок такий.

У вашій темі у файлах index.php, archive.php і search.php необхідно знайти заклики до next_posts_link() і previous_posts_link() і замінити їх. У темі TwentyTen, це виглядає так:

← Older posts", "twentyten")); ?>

→", "twentyten")); ?>

Може в інших темах виглядати так:

Шукайте, що щось схоже і вам треба замінити ці рядки цим:

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

Плагін WP PageNavi Style додає більше варіантів кольору для Wp-PageNavi

Так, Ви не помилилися, щоб можна було скористатися готовими стилями для посторінкової навігації WP-PageNavi, треба встановити додатковий плагін WP PageNavi Style від цього ж розробника. Встановіть таким же чином цей модуль, активуйте його і у вас з'явиться WP PageNavi Style в бічній колонці адмінки. Натисніть її для налаштування та вибору стилю для нової навігації:

Налаштування плагіна WP PageNavi Style

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

Набір стилів плагіна Плагін WP PageNavi Style

Який великий вибір! Якщо не хочете використовувати готові стилі, встановіть - Custom та налаштуйте стиль за своїм:

Всі. Ще один момент. Якщо Ви готові встановити посторінкову навігацію в ручну, тобто без плагіна, читаємо далі.

Як встановити посторінкову навігацію WordPress без плагіна

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

Відкрийте файл "Функції теми" (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"] = 3; //скільки посилань показувати ліворуч і праворуч від поточної $a["end_size"] = 5; //скільки посилань показувати на початку і в кінці $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 "

"; }

Потім змінюємо стандартний код виведення у всіх файлах, де є навігація - index.php, category.php, archive.php і так далі. Змінюємо замість:

Next_posts_link("«Вперед"); previous_posts_link("Назад"");

Navig ( padding:15px 0 25px 0; overflow:hidden; font-size:13px; color:#000; clear:both;) .navig a(background: #fff; border: 1px solid #DDDDDD; color: #000000; font-size: 13px; padding: 5px; text-decoration: none;) .navig span.pages (padding: 3px 5px; background:#f1f8f9; fff; border: 1px solid red; color: red; font-size: 13px; text-decoration: none;) .navig span.pages navig span.current (background: #fff; border: 1px solid #111; font-size: 13px; padding:5px; text-decoration: none;) .navig span.extend (padding: 3px 5px; background:#f1f8f9; border: 1px solid #C6D2D4;)

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

(function(w, d, n, s, t) ( w[n] = w[n] || ; w[n].push(function() ( Ya.Context.AdvManager.render(( blockId: "R-A -292864-4", renderTo: "yandex_rtb_R-A-292864-4", async: true )); )); t = d.getElementsByTagName("script"); s = d.createElement("script"); .type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); , this.document, "yandexContextAsyncCallbacks");