© TamKid.com All rights reserved.

menu-search_201505102208

20155/10

1,963 views

【WordPress】グローバルメニューに検索


自社で求人のサイトを作ってみよう!っと3週間前に社内で展開して、その間に校了がいくつかあって、さらにGWと……。なんやかんやで実質、1週間ぐらいでサイトが立ち上がりました。

株式会社イーグル 求人サイト

さて、どう宣伝してきましょうってことでFacebookやTwitterを利用してみることに。そうこうしていて、ふと……

あれ? サイト内検索の検索窓ないじゃん!?

と、申しましても検索するほどのコンテンツはなく、ダイレクトに求人内容しかないので現地点では必要なし。しかし、そこはユーザビリティが高くないと昨今のサイト構築はNGなので思案しみました。Googleさんに聞いてみると、グローバルメニューへ検索窓を追加するプラグインを発見!!

Search box on Navigation Menu

これなら簡単に追加できると、インストールするも……menu-search_20152131

と、残念な感じに。

個人的にはGoogleのカスタム検索をここに入れたいが入れ方方がわからず……。妥協しての検索窓なので、この残念な感じでは納得出来ない。そこでモロモロ調べてみると、

「Search box on Navigation Menu」のコードを見ていて、「なるほど!」と思ったので、検索ボックスをサイトに追加するコードについて書きたいと思います。
プラグインにあるコードを、functions.phpファイルにコードを追加する方法でも検索ボックスをメニューに追加できます。

メニューに検索ボックスを追加して表示するコードと「Search box on Navigation Menu」プラグインのカスタマイズ

なるほど。function.phpにコードを追記して、cssで整えちゃえばいいのか!?

ということで、

上記をfunction.phpに追記。function.phpに記述なら、プラグインと違い残念な感じならなかったりして?

menu-search_20152131

はい、そんな甘くないですよね。はいはい、わかりました。それならCSSをいじりますよ。

CSSをいじる前に確認を。と、いうのは現状では制作したコンテンツではフルサイズのフォーマットで運用しているが、検索結果とカテゴリー検索などはサイドバーが表示される。その時に検索窓がバッティングするので、CSS内でグローバルメニュー専用の設定したいから。まぁ、どうせ検索結果ページにしかサイドバー付きページは表示されませんので、ウィジェットなので外しちゃいますが……。しかし、今後の展開はどうなるかわからないので一応やっておきましょう。

区分け用にheader.phpからグローバルメニューに関する〝class〟か〝id〟を探す。そうすると、それっぽいidを発見したので、CSSに追記。

これで整ったはず!? 一応、確認してみると、

menu-search_201505102202

 

予定通りできたので、ウィジェットから外しちゃいます。

でも、Googleのカスタム検索に変えたいので、それはまた後日にチャレンジします。


The following two tabs change content below.

清沢 たもつ

代表取締役社長株式会社イーグル
(きよさわ たもつ)1971年生まれ。2005年10月代表取締役社長に就任。瀬戸まなぶをパートナーとしたDesign会社であったが、高橋浩司(編集者)/木村博道(Photographer)が入社後、編集プロダクションへ。Art Director / Graphic Designerに従事し、Web Designやシステム設計、LAN設計を行う。Designerだが、会社経営とネットワークを中心としたsystem Engineer的な仕事も得意としている。

関連記事

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

bn_201505062134

20155/6

【WordPress】Breadcrumb NavXTをリッチスニペットに対応させる

いわゆるSEOについて考え、ネットでいろいろと見ていると、テクニック的な要素としてリッチスニペットの話をよく見かける。リッチスニペットとは …

2,078 views

PI_02_201505021704

20155/3

【WordPress】TablePressで2カラム(セル)表組みレスポンシブ化

TablePressって本家からレスポンシブ対応の追加プラグインが出ているんですね!? TablePress Responsive Tab…

2,697 views

imac_yosemite

20154/11

【Mac】Yosemite Server Part.2

先日、作業用のiMacからOS X Yosemite 10.10.3へのアップデートのアラートが! OS X Yosemite とりあえ…

693 views

mobile01

20153/29

【WordPress】レスポンシブ対応

仕事で込み入っている最中…… 普段はまったくこないGmailアカウントにメールが突然やってきた。 何だと思ってメールを確認してみると…

737 views

eg7

20153/4

【WordPress】Google+バッチ

サイトデザインリニューアル テストサイトとしてこのサイトを立ち上げている。近々に弊社管理のサイトをリニューアルするのでそのテストとしてこち…

708 views

ページ上部へ戻る