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 的預設搜尋功能很陽春,由於這次的客戶網站是部落格,因此只需要增加搜尋表單就可以滿足需求。但如果需要較進階的搜尋功能,還是建議可以使用外掛來執行。

預設圖片
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料