wp-pagenavi адаптивная навигация в wordpress

Думаю всем известен такой популярный плагин как wp-pagenavi, кто не знает это плагин навигации. К сожалению разработчики плагина не спешат делать его адаптивным, а на данный момент адаптивные сайты играют очень большую роль, особенно для поисковой системы google. Поэтому сегодня я решил раскрыть этот вопрос и рассказать как можно быстро превратить не адаптивную навигацию в такую которая будет отлично отображаться на мобильных устройствах.

Как и все гениальное этот урок будет максимально простым и понятным даже для начинающих веб разработчиков.

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

Посмотрим как навигация плагина выглядит на мобильном если ничего не менять.

wordpress pagenavi navigation responsive

Как видно из картинки все плывет, так как попросту не влазит на экране. Давайте это поправим и оставим только важные кнопки.

Если у вас уже установлен плагин wp-pagenavi, то все что вам необходимо сделать это открыть файл стилей который находится по пути /wp-content/themes/-имя вашей темы-/style.css (в премиум темах путь к стилям может немного отличаться).

В открытый файл и добавьте стили:

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

wordpress responsive page navigation

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

Вот что получилось:

hide other navigation button

Если что-то не вышло, спрашивайте в комментариях. Думаю на этом можно закончить, удачной разработки удобных и адаптивных сайтов.

Купить хостинг WordPress

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Шаблоны для WordPress
Самый лучший хостинг в Украине
Стабильный хостинг для Drupal