Посещая наш сайт, вы соглашаетесь с нашей политикой конфиденциальности в отношении файлов cookie, статистики отслеживания и т. д.

Главная » Вопросы и ответы » Wordpress

Как отображать динамический контент в функции start_lvl

На чтение 9 мин Опубликовано
Содержание
  1. Вопрос или проблема
  2. Ответ или решение
  3. Объяснение изменений:

Вопрос или проблема

Я создаю пользовательский навигационный walker, но испытываю трудности с выводом заголовка родительского элемента меню в функции start_lvl. Я хочу вывести его сразу после <div class="dropdown"> в следующей функции start_lvl.

function start_lvl(&$output, $depth = 0, $args = array()) {

        $indent = str_repeat("\t", $depth);

        if ($depth == 0) {

            $out_div = ' <div class="dropdown-wrapper"><div class="dropdown">Здесь я хочу вывести заголовок родительского элемента';
        }
        else {
            $out_div = '';
        }
        // формируем html
        $output.= "\n" . $indent . $out_div . '<ul>' . "\n";
    }

Вот полный код навигационного walker.

class my_custom_navwalker extends Walker_Nav_Menu {

    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output)
    {
        $id_field = $this->db_fields['id'];
        if (is_object($args[0])) {
            $args[0]->has_children = !empty($children_elements[$element->$id_field]);
        }
        return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }

    function start_lvl(&$output, $depth = 0, $args = array()) {

        $indent = str_repeat("\t", $depth);

        if ($depth == 0) {

            $out_div = ' <div class="dropdown-wrapper"><div class="dropdown">';
        }
        else {
            $out_div = '';
        }
        // формируем html
        $output.= "\n" . $indent . $out_div . '<ul>' . "\n";
    }

    function start_el(&$output, $item, $depth = 0, $args = array() , $id = 0) {
        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 ) . '"';

        if ($args->has_children && $depth == 0) {
            $has_sub = ' has-sub';
        }

        $output.= $indent . '<li id="menu-item-' . $item->ID . '"' . $value . 'class="' . $class_names . $has_sub . '">';

        $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 = '';
        $append = '';

        //$description = !empty($item->description) ? '<div class="">' . $item->description . '</div>' : '';
        // 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.= '</a>';
        //$item_output.= $description . $args->link_after;
        $item_output.= $args->after;
        $output.= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args, $id);
    }

    function end_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        if ($depth == 0) {
            $out_div_close="</div></div>";
        }
        else {
            $out_div_close="";
        }
        $output.= "$indent" . "\n";

        $output.= "</ul>" . $out_div_close . "\n";
    }
}

Любая помощь будет высоко оценена.

Заранее спасибо.

В конечном счете, после тщательных поисков и как рекомендовал @Howdy_McGee в своем комментарии, мне удалось заставить Nav Walker работать так, как было задумано. Для тех, кто ищет что-то подобное, вот как я это сделал.

Вместо вывода заголовка родительского элемента меню в функции start_lvl, я включил его в функцию start_el и финальный код выглядел следующим образом:

class my_custom_navwalker extends Walker_Nav_Menu {

    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output)
    {
        $id_field = $this->db_fields['id'];
        if (is_object($args[0])) {
            $args[0]->has_children = !empty($children_elements[$element->$id_field]);
        }
        return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }

    function start_lvl(&$output, $depth = 0, $args = array()) {

        $indent = str_repeat("\t", $depth);

        if ($depth == 0) {

            $out_div = '';
        }
        else {
            $out_div = '';
        }
        // формируем html
        $output.= "\n" . $indent . $out_div . '<ul>' . "\n";
    }

    function start_el(&$output, $item, $depth = 0, $args = array() , $id = 0) {
        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 ) . '"';

        if ($args->has_children && $depth == 0) {
            $has_sub = ' has-sub';
        }

        $output.= $indent . '<li id="menu-item-' . $item->ID . '"' . $value . 'class="' . $class_names . $has_sub . '">';

        $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 = '';
        $append = '';

        //$description = !empty($item->description) ? '<div class="">' . $item->description . '</div>' : '';
        // 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.= '</a>';
        //$item_output.= $description . $args->link_after;


        if ( $args->has_children && $depth == 0) {

            $item_output .= ' <div class="dropdown-wrapper"><div class="dropdown"><div class="item-title-class">'.$item->title.'</div>';

        }

        $item_output.= $args->after;
        $output.= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args, $id);
    }

    function end_lvl(&$output, $depth = 0, $args = array())
    {
        $indent = str_repeat("\t", $depth);
        if ($depth == 0) {
            $out_div_close="";
        }
        else {
            $out_div_close="";
        }
        $output.= "$indent" . "\n";

        $output.= "</ul>" . $out_div_close . "\n";
    }
}

