賢威テーマ」は、SEO業界で圧倒的な実績を持つWebプランニングチーム「ウェブライダー」が、そのノウハウを余すことなく詰め込んだ、SEOテンプレートパックです。

今回は、word pressテーマである「賢威テーマ」のサイト内検索窓をヘッダーに設置する方法をご紹介します。

サイトの検索窓にキーワードを入力するとスムーズに目的のページを探すことができます。検索窓は目立つ箇所に設置した方がユーザーに優しいサイトといえるでしょう。サイドバーの上に設置するか、それともメインコンテンツの上か、またはヘッダーに設置するか、悩んじゃいますね。ま~デザインやバランス次第ですが…。一番目立つ位置はヘッダーなのではないでしょうか。

「賢威テーマ」のサイト内検索窓はウィジェットエリアで設置するためカスタマイズしなければヘッダーに表示することができません。ヘッダーに設置するにはPHPで表示させCSSで位置を調整します。PHPとCSSと聞くと難しそうに思えますが、とても簡単に設置できます。

カスタマイズ前

カスタマイズ後

header.phpに検索窓のコードを設置

header.phpの116行目辺りに下記コードがあります。

こちらのコードの直ぐ下に下記コードを追加します。

記入後のheader.php

サイトのヘッダーに検索窓が表示されます。

次に親テーマのbase.cssや子テーマのCSSファイルに、下記コードを追加しましょう。

CSSを追加することで検索窓が右によりました。

Google Chromeを使っているとCSSを更新しても変更されない場合がございます。そんな時は、別のブラウザで更新を確認するかクロームの履歴を削除して確認してください。如何でしょうか?ヘッダーの右側に設置できましたか?「賢威テーマ」の検索窓をヘッダーの右側に設置する方法をご紹介しました。

最後まで読んで頂きありがとうございます。

WEB運営・制作ディレクター

この記事のライター:BUTTER

WEBサイト制作、Google施設内ストリートビュー、メディアサイトの運営・管理を行っております。 Knowledge Clip / マークアップエンジニア / デジタルワークショップ認定 / ローカルガイド レベル6 / Google認定フォトグラファー / Dance Tube / DIY crearivity /
趣味:音楽鑑賞、ネットサーフィン、カメラ、自然、インテリア、

ツイッター インスタグラム

最新情報をチェック