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さえ適切に設定すれば、テーマに関係なく使用できます。

Related posts

  • このエントリーをはてなブックマークに追加

関連記事

新年早々やらかした

あけましておめでとうございます。 タイトルどおり、新年早々やらかしてしまいましたのでご報告まで。どうやらかしたかというと、確認用サイトとこのブログを間違えてしまいWordpress 3.5にアップグ

Twenty Twelve "Proudly powered by WordPress"をCopyrightに変更

標準でページの最下部に表示される"Proudly ~"を変更します。 子テーマフォルダにfooter.phpをコピーし、以下のように編集を行ってください。リンクを外して、表示部分を書き換えるだけです

コメント欄停止・コメント削除

WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止

no image

ソーシャルボタン設置 プラグイン

各種メジャーなソーシャルメディアボタンを設置できるプラグイン WP Social Bookmarking Light 国産プラグイン。国産ゆえ、はてなボタンの設置も可能 ダウンロード Twe

「All in One SEO Pack」を代替するための準備

「All in One SEO Pack」は、SEO対策に必要な基本的な設定を行ってくれるプラグインです。とある事情で、無効化することになったので代替を行いました。特に問題があるわけではなく、特殊なこ

条件を付けて訪問時に開くポップアップを実装できる「WordPress Popup」

「WordPress Popup」は、ユーザの訪問時にポップアップを開くように実装できるプラグインです。それぞれ条件によって開くかどうかを設定することができます。 ダウンロード / サンプル イン

Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」

Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。 プラグインダウンロード Google

titleタグ(wp_title) カスタマイズ

SEO対策を行う際に、titleタグは重要な要素だと言われています。 「サイトのタイトル」、「キャッチフレーズ」(site_description)、「カテゴリー名」など色々と組み合わせてみることが

開発やテストに便利なプラグイン

開発やカスタマイズに使えそうなプラグインを集めてみました。 テーマのカスタマイズには、使用中のテンプレートファイルなどを表示してくれると便利ですね。個人的には、テーマ開発の際に、実行しているSQ

プラグイン関連のJSやCSSの読み込みをフィルター

プラグインをインストールしていくとheadやfooter内がCSSやJSで溢れていきます。できるだけ、自分で書けるものに関しては、余計なコールが少なくなるので可能な場合はそうしていますが(そうもいかず

Comment

  1. 投稿者様
    こちらの記事についてもう少し詳しく教えていただきたいです。

    当方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は参照してないようですね。
      この度は親身になって対応していただき、感謝しております。
      ありがとうございました。

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA

*

PREV
ハッシュ関数の選択とハッシュ化処理
NEXT
DELL純正マウスを求めて秋葉原へ

新規投稿

PAGE TOP ↑