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さえ適切に設定すれば、テーマに関係なく使用できます。
関連記事
-
-
翻訳ファイルの子テーマ化
子テーマでfunctions.phpなどを変更していくと翻訳すべき項目にぶつかっていくと思います。例を挙げると_()の部分で、Wordpressが翻訳を行ってくれる部分です。 個人的には、日本語
-
-
「最近の投稿」ウィジェット カスタマイズ
目次 ウィジェットを削除 標準の設定 特定のカテゴリーに属する投稿を除外 カスタマイズ プラグイン 「最近の投稿」ウィジェットを削除 「最近の投稿」ウィジェット
-
-
jQueryをCDNから読み込む
WordPressではデフォルトでjQueryライブラリが同梱されています。この記事では、それをやめて、CDNから読み込み、使用する方法を解説します。 WordPress 3.6 3.9 4.0
-
-
Twenty Twelve "Open Sans"の使用を止
「Twenty Twelve」では、"スペシャルフォント"ということで「Open sans」を特別にロードしているようです。今のところ使うつもりがないのでリンクしないようにしました(必要になれば戻せば
-
-
Twenty Twelve 投稿者情報を表示/非表示に
TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「
-
-
Twenty Twelve "コメントをどうぞ"を消す
今回は「Twenty Twelve」で標準で投稿タイトル下に出力されるリンク"コメントをどうぞ"｜"Leave a reply"を非表示にする方法を。(コメントやピンバックが1件の場合は"1件のフィー
-
-
テーマ ブックマーク 2014
有料 技術系・ガジェットサイトテーマ 30 Blog & Magazine Style WordPress Themes for Tech & Gadget Sites
-
-
RSS/Atomフィード カスタマイズ
RSSフィードのカスタマイズ 標準で出力されるフィード WordPressの各種ページで出力されるフィードは以下になると思います。 投稿：投稿のフィード @全てのページ サイトのコメント：
-
-
「編集(Edit)」リンクの非表示方法
ログインした状態で投稿ページを開くと投稿内や各コメントに各編集ページへリンクしてくれる「編集」リンクが表示されます。(繰り返し言いますが、自サイトにログインしているユーザにしか見えません。) こ
-
-
新年早々やらかした
あけましておめでとうございます。 タイトルどおり、新年早々やらかしてしまいましたのでご報告まで。どうやらかしたかというと、確認用サイトとこのブログを間違えてしまいWordpress 3.5にアップグ
- 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