Управление меню

Меню — одна из важнейших частей дизайна. Меню должно быть удобным для посетителя, должно отражать существующую структуру страниц и в то же время оставаться простым, понятным и не перегруженным пунктами. Представление меню — важнейшая деталь в процессе разработки сайта. Всегда стоит помнить о том, что меню — это первое, к чему обычно обращается пользователь при изучении ресурса. Существует огромное множество различных подходов, позволяющих сделать визуализацию меню необычной и в то же время интуитивно понятной.

Вид меню должен зависеть от того, какой сайт вы разрабатываете. Одни сайты WordPress построены на основе страниц (например, статичные сайты), другие — на базе различных элементов, придающих динамичность и неоднородность проекту. В любом случае, меню должно быть подобрано таким образом, чтобы отражать реально существующую структуру. Иногда этого довольно сложно достичь: приходится вносить в код значительные корректировки. В следующем разделе мы рассмотрим использование страниц WordPress в меню.

Надлежащее использование страниц

Большинство сайтов WordPress построены на основе страниц, которые обычно и отражаются в меню. Конечно, можно было бы обойтись и без меню, отредактировав существующие шаблоны и добавив к ним ссылки на соответствующие страницы, однако в таком случае пришлось бы редактировать шаблон каждый раз, когда будет добавлена новая страница, что очень неудобно.

Изящный, небольшой тег шаблона wp_page_menu() позволяет решить проблему с отображением меню для страниц. Для того чтобы выполнить необходимую сортировку страниц, можно воспользоваться параметром sort_column:

<?php wp_page_menu('sort_column=menu_order'); ?>

В качестве menu_order указывают надлежащий порядок сортировки страниц в меню. Можно выполнить сортировку в алфавитном порядке (post_title), по дате публикации (post_date), по дате внесения изменений (post_modified) и т.д. Несмотря на то, что практически все существующие возможности, включая сортировку страниц, можно реализовать как с помощью тега wp_page_menu(), так и с помощью wp_list_pages(), первый вариант является более предпочтительным.

Другим полезным параметром, который принимает wp_page_menu(), является show_home. В зависимости от его значения — true (1) или false (0) — в меню будет отображаться или нет ссылка Home (На главную). Название данной ссылки можно менять путем присваивания указанному параметру какой-либо строки.

wp_page_menu() идеально подходит для создания меню, основанного на страницах. Вы всегда можете исключать различные пункты меню, определять их стилизацию и т.д. Подробности относительно использования wp_page_menu() можно узнать в кодексе: codex.wordpress.org/Template_Tags/wp_page_menu.

К сожалению, хорошего решения по объединению рубрик и страниц в меню, на текущий момент не существует. В связи с этим, если возникает указанная необходимость, удобнее воспользоваться виджетом, отвечающим за вывод регулярного текста.

«Раздвижные двери»

Методика под названием «раздвижные двери» позволяет использовать графическое изображение в качестве бэкграунда для меню без указания фиксированной ширины последнего. Существует множество справок и подробных статей для осуществления указанной методики, поэтому мы ограничимся лишь кратким рассмотрением данного вопроса.

Для начала создадим заготовку нашего меню:

<ul id="navigation">
<li><a href="menu-item-1">First Item</a></li>
<li><a href="menu-item-2">Second Menu Item</a></li>
<li><a href="menu-item-3">Third One</a></li>
<li><a href="menu-item-4">Number Four</a></li>
<li><a href="menu-item-5">Fifth!</a></li>
</ul>

Допустим, мы хотим, чтобы пункты меню были представлены как кнопки с закругленными углами. Это выглядит довольно эстетично и позволяет привлечь внимание к меню. Однако, для того чтобы применить бэкграундное изображение к пунктам меню, они должны быть фиксированного размера. Как же поступить?

Решение довольно просто: необходимо разрезать изображение на три вертикальных части.

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

Добавим к каждому пункту меню элемент span:

<ul id="navigation">
<li><a href="menu-item-1"><span>First Item</span></a></li>
<li><a href="menu-item-2"><span>Second Menu Item</span></a></li>
<li><a href="menu-item-3"><span>Third One</span></a></li>
<li><a href="menu-item-4"><span>Number Four</span></a></li>
<li><a href="menu-item-5"><span>Fifth!</span></a></li>
</ul>

