Twenty Thirteen ナビゲーションメニューを固定
ナビゲーションメニューを固定にしてみました。下方にスクロールしても最上部に固定されるやつです。
スクリプト
以下のjsファイルを用意して下さい。
nav要素のidは、ソースもしくはheader.phpの<nav id="~">をみて確認して下さい。
// navbarfixedtop.js
<script type="text/javascript">
$(function () {
var nav = $('#navbar'); // nav要素のidを設定
var objDistance = nav.offset().top;
$(window).scroll(function() {
var myDistance = $(window).scrollTop();
if (myDistance > objDistance){
nav.addClass('navbar-fixed-top');
}
if (objDistance > myDistance){
nav.removeClass('navbar-fixed-top');
}
});
});
</script>
header.phpのhead内もしくはfooter.php(wp_footer()の前あたり)にそのまま追加するか、もしくはフックして読み込ませて下さい。
フックする場合
/子テーマディレクトリ/js/navbarfixedtop.jsと配置した例です。
(参考：独自のCSSやJSを読み込む)
// functions.php
add_action( 'wp_enqueue_scripts', 'navbarfixedtop');
function navbarfixedtop() {
wp_enqueue_script( 'navbarfixedtop', get_bloginfo('stylesheet_directory') . '/js/navbarfixedtop.js', array(), null, true);
}
スタイル
画面の最上部にAdmin bar(管理バー)を表示している場合は、admin-barもしくはlogged-inを利用してずらして下さい。
<style>
.navbar-fixed-top {
top: 0;
position: fixed;
z-index: 1030;
}
body.admin-bar .navbar-fixed-top {
top: 28px;
}
</style>
ちなみに、スクリプト内のnav要素のidさえ適切に設定すれば、テーマに関係なく使用できます。
関連記事
-
-
ソーシャルボタン設置 プラグイン
各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe
-
-
Google+ プラスワン(+1)ボタンの設置
Google+の+1ボタンの設置はプラグインを使用しなくても容易に実装できるようです。ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 プラスワン(+1)ボタンの設置コード 公式
-
-
「Contact Form 7」 メッセージの送信に失敗~
この修正はWordPress 3.5で行われているようです。(~3.4.2) Contact Form 7で以下のエラーメッセージが出る場合は、確認してみて下さい。 「メッセージの送信に失敗
-
-
Twenty Twelve カスタマイズ
何点かTwentyTwelveのカスタマイズについてご質問をいただきましたのでここでまとめてみます。 目次 子テーマのつくりかた 他記事へのリンク アーカイブタイトル("カテゴリー別アーカ
-
-
ブルー・オレンジ・ピンクと選べるテーマ「Bouquet」をカスタマイズ
プレビューはこちら ダウンロード 目次 ヘッダー画像の高さを変更 アイキャッチをアップロード h1タグがやたら多いので最適化 画像をレスポンシブ対応 フォント「Sorts Mill
-
-
投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点
TwentyTwelveが1.1から1.2にアップデートされたので、いくつか変更点を洗ってみました。 (*全てを網羅しているわけではありません) 全ての変更部分は、こちらに記載されています。
-
-
投稿タイトル(entry-title)を非表示にする
表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー
-
-
Pocketボタンの設置
日本のブログでは、4大SNS(Twitter, はてな, Facebook, Google+)に加えて最近では、Pocket(以前は、Read it later)もよく見かけますよね。追加してみました
-
-
Twenty Eleven カスタマイズ
目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更
-
-
Twenty Thirteen カスタマイズ
WordPress 3.6のデフォルトテーマである「Twenty thirteen」のカスタマイズをまとめて投稿します。 Twenty thirteenのカスタマイズネタがあまりないです。(それだけ
- PREV
- ハッシュ関数の選択とハッシュ化処理
- NEXT
- DELL純正マウスを求めて秋葉原へ
Comment
投稿者様
こちらの記事についてもう少し詳しく教えていただきたいです。
当方twenty thirteen 1.2のテーマにて記事のようにナビメニューを固定したいと考え、記事を参考に当サイトに反映させてみましたが、実装できておりません。（記事内容を反映させても変わらない）
１．header.phpの内にjavascriptのロジックを追加
２．nav要素のidを変更
３．.navbar-fixed-topの追加
以上の設定を行ないましたが、他になにか考えられる点などあるのでしょうか。
思い当たる点がありましたら、ご教授お願いしたいと思います。
コメントありがとうございます。
以下のコードで試してみ下さい。WordPressバンドルのjQuery用を使用する場合は、1行目と最終行が以下のようになります。(抜けていました、スイマセン)
<script type="text/javascript"> (function($) { var nav = $('#navbar'); // nav要素のidを設定 var objDistance = nav.offset().top; $(window).scroll(function() { var myDistance = $(window).scrollTop(); if (myDistance > objDistance){ nav.addClass('navbar-fixed-top'); } if (objDistance > myDistance){ nav.removeClass('navbar-fixed-top'); } }); })(jQuery); </script>以下のようにGoogleなど外部のjQueryライブラリを使用する場合は、投稿内のコードを採用して下さい。jQueryをCDNから読み込む
"２．nav要素のidを変更"については、Twenty Thirteenの場合は変更なしで上記コードのままでも問題ないかと思います。
kwski様
返信ありがとうございます。nav id要素はそのままで早速試してみましたが、現象は変わらずです。。。。当方サイトは外部のライブラリを使用せずの対応で行なっているため、特にjQueryの外部サイトは記述しておりません。
当方でもいろいろと試しながらやってみます。
投稿者様においても何か他に思い当たる点がありましたら、ご連絡いただければ幸いです。
kwski様
IEでデバックしスクリプトエラーを確認しましたので、続報としてご連絡します。
スクリプト内の
「var objDistance = nav.offset().top;」にて
エラー
「未定義または null 参照のプロパティ 'top' は取得できません」が
表示されてしまい、正常に動作できないようです。
当方にても追って確認していきます。
kwski 様
当方のサイトでの対応ですが、無事に正常に動作できました。
原因の詳細は不明ですが、コード内にjQueryを参照するよう記述したら正常に動作しました。（単純な原因でした）
wordpressのデフォルトではjQueryは参照してないようですね。
この度は親身になって対応していただき、感謝しております。
ありがとうございました。
WordPress | Twenty Thirteen ナビゲーションメニューを固定 | Think deeply, Do less, More effective http://bit.ly/1fSSSzM