Описание пунктов меню? Пользовательский ходок для wp_nav_menu ()

Нормальное меню Wordpress выглядит следующим образом:

  

Главная | Блог | О нас | Контакт

Но я видел много страниц с описаниями по этим ссылкам:

  

Главная страница | Наши блоги | О нас   | Контакт
  .... встретиться с нами ... | Читать дальше | основная информация | контактная форма

Как это сделать?

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

95 голосов | спросил Wordpressor 6 AMpWed, 06 Apr 2011 02:25:50 +040025Wednesday 2011, 02:25:50

4 ответа


108

Для навигационного меню вам нужен пользовательский ходок.

В принципе, вы добавляете параметр 'walker' в < code> wp_nav_menu () и вызовите экземпляр расширенного класса:

wp_nav_menu (
    массив (
        'menu' => 'главное меню',
        'container' => ЛОЖНЫЙ,
        'container_id' => ЛОЖНЫЙ,
        'menu_class' => '',
        'menu_id' => ЛОЖНЫЙ,
        'depth' => 1,
        'walker' => новый Описание_Walker
    )
);

Класс Описание_Walker расширяет Walker_Nav_Menu и изменяет функцию start_el (& $ output, $ item, $ depth, $ args) для поиска $ item- >. описание

Основной пример:

/**
 * Создайте HTML-список элементов навигационного меню.
 * Замена для родного Уокера, используя описание.
 *
 * @see https://wordpress.stackexchange.com/q/14037/
 * @author fuxia
 * /
class Описание_Walker расширяет Walker_Nav_Menu
{
    /**
     * Запустите вывод элемента.
     *
     * @param string $ output Передано по ссылке. Используется для добавления дополнительного контента.
     * @param object $ item Объект данных элемента меню.
     * @param int $ depth Глубина элемента меню. Может использоваться для заполнения.
     * @param array | object $ args Дополнительные строки. На самом деле всегда
                                     экземпляр stdClass. Но это WordPress.
     * @return void
     * /
    function start_el (& $ output, $ item, $ depth = 0, $ args = array (), $ id = 0)
    {
        $ classes = empty ($ item-> классы)? array (): (array) $ item-> classes;

        $ class_names = join (
            ''
        , apply_filters (
                'Nav_menu_css_class'
            , array_filter ($ classes), $ item
            )
        );

        ! empty ($ class_names)
            и $ class_names = 'class = ". esc_attr ($ class_names).'" ';

        $ output. = "<li id ​​= 'menu-item- $ item-> ID' $ class_names>";

        $ attributes = '';

        ! empty ($ item-> attr_title)
            и $ attributes. = 'title = "'. esc_attr ($ item-> attr_title). '' ';
        ! empty ($ item-> target)
            и $ attributes. = 'target = "'. esc_attr ($ item-> target). '"';
        ! empty ($ item-> xfn)
            и $ attributes. = 'rel = "'. esc_attr ($ item-> xfn). '"';
        ! empty ($ item-> url)
            и $ attributes. = 'href = "'. esc_attr ($ item-> url). '"';

        //вставить описание только для элементов верхнего уровня
        //вы можете изменить это
        $ description = (! empty ($ item-> description) и 0 == $ depth)
            ? '<small class = "nav_desc">' , esc_attr (описание $ item->). '& Л; /малый >' : '';

        $ title = apply_filters ('the_title', $ item-> title, $ item-> ID);

        $ item_output = $ args-> before
            , "<атрибуты>"
            , $ Args- > link_before
            , $ название
            , «& Л; /а > '
            , $ Args- > link_after
            , $ описание
            , $ Args- > после того;

        //Поскольку $ output вызывается по ссылке, нам ничего не нужно возвращать.
        $ output. = apply_filters (
            'Walker_nav_menu_start_el'
        , $ item_output
        , $ item
        , $ depth
        , $ args
        );
    }
}

Или, альтернативно как комментарий @nevvermind , вы можете наследовать все функции родительской функции start_el и просто добавить описание в $ output:

function start_el (& $ output, $ item, $ depth = 0, $ args = array (), $ id = 0)
{
    parent :: start_el ($ output, $ item, $ depth, $ args);
    $ output. = sprintf (
        '& Л; я >% s & л; /& я GT;',
        esc_html (описание $ item->)
    );
}

Пример вывода:

введите описание изображения здесь>> </p>

<p> Теперь включите поле описания в <a href= wp -admin /nav-menus.php , чтобы получить возможность редактировать это поле. Если вы не используете WP, просто уничтожаете свой полный контент в нем.

введите описание изображения здесь>> </p>

<p> Дальнейшее чтение: </p>

<ul>
<li> <a href = Связанные ошибки

  • Аналогичный пример с разной разметкой и форматированием
  • программным образом включить окно описания на экране управления меню
  • Соберите описание товара для последующего использования
  • И это так.

    ответил fuxia 6 AMpWed, 06 Apr 2011 04:15:46 +040015Wednesday 2011, 04:15:46
    28

    Поскольку WordPress 3.0 , вы не нуждаетесь в специальном ходоке больше!

    Существует walker_nav_menu_start_el фильтр, см. https://developer.wordpress.org/reference/hooks/walker_nav_menu_start_el/

    Пример:

    function add_description_to_menu ($ item_output, $ item, $ depth, $ args) {
        if (strlen (описание $ item->)> 0) {
            //append описание после ссылки
            $ item_output. = sprintf ('<span class = "description">% s </span>', esc_html (описание $ item->));
    
            //вставляем описание как последний элемент * в * ссылку ($ input_output заканчивается на «</a> {$ args-> after}")
            //$ item_output = substr ($ item_output, 0, -strlen ("</a> {$ args-> after}")). sprintf ('<span class = "description">% s </span>', esc_html (описание $ item->)). "& Л; /а > {$ args- > после того, как}";
        }
    
        return $ item_output;
    }
    add_filter ('walker_nav_menu_start_el', 'add_description_to_menu', 10, 4);
    
    ответил Joost 23 FebruaryEurope/MoscowbMon, 23 Feb 2015 18:31:03 +0300000000pmMon, 23 Feb 2015 18:31:03 +030015 2015, 18:31:03
    8

    Это не лучше или хуже других предложений; это просто другое. Он короткий и сладкий тоже.

    Вместо того, чтобы использовать поле описания в качестве @toscho , вы можете заполнить поле «Название» на каждый пункт меню с нужным текстом, а затем используйте этот CSS:

    .menu-item a: после {content: attr (название); }

    Было бы также легко использовать jQuery , чтобы добавить его, но текст достаточно декоративен, что CSS кажется подходящим .

    ответил mrwweb 18 AMpWed, 18 Apr 2012 09:52:12 +040052Wednesday 2012, 09:52:12
    2

    Вы также можете записать элемент <span> после метки навигации в меню и использовать следующее правило CSS для изменения его display (это inline):

    span {display: block}
    
    ответил Markus 8 thEurope/Moscowp30Europe/Moscow09bEurope/MoscowThu, 08 Sep 2011 12:58:03 +0400 2011, 12:58:03

    Похожие вопросы

    Популярные теги

    security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132