Теперь все, что нам необходимо: отредактировать стили CSS. Ссылка будет содержать первую часть изображения, фиксированную по левому краю, и определять требуемый цвет бэкграунда, т.е. вторую часть изображения. Третья часть изображения будет содержаться в span. Таким образом мы получили пункт меню с динамически меняющейся шириной.

Соответствующие стили CSS:

ul#navigation li {
fl oat:left;
padding: 5px;
list-style:none;
}
ul#navigation a:link, ul#navigation a:visited {
display:block;
}
ul#navigation a:hover, ul#navigation a:active {
background: #888 url(corners-left.gif) no-repeat left;
fl oat:left;
}
ul#navigation a span {
fl oat:left;
display:block;
}
ul#navigation a:hover span {
fl oat:left;
display:block;
background: url(corners-right.jpg) no-repeat right;
}

С помощью тега шаблона wp_page_menu() приведенный выше пример стилизации можно осуществить следующим образом:

<?php wp_page_menu('link_before=<span>&link_after=</span>'); ?>

Указанный сниппет позволяет добавить тег span к каждой ссылке меню.

Вывод рубрик вместо страниц в меню более сложен. Он построен на использовании wp_list_categories() и preg_replace. Мы отыскиваем теги li и a в коде меню, и затем добавляем к каждой ссылке открывающий и закрывающий теги span. В wp_list_categories() необходимо будет передать параметр echo=0, запрещающий отображение контента, пустой параметр title_li, отвечающий за вывод заголовка для списка рубрик, и параметр depth=1, отвечающий за вывод рубрик только верхнего уровня.

Ниже приведен код, отвечающий за вывод рубрик в меню:

<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>',
wp_list_categories('title_li=&echo=0&depth=1')); ?>

Существует и третье решение. Оно основано на использовании встроенного менеджера ссылок, с помощью которого можно создать рубрику ссылок, отведенную специально под меню. Вывести указанную рубрику можно будет посредством wp_list_bookmarks(). Создание меню становится возможным, поскольку wp_list_bookmarks() поддерживает параметры link_before и link_after.

Для большей ясности приведем пример, в котором определяется вывод меню из рубрики с ID=15:

<?php wp_list_bookmarks('category=15&title_li&link_before=<span>&link_after=</span>'); ?>

