Як додати числову сторінку у вашій темі WordPress

Один з наших читачів нещодавно запитав нас, як ми можемо додати числові сторінки на сторінці блогу WPBeginner. Теми WordPress за замовчуванням та багато інших тем відображають посилання на сторінки, додаючи посилання “Більше” та “Нові повідомлення” внизу сторінок архіву WordPress. Однак існує багато сайтів WordPress, які використовують числові сторінки, наприклад WPBeginner. З нашого досвіду числова сторінка є більш зручною для користувачів, привабливою та SEO. Більшість просунутих тематичних рамок WordPress, таких як Genesis, має вбудований функціонал для додавання числової сторінки. У цій статті ми покажемо вам, як додати числові сторінки на вашу тему WordPress. Мета – замінити старі та новіші посилання на сторінки сторінки за замовчуванням у нижній частині архівних сторінок простими навігаційними номерами сторінок.


Різниця між навігацією WordPress за замовчуванням та числовою сторінкою

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

Вручну додавання числових сторінок у ваші теми WordPress

Спочатку ми покажемо вам, як вручну додати числові сторінки на ваші теми WordPress. Це піде на користь нашим досвідченим користувачам та користувачам, які вивчають розробку тем або хочуть це зробити, не покладаючись на сторонній плагін. Почніть з додавання наступного коду у файл function.php теми вашої теми.

Примітка: Цей код походить від Genesis Framework, який ми використовуємо на нашому сайті. Якщо ви використовуєте Genesis, вам не потрібен цей код або плагін.

функція wpbeginner_numeric_posts_nav () {

якщо (is_singular ())
повернення;

глобальний $ wp_query;

/ ** Зупиніть виконання, якщо є лише 1 сторінка * /
if ($ wp_query->max_num_сторінок <= 1)
повернення;

$ paged = get_query_var (‘paged’)? абсент (get_query_var (‘paged’)): 1;
$ max = intval ($ wp_query)->max_num_pages);

/ ** Додати поточну сторінку до масиву * /
if ($ на сторінці >= 1)
$ посилання [] = $ paged;

/ ** Додайте до масиву сторінки навколо поточної сторінки * /
if ($ на сторінці >= 3) {
$ посилання [] = $ paged – 1;
$ посилання [] = $ paged – 2;
}

if (($ paged + 2) <= $ max) {
$ посилання [] = $ paged + 2;
$ посилання [] = $ paged + 1;
}

відлуння ‘

    ‘ . "\ n";

    / ** Попереднє посилання * /
    if (get_previous_posts_link ())
    printf (‘

  • % s
  • ‘ . "\ n", get_previous_posts_link ());

    / ** Посилання на першу сторінку, плюс еліпси, якщо необхідно * /
    if (! in_array (1, $ посилання)) {
    $ class = 1 == $ paged? ‘клас ="активний"’:’ ‘;

    printf (‘% s

    ‘ . "\ n", $ class, esc_url (get_pagenum_link (1)), ‘1’);

    if (! in_array (2, $ посилання))
    відлуння ‘

  • ‘;
    }

    / ** Посилання на поточну сторінку, плюс 2 сторінки в будь-якому напрямку, якщо необхідно * /
    сортувати ($ посилання);
    foreach ((масив) $ посилання як $ посилання) {
    $ class = $ paged == $ посилання? ‘клас ="активний"’:’ ‘;
    printf (‘% s

    ‘ . "\ n", $ class, esc_url (get_pagenum_link ($ link)), $ link);
    }

    / ** Посилання на останню сторінку, плюс еліпси при необхідності * /
    if (! in_array ($ max, $ посилання)) {
    if (! in_array ($ max – 1, $ посилань))
    відлуння ‘

  • ‘ . "\ n";

    $ class = $ paged == $ max? ‘клас ="активний"’:’ ‘;
    printf (‘% s

    ‘ . "\ n", $ class, esc_url (get_pagenum_link ($ max)), $ max);
    }

    / ** Наступне посилання * /
    якщо (get_next_posts_link ())
    printf (‘

  • % s
  • ‘ . "\ n", get_next_posts_link ());

    відлуння ‘

