Не могу подставить нужный class в выпадающее меню 2 го порядка

Решено mazletop
(@mazletop)

6 лет, 12 месяцев назад
Здравствуйте знакомлюсь с wordpress, и столкнулся с огромной для себя проблемой, не могу прикрепить нужный class к выпадающему списку меню 2 уровня…
Использую фреймворк uikit

Разметка меню выглядит так:
```
<ul class="uk-navbar-nav">
  <li class="uk-active"><a href="#">Пункт меню</a></li>
  <li><a href="#" uk-icon="icon: chevron-down">Пункт меню</a>
    <div class="uk-navbar-dropdown">
	  <ul class="uk-nav uk-navbar-dropdown-nav">
	    <li><a href="#">Подпункт меню</a></li>
		<li><a href="#">Подпункт меню</a></li>
		<li><a href="#">Подпункт меню</a></li>
	  </ul>
	 </div>
	</li>
	<li><a href="#">Пункт меню</a></li>
</ul>
```
в header.php вывожу так:
```
<?php wp_nav_menu( array( 
  'theme_location' => 'uk-navbar-nav', 
  'depth' => 0,
  'menu_class' => 'uk-navbar-nav',
  'container' => false));
?>
```
в functions.php регю так:
```
php
register_nav_menus(array(
	'uk-navbar-nav' => 'Верхнее горизонтальное меню',
	'footer' => 'Нижнее меню'
));
```
Результат:

http://prntscr.com/f2evx3 (скрин)

То есть не работает меню 2 порядка, вот скрин кода: http://prntscr.com/f2ewqd

Ещё не понятно сделать активным .uk-active чтобы при переходе в любую категорию было видно где нахожусь…

Просмотр 15 ответов — с 1 по 15 (всего 40)

1 2 3 →

tuxfighter
(@tuxfighter)

6 лет, 12 месяцев назад

Здравствуйте знакомлюсь с wordpress,

чтож вы сразу же бросаетесь велосипед изобретать-то…..

совсем не понятно, кто запретил пользоваться стандартным функционалом ВП,
или на крайний случай плагинами.

Автор mazletop
(@mazletop)

6 лет, 12 месяцев назад

Здравствуйте, я 3й день изучаю эту cms… плагинами не хотелось бы пользоваться…
А вот стандартным функционалом ВП, это каким? Я вчера пол ночи сидел изучал:

https://wp-kama.ru/id_140/polzovatelskoe-menyu-v-wp-30-wp_nav_menu.html

и оф. кодекс… Увы, я не силен в PHP, поэтому и прошу помощи, я думаю в будущем буду по накатанному все делать.

Подскажите пожалуйста, как решить мою проблему?

Автор mazletop
(@mazletop)

6 лет, 12 месяцев назад

Здравствуйте, я за стандартный функционал, а о каком таком стандартном функционале речь?

Плагины бы очень не хотелось использовать…
—
Случаем не о этом чудо функционале речь?):
'walker' => new WordPressUikitMenuWalker('uk-navbar-nav'),

Только я так и не понял что делает new WordPressUikitMenuWalker

tuxfighter
(@tuxfighter)

6 лет, 12 месяцев назад

вы действительно искренне уверены, что тот код, каторый напишите вы, будет работать лучше, чем тот, который написали до вас?

нет. речь о кнопке справа вверху на странице «меню»

Автор mazletop
(@mazletop)

6 лет, 12 месяцев назад

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

http://prntscr.com/f2i7bh (скрин)

Я только сейчас увидел этот функционал, увы.

tuxfighter
(@tuxfighter)

6 лет, 12 месяцев назад

это вообще не код
Автор mazletop
(@mazletop)

6 лет, 12 месяцев назад
Речь о: http://prntscr.com/f2i7bh ?

Он не годится в данном случае, у меня выпадающий список обернут в доп. блок.
```
<div class="uk-navbar-dropdown">
  <ul class="uk-nav uk-navbar-dropdown-nav">
   <li><a href="#">Подпункт меню</a></li>
   <li><a href="#">Подпункт меню</a></li>
   <li><a href="#">Подпункт меню</a></li>
  </ul>
</div>
```
- Ответ изменён 6 лет, 12 месяцев назад пользователем mazletop.
SeVlad
(@sevlad)

6 лет, 12 месяцев назад

у меня выпадающий список обернут в доп. блок.

Что мешает прописать классы стилей непосредственно в меню?

Что мешает вообще ничего не прописывать, а использовать наследственность CSS?

Если это всё невозможно по каким-то причинам, то остаётся walker в wp_nav_menu.

tuxfighter
(@tuxfighter)

6 лет, 12 месяцев назад

многие «начинающие» почемуто считают себя гораздо умнее кодеров Аутоматикс и бросаются переписывать движок…..
зачем — не понятно….
Автор mazletop
(@mazletop)

