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

Додавання опису для Пунтов меню в 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). Його можете видалити і додати потрібну вам фразу, яка буде відображатися на сайті під назвою пункту меню.

Реалізація поліпшеного меню
Система 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 стилів.
.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


wordpress
2478 17.07.14



Напівжирний Нахилений текст Підкреслений текст Перекреслений текст | Вирівнювання по лівому краю По центру Вирівнювання по правому краю | Вставка смайликів Вибір кольору | Прихований текст Вставка цитати Перетворити вибраний текст з транслітерації в кирилицю Вставка спойлеру