検索ボックスをサイドバーから削除してページ上に固定してみた。

検索ボックスをサイドバーから削除してページ上に固定してみた。

ページ上に固定で表示させているバーに検索ボックスを追加した。

このバーを実装した当初は、検索バーはサイドバーでいいかなと、なんとなく思ってソーシャルボタンだけ入れてみたんだけど・・・

「検索バーもやっぱりスクロールにひっついてきた方がいいッ!」ってことで、前回と同じサイト様のソースを参考に実装してみました。

なので、検索バーをサイドバー(ウイジェット)からは削除しました。

そうなるといままでシングルページでしか表示させていなかったソーシャルバーを、トップページなどのシングルページ以外でも表示しないとねってことで、そのあたりも変更しています。

トップページなどでは、”ツイッターのフォロー”と”facebookのいいね!”ボタンと検索バーにしました。

HTML

トップページなど用の”ツイッターのフォロー”と”facebookのいいね!”ボタンは、social.php同様、follow.php検索バーは、g-search.phpという別ファイルにして、テンプレートを呼び出すようにします。

シングルページでは、social.phpとg-search.phpを、その他のページではfollow.phpとg-search.phpを呼び込みます。

CSS

前回は無かった「div#header-inner」 が増えてます。

あとは、モバイルで画面が小さくなった時用のCSSをご自身の環境で要調整。

参考サイト

[wordpress][Stinger2]画面最上部に固定されたメニューバーの作り方

後記

実は、social.phpfollow.phpなどを別ファイルにしたのには理由があって、もちろん管理も楽だけど、他でも使い合まわしたいという目論見が。
近々、やってみたいのはサイト内のリンクを表示するときにsocial.phpを入れてみたいなと思ってます。
こんなやつ↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA