Как вставить иконку только для первого пункта меню в Wordpress?

Question

[AltaiR]

Привет всем. Пытаюсь впервые натянуть верстку на wordpress. PHP не знаю. По этой инструкции добавил меню. Теперь мне нужно для первого пункта меню добавить иконку как на скриншоте:

В верстке я это делал так:

<li><i class="icon-user"></i><a href="#">Вход</a></li>
<li><a href="#">Регистрация</a></li>

А при натяжке на wordpress с помощью аргумента 'before' из той инструкции:

можно частично решить эту проблему:

<?php wp_nav_menu( array( 
    'theme_location' => 'logged-in-menu', 
    'before' => '<i class="icon-user"></i>' 
) ); ?>

но в этом случае иконка вставляется перед каждым пунктом меню. Можно ли как то повлиять на поведение аргумента 'before' и сделать так чтобы иконка вставлялась только для первого пункта? Что то типа аналога в CSS :first-child

Comments

[Павел]

а что мешает через CSS добавить?

[Павел]

И , это конечно мое субъективное мнение, но я бы не делал для двух ссылок, которые будут на сайте висеть без изменение отдельное меню. Меню делается для навигации в шапке/футере, что бы из админки добавлять новые рубрики, посты или страницы.

Answer 1

[Игорь Воротнёв]

Либо просто с помощью CSS бекграундом или :after дописать, или же если нужно все-таки разметку вставить () - в админке для пункта меню укажите специальный css-класс, например has-icon-login, далее хукаетесь в walker_nav_menu_start_el и модифицируете разметку:

function my_custom_markup( $item_output, $item, $depth, $args ) {

	// Отлавливаем элемент меню с нашим классом
	if ( in_array( 'has-icon-login', $item->classes ) ) {
		// Меняем разметку
		return str_replace(
			'<a',
			'<i class="icon-user"></i><a',
			$item_output
		);
	}

	return $item_output;

}
add_filter( 'walker_nav_menu_start_el', 'my_custom_markup', 100, 4 );

Answer 2

[Владислав Бойченко]

У вас есть примерно такая структура:

• Первый пункт
  
• Второй пункт
  

В стилях и пишем:
.nav li:first-child{background: url(.../путь к иконке) no-repeat center left; padding-left: 20px;}

Это что-то примерное, нужно подстраивать под себя.

Comments

[Иван Козлов]

я бы еще картинку в base64 конвертировал и прям в css этот код прописал))