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

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

関連記事

「タグクラウド」ウィジェット カスタマイズ

タグクラウドは、管理画面ではあまりカスタマイズできません。必要であれば、フィルターフックやプラグインを用いて表示設定や概観の変更を行うことができます。 目次 出力をカスタマイズ 各タグの

Twitterのツイートボタンの設置

Twitterのツイートボタンの設置はプラグインを使用しなくても容易に実装できるようです。 ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 Tweetボタンの設置コード 公式

no image

テーマ ブックマーク 2014

有料 技術系・ガジェットサイトテーマ 30 Blog & Magazine Style WordPress Themes for Tech & Gadget Sites

Twenty Twelve サイトタイトルをテキストから画像に置き換え

ページトップに表示されるサイトタイトルをデフォルトのテキストから画像に変更します。 あらかじめ、管理画面のメディアライブラリから画像をアップロードしているもしくは別の場所に保存しているそのファイルの

"コメントを残す" 削除・文言を変更する方法

コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹

jQueryをCDNから読み込む

WordPressではデフォルトでjQueryライブラリが同梱されています。この記事では、それをやめて、CDNから読み込み、使用する方法を解説します。 WordPress 3.6 3.9 4.0

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

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

画像マウスオーバーでキャプションを表示

メディアをアップロードした際に、「キャプション」項目にテキストを設定された画像を挿入した場合はキャプションショートコードが生成され、ページ内の各画像下にその設定したテキストが表示されます。 今回

no image

「固定ページ」ウィジェット カスタマイズ

「固定ページ」ウィジェットは、そのままではありますが、固定ページの一覧をウィジェットに表示してくれます。 カスタマイズは、管理画面よりいくつかできるようです。 目次 特定の(固定)ページ

no image

パーマリンク・スラッグなどURL カスタマイズ

管理画面からの設定 管理画面の「設定」→「パーマリンク設定」で以下の設定が可能です。 共通設定 色々なタグの組み合わせで、URLをカスタマイズできます。 パーマリンク設定の画面に利用可

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

@wJSnews へ返信する コメントをキャンセル

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

*

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

    PAGE TOP ↑