WP-PageNavi: делаем красивую навигацию
На написание этой статьи меня сподвигла эта запись. В ней описан процесс оптимизации плагина WP-PageNavi под конкретные нужды, а так же настройка его внешнего вида. В своей же статье я постараюсь более подробно описать процесс настройки внешнего вида панели навигации, но на этом мы не остановимся, мы пойдём дальше и научимся ставить на фон панельки градиент, вместо статичного цвета.
Для начала распишем подробно, какой параметр на что влияет, чтобы вам не пришлось разбираться самим.
Открываем файл “pagenavi-css.css” и находим следующие строки:
.wp-pagenavi a, .wp-pagenavi a:link { - параметры для тех страниц на которые можно осуществить переход.
.wp-pagenavi a:visited { - парметры для уже просмотренных страниц.
.wp-pagenavi a:hover { – параметры для страницы на которую наведён курсор мыши.
.wp-pagenavi span.pages { – парметры для таблички которая показывает общее количество страниц.
.wp-pagenavi span.current { – параметры для активной страницы.
.wp-pagenavi span.extend { – параметры для панели с тремя точками.
Для всех этих строчек актуальны следующие параметры:
padding: – влияет на размер блока. Возможные варианты: любые 4 числа (2px 4px 2px 4px, 5x 7x 5x 7x).
margin: – регулирует расстояние между блоками. Возможные варианты: любые числа (2px, 3px, 5px).
text-decoration: – влият на оформление текста. Возможные варианты: blink - мигающий текст, line-through – перечеркнутый текст, overline - линия над текстом, underline - подчеркнутый текст, none – отменяет все эффекты.
border: - рамка вокруг блока. Возможные варианты: любые числа и любой цвет (1px solid #0066cc, 3px solid #FFFFFF)
color: - цвет текста. Возможные варианты: любой цвет (#2214e3, #000000)
background-color: - цвет вокруг текста. Возможные варианты: любой цвет (#2214e3, #000000)
Отлично! Теперь мы разобрались с настройками плагина WP-PageNavi, и сейчас попробуем засандалить на фон панели навигации градиент. Рисуем в любом графическом редакторе 2 градиента на подобие этих:
Назовём зелёный “1.png“ а синий ”2.png“. Затем создаём в папке с плагином WP-PageNavi папку “images” и закидываем туда наши файлы. Теперь в файле “pagenavi-css.css”, находим строчки: “.wp-pagenavi a, .wp-pagenavi a:link {“, “.wp-pagenavi span.pages {“, “.wp-pagenavi span.extend {” и меняем в них параметр “background-color: #xxxxx;” на “background-image: url(’images/1.png’);“. Теперь в строках: “.wp-pagenavi a:hover {” и “.wp-pagenavi span.current {” меняем параметр “background-color: #xxxxx;” на “background-image: url(’images/2.png’);“.
Затем подбираем блокам рамки подходящего цвета, в нашем случае цвет для рамки зелёного блока будет #56bd18, а для синего #81bbf9. С другими параметрами вы легко разберётесь и сами, выше по тексту есть все необходимые для этого сведения. В итоге у нас должно получиться чтото на подобее этого:
Связанные записи
Оставить комментарий
