Июн
4
11

Добавление описания для пунктов меню в WordPress

меню в WordPressВ некоторых премиум шаблонах WordPress есть для навигационного меню одна интересная опция — под названием пункта меню располагается 2-3слова краткого описания (см. иллюстрацию слева). Недавно пришлось разбираться с данный вопросом и я нашел одну статью по теме, перевод которой вам и предлагаю. Публикация о том, как реализовать подобное улучшенное меню для  Wordpress.

Для вывода меню, созданного из админки WordPress, используется специальная функция wp_nav_menu. В итоге получаем код по типу этого:

<ul id="menu-main">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Blog</a></li>
</ul>

Однако для добавления описаний в пункты меню нам нужен несколько иной HTML код, как минимум вот такой:

<ul id="menu-main">
     <li><a href="#"><strong>Home</strong><span>Starting the journey</span></a></li>
     <li><a href="#"><strong>About</strong><span>What to expect</span></a></li>
     <li><a href="#"><strong>Contact</strong><span>Get in touch!</span></a></li>
     <li><a href="#"><strong>Blog</strong><span> Latest storys</span></a></li>
</ul>

Здесь теги strong оборачивают названия пунктов меню, а span — используются для описаний. Дальше стилизовать их нужны образом можно через CSS.

Настройки в админке

Мало кто знает, что меню в WordPress обладает возможностью добавления не только атрибутов title для ссылки, но имеет также и описание. Однако по умолчанию эта функция скрыта. Вам нужно зайти в админку в раздел «Внешний вид» — «Меню», а затем кликнуть по кнопке «Настройки экрана» (Screen Option) в правом верхнем углу.

Настройки экрана WordPress

Как только вы ее включите, то увидите поле «Описание» для каждого пункта меню.

Описание для меню WordPress

По умолчанию WordPress добавляет в поле описания определенный текст (например, из description). Его можете удалить и добавить нужную вам фразу, которая будет отображаться на сайте под названием пункта навигации.

Кстати, в этих настройках экрана встречаются и другие полезные элементы, например там активируется использование в WooCommerce меню категорий товара. Плохо, что изначально данные опции скрыты, и не всегда понятно, что они там есть.

Реализация улучшенного меню

Система  Wordpress использует специальный класс “Walker” для прохода всех записей БД и затем выдает определенный результат. Мы попытаемся создать собственную интерпретацию этого класса с более широкой функциональностью. Вам нужно будет добавить в файл functions.php следующий код:

class description_walker extends Walker_Nav_Menu
{
      function start_el(&$output, $item, $depth, $args)
      {
           global $wp_query;
           $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
 
           $class_names = $value = '';
 
           $classes = empty( $item->classes ) ? array() : (array) $item->classes;
 
           $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
           $class_names = ' class="'. esc_attr( $class_names ) . '"';
 
           $output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';
 
           $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
           $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
           $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
           $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
 
           $prepend = '<strong>';
           $append = '</strong>';
           $description  = ! empty( $item->description ) ? '<span>'.esc_attr( $item->description ).'</span>' : '';
 
           if($depth != 0)
           {
                     $description = $append = $prepend = "";
           }
 
            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before .$prepend.apply_filters( 'the_title', $item->title, $item->ID ).$append;
            $item_output .= $description.$args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;
 
            $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
            }
}

Функция проверяет наличие описания для пунктов меню и оборачивает их нужные нам теги.

Дальше нам при выводе меню сайта в файле header.php или в любом другом, который используется для навигации, нужно добавить вызов функции wp_nav_menu.

wp_nav_menu( array(
 'container' =>false,
 'menu_class' => 'nav',
 'echo' => true,
 'before' => '',
 'after' => '',
 'link_before' => '',
 'link_after' => '',
 'depth' => 0,
 'walker' => new description_walker())
 );

После этого меню будет иметь нужную нам структуру, о которой мы говорили в самом начале статьи. Теперь можно легко подправить отображение элементов с помощью CSS стилей. Если же захотите чтобы в моб.версии навигация выглядела по другому вам пригодится функция wp_is_mobile или плагин WP Responsive Menu. Стили добавляете в style.css или похожий файл.

.nav{
height:50px;
padding-left:13px;
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
}
 
.nav a{
display:block;
float:left;
line-height:18px;
outline:medium none;
padding:2px 10px;
text-decoration:none;
width:95px;
min-height: 35px;
}
 
.nav li a strong {
display:block;
font-size:14px;
font-weight:normal;
}
 
.nav li a span {
display:block;
font-size:10px;
line-height:14px;
}

В итоге получится меню по типу такого:

меню WordPress

Спасибо авторам оригинальной статьи за подобный интересный и полезный хак.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 10, средний балл: 6,20 из 7)
Загрузка...

категория Категории: Хаки и секреты;
теги Теги: , , .

комментариев 11 к статье “Добавление описания для пунктов меню в WordPress”

  • Ded   28.08.2014

    Привет уважаемый автор. У вас ошибка в заголовке: «пунтов» меню

  • Tod   28.08.2014

    Ded, спасибо, подправил заголовок.

  • Денис   30.08.2014

    Спасибо полезно, жалко что бывает тема не поддерживает меню.

  • Мария   05.09.2014

    Здравствуйте. Подскажите пожалуйста как включить поддержку тегов в описании меню.
    надо просто несколько слов добавить и все с новой строчки. спасибо

  • Tod   05.09.2014

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

  • bond2143   17.10.2014

    У вас шаблончик поплыл, точнее перенос строки в меню, поправьте. (у меня опера)

  • Tod   17.10.2014

    bond2143, какая именно версия оперы? можете скинуть скриншот на stod84@gmail.com.

  • Алексей   08.04.2015

    Здравствуйте! Подскажите пожалуйста в вашем примере кода, как можно удалить полностью class=» » у элемента li Если удаляю строчку
    $class_names = ‘ class=»‘ . esc_attr( $class_names ) . ‘»‘;
    то class=» » у элемента li удаляется. Но тогда активный пункт меню выглядит так при этом пропадает выделение пункта меню

  • Алексей   08.04.2015

    Но тогда активный пункт меню выглядит так __ при этом пропадает выделение пункта меню

  • Tod   08.04.2015

    Алексей, код не мой, поэтому сложно прокомментировать его. Строку в любом случае лучше не удалять. А чем вам мешает тот или иной класс? это же просто для CSS стилей, его можно никак не определять и ни на что в коде он влиять не будет.

  • Валерий   30.06.2016

    Спасибо, то что надо. Не мог понять как и где подключается, а здесь все понятно разъяснили. Спасибо!

Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости