WordPressのメニューに検索窓を作るのでR

WordPressのテーマによっては、すでに検索が備わっている場合が多いのでR。

ただし、

それは、

ウィジェットを使って、サイドバーか、フッターバーに挿入するパターンが多いのでR。

しかし、

最近のテーマは、ウィジェットの配置する位置がおしゃれな感じになっているテーマが多く、そこに検索窓をウィジェットで作ると、おしゃれなテーマがダサく見えるのでR。

そこで、対策として、

メニュー内に検索窓を作るのでR。

固定ページでの検索は、ここの記事のように作ったのでRが、メニューの検索窓は別の方法になるのでR。

一つの方法は、プラグイン「Search box on Navigation Menu」を使うのでR。プラグインの詳細は、ここにあるのでR。

「ダッシュボード」→「プラグイン」→「新規追加」で、Search box on Navigation Menuを検索し、インストール、有効化するのでR。

すると、

設定などは特にないプラグインのようでRが、一応メニュー内を覗くと、検索窓があるのでR。

しかし、

プラグインを使わなくても、function.phpやstyle.phpを編集する方法で簡単に検索窓を作ることもできるのでR。その方が、動作的にはちょびっとは速いかもしれないのでR。

そこで、function.phpに

add_filter('wp_nav_menu_items','add_search_box', 10, 2);
function add_search_box($items, $args) {
 ob_start();
 get_search_form();
 $searchform = ob_get_contents();
 ob_end_clean();
  $items .= '

<li>' . $searchform . '</li>

';
 return $items;
}

を挿入し、style.cssに

#main-nav .search-submit {
 display: block;
 width: 30px;
 height: 30px;
 position: absolute;
 top: 0;
 right: 0;
 padding: 0;
 margin: 0;
 background: url(images/search_icon.png) no-repeat center center;
 text-indent: -99999999999px;
}

を挿入すると、同じような検索窓ができていたのでR。

しかし、確認すると、

style.cssに記述がなくとも、function.phpへ挿入だけでも出来ていたようでR。

ここと、ここを参考にやってみたのでR。






この記事をシェアできます。

月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』