【Cocoon】PC版グローバルナビに検索アイコンを追加

2025年2月8日2025年2月13日

CocoonのPC版グローバルナビには検索アイコンがない

当サイトでも使用しているWordPressテーマ「SWELL」では標準設置の検索アイコンをCocoonで設置したい場合、ウィジェットでページ本文中・フッター・サイドバー等には検索アイコンを設置できますが、ヘッダー部分には設置することが出来ません。

Cocoonでもヘッダー部分のグローバルナビ横に検索アイコンを設置する方法です。

フックを “functions.php” に追加

外観＞テーマファイルエディタ＞functions.phpに下記の内容を追加。

/*ヘッダー検索*/
function add_search_icon_to_menu($items, $args) {
    if ($args->theme_location == 'navi-header') {
        $items .= '<li class="search-menu-button-header menu-button">
    <input id="search-menu-input-header" type="checkbox" class="display-none">
    <label id="search-menu-open-header" class="menu-open menu-button-in" for="search-menu-input-header">
      <span class="search-menu-icon menu-icon">
        <span class="fa fa-search fa-search-header" aria-hidden="true"></span>
      </span>
    </label>
    <label class="display-none" id="search-menu-close-header" for="search-menu-input-header"></label>
    <div id="search-menu-content-header" class="search-menu-content">
      <form class="search-box input-box" method="get" action="' . esc_url(home_url('/')) . '">
          <input type="text" placeholder="サイト内を検索" name="s" class="search-edit" aria-label="input" value="">
          <button type="submit" class="search-submit" aria-label="button"><span class="fa fa-search fa-search-box" aria-hidden="true"></span></button>
      </form>
    </div>
</li>';
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'add_search_icon_to_menu', 10, 2);

Note

CSSクラス名は “search-menu-content-header” にしてます。任意のCSSクラス名に変更した場合は、functions.phpとstyle.cssの両方のCSSクラス名を忘れずに変更して下さい。

CSSを “style.css” に追加

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加。

/*ヘッダー検索*/
.fa-search {
    color: #000;
}
#navi .fa-search-header {
    color: #222;
}
#navi .fa-search-box {
    color: #222;
}
#navi .navi-in>ul>li:last-child {
    display: none;
}
.menu-drawer .search-menu-button-header {
    display: none;
}
@media screen and (min-width: 1024px) {
#navi .navi-in>ul>li:last-child {
	display: block;	
}	
}
.search-menu-button-header .fa-search:before {
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-color: #fff;
    -webkit-text-stroke-width: 0.7px;
}
#search-menu-open-header {
	padding: 15px 15px;
	margin-left: 5px;
	display: flex;
}
#search-menu-content-header,
#search-menu-content-header .search-box {
	max-width: 570px;
	margin-right: auto;
	margin-left: auto;
}
#search-menu-content-header .search-box {
    margin: 0;
}
.search-menu-content-header {
	transition: .3s ease-in-out;
	position: fixed;
	top: 40%;
	z-index: 99;
	width: 90%;
	left: 5%;
	right: 5%;
	-webkit-transform: translateY(900%);
	transform: translateY(900%);
	opacity: 0;
}
.search-menu-content-header .search-edit {
	width: 100%;
	max-width: 570px;
}
/*黒背景*/
#search-menu-close-header {
	display: none;
	position: fixed;
	z-index: 99;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	transition: .3s ease-in-out;
}
#search-menu-input-header:checked ~ #search-menu-close-header {
	display: block;
	opacity: .5;
}
#search-menu-input-header:checked ~ #search-menu-content-header {
	transition: .3s ease-in-out;
	-webkit-transform: translateX(0%);
	transform: translateX(0%);
	opacity: 1;  
}
#search-menu-content-header .search-edit {
	font-size: 16px;
}
.search-menu-button-header {
	border-right: 0px;
}