Блог про WordPress
Комментарии: 10
  1. Иван

    Добрый день! Статья очень полезная, но у меня есть вопрос: Как сделать выпадающее меню? нигде нет видео уроков, ну или простого толкового обьяснения.

  2. Дмитрий (автор)
    &lt;ul id=&quot;cssmenu&quot;&gt;
     
            <li><a href="#" target="_blank">Горизонтальное</a>
     
                    <ul>
     
                            <li><a href="#" target="_blank">Ссылка 1</a></li>
     
                            <li><a href="#" target="_blank">Ссылка 2</a></li>
     
                    </ul>
     
            </li>
     
            <li><a href="#" target="_blank">CSS</a>
     
                    <ul>
     
                            <li><a href="#" target="_blank">Ссылка 1</a></li>
     
                            <li><a href="#" target="_blank">Ссылка 2</a></li>
     
                            <li><a href="#" target="_blank">Ссылка 3</a></li>
     
                            <li><a href="#" target="_blank">Ссылка 4</a></li>
     
                            <li><a href="#" target="_blank">Ссылка 5</a></li>
     
                    </ul>
     
            </li>
     
            <li><a href="#" target="_blank">Меню</a>
     
                    <ul>
     
                            <li><a href="#" target="_blank">Ссылка 1</a></li>
     
                            <li><a href="#" target="_blank">Ссылка 2</a></li>
     
                    </ul>
     
            </li>
     
    </ul>

    Код меню.

    Код стилей к нему:

     
    /* CSS Document */
     
    ul#cssmenu {
     
            width:350px;
     
            margin: 0;
     
            border: 0 none;
     
            padding: 0;
     
            list-style: none;
     
            background: #003366;
     
            height: 30px;
     
            font: bold 12px/28px Verdana, Arial;
     
            border-left:#003366 1px solid;
     
    }
     
    
     
    ul#cssmenu li {
     
            margin: 0;
     
            border: 0 none;
     
            padding: 0;
     
            float: left;
     
            display: inline;
     
            list-style: none;
     
            position: relative;
     
            height: 30px;
     
    }
     
    
     
    ul#cssmenu ul {
     
            margin: 0;
     
            border: 0 none;
     
            padding: 0;
     
            width: 160px;
     
            list-style: none;
     
            display: none;
     
            position: absolute;
     
            top: 30px;
     
            left: 0;
     
    }
     
    
     
    ul#cssmenu ul:after {
     
            clear: both;
     
            display: block;
     
            font: 1px/0px serif;
     
            content: &quot;.&quot;;
     
            height: 0;
     
            visibility: hidden;
     
    }
     
    
     
    ul#cssmenu ul li {
     
            width: 150px;
     
            float: left;
     
            display: block !important;
     
            display: inline;
     
    }
     
    
     
    /* Main Menu */
     
    ul#cssmenu a {
     
            border: 0px;
     
            padding: 0 10px;
     
            float: none !important;
     
            float: left;
     
            display: block;
     
            background: #003366;
     
            color: #FFFFFF;
     
            font: bold 12px/28px Verdana, Arial;
     
            text-decoration: none;
     
            height: auto !important;
     
            height: 1%;
     
    }
     
    
     
    /* Main Menu Hover */
     
    ul#cssmenu a:hover,
     
    ul#cssmenu li:hover a,
     
    ul#cssmenu li.iehover a {
     
            background: #FFFFFF;
     
            color:#003366;
     
            border-top:#003366 1px solid;
     
    }
     
    
     
    /* Second Menu */
     
    ul#cssmenu li:hover li a,
     
    ul#cssmenu li.iehover li a {
     
            border-top: 2px solid #FFFFFF;
     
            float: none;
     
            background: #003366;
     
            color: #FFFFFF;
     
    }
     
    
     
    /* Second Menu Hover */
     
    ul#cssmenu li:hover li a:hover,
     
    ul#cssmenu li:hover li:hover a,
     
    ul#cssmenu li.iehover li a:hover,
     
    ul#cssmenu li.iehover li.iehover a {
     
            border-top: 2px solid #FFFFFF;
     
            background: #FFFFFF;
     
            color:#003366;
     
            border:#003366 1px solid;
     
    }
     
    
     
    ul#cssmenu ul ul {
     
            display: none;
     
            position: absolute;
     
            top: 0;
     
            left: 170px;
     
    }
     
    
     
    ul#cssmenu li:hover ul ul,
     
    ul#cssmenu li.iehover ul ul {
     
            display: none;
     
    }
     
    
     
    ul#cssmenu li:hover ul,
     
    ul#cssmenu ul li:hover ul,
     
    ul#cssmenu li.iehover ul,
     
    ul#cssmenu ul li.iehover ul {
     
            display: block;
     
    } 
  3. Иван

    огромное спасибо но можно описание по установке, на

    мой сайт

  4. Дмитрий (автор)

    В WordPress и так можно сделать выпадающее меню, без правки кода. Заходите в раздел Внешний вид — Меню и с помощью перетаскивания настраиваете подпункты.

  5. Екатерина

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

  6. Дмитрий (автор)

    Здравствуйте, Екатерина. В разделе управления меню перейдите в раздел Screen Options (вверху справа), и выберите панель Link Target под заголовком Show advanced menu properties.

    Здесь вы можеет установить цель для ссылки, к примеру Open in a New window.

    1. Екатерина

      Огромное спасибо за быстрый ответ. нашла "Цель ссылки" но там просто галочкой отмечается само "Цель ссылки" и все а "открывать в новом окне" нет. у меня руссифицированная версия WP 3.2

  7. Екатерина

    Все спасибо нашла, разобралась. Благодарю Вас

    1. Дмитрий (автор)

      Всегда пожалуйста)

  8. Елена

    Спасибо!!! Как раз это и искала )))))))

Добавить комментарий для Architect Of Ruin Отменить ответ

Получать новые комментарии по электронной почте.