このページでは、Nishiki Pro（1.0.291 以降）のヘッダーの「メニュー」「検索」アイコンを変更する方法を解説しています。

例えば、デフォルトのアイコン（Nishiki Pro のカスタマイザーで、デザインパターン 02 を選択）を、テキスト/画像/SVG などに変更できます。

サンプルを少し掲載しましたので、お好みでカスタマイズしてみてください。

目次

• サンプル
  • 「メニュー」アイコンを変更
  • 「検索」アイコンを変更
• 出力に関する注意点

サンプル

「メニュー」アイコンを変更

nishiki_pro_header_icon_menu フィルターを使って、アイコンの html を変更します。

テキスト

// 「メニュー」アイコン変更（テキスト）
if ( ! function_exists( 'nishiki_pro_custom_header_icon_menu' ) ) {
	function nishiki_pro_custom_header_icon_menu( $html ) {
        // ダミーのコードです。お好みで変更ください。
        $html = 'menu';
        
        return $html;
	}

	add_filter( 'nishiki_pro_header_icon_menu', 'nishiki_pro_custom_header_icon_menu', 10, 1 );
}

画像

// 「メニュー」アイコン変更（画像）
if ( ! function_exists( 'nishiki_pro_custom_header_icon_menu' ) ) {
	function nishiki_pro_custom_header_icon_menu( $html ) {
        $upload_dir   = wp_upload_dir();

        // ダミーのコードです。お好みで変更ください。
        $html = '<img src="' . $upload_dir['baseurl'] . '/2022/05/menu-icon.png" alt="画像の alt" title="画像の title"/>';
        
        return $html;
	}

	add_filter( 'nishiki_pro_header_icon_menu', 'nishiki_pro_custom_header_icon_menu', 10, 1 );
}

SVG

// 「メニュー」アイコン変更（SVG）
if ( ! function_exists( 'nishiki_pro_custom_header_icon_menu' ) ) {
	function nishiki_pro_custom_header_icon_menu( $html ) {
        // ダミーのコードです。お好みで変更ください。
        $html = '<svg viewBox="0 0 200 200" style="width: 2rem; height: 2rem;" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100"/></svg>';
        
        return $html;
	}

	add_filter( 'nishiki_pro_header_icon_menu', 'nishiki_pro_custom_header_icon_menu', 10, 1 );
}

「検索」アイコンを変更

nishiki_pro_header_icon_search フィルターを使って、アイコンの html を変更します。

テキスト

// 「メニュー」アイコン変更（テキスト）
if ( ! function_exists( 'nishiki_pro_custom_header_icon_search' ) ) {
	function nishiki_pro_custom_header_icon_search( $html ) {
        // ダミーのコードです。お好みで変更ください。
        $html = 'search';
        
        return $html;
	}

	add_filter( 'nishiki_pro_header_icon_search', 'nishiki_pro_custom_header_icon_search', 10, 1 );
}

画像

// 「メニュー」アイコン変更（画像）
if ( ! function_exists( 'nishiki_pro_custom_header_icon_search' ) ) {
	function nishiki_pro_custom_header_icon_search( $html ) {
        $upload_dir   = wp_upload_dir();

        // ダミーのコードです。お好みで変更ください。
        $html = '<img src="' . $upload_dir['baseurl'] . '/2022/05/search-icon.png" alt="画像の alt" title="画像の title"/>';
        
        return $html;
	}

	add_filter( 'nishiki_pro_header_icon_search', 'nishiki_pro_custom_header_icon_search', 10, 1 );
}

SVG

// 「メニュー」アイコン変更（SVG）
if ( ! function_exists( 'nishiki_pro_custom_header_icon_search' ) ) {
	function nishiki_pro_custom_header_icon_search( $html ) {
        // ダミーのコードです。お好みで変更ください。
        $html = '<svg viewBox="0 0 200 200" style="width: 2rem; height: 2rem;" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="100"/></svg>';
        
        return $html;
	}

	add_filter( 'nishiki_pro_header_icon_search', 'nishiki_pro_custom_header_icon_search', 10, 1 );
}

出力に関する注意点

wp_kses_allowed_html( 'post' ) で定義された要素 + svg のみ許可して出力します。もし、うまく出力されない場合はコードを見直してみてください。

参考：wp_kses_allowed_html