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

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

Как видите, пункты меню таким вот нестандартным способом вы вряд ли напишите в заголовках разделов или страниц в административной панели 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”.