Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
利用 wp_nav_menu_items 加入客製化的選單項目
最近的一個案子，需要幫客戶客製化頁首的選單列，在頁首插入搜尋表單。
按照以前處理子佈景主題的做法，我會直接在定義選單的時候，直接將搜尋表單放入參數當中。不過這次因為客戶使用的佈景主題是頁面編輯器 Divi，因此需要在以不更改原本佈景主題檔案 (甚至子佈景主題) 的前提下，完成這項工作。
如果不想自行撰寫程式碼，可以透過外掛 Ivory Search 完成。
但我這次也不想安裝額外的外掛，因此搜尋了跟選單有關的勾點 (hook)，找到了 wp_nav_menu_items 的說明文件。
基本語法
wp_nav_menu_items 是在產生選單 HTML 代碼前執行的篩選器 (filter)，因此如果要在選單中增加客製化的項目，可以在子佈景主題的 functions.php 或是透過 Code Snippets 加入下列程式碼片段。
/**
* @param string $items 選單的項目，取自 [外觀] > [選單]。
* @param stdClass $args 選單的參數，在註冊選單時傳入 wp_nav_menu 的參數。
*/
function hyc_add_menu_items( $items, $args ) {
$items .= '<li>新增項目</li>';
return $items;
}
add_filter('wp_nav_menu_items', 'hyc_add_search_form', 10, 2);我們將上述的程式碼重新調整後，根據 LebCit 提供的作法，可以將搜尋表單的 HTML 代碼回傳至選單中。
function add_search_form($items, $args) {
if( $args->theme_location == 'menu-1' ){
// 這邊的 menu-1 是註冊選單時的選單位置，Divi 預設註冊了 3 種選單位置
//'primary-menu'
//'secondary-menu'
//'footer-menu'
$items .= '<li class="menu-item">'
. '<form role="search" method="get" class="search-form" action="'.home_url( '/' ).'">'
. '<label>'
. '<span class="screen-reader-text">' . _x( 'Search for:', 'label' ) . '</span>'
. '<input type="search" class="search-field" placeholder="' . esc_attr_x( 'Search …', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" title="' . esc_attr_x( 'Search for:', 'label' ) . '" />'
. '</label>'
. '<input type="submit" class="search-submit" value="'. esc_attr_x('Search', 'submit button') .'" />'
. '</form>'
. '</li>';
}
return $items;
}
add_filter('wp_nav_menu_items', 'add_search_form', 10, 2);這樣就能在不另外安裝 Ivory Search 的情況下，為自己的選單新增額外的搜尋表單了。
不過 WordPress 的預設搜尋功能很陽春，由於這次的客戶網站是部落格，因此只需要增加搜尋表單就可以滿足需求。但如果需要較進階的搜尋功能，還是建議可以使用外掛來執行。
