Делаем нестандартное меню в WordPress

Делаем нестандартное меню в WordPress

Оставь свою 5 звездочную оценку

Для начала давайте определимся, что такое стандартное и нестандартное меню в WordPress. Лично для меня, да и, думаю, для многих стандартное меню WordPress ассоциируется с чем-то простым и незамысловатым, такое меню встречается в большинстве шаблонов, оно бывает горизонтальным, либо вертикальным. Например, на моем блоге горизонтальное меню, как вы видите, выглядит очень просто, в прочем, как и вертикальное. В WordPress меню,  в основном, генерируется с помощью стандартных пользовательских функций, таких как wp_list_categories(), wp_list_pages(), wp_nav_menu(), которое может “регулироваться” какими-нибудь дополнительными свойствами(порядок отображения, сортировка  и т.д). Существуют также способы добавлять специфические иконки для пунктов меню и описание, примеры которых можно найти в сети. Сегодня я хочу предложить вам свой вариант нестандартного меню, которое, впрочем имеет свои плюсы и минусы по сравнению со стандартным.

Меню, пример которого я хочу вам продемонстрировать, будет выглядеть вот таким вот образом:

Делаем нестандартное меню в WordPress

Как видите, пункты меню таким вот нестандартным способом вы вряд ли напишите в заголовках разделов или страниц в административной панели WordPress и уж вряд ли организуете его стандартным способом в функциях wp_list_categories(), wp_list_pages(), wp_nav_menu(). Давайте, не будем терять время и приступим к созданию меню.

Будем считать, что вы уже определились с иконками для разделов меню, создали соответствующие рубрики и страницы и выбрали место для расположения этого самого меню. В нашем случае рассмотрим пример горизонтального меню в “шапке” сайта. Для начала напишем HTML-код нашего меню в файле header.php шаблона, сделаем заголовки так, как мы хотим, чтобы они выглядели в меню:

<ul class="nav">
    <li class="articles">
        <a href="#">
           <strong>.статьи</strong>
           {<br />Статьи по <br />JS и CSS<br />}
        </a>
    </li>
    <li class="tricks">
        <a href="#">
           <strong>.трюки</strong>
           {<br />Задачи, решения<br /> по JS и CSS <br />}
        </a>
    </li>
    <li class="profile">
        <a href="#">
           <strong>.видео</strong>
           {<br />Видеоматериалы,<br /> их уроки <br />}
        </a>
    </li>
    <li class="portfolio">
        <a href="#">
           <strong>.портфолио</strong>
           {<br />Мои работы<br /> и код <br />}
        </a>
    </li>
    <li class="contacts">
        <a href="#">
           <strong>.верстаю</strong>
           {<br />Вёрстка сайтов,<br />обо мне, контакты<br />}
        </a>
    </li>
</ul>

Теперь зададим стили, учтите, что для нашего меню будем также использовать псевдокласс :hover и создадим для пунктов меню специальный класс active, который будет срабатывать при активном пункте меню.

.nav {
                background: url(images/navBg.jpg) left top repeat;
                border: 1px solid #fff;
                border-width: 1px 0 0;
                overflow: hidden;
        }

                .nav li {
                        float: left;
                        height: 4.833em;
                        background: url(images/navLi_left1.gif) left no-repeat;
                        padding: 0 3px;border-bottom: 5px solid #212121;
                }

                .nav li:hover,.nav li.active{
                        border-bottom: 5px solid #e26426;
                }

                        .nav li a {
                                color: #000;
                                display: block;
                                height: 100%;
                                padding-left: 40px;
                                padding-right: 5px;
                                font: .833em Verdana, Geneva, sans-serif;
                                background-image: url(images/sprite.png);
                                background-repeat: no-repeat;

                        }

                        .nav li a strong { font-size: 1.2em;}

                        .nav li.articles a{
                                background-position: 3px 14px;

                        }

                        .nav li.tricks a {
                                background-position: 3px -169px;
                        }

                        .nav li.portfolio a {
                                background-position: 3px -572px;
                        }

                        .nav li.profile a {
                                background-position: 3px -370px;
                        }

                        .nav li.contacts a {
                                background-position: 3px -756px;
                        }

                        .nav li.articles a:hover,.nav li.articles.active a  {
                                background-position: 3px -75px;
                        }

                        .nav li.tricks a:hover,.nav li.tricks.active a  {
                                background-position: 3px -269px;
                        }

                        .nav li.portfolio a:hover,.nav li.portfolio.active a  {
                                background-position: 3px -663px;
                        }       

                        .nav li.profile a:hover,.nav li.profile.active a  {
                                background-position: 3px -482px;
                        }

                        .nav li.contacts a:hover,.nav li.contacts.active a  {
                                background-position: 3px -854px;
                        }

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

