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さえ適切に設定すれば、テーマに関係なく使用できます。
関連記事
-
-
Pocketボタンの設置
日本のブログでは、4大SNS(Twitter, はてな, Facebook, Google+)に加えて最近では、Pocket(以前は、Read it later)もよく見かけますよね。追加してみました
-
-
アバターサイズの変更など Twenty Twelve 1.3での変更点
Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel
-
-
"コメントを残す" 削除・文言を変更する方法
コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹
-
-
多言語化プラグイン「qTranslate」
ブログを多言語化しようと思い、プラグイン「qTranslate」を導入してみました。 General Settingsで使用する言語を選択する ★使用する言語を選択 管理画面「設定」⇒「Lang
-
-
Twenty Fourteen "コメントをどうぞ"の非表示と変更方法
Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場
-
-
管理画面のCSSをカスタマイズ
管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな
-
-
jQueryをCDNから読み込む
WordPressではデフォルトでjQueryライブラリが同梱されています。この記事では、それをやめて、CDNから読み込み、使用する方法を解説します。 WordPress 3.6 3.9 4.0
-
-
「続きを読む」(moreタグ)をカスタマイズ
WordPressではほとんどのテーマでは、複数の投稿を表示するアーカイブページ(カテゴリー別、タグ別、年月日別、作成者別など)ではmoreタグ(<!--more-->)を挿入することで、
-
-
投稿記事から「(ログイン)ユーザー名」がバレるのを防ぐ
ここ最近、アカウント乗っ取りやセキュリティ事故関連のニュースが相次いでいますが、WordPressで制作されたサイトも標的に会っているようです。一般的な手法としては「ブルートフォースアタック」という手
-
-
スライダー・ギャラリー プラグイン
WordPressにギャラリーが実装できるプラグインをまとめてみました。 順番はオススメ順です。 Simple Responsive Slider #ショートコード #テンプレート #ウ
- 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