WooCommerce 教程：如何在頁首/頁尾中新增自定義搜尋欄

今天的程式碼片段實際上來自我自己的網站。您可能已經注意到，導航選單中有一個 “放大鏡” 可以向下滾動到搜尋欄。我專門搜尋部落格文章（我排除頁面，產品等）。這是我如何做到的 – 希望您今天能夠學到新的東西！

PHP 程式碼段：將自定義搜尋欄新增到您的 WooCommerce 頁首/頁尾

  /**   * @snippet       WooCommerce Custom Search Bar     * @sourcecode    https://businessbloomer.com/?p=21175   * @author        Rodolfo Melogli   * @testedwith    WooCommerce 2.6.4   */      // ----------------------------------  // 1. ADD SEARCH TO STOREFRONT FOOTER    add_action('storefront_footer','add_search_to_footer');    function add_search_to_footer() {  get_search_form();  }      // ----------------------------------  // 2. LIMIT SEARCH TO POSTS OR PRODUCTS ONLY    function SearchFilter($query) {  if ( !is_admin() && $query->is_search ) {  $query->set('post_type', 'post'); // OR USE 'PRODUCT'  }  return $query;  }    add_filter('pre_get_posts','SearchFilter');      // ----------------------------------  // 3. CHANGE PLACEHOLDER & BUTTON TEXT    function storefront_search_form_modify( $html ) {  	return str_replace( array('Search &hellip;','Search'), array('WooCommerce Hooks, Storefront Theme, Google AdWords...','Search Article'), $html );  }    add_filter( 'get_search_form', 'storefront_search_form_modify' );      // ------------------------------  // 4. ADD SEARCH ICON TO NAVIGATION MENU    function new_nav_menu_items($items) {      $searchicon = '<li class="search"><a href="#colophon"><i class="fa fa-search" aria-hidden="true"></i></a></li>';      $items = $items . $searchicon;      return $items;  }    add_filter( 'wp_nav_menu_additional-resources_items', 'new_nav_menu_items' );

那就是🙂現在給我的搜尋框去看看它是否有效！