如何在Wordpress中將搜索欄添加到移動菜單？

Question

我已將此代碼添加到我的functions.php文件中：

function wpgood_nav_search( $items, $args ) {
$items .= '<li>' . get_search_form( false ) . '</li>';
return $items;
}
add_filter( 'wp_nav_menu_items','wpgood_nav_search', 10, 2 );

我在這里找到了它： 將搜索欄添加到wordpress的導航菜單中

問題：此代碼將搜索欄添加到桌面和移動菜單，但是我只需要將搜索欄添加到我的移動菜單 ，因為我網站的桌面版本在左側邊欄中已經有一個搜索小部件。

我怎樣才能做到這一點？ 請幫我。 謝謝！

我的菜單在functions.php中的初始化：

// Initialize navigation menus
register_nav_menus(
    array(
        'primary-menu' => esc_html__( 'Primary Menu', 'bento' ),
        'footer-menu' => esc_html__( 'Footer Menu', 'bento' ),
    )
);

非常感謝你的幫助！ 最后，我決定使用我的初始代碼，並使用CSS編輯搜索欄的位置和樣式，因為我的編碼不太好：）

Answer 1

使用javascript代碼為移動菜單添加搜索框

$("ul.primary-mobile-menu').append('
// your html code to append
<li><form role="search" method="get" id="searchform" class="search-form" action="https://bookyspace.com/"><div class="search-form-wrap"> <input type="text" value="" name="s" id="s" class="search-form-input" placeholder="Знайти.."> <input type="submit" id="searchsubmit" class="button submit-button" value=""></div></form></li>
');

謝謝

Answer 2

基本上，您會通過幾個過程來做到這一點。 像下面

• 通過使用jquery append函數，您可以做到。 將此代碼粘貼到模板JS文件中

   $("here_put_menu_selector").append(' <li> <form role="search" method="get" id="searchform" class="search-form" action="https://yourdomain.com/"> <div class="search-form-wrap"> <input type="text" value="" name="s" id="s" class="search-form-input" placeholder="search any"/> <input type="submit" id="searchsubmit" class="button submit-button" value="Search"/> </div> </form> </li> '); 

僅在使用CSS顯示屬性的移動設備上可見，並在台式機/平板電腦設備中隱藏該部分。

Answer 3

將以下代碼放入位於主題文件夾中的functions.php中

function add_last_nav_item($items, $args) {
  if ($args->menu == 'header_menu') {
        $homelink = get_search_form();
        $items = $items;
        $items .= '<li>'.$homelink.'</li>';
        return $items;
  }
  return $items;
}
add_filter( 'wp_nav_menu_items', 'add_last_nav_item', 10, 2 );

這里的get_search_form（）是獲取搜索框的函數。

Answer 4

@弗拉迪斯拉夫·提格洛

在li項中添加一個類到您已經使用的代碼中，並說它適用於台式機和移動設備：

<li> Add class to <li class="searchbox-position">

然后，在css中編寫代碼以隱藏桌面顯示：

@media (min-width: 840px) {
li.searchbox-position {
    display: none !important;
}
}

使它工作的最簡單方法