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.
