AFFINGER   ※当サイトのコンテンツには広告が含まれる場合があります。

ヘッダーメニューに検索窓を追加する方法【AFFINGER6】

2023-03-19 yume-tada

how-to-make-header-searchbox

ヘッダーメニューに検索窓を追加したい。

findout
お調べさん
ゆめただのり
ゆめただ

そんなお悩みにお答えします。

ここがポイント

内部回遊率を高めるために、検索窓は重要です。
AFFINGER6のPCのヘッダーメニュー横列には、標準機能で検索窓を追加することができません。
回遊率を上げるために、ナビゲーションメニューに検索窓を追加する方法をまとめました。

注意

本記事は、「ヘッダーメニュー横列」のデザインに特化しています。

本記事でわかるコト

AFFINGER6(ACTION)で、ヘッダーメニュー横列に、「検索窓」を追加する方法

この記事を書いた人【ゆめただ】

この記事を書いた人

完成イメージ

トップのヘッダーメニュー(ヘッダーメニュー横列)に検索窓を追加するデザインです。

当サイトに採用しています。

\完成イメージはこちら/

navimenu_1

検索窓の追加方法

ゆめただのり
ゆめただ

では、具体的な追加方法について説明していきます。

コードを追加する

ビゲーションメニューに、検索窓を追加するために、コードを追記します。

管理画面

【外観】-【テーマファイルエディタ】

 管理画面の「外観」ー「テーマファイルエディタ」をクリックします。

navimenu_2

右側の「編集するテーマを選択」のところで、AFFINGER」を選び「選択」をクリック

親テーマの、function.phpをクリックする。

navimenu_3

一番下まで移動して、コードを追記する。

add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
  if( $args->theme_location == 'primary-menu-side' ){//※←ヘッダーメニュー(横列)の場合※
	ob_start();
    get_search_form();
    $searchform = ob_get_contents();
    ob_end_clean();
    $items .= '<li>' . $searchform . '</li>';
  }
return $items;
}

参考

※ ヘッダメニューの場合は、「primary-menu」にすれば動作するはずです。(未確認)

編集が終了したら、「ファイルを更新」をクリックして保存

navimenu_4

CSSを追加する

CSSを追記します。

最後にコードを追加します。

管理画面

 管理画面の「外観」ー「カスタマイズ」ー「追加CSS」をクリックします。

navimenu_5
WordPressメニュー9

このように、コードを追加します。コピペでOKです。

/* header search */
#header-r #searchform > input {
    background:transparent;
border: 1px none #2f2725 !important;
}

#header-r #searchform{
	border:1px none #2f2725 !important;
	border-bottom:1px dotted #2f2725 !important;
}

このようにAFFINGER6は、カスタマイズ性が高いのテーマです。

\AFFINGER6をおすすめする5つの理由をまとめた記事はこちらから/

AFFINGER6おすすめの記事はこちら
reason-why-i-recommended-affinger
AFFINGER6が初心者には難しいと言われるワケとおすすめする5つの理由

続きを見る

ゆめただのり
ゆめただ

以上で作業は終了です。

ヘッダーメニューに検索窓を設置して

差別化しちゃいましょう。

\こちらの記事も要チェック/

こちらもチェック

how-to-customize-affinger-top-page
AFFINGER6トップページのカスタマイズ方法【オシャレに差別化】

続きを見る

-AFFINGER