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

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

関連記事

Twenty Eleven カスタマイズ

目次 author-info 消す 作成者(投稿者)を消す 投稿者情報を表示しない proudly powered by wordpressのリンクをコピーライトに変更

no image

Pocketボタンの設置

日本のブログでは、4大SNS(Twitter, はてな, Facebook, Google+)に加えて最近では、Pocket(以前は、Read it later)もよく見かけますよね。追加してみました

テーマ ブックマーク 2013

2012 フリーテーマ トップ 20 Top 20 Free WordPress Themes of 2012 http://ow.ly/wMGjZ ハイクオリティフリーテーマ 3月 20 Top

投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点

TwentyTwelveが1.1から1.2にアップデートされたので、いくつか変更点を洗ってみました。 (*全てを網羅しているわけではありません) 全ての変更部分は、こちらに記載されています。

Twenty Fifteen カスタマイズ

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

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

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

Twenty Fourteen 「投稿者」を非表示

TwentyFourteenでは、シングルページやアーカイブページにそれぞれ「投稿者」が表示されます。投稿者を非表示にさせる方法を投稿してみます。表示させる場合は、以下を参考に表示名などを変更してみて

Tumblrの投稿をウィジェットに表示できる「Tumblr Widget」

このブログでは、サイドバーウィジェットに「Tumblr」に投稿したブックマーク一覧を表示させています。プラグインは「Tumblr Widget」を使用しています。ダウンロード 「This plugi

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

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

「カテゴリー」ウィジェット カスタマイズ

「カテゴリー」ウィジェットは、管理画面ではあまりカスタマイズできません。必要であれば、フックやプラグインを用いて表示設定などの変更を行うことができます。 目次 「カテゴリー」ウィジェットの追加

Comment

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

    当方twenty thirteen 1.2のテーマにて記事のようにナビメニューを固定したいと考え、記事を参考に当サイトに反映させてみましたが、実装できておりません。(記事内容を反映させても変わらない)

    1.header.phpの内にjavascriptのロジックを追加
    2.nav要素のidを変更
    3..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から読み込む

      "2.nav要素のidを変更"については、Twenty Thirteenの場合は変更なしで上記コードのままでも問題ないかと思います。

    • kwski様
      返信ありがとうございます。nav id要素はそのままで早速試してみましたが、現象は変わらずです。。。。当方サイトは外部のライブラリを使用せずの対応で行なっているため、特にjQueryの外部サイトは記述しておりません。
      当方でもいろいろと試しながらやってみます。
      投稿者様においても何か他に思い当たる点がありましたら、ご連絡いただければ幸いです。

    • kwski様

      IEでデバックしスクリプトエラーを確認しましたので、続報としてご連絡します。
      スクリプト内の
      「var objDistance = nav.offset().top;」にて
      エラー
      「未定義または null 参照のプロパティ 'top' は取得できません」が
      表示されてしまい、正常に動作できないようです。

      当方にても追って確認していきます。

    • kwski 様
      当方のサイトでの対応ですが、無事に正常に動作できました。
      原因の詳細は不明ですが、コード内にjQueryを参照するよう記述したら正常に動作しました。(単純な原因でした)
      wordpressのデフォルトではjQueryは参照してないようですね。
      この度は親身になって対応していただき、感謝しております。
      ありがとうございました。

Message

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