Настройка меню заголовка Wordpress

Question

У меня установлена ​​тема, и я хочу настроить меню заголовка. Структура нового меню заголовка должна быть:

<div class="navbar-header"> 
    <a class="navbar-brand" href="#"> 
     <img src="img/logo.png"> 
    </a> 
</div> 
<nav class="collapse navbar-collapse"> 
    <ul class="nav navbar-nav navbar-right"> 
     <li class=""> 
      <a href="#"> 
       <i class="fa fa-exclamation"></i> 
         Page1       
      </a> 
     </li> 
     <li class=""> 
      <a href="#"> 
       <i class="fa fa-exclamation"></i> 
         Page2       
      </a> 
     </li> 
       ... 

     <!-- Navbar Search --> 
     <li class="hidden-xs hidden-sm" id="navbar-search"> 
      <a href="#"> 
       <i class="fa fa-search"></i> 
      </a> 
     </li> 
    </ul> 
</nav> 
<!--/.nav-collapse --> 

Я пытался решить эту проблему с помощью функции WP:

<nav class="collapse navbar-collapse"> 
    <?php if (has_nav_menu('primary-menu')) { ?> 
    <?php wp_nav_menu(array('theme_location' => 'primary-menu', 'menu_class' => 'menu clearfix', 'container' => '', 'walker' => new mts_menu_walker)); ?> 
    <?php } else { ?> 
     <ul class="menu clearfix"> 
     <?php wp_list_categories('title_li='); ?> 
     </ul> 
     <?php } ?> 
</nav> 

Во всяком случае, результат плохой, а WP производит новую структуру заголовка меню и стили больше не применяются.

Таким образом, у меня есть несколько вопросов:

1. Как заполняющих элементы меню заголовка с <i class="fa fa-search"></i> тегом?

2. Как добавить источник для логотипа <img src="img/logo.png"> с функцией WP?

3. Как включить также элемент заголовка manu в тег li?

4. Или (вместо 1-3 вопросов) как «перевести» обычный html выше на wordpress html?

Answer 1

Как заполнить элементы меню заголовка с <i class="fa fa-search"></i> тега?

Вы можете использовать параметр link_beforewp_nav_menu, чтобы отобразить что-то перед текстовой ссылкой. Так что ваш wp_nav_menu код будет выглядеть следующим образом:

<nav role="navigation" itemscope itemtype="http://schema.org/SiteNavigationElement" class="collapse navbar-collapse"> 
    <?php wp_nav_menu(array(
     'container' => '', 
     'menu' => __('Menu mobile', 'cicr'), 
     'menu_class' => 'menu clearfix', 
     'theme_location' => 'primary-menu', 
     'before' => '', 
     'after' => '', 
     'link_before' => '<i class="fa fa-exclamation"></i>', 
     'link_after' => '', 
     'walker' => new mts_menu_walker 
    )); ?> 
</nav> 

Если вам нужно добавить этот значок только на определенные ссылки, я предлагаю, чтобы добавить класс по этой ссылке (в администрации, нажмите на кнопку «Параметры экрана» на вершине затем проверьте «классы CSS» для смещения ввода класса), затем в CSS добавьте псевдо-элемент в эту ссылку для отображения значка. Это будет выглядеть как-то вроде этого:

a.exclamation { 
    position: relative; 
    display: inline-block; 
    padding-left: 15px; 
} 
a.exclamation:before { 
    content: ""; 
    height: 10px; 
    width: 10px; 
    top: 0; 
    left: 0; 
    background: url("images/exclamation.png") left top no-repeat; 
    position: absolute; 
    left: 0; 
    top: 0; 
} 

Как включить источник для логотипа <img src="img/logo.png"> с функцией WP?

Расположите свой логотип в папке с изображениями папки темы, затем используйте функцию get_stylesheet_directory_uri(), чтобы получить URI вашей папки с темой.

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.png" /> 

Как включить также в качестве заголовка Ману элемент включает в теге LI?

Учитывая, вы говорите о поиске (не навигационной панели убедитесь, что вы имеете в виду), вы могли бы сделать использование items_wrapwp_nav_menu параметра:

'items_wrap' => '<ul id="%1$s" class="%2$s">'. 
        '%3$s'. 
        '<li class="hidden-xs hidden-sm" id="navbar-search">'. 
        '<a href="#">'. 
         '<i class="fa fa-search"></i>'. 
        '</a>'. 
        '</li>'. 
       '</ul>', 

Answer 2

Посмотрите на ссылку функция Кодекс: https://developer.wordpress.org/reference/functions/wp_nav_menu/

Вы можете использовать before и after параметры, чтобы применить <i class="fa fa-search"></i> до вашего текста ссылки. Вы также можете использовать параметры link_before и link_after, чтобы разместить текст перед вашей ссылкой. Если вам нужно обернуть некоторый код, вы можете использовать параметры items_wrap, чтобы передать оболочку в главное меню.

Довести свой закачанный (заголовок на странице настройки) WordPress логотип, вы должны попробовать:

<img src="<?php echo(get_header_image()); ?>" alt="<?php echo(get_bloginfo('title')); ?>" /> 

Вы можете использовать container_class и menu_class настраивать классы и применять стили к вашему ul и li. По умолчанию WordPress возвращает код разметки с аналогичной иерархией: div>ul>li>a.

Надеюсь, это поможет. Ссылка, предоставленная мной, содержит полные инструкции по использованию этой функции.