‘ . "\ n";

}

У WPBeginner ми використовуємо цей самий код для цифрової сторінки на наших сторінках архіву (наприклад, наш блог або сторінка категорії підручників WordPress). Цим кодом є те, що він отримує кількість сторінок та готує список з нумерованими посиланнями. Щоб додати це у ваші шаблони, вам доведеться додати наступний тег шаблону в index.php теми, archive.php, category.php та будь-який інший шаблон сторінки архіву..

<?php wpbeginner_numeric_posts_nav (); ?>

Тепер, коли ми отримали наш список пронумерованих сторінок, нам потрібно цей стиль стилізувати. Ми хочемо, щоб список відображався в рядковому блоці, де активна сторінка виділяється іншим кольором фону. Щоб досягти цього, давайте вперед та додайте у файл style.css теми тему:

.навігація li a,
.навігація li a: навести курсор,
.навігація li.active a,
.навігація li.disabled {
колір: #fff;
оформлення тексту: немає;
}

.навігація li {
дисплей: вбудований;
}

.навігація li a,
.навігація li a: навести курсор,
.навігація li.active a,
.навігація li.disabled {
фоновий колір: # 6FB7E9;
межа-радіус: 3px;
курсор: вказівник;
підкладка: 12px;
підкладка: 0,75rem;
}

.навігація li a: навести курсор,
.навігація li.active a {
фоновий колір: # 3C8DC5;
}

Там у вас є. У нашій темі є список числових сторінок, який виглядає чудово.

Ручне додавання числових сторінок до тем WordPress без плагіна

Додавання числової сторінки в WordPress за допомогою WP-PageNavi

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

Налаштування параметрів WP-PageNavi

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

На наступному кроці вам потрібно додати тег шаблону у вашій темі WordPress. Перейдіть у папку тем і знайдіть рядки для старшої та новішої сторінки в шаблонах сторінок архіву: index.php, archive.php та будь-яких інших файлах шаблонів архіву. Додайте наступний тег шаблону, щоб замінити старі теги попереднього_posts_link та next_posts_link.

<?php wp_pagenavi (); ?>

Коли ви додали фрагмент wp_pagenavi, ось так виглядатиме числова сторінка:

Перегляд за замовчуванням числової сторінки на wp-pagenavi

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

Скопіюйте вміст файла pagenavi-css

Далі вам потрібно перейти Зовнішній вигляд »Редактор і вставте вміст pagenavi-css.css у файл style.css вашої теми. Тепер ви можете змінити колірну гамму та стилістику звідси. Причина, чому ми скопіювали вміст css плагіна на таблицю стилів теми, – це запобігти втраті змін стилю, якщо ви оновите плагін. Ось трохи модифікована версія числової сторінки, сміливо використовуйте та змінюйте її у своїй темі.

.wp-pagenavi {
зрозуміло: обидва;
}

.wp-pagenavi a, .wp-pagenavi span {
колір: #FFF;
оформлення тексту: немає;
фоновий колір: # 6FB7E9;
межа: 1px твердий # B2D1E5;
підкладка: 5px 5px;
маржа: 2px;
}

.wp-pagenavi a: наведіть курсор, .wp-pagenavi span.current {
колір межі: # E9F2F9;
фоновий колір: # 6FB7E9;
}

.wp-pagenavi span.current {
шрифт: жирний шрифт;
фоновий колір: # 3C8DC5;
}

Ось як це виглядатиме:

Індивідуальний CSS PageNavi CSS

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

Ми сподіваємось, що ця стаття допомогла вам додати та відобразити числову сторінку у вашій темі WordPress. Який метод ви вважаєте за краще використовувати? Вам подобається числова сторінка або ви віддаєте перевагу вбудовану попередню / наступну навігацію? Повідомте нас у коментарях нижче.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map