wp-pagenavi адаптивна навігація у wordpress
Думаю всім відомий такий популярний плагін як wp-pagenavi, хто не знає це плагін навігації. На жаль, розробники плагіна не поспішають робити його адаптивним., а зараз адаптивні сайти відіграють дуже велику роль, особливо для пошукової системи Google. Тому сьогодні я вирішив розкрити це питання і розповісти як можна швидко перетворити не адаптивну навігацію на таку, яка буде відмінно відображатися на мобільних пристроях..
Як і все геніальне цей урок буде максимально простим і зрозумілим навіть для веб-розробників-початківців.
Адаптивна навігація wp-pagenavi для сайту під мобільні пристрої
Подивимося як навігація плагіна виглядає на мобільному якщо нічого не міняти.
Як видно з картинки, все пливе, тому що просто не влазить на екрані. Давайте це поправимо і залишимо лише важливі кнопки.
Якщо у вас вже встановлено плагін wp-pagenavi, то все, що вам необхідно зробити це відкрити файл стилів який знаходиться на шляху /wp-content/themes/-ім'я вашої теми-/style.css (у преміум темах шлях до стилів може трохи відрізнятися).
У відкритий файл і додайте стилі:
1 2 3 4 5 |
@media (max-width: 800px) { .wp-pagenavi .page { display: none; } } |
Після нехитрих маніпуляцій буде приховано зайві для мобільних пристроїв кнопки.
Якщо у вашому дизайні цього буде недостатньо, то можна ще прибрати першу та останню кнопку. Для цього необхідно трохи доопрацювати код стилів:
1 2 3 4 5 6 7 |
@media (max-width: 800px) { .wp-pagenavi .page, .wp-pagenavi .last, .wp-pagenavi .first { display: none; } } |
Ось що вийшло:
Якщо щось не вийшло, запитуйте у коментарях. Думаю, на цьому можна закінчити, вдалої розробки зручних та адаптивних сайтів.
/*
- Базовий курс з веб-дизайну;
- Верстка сайтів;
- Загальний курс CMS WordPress та продовження курсу з розробки шаблонів;
- Розробка сайтів на PHP.