Как добавить свою форму в меню wordpress?

Question

[Анатолий]

Есть верхнее навигационное меню

<?php
	wp_nav_menu( array(
		'theme_location'  => 'nav_top',
		'container'       => 'nav',
		'menu_class'      => '',
		'items_wrap'      => '<ul>%3$s</ul>'
	));
?>

Меню выглядит так:
Главная
Раздел1
Раздел2
..
Раздел10

я хочу добавить поиск по сайту, после Главная
Форма поиска выглядит так:

<form role="search" method="get" class="flex" action="form.php" >
  <input type="search" class="search_field_menu" placeholder="Поиск по сайту" required autocomplete="off" value="" />
  <button type="submit" class="search_submit_menu" value="найти"></button>
</form>

Как правильно добавить форму в меню?
Как вариант вижу создание страницы, поместить туда эту форму, ну и подключить страницу к меню.

Сейчас сделано так:
- Ссылка на главную
- Форма поиска
- <nav>Раздел1 .. Раздел10</nav>

Answer 1

[ItsCoder]

Ознакомьтесь с классом Walker.
Дублируете класс, изменив название (естественно отдельным файлом в теме, подключаете к functions.php). Манипулируете им как нужно в зависимости от ваших задач и указываете в функции вывода:

wp_nav_menu( array(
    'theme_location'  => 'nav_top',
    'container'            => 'nav',
    'menu_class'        => '',
    'items_wrap'        => '<ul>%3$s</ul>',
    'walker'          => 'Example_Walker'
  ));

Comments

[Анатолий]

Почитал/посмотрел, но ничего интересного по walker не нашел, кроме как удаление/добавление классов, id и атрибутов.

Можете написать пример того, как я могу добавить кастомный пункт в меню через walker?

[ItsCoder]

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

[Анатолий]

Я же не телепат, хоть намек дайте )

Ума хватило, придумать - создать произвольный пункт в меню, в котором задать класс add_menu.

wp_nav_menu( array(
   ...
   'walker'  => new form_walker()
));

и далее вставить код в functions.php

class form_walker extends Walker_Nav_Menu {
  function start_el(&$output, $item,  $depth = 0, $args = array(), $id = 0 ) {
		global $wp_query;
		$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
		$output .= $item->description;

		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
		$class_names = ' class="'. esc_attr( $class_names ) . '"';

		$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

		$attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
		$attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
		$attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';

		$item_output = $args->before;
		if (in_array('add_menu', $classes)) {
			$item_output .= '
			<form role="search" method="get" class="flex" action="form.php" >
						<input type="search" class="search_field_menu" placeholder="Поиск по сайту" required autocomplete="off" value="" />
						<button type="submit" class="search_submit_menu" value="найти"></button>
					</form>';
		} else {
			$item_output .= '<a'. $attributes .'>';
			$item_output .= $args->link_before .apply_filters( 'the_title', $item->title, $item->ID );
			$item_output .= '</a>';
		}
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }
}

Форма в меню появилась...
Это вариант?

Answer 2

[Alexey Moloko]

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

<div class="container">
  <a href="/" class="home">Главная</a>
  <div class="form-box">
    <form role="search" method="get" class="flex" action="form.php" >
      <input type="search" class="search_field_menu" placeholder="Поиск по сайту" required autocomplete="off" value="" />
      <button type="submit" class="search_submit_menu" value="найти"></button>
    </form>
  </div>
  <?php
    wp_nav_menu( array(
      'theme_location'  => 'nav_top',
      'container'       => 'nav',
      'menu_class'      => '',
      'items_wrap'      => '<ul>%3$s</ul>'
    ));
  ?>
</div>

Comments

[Анатолий]

И как Ваш ответ относится к моему вопросу?