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
Репетитор по wordpress
Услуги репетитора онлайн. Список курсов которые я веду
  • Базовый курс по веб-дизайну;
  • Верстка сайтов;
  • Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
  • Разработка сайтов на PHP.
Подробнее читайте на странице репетитор по WordPress
*/

Николаенко Максим

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


Вам может также понравиться...

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

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

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

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