Ответ или решение

Когда вы создаете пользовательский навигационный "walker" в WordPress и хотите вывести заголовок родительского элемента меню в функции start_lvl, обычно это лучше делать в функции start_el, как вы уже поняли.

Вот полное решение вашей задачи:

  1. Вам не нужно изменять start_lvl, чтобы выводить заголовок родительского элемента. Вместо этого, вы можете добавить соответствующий вывод в метод start_el, который отвечает за генерацию HTML-кода для каждого элемента меню.

  2. В методе start_el, проверьте, есть ли у текущего элемента дочерние элементы и выводите заголовок родительского элемента в нужное место.

Вот как можно модифицировать ваш код:

class my_custom_navwalker extends Walker_Nav_Menu {

    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
        $id_field = $this->db_fields['id'];
        if (is_object($args[0])) {
            $args[0]->has_children = !empty($children_elements[$element->$id_field]);
        }
        return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }

    function start_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        if ($depth == 0) {
            // В этой части ничего не меняем
            $output .= "\n" . $indent . '<ul>' . "\n";
        } else {
            // Вложенные UL для дочерних элементов
            $output .= "\n" . $indent . '<ul>' . "\n";
        }
    }

    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        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));

        // Проверяем, есть ли дочерние элементы
        $has_sub = '';
        if ($args->has_children && $depth == 0) {
            $has_sub = ' has-sub';
        }

        $output .= $indent . '<li id="menu-item-' . $item->ID . '"' . $value . ' class="' . esc_attr($class_names . $has_sub) . '">';

        $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) . '"' : '';

        // Начало ссылки
        $item_output = $args->before;
        $item_output .= '<a' . $attributes . '>';
        $item_output .= $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after;
        $item_output .= '</a>';
        $item_output .= $args->after;

        // Если у родительского элемента есть дочерние элементы, выводим заголовок
        if ($args->has_children && $depth == 0) {
            $item_output .= '<div class="dropdown-wrapper"><div class="dropdown"><div class="item-title-class">' . esc_html($item->title) . '</div>';
        }

        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args, $id);
    }

    function end_lvl(&$output, $depth = 0, $args = array()) {
        $indent = str_repeat("\t", $depth);
        if ($depth == 0) {
            // Закрываем DIV только в конце первого уровня
            $output .= '</div></div>';
        }
        $output .= "$indent" . '</ul>' . "\n";
    }
}

Объяснение изменений:

  • Мы удалили код, который выводил заголовок родительского элемента в функции start_lvl, и вместо этого добавили соответствующий вывод в start_el, чтобы они отображались после открытия <a> для родительских элементов, если у них есть дочерние элементы.
  • Также было добавлено использование esc_html() для защиты вывода от XSS-уязвимостей.

Теперь при выводе меню и наличии дочерних элементов у родительского элемента заголовок будет отображаться в <div class="item-title-class"> сразу после открытия контейнеров dropdown.

menus navigation sub-menu title walker
Оцените материал
Добавить комментарий

Капча загружается...

© 2024 IZ6.RU
*В материалах сайта упоминаются социальные сети Фейсбук / Инстаграм, принадлежащие Meta Platforms Inc., деятельность которой запрещена на территории РФ в части реализации данных социальных сетей на основании осуществления ею экстремистской деятельности