eurobyte.ru - мощные сервера с Дата-центрами в Нидерландах и Москве. От 159 ₽/мес.

Как добавить иконку в wp_nav_menu

как указать иконку fontawesome перед пунктом меню в walker_nav??

<!--li><a class="nav-link" href="/index.php"><i class="fas fa-home"></i> <span>Главная</span></a></li>
0
DmG
2.1 год назад
  • 3
    Dan Zakirov 723 air-wp.com

    Несколько вариантов, от самых простых к сложным:

    1.Можете использовать этот плагин https://ru.wordpress.org/plugins/menu-icons/

    2.Обычно в WP на меню уникальные классы или ID, можно в просто в CSS через псевдоклас сверстать нужные иконки

    3.Посмотрите на WP PLUS есть годные видеоуроки

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

    class Walker_Nav_Menu extends Walker {
    
    	public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
    
    		// добавить иконку Font Awesome перед текстом ссылки
    		$icon = isset( $item->icon ) ? '<i class="' . esc_attr( $item->icon ) . '"></i>' : '';
    		$output .= '<a' . $attributes . '>'. $icon . $item->title . '</a>';
    
    	}
    
    }

    Внутри функции можно заусловить, например

    class Walker_Nav_Menu extends Walker {
    
    	public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
    
    		// добавить иконку Font Awesome перед текстом ссылки, если это Главная страница
    		$icon = '';
    		if ($item->title == 'Главная') {
    			$icon = '<i class="fas fa-home"></i>';
    		} elseif (isset( $item->icon )) {
    			$icon = '<i class="' . esc_attr( $item->icon ) . '"></i>';
    		}
    
    		$output .= '<a' . $attributes . '>'. $icon . $item->title . '</a>';
    
    	}
    
    }
    DmG 2.1 год назад

    я уже голову сломал. с созданием своей темы. вообще меню вертикальное с кнопкой скрытия/показа на меньших экранах.

    вот само меню.

    <ul class="sidebar-menu">
    			  <li><a class="nav-link" href="/index.php"><i class="fas fa-home"></i> <span>Главная</span></a></li>
    
    			  <li class="nav-item dropdown">
    				<a href="#" class="nav-link has-dropdown"><i class="fas fa-th"></i> <span>Ссылка</span></a>
    				<ul class="dropdown-menu">
    				  <li><a class="nav-link" href="">1</a></li>
    				  <li><a class="nav-link" href="">2</a></li>
    				  <li><a class="nav-link" href="">3</a></li>
    				  <li><a class="nav-link" href="">4</a></li>
    				</ul>
    			  </li>
    
    			  <?php
    			wp_nav_menu(
    			  array(
    				'theme_location' => 'sidebar_menu',
    				'container'  => false,
    				'menu_class' => 'nav-item',
    				'walker'     => new Side_Menu(), ) ) ?>
    
    			</ul>

    walker. оно работает но криво.

    	public function start_lvl( &$output, $depth = 0, $args = null ) {
    		if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
    			$t = '';
    			$n = '';
    		} else {
    			$t = "\t";
    			$n = "\n";
    		}
    		$indent = str_repeat( $t, $depth );
    
    		// Default class.
    		$classes = array( 'dropdown-menu' );
    
    		$class_names = implode( ' ', apply_filters( 'nav_menu_submenu_css_class', $classes, $args, $depth ) );
    		$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
    
    		$output .= "{$n}{$indent}<ul$class_names>{$n}";
    	}
    
    	public function start_el( &$output, $item, $depth = 0, $args = null, $id = 0 ) {
    		if ( isset( $args->item_spacing ) && 'discard' === $args->item_spacing ) {
    			$t = '';
    			$n = '';
    		} else {
    			$t = "\t";
    			$n = "\n";
    		}
    		$indent = ( $depth ) ? str_repeat( $t, $depth ) : '';
    
    		$classes   = empty( $item->classes ) ? array() : (array) $item->classes;
    		$classes[] = 'menu-item-' . $item->ID;
    		$classes[] = 'nav-item';
    		if ( $this->has_children ) {
    			$classes[] = 'dropdown';
    		}
    
    		$args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );
    
    		$class_names = implode( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
    		$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
    
    		$id = apply_filters( 'nav_menu_item_id', 'menu-item-' . $item->ID, $item, $args, $depth );
    		$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
    
    		$output .= $indent . '<li' . $id . $class_names . '>';
    
    		$atts           = array();
    		$atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
    		$atts['target'] = ! empty( $item->target ) ? $item->target : '';
    		if ( '_blank' === $item->target && empty( $item->xfn ) ) {
    			$atts['rel'] = 'noopener';
    		} else {
    			$atts['rel'] = $item->xfn;
    		}
    		$atts['href']         = ! empty( $item->url ) ? $item->url : '';
    
    		$active_class = $item->current ? 'active' : '';
    		if ( $this->has_children && 0 === $depth ) {
    			$atts['href']          = '#';
    			$atts['data-bs-toggle']   = 'dropdown-menu';
    			$atts['aria-expanded'] = 'false';
    			$atts['class']         = 'has-dropdown nav-link ' . $active_class;
    			$atts['id']            = 'menu-item-dropdown-' . $item->ID;
    		} 
    		else {
    			$atts['href'] = ! empty( $item->url ) ? $item->url : '#';
    			// For items in dropdowns use .dropdown-item instead of .nav-link.
    			if ( $depth > 0 ) {
    				$atts['class'] = 'dropdown-item ' . $active_class;
    			} else {
    				$atts['class'] = 'nav-link ' . $active_class;
    			}
    		}
    
    		$atts['aria-current'] = $item->current ? 'page' : '';
    
    		$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );
    
    		$attributes = '';
    		foreach ( $atts as $attr => $value ) {
    			if ( is_scalar( $value ) && '' !== $value && false !== $value ) {
    				$value       = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
    				$attributes .= ' ' . $attr . '="' . $value . '"';
    			}
    		}
    
    		/** This filter is documented in wp-includes/post-template.php */
    		$title = apply_filters( 'the_title', $item->title, $item->ID );
    
    		$title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );
    
    		$item_output  = $args->before;
    		$item_output .= '<a' . $attributes . '>';
    		$item_output .= $theIcon;
    		$item_output .= '<span>'.$args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after . '</span>';
    		$item_output .= '</a>';
    		$item_output .= $args->after;
    
    		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
    Dan Zakirov 2.1 год назад

    А вам принципиально важно через walker_nav делать? Почему бы не зарегистрировать просто меню, обернуть его в див с классом и отверстать... Ну и далее использовать просто плагин для иконок. Если хотите сложным путем пойти, то дайте мне время немного я чуть позднее отвечу как сделать

    DmG 2.1 год назад

    Я еще только учусь. Да и плагинов по минимуму хотелось бы. Буду благодарен, если поможете.

    Dan Zakirov 2.1 год назад

    Кстати, небольшой лайфхак... оно и так работать будет

    Dan Zakirov 2.1 год назад

    Еще один лайфхак)

    Есть в меню настройки же

    Короче включаем класс - хотя у каждого айтема меню есть уникальный ID, но суть далее...

    Добавляем класс и он у нас появляется в структуре HTML:

    Ну и дальше тупо в CSS отрабатываем через всевдоэлемент:

    В вашем случае, стили от шрифтовых иконок font awesome

    DmG 2.1 год назад

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

    красным выделено. черным как хотелось бы. там же в walker искать причину?

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация