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

スポンサー

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

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

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

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

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

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

HTML

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

<?php if (is_single()): ?>
<div id="header-top">
<div id="header-inner">
<div id="header-sns">
<?php get_template_part( 'social' ); ?>
</div>
<?php get_template_part( 'g-search' ); ?>
</div>
</div>
<?php else: ?>
<div id="header-top">
<div id="header-inner">
<div id="header-sns">
<?php get_template_part( 'follow' ); ?>
</div>
<?php get_template_part( 'g-search' ); ?>
</div>
</div>
<?php endif; ?>

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

<?php if (is_single()): ?>
シングルページで表示
<?php else: ?>
その他のページで表示
<?php endif; ?>

CSS

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

/*------固定メニューバー-----*/
#header-top {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:10000;
    background: url(img/wrap_bg.png);
    }
#header-inner{
	max-width:1000px;
	margin:0 auto;
	}	
#header-sns {
	max-width:50%;
    font-size:25px;
    line-height:1.5;
	float:left;
	padding-left:10px;
	margin:5px 10px 3px auto;
	}
#header-inner #g-search{
	max-width:310px !important;
	float:right;
	margin:5px 10px 0px auto;
	}
#header-inner td.gsc-input{
	background:#fff;
	}
#header-sns ul {	
	overflow:hidden;
	}
#header-sns ul li{
    float:left;
    position: relative;
    margin:0 10px 0 5px;
    }
#header-sns ul li a {
    text-decoration: none;
    color: #a8a2a2;
    padding: 0 5px;
    }

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

@media screen and (max-width: 660px) {
#header-sns {
	max-width:60%;
}
#header-inner #g-search{
	max-width:35% !important;
}	
}

@media screen and (max-width: 600px) {
#header-sns {
	max-width:95%;
	float:none;
	margin:5px auto 3px;
}
#header-sns ul li{
    margin:0 5px;
}
#header-inner #g-search{
	max-width:95% !important;
	float:none;
	margin:5px auto 0px;
}	
#wrap {
	padding-top: 100px;
}
}

参考サイト

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

後記

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

スポンサー

ニュースレターを購読する

このフィールドは空白のままにしてください

更新情報をメールで受け取ることができます。

メールアドレス *

受信ボックスか迷惑メールフォルダを確認して購読手続きを完了してください。