6 лет, 12 месяцев назад
Мда… без знания php с ВП работать тяжело…

«Что мешает прописать классы стилей непосредственно в меню?»
Я прописал нужные стили как на скриншоте, они же появляются непосредственно в эллементе где я прописываю… Может и можно создать оборачивающий див с нужным классом прямо из админки, но я не понял как…

«Что мешает вообще ничего не прописывать, а использовать наследственность CSS?»
Мешает фреймворк, там моих стилей пока вообще нету, мне бы не хотелось лезть и переписывать фреймворк, он же может обновляться, каждый раз переписывать …

«Если это всё невозможно по каким-то причинам, то остаётся walker в wp_nav_menu.»
Это самое интересное, только вот почитав: https://developer.wordpress.org/reference/functions/wp_nav_menu/
понял что я в жопе, т.к. попытавшись понять:
```
function wp_nav_menu( $args = array() ) {
    static $menu_id_slugs = array();
 
    $defaults = array( 'menu' => '', 'container' => 'div', 'container_class' => '', 'container_id' => '', 'menu_class' => 'menu', 'menu_id' => '',
    'echo' => true, 'fallback_cb' => 'wp_page_menu', 'before' => '', 'after' => '', 'link_before' => '', 'link_after' => '', 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', 'item_spacing' => 'preserve',
    'depth' => 0, 'walker' => '', 'theme_location' => '' );
 
    $args = wp_parse_args( $args, $defaults );
 
    if ( ! in_array( $args['item_spacing'], array( 'preserve', 'discard' ), true ) ) {
        // invalid value, fall back to default.
        $args['item_spacing'] = $defaults['item_spacing'];
    }
 
    /**
     * Filters the arguments used to display a navigation menu.
     *
     * @since 3.0.0
     *
     * @see wp_nav_menu()
     *
     * @param array $args Array of wp_nav_menu() arguments.
     */
    $args = apply_filters( 'wp_nav_menu_args', $args );
    $args = (object) $args;
 
    /**
     * Filters whether to short-circuit the wp_nav_menu() output.
     *
     * Returning a non-null value to the filter will short-circuit
     * wp_nav_menu(), echoing that value if $args->echo is true,
     * returning that value otherwise.
     *
     * @since 3.9.0
     *
     * @see wp_nav_menu()
     *
     * @param string|null $output Nav menu output to short-circuit with. Default null.
     * @param stdClass    $args   An object containing wp_nav_menu() arguments.
     */
    $nav_menu = apply_filters( 'pre_wp_nav_menu', null, $args );
 
    if ( null !== $nav_menu ) {
        if ( $args->echo ) {
            echo $nav_menu;
и т.д.
```
Понял что выпадающее меню создать мне «тяжело»

—
Нашел рабочий пример на uikit https://github.com/nstaeger/WordPress-UIkit-Starter-Theme/blob/master/elements/base/navigation.php

Но там опять же так на … , теперь понимаю почему ставят на ВП по каждому случаю плагины.
—
Мне бы простой пример реализации оборачивающего блока через ‘walker’, со временем я уверен всё освою, но я не понимаю откуда берется в 'walker' => new WordPressUikitMenuWalker('navbar'),
вот это: new WordPressUikitMenuWalker('navbar') , что такое WordPressUikitMenuWalker и почему там navbar.

В инструкции написано: (object) Класс собирающий меню. Default: new Walker_Nav_Menu
Как то маловато для понимания…

—
Ребят, я понимаю что сильно туплю много где, у меня так часто бывает когда изучаю новую cms, но всё же ВП не из самых легких cms, прошу терпения и понимания))
- Ответ изменён 6 лет, 12 месяцев назад пользователем mazletop.
SeVlad
(@sevlad)

6 лет, 12 месяцев назад

Я прописал нужные стили как на скриншоте, они же появляются непосредственно в эллементе где я прописываю

Ну и? Всё же, классы же прописались. Или что еще надо?
tuxfighter
(@tuxfighter)

6 лет, 12 месяцев назад
Мда… без знания php с ВП работать тяжело…

неправда.
я вообще пхп не знаю
от слова «совсем»
только html и css

UPD: я не кодер от того же слова.
я сисадмин. и за всю свою жизнь написал максимум пару десятков баш-скриптов, потакая своей природной лени….
и это совсем не мешает мне понимать ВП и что-то на этом движке делать и при этом не лесть в код самого движка.
по крайней мере меню я ни разу не писал вручную.
- Ответ изменён 6 лет, 12 месяцев назад пользователем tuxfighter.
- Ответ изменён 6 лет, 12 месяцев назад пользователем tuxfighter.
Автор mazletop
(@mazletop)

