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

Twenty Thirteen カスタマイズ Twenty Thirteen テーマ用フォント "Source Sans Pro" / "Bitter"の使用を止 Twenty Fourteen クレジットを非表示・変更方法 Twenty Fifteen カスタマイズ Twenty Twelve "コメントをどうぞ"を消す Twenty Twelve "Open Sans"の使用を止 Twenty Twelve "Proudly powered by WordPress"をCopyrightに変更 Twenty Fourteenカスタマイズ用プラグインと派生テーマ
  • このエントリーをはてなブックマークに追加

関連記事

Twenty Fourteen カスタマイズ

「Twenty Fourteen」はWordPress 3.8のデフォルトテーマです。TwentyThirteenから彩りもガラッとかわってますね。個人的には、すごく好きなデザイン。 Twent

Twenty Fifteen カスタマイズ

WordPress 4.1のデフォルトテーマである「Twenty Fifteen」は三世代前の「Twenty Twelve」に似たテーマで非常にシンプルなテーマにまとまっていますね。カスタマイズをまと

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

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

no image

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

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

多言語化プラグイン「qTranslate」

ブログを多言語化しようと思い、プラグイン「qTranslate」を導入してみました。 General Settingsで使用する言語を選択する ★使用する言語を選択 管理画面「設定」⇒「Lang

ブルー・オレンジ・ピンクと選べるテーマ「Bouquet」をカスタマイズ

プレビューはこちら ダウンロード 目次 ヘッダー画像の高さを変更 アイキャッチをアップロード h1タグがやたら多いので最適化 画像をレスポンシブ対応 フォント「Sorts Mill

コメントフォーム・リストのカスタマイズ

コメント投稿部分は、基本的にはどのテーマでも同じフォームを出力してテーマのstyle.cssで外観を変えています。コメントフォーム欄をカスタマイズするには、プラグインもしくはフックを用いてカスタマイズ

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

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

no image

投稿タイトル(entry-title)を非表示にする

表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー

翻訳ファイルの子テーマ化

子テーマでfunctions.phpなどを変更していくと翻訳すべき項目にぶつかっていくと思います。例を挙げると_()の部分で、Wordpressが翻訳を行ってくれる部分です。 個人的には、日本語

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 ↑