Думаю всім відомий такий популярний плагін як wp-pagenavi, хто не знає це плагін навігації. На жаль, розробники плагіна не поспішають робити його адаптивним., а зараз адаптивні сайти відіграють дуже велику роль, особливо для пошукової системи Google. Тому сьогодні я вирішив розкрити це питання і розповісти як можна швидко перетворити не адаптивну навігацію на таку, яка буде відмінно відображатися на мобільних пристроях..

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

Адаптивна навігація wp-pagenavi для сайту під мобільні пристрої

Подивимося як навігація плагіна виглядає на мобільному якщо нічого не міняти.

Як видно з картинки, все пливе, тому що просто не влазить на екрані. Давайте це поправимо і залишимо лише важливі кнопки.

Якщо у вас вже встановлено плагін wp-pagenavi, то все, що вам необхідно зробити це відкрити файл стилів який знаходиться на шляху /wp-content/themes/-ім'я вашої теми-/style.css (у преміум темах шлях до стилів може трохи відрізнятися).

У відкритий файл і додайте стилі:

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

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

Ось що вийшло:

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