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 не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

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

Чтобы продолжить работать с сайтом, вам необходимо разрешить использование cookies. Больше информации

Cookie на этом веб-сайте включены, чтобы дать вам больше возможностей на сайте. Если вы продолжаете использовать этот сайт без изменения настроек cookie или нажмите «Принять» ниже, вы соглашаетесь с этим.

Закрыть