it-swarm.dev

добавить класс span внутри тега привязки ссылки wp_nav_menu

Я нашел примеры добавления класса к элементам верхнего уровня, так что мы можем отображать стрелку в пунктах меню с вложенными элементами, но кажется ужасным справиться с уже встроенными в WordPress классами, не могу отобразить стрелку с курсором current и css hover. Разрушает все штаты.

Текущее меню навигации выглядит следующим образом: <li><a>Text</a></li>

Есть ли способ добавить <span class="arrow"></span> в родительские теги <a></a> вместо этого?

Пример,

Добавить ⇒ <span class="arrow"></span> внутри тегов ⇒ <a/></a>

Таким образом, ⇒ <li><a>Text<span class="arrow"></span></a></li>, который является родителем.

Текущий код Добавляет теги <span></span> вне тегов <a></a>, которые являются родительскими

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_lvl(&$output, $depth, $args) {
        $indent = str_repeat("\t", $depth);
        if('primary' == $args->theme_location && $depth ==0){
            $output .='&lt;span class="arrow">&lt;/span>';
        }
        $output .= "\n$indent<ul class=\"sub-menu\">\n";
    }
}

Исходное название вопроса отредактировано из: " добавить класс span внутри <a>"

3
chris_r

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

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

1. Сначала добавьте этот код в файл functions.php.

class Nav_Walker_Nav_Menu extends Walker_Nav_Menu {
     function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

        $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
        $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';

        $output .= $indent . '<li' . $id . $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        ) .'"' : '';

        $item_output = $args->before;
        $item_output .= '<a'. $attributes .'>';
        $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;

        if ( 'primary' == $args->theme_location ) {
            $submenus = 0 == $depth || 1 == $depth ? get_posts( array( 'post_type' => 'nav_menu_item', 'numberposts' => 1, 'meta_query' => array( array( 'key' => '_menu_item_menu_item_parent', 'value' => $item->ID, 'fields' => 'ids' ) ) ) ) : false;
            $item_output .= ! empty( $submenus ) ? ( 0 == $depth ? '<span class="arrow"></span>' : '<span class="sub-arrow"></span>' ) : '';
        }
        $item_output .= '</a>';
        $item_output .= $args->after;

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

2. Добавьте приведенный ниже код в ваш header.php, где установлено ваше wp_nav_menu.

Ниже поясняется код, поэтому он устанавливает новое пользовательское меню, в этом случае будет Nav_Walker_Nav_Menu.

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary', 'walker' => new Nav_Walker_Nav_Menu() ) ); ?>

3. Добавьте немного CSS

Таким образом, он может показывать ваши новые изображения стрелок в пределах ваших тегов на первичном и вторичном уровне.

#menu-header-menu li span.arrow { height:12px;background-image: url("images/nav-arrows.png");background-position: -8px -3px;background-repeat: no-repeat;float: right;margin: 0 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu li a:hover span.arrow{ height:12px;background-image: url("images/nav-arrows.png");background-position: -39px -3px;background-repeat: no-repeat;float: right;margin: 0 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu ul.sub-menu li span.sub-arrow { height:12px;background-image: url("images/nav-arrows.png");background-position: -8px -39px;background-repeat: no-repeat;float: right;margin: -2px 0px 0 10px;text-indent: -9999px;width: 12px;}
#menu-header-menu ul.sub-menu li a:hover span.sub-arrow{ height:12px;background-image: url("images/nav-arrows.png");background-position: -39px -39px;background-repeat: no-repeat;float: right;margin: -2px 0px 0 10px;text-indent: -9999px;width: 12px;}

надеюсь, это поможет! :)

4
chris_r

Вы пытались использовать параметры before или link_before в аргументах массива при объявлении функции wp_nav_menu?

Примечание: используйте after или link_after для противоположного эффекта.

Пример,

wp_nav_menu(

    //normal arguments here....etc

    'before'    => '<span class="arrow"></span>',

    //or 'link_before' => '<span class="arrow"></span>',


); 

Из Кодекса:

$before
(строка) (необязательно) Вывести текст перед ссылкой
По умолчанию: Нет

   e.g. 'before'    => ''

или же...

$link_before
(строка) (необязательно) Вывести текст перед текстом ссылки
По умолчанию: Нет

   e.g. 'link_before'    => ''

Вспомогательные ресурсы:

http://codex.wordpress.org/Function_Reference/wp_nav_menu

5
userabuser

Оба ответа, опубликованные userabuser и wordpress_designer, великолепны, но я хотел бы опубликовать ответ, представляющий собой комбинацию из двух.

С помощью этого ответа вы можете использовать логику, чтобы определить, где вы не хотите применять link_before. А также то, что вы хотите поставить перед текстом ссылки.

Сначала создайте очень простой класс, подобный приведенному ниже. Этот класс фактически отвечает только за проверку, когда элемент не является подменю ($depth <= 0), а также за очистку и запоминание значения link_before.

if ( ! class_exists('PREFIX_Menu_Walker')) {
    class PREFIX_Menu_Walker extends Walker_Nav_Menu {
        public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
            $before = property_exists($args, 'link_before') ? $args->link_before : '';

            // Empty the `link_before` when walking over a root level element
            if ($depth <= 0 && !empty($before)) {
                $args->link_before = '';
            }

            // Continue with the default/core wordpress nav menu walker class
            parent::start_el( $output, $item, $depth, $args, $id );

            // Remember what `link_before` $args where set.
            $args->link_before = $before;
        }
    }
}

Второе, что вам нужно сделать, это применить аргумент walker и аргумент link_before к вашему массиву wp_nav_menu, например так:

wp_nav_menu([
    'link_before' => '<span>Hello</span>',
    'walker' => new PREFIX_Menu_Walker()
]);
0
Fleuv