6 лет, 12 месяцев назад
SeVlad
Вот так должно выглядеть меню, где всё на месте, посмотрите пожалуйста внимательно:
```
<ul class="uk-navbar-nav">
  <li class="uk-active"><a href="#">Пункт меню 1</a></li>
  <li><a href="#" uk-icon="icon: chevron-down">Пункт меню 2</a>
      
      <div class="uk-navbar-dropdown">
        <ul class="uk-nav uk-navbar-dropdown-nav">
          <li><a href="#">Подпункт 1</a></li>
          <li><a href="#">Подпункт 2</a></li>
          <li><a href="#">Подпункт 3</a></li>
        </ul>
       </div>

      </li>
   <li><a href="#">Пункт меню 1</a></li>
   <li><a href="#">Пункт меню 1</a></li>
</ul>
```
Вот это непосредственно выпадающее меню:
```
<div class="uk-navbar-dropdown">
  <ul class="uk-nav uk-navbar-dropdown-nav">
    <li><a href="#">Подпункт 1</a></li>
    <li><a href="#">Подпункт 2</a></li>
    <li><a href="#">Подпункт 3</a></li>
   </ul>
 </div>
```
Проблема в том, что вот эта часть выпадающего меню:
```
 <ul class="uk-nav uk-navbar-dropdown-nav">
    <li><a href="#">Подпункт 1</a></li>
    <li><a href="#">Подпункт 2</a></li>
    <li><a href="#">Подпункт 3</a></li>
   </ul>
```
Обёрнута ещё в доп. div .uk-navbar-dropdown
Видите?
То есть когда я прописываю классы в пунтах меню, они подставляются так:
```
<li class="asd"><a href="#">Подпункт 1</a></li>
<li class="asd"><a href="#">Подпункт 2</a></li>
<li class="asd"><a href="#">Подпункт 3</a></li>
```
Что конечно тоже полезно, но у нас мало того что выше есть оборачивающий:
, есть ещё выше: <div class="uk-navbar-dropdown">

Поэтому выходит что возможность добавления классов из админки в данном случае не очень помогает…

—
tuxfighter
Честно говоря это радует)) Это значит что у меня есть шанс победить ВП…

Я обязательно подучу php, но это будет позже, слишком много взял на себя( Это бы победить.
- Ответ изменён 6 лет, 12 месяцев назад пользователем mazletop.
SeVlad
(@sevlad)

6 лет, 12 месяцев назад

Поэтому выходит что возможность добавления классов из админки в данном случае не очень помогает…

Давайте зайдем с другой стороны.
Вы чему хотите задать стили? Каким элементам?
Автор mazletop
(@mazletop)

6 лет, 12 месяцев назад
У меня сейчас меню выглядит так:
```
<ul id="menu-as" class="uk-navbar-nav">
  <li id="menu-item-49" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-49"><a href="#">Путешествия</a>
    <ul class="sub-menu">
      <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="#">Про меня</a></li>
      <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="#">Пример страницы</a></li>
    </ul>
   </li>
   <li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-51"><a href="#">Работа</a></li>
   <li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-52"><a href="#">Уроки</a></li>
</ul>
```
Надо чтобы было вот так:
```
<ul id="menu-as" class="uk-navbar-nav">
  <li id="menu-item-49" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-49"><a href="#">Путешествия</a>
   <div class="uk-navbar-dropdown">
     <ul class="uk-nav uk-navbar-dropdown-nav sub-menu">
       <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="#">Про меня</a></li>
      <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="#">Пример страницы</a></li>
     </ul>
    </div>
  </li>
  <li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-51"><a href="#">Работа</a></li>
  <li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-52"><a href="#">Уроки</a></li>
</ul>
```
То есть проблемой с этой частью:
```
<div class="uk-navbar-dropdown">
  <ul class="uk-nav uk-navbar-dropdown-nav sub-menu">
    <li id="menu-item-54" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-54"><a href="#">Про меня</a></li>
   <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="#">Пример страницы</a></li>
  </ul>
</div>
```
- Ответ изменён 6 лет, 12 месяцев назад пользователем mazletop.
- Ответ изменён 6 лет, 12 месяцев назад пользователем mazletop.
- Ответ изменён 6 лет, 12 месяцев назад пользователем mazletop.
- Ответ изменён 6 лет, 12 месяцев назад пользователем mazletop.
- Ответ изменён 6 лет, 12 месяцев назад пользователем mazletop.
- Ответ изменён 6 лет, 12 месяцев назад пользователем mazletop.
- Ответ изменён 6 лет, 12 месяцев назад пользователем mazletop.
- Ответ изменён 6 лет, 12 месяцев назад пользователем mazletop.
- Ответ изменён 6 лет, 12 месяцев назад пользователем mazletop.
- Ответ изменён 6 лет, 12 месяцев назад пользователем mazletop.