Редактирование HTML навигационной панели в WordPress

18 дек. 2014 г., 04:47:49
Просмотры: 16.4K
Голосов: 3

Есть ли способ изменить HTML навигационной панели моей страницы WordPress? (Я хочу добавить несколько div-блоков, которые будут управляться с помощью media queries.)

Спасибо за прочтение!

2
Комментарии

Вы пробовали использовать кастомный Walker?

fuxia fuxia
18 дек. 2014 г. 05:04:28

@toscho Нет, я не слышал об этом до того, как прочитал полезные ответы ниже. Тем не менее, я решил просто создать свой собственный файл header.php в моей кастомной дочерней теме, что позволяет мне редактировать html/css/php напрямую.

Rogare Rogare
19 дек. 2014 г. 16:32:44
Все ответы на вопрос 2
2

Да, вам нужно будет реализовать класс walker для этого.

Вот простой пример.

$defaults = array(
    'theme_location' => 'primary',
    'container'      => 'ul',
    'menu_class'     => 'nav navbar-nav main-nav',
    'walker'         => new Primary_Walker_Nav_Menu()
);

wp_nav_menu( $defaults );

В приведенном выше блоке кода функция wp_nav_menu() принимает $defaults в качестве аргумента. В массиве $defaults последний ключ — это walker. Значение ключа walker — это объект класса Primary_Walker_Nav_Menu.

В файле functions.php реализуйте следующий код:

class Primary_Walker_Nav_Menu extends Walker_Nav_Menu {
    function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
        if (array_search('menu-item-has-children', $item->classes)) {
            $output .= sprintf("\n<li class='dropdown %s'><a href='%s' class=\"dropdown-toggle\" data-toggle=\"dropdown\" >%s</a>\n", ( array_search('current-menu-item', $item->classes) || array_search('current-page-parent', $item->classes) ) ? 'active' : '', $item->url, $item->title
            );
        } else {
            $output .= sprintf("\n<li %s><a href='%s'>%s</a>\n", ( array_search('current-menu-item', $item->classes) ) ? ' class="active"' : '', $item->url, $item->title
            );
        }
    }

    function start_lvl(&$output, $depth) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"dropdown-menu\" role=\"menu\">\n";
    }
}

Метод start_el() используется для добавления открывающего HTML-тега для отдельного элемента дерева (например, <li>, <span> или <a>) в $output.

Метод start_lvl() выполняется, когда walker достигает начала новой "ветки" в структуре дерева.

Обычно этот метод используется для добавления открывающего тега контейнерного HTML-элемента (например, <ol>, <ul> или <div>) в $output.


Результат выполнения вышеуказанной реализации будет следующим HTML-кодом:

<ul id="menu-main-navigation" class="nav navbar-nav main-nav">
   <li class="dropdown ">
      <a href="http://karunshakya.com.np/services/" class="dropdown-toggle">Services</a>
      <ul class="dropdown-menu" role="menu">
         <li><a href="http://karunshakya.com.np/services/selection-et-recrutement/">Sélection et recrutement</a></li>
         <li><a href="http://karunshakya.com.np/services/mise-disposition-de-personnel/">Mise disposition de personnel</a></li>
         <li><a href="http://karunshakya.com.np/services/gestion-de-salaire/">Gestion de salaire</a></li>
      </ul>
   </li>
   <li><a href="http://karunshakya.com.np/news/">News</a></li>
   <li><a href="http://karunshakya.com.np/medias/">Medias</a></li>
   <li class="last-child"><a href="http://karunshakya.com.np/contactez-nous/">Contactez-nous</a></li>
</ul>

Как использовать класс Walker:
http://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401

18 дек. 2014 г. 05:29:20
Комментарии

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

Andrew Bartel Andrew Bartel
18 дек. 2014 г. 20:07:35

Отредактировано. Надеюсь, мое объяснение поможет легко понять класс walker.

Karun Karun
18 дек. 2014 г. 21:46:36
0

Если вам нужно изменить только внешние элементы (не сами элементы <li>), вы можете передать в функцию wp_nav_menu() аргумент 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>' и отредактировать его по необходимости. Например, вот как можно обернуть список в элементы <nav> и <div>:

'items_wrap' => '<div><nav><ul id="%1$s" class="%2$s">%3$s</ul></nav></div>',.

Также можно передать другие параметры для изменения содержимого элементов <li> и <a>, используя 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => ''.

Если это не помогает, пожалуйста, покажите конечный HTML-код, который вы пытаетесь получить.

18 дек. 2014 г. 05:34:11