<ul class="nav">
    <li class="articles">
        <a href="/articles">
           <strong>.статьи</strong>
           {<br />Статьи по <br />JS и CSS<br />}
        </a>
    </li>
    <li class="tricks">
        <a href="/tricks">
           <strong>.трюки</strong>
           {<br />Задачи, решения<br /> по JS и CSS <br />}
        </a>
    </li>
    <li class="profile">
        <a href="/video">
           <strong>.видео</strong>
           {<br />Видеоматериалы,<br /> их уроки <br />}
        </a>
    </li>
    <li class="portfolio">
        <a href="/portfolio">
           <strong>.портфолио</strong>
           {<br />Мои работы<br /> и код <br />}
        </a>
    </li>
    <li class="contacts">
        <a href="/about">
           <strong>.верстаю</strong>
           {<br />Вёрстка сайтов,<br />обо мне, контакты<br />}
        </a>
    </li>
</ul>

В данном случае я указал произвольный вариант постоянных ссылок, а не по умолчанию, который имеет вид ?p=123, например, для записей. Все уже практически сделанно, меню работает, осталось только указать пунктам меню состояние active при нажатом состоянии. Для этого вернемся к нашему HTML-коду и допишем условие, при котором активный пункт меню и будет принимать это состояние.

<ul class="nav">
    <li class="articles<?php if (is_category(18)) echo ' active'; ?>">
        <a href="/articles">
           <strong>.статьи</strong>
           {<br />Статьи по <br />JS и CSS<br />}
        </a>
    </li>
    <li class="tricks<?php if (is_category(16)) echo ' active'; ?>">
        <a href="/tricks">
           <strong>.трюки</strong>
           {<br />Задачи, решения<br /> по JS и CSS <br />}
        </a>
    </li>
    <li class="profile<?php if (is_category(28)) echo ' active'; ?>">
        <a href="/video">
           <strong>.видео</strong>
           {<br />Видеоматериалы,<br /> их уроки <br />}
        </a>
    </li>
    <li class="portfolio<?php if (is_page(97)) echo ' active'; ?>">
        <a href="/portfolio">
           <strong>.портфолио</strong>
           {<br />Мои работы<br /> и код <br />}
        </a>
    </li>
    <li class="contacts<?php if (is_page(41)) echo ' active'; ?>">
        <a href="/about">
           <strong>.верстаю</strong>
           {<br />Вёрстка сайтов,<br />обо мне, контакты<br />}
        </a>
    </li>
</ul>

Зная ID категорий и страниц, мы можем дописать условие, при котором ссылка, которая в нашем случае является пунктом меню, будет принимать актиное состояние. Проще говоря, условие  <?php if (is_page(97)) echo ‘ active’; ?> можно перевести так: “Если выбрана ссылка на страницу с ID=97, то для нее выводится класс, соответствующий классу active в стиле CSS”.

Делаем нестандартное меню в WordPress: 8 комментариев

  1. Помогите пожалуйста!! До профессионального веб-мастера мне ещё далеко, хотелось бы сделать слева меню со списком стран и флагами. В вашей статье “Делаем нестандартное меню в WordPress” очень подробно прописано, но мне необходимо вертикальное меню, а самостоятельно- боюсь напортачить. Не могли бы дать подсказку как прописать в стиле CSS расположение каждого пункта, с учетом разных картинок и текста. И как прописать фон меню Картинка с названием. Помогите, если есть такая возможность уже 3 недели ежедневно изучаю все тонкости, но пока самой не справиться

  2. Добрый день,

    В горизонтальном меню выводятся все страницы.
    Подскажите как сделать, что бы в горизонтальном меню выводились только определенные страницы?

    1. Я так понимаю определяется в файле bottom-menu.php

      <a href="#content" rel="nofollow">
      <a href="#secondary" rel="nofollow">

      ‘menu-header’, ‘theme_location’ => ‘primary’ ) );
      else
      wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘sf-menu’,'fallback_cb’ => ‘admired_page_menu’ ) );?>

  3. Не могу понять почему, бывает отступ с лева и с права, на глаз одинаковый, т.е. не во всю ширину, шаблона?

  4. Добрый день! Как мне сделать, чтобы пункт меню, созданный в админке вордпресс гостю отображался с названием Вход (при нажатии на этот пункт меню у меня открывается модальное окно с формой входа), а зарегистрированному пользователю отображался этот же пункт меню, только со ссылкой

    1. со ссылкой на выход с сайта… Или сделать просто 2 пункта меню, только для гостей будет первый пункт меню виден, а второй скрыт, а для остальных будет первый пункт меню скрыт а второй виден… (Извиняюсь за два комментария, лагнул инет…) Заранее спасибо за помощь!

  5. Добрый день.

    Хорошая статья про меню! Класс!
    Но у меня не выделяется выбранное меню!
    ID страниц прописаны и проверены..
    Т.е. при наведении на определенное меню изображение меняется, а при выборе раздела потом не горит выбранный раздел (меню).
    Можете подсказать где ошибка? (print-51_ru)

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

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