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さえ適切に設定すれば、テーマに関係なく使用できます。
関連記事
-
-
ウィジェット関連のカスタマイズ・プラグイン
リンクマネージャー WordPress 3.5バージョンアップ以降にリンクマネージャーを追加するには以下のフィルタを設定もしくはプラグインをインストールして下さい。 プラグイン Link M
-
-
Twitterのツイートボタンの設置
Twitterのツイートボタンの設置はプラグインを使用しなくても容易に実装できるようです。 ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 Tweetボタンの設置コード 公式
-
-
Twenty Fourteen "コメントをどうぞ"の非表示と変更方法
Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場
-
-
投稿記事から「(ログイン)ユーザー名」がバレるのを防ぐ
ここ最近、アカウント乗っ取りやセキュリティ事故関連のニュースが相次いでいますが、WordPressで制作されたサイトも標的に会っているようです。一般的な手法としては「ブルートフォースアタック」という手
-
-
投稿タイトル(entry-title)を非表示にする
表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー
-
-
ie.cssの子テーマ化など Twenty Twelve 1.1での変更点
TwentyTwelveが1.0から1.1にアップデートされたので、勉強もかねていくつか変更点を洗ってみました。 ie.cssを外出し pubdateの削除 rel="generator"
-
-
「編集(Edit)」リンクの非表示方法
ログインした状態で投稿ページを開くと投稿内や各コメントに各編集ページへリンクしてくれる「編集」リンクが表示されます。(繰り返し言いますが、自サイトにログインしているユーザにしか見えません。) こ
-
-
ソーシャルボタン設置 プラグイン
各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe
-
-
アバターサイズの変更など Twenty Twelve 1.3での変更点
Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel
-
-
コメント欄停止・コメント削除
WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止
- 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