WordPress как на ладони
rgbcode is looking for WordPress developers.

Как добавить иконку в 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
5 месяцев назад
  • 3
    Dan Zakirov525 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 5 месяцев назад

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

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

    <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 5 месяцев назад

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

    DmG 5 месяцев назад

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

    Dan Zakirov 5 месяцев назад

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

    Dan Zakirov 5 месяцев назад

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

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

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

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

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

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

    DmG 4 месяца назад

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

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

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