WPテーマ「simplicity2」でグローバルナビを上部に固定するカスタマイズ

スポンサーリンク

訪問者の回遊率を高める為には、内部リンクを効果的な位置に設置することが大切です。文章中に内部リンクを貼ったり、サイドバーにメニューを表示させたりします。
もうひとつ方法があって、グローバルナビを常に上部に表示させる方法があります。

グローバルナビを設置している場合は、通常はヘッダー下部にしているケースが多いと思います。
ページ下へスクロールしていくとヘッダーは見えなくなりますが、グローバルナビ部分をページ上部に固定させます。

  1. header.phpとcssの2ヶ所だけの変更で簡単にナビを固定化
    1. 「header-insert.php」にナビを固定させるコードを追加
    2. 「style.css」にナビを固定させるコードを追加
  2. おわりに

header.phpとcssの2ヶ所だけの変更で簡単にナビを固定化

当サイトではすでに変更しましたが、とても簡単です。

方法はこちらのサイトを参考にさせてもらったのですが
》》 MK2-BLOG～西宮のWEBデザイナー日記

当サイトのテーマは「simplicity2」なので、simplicity2の場合の方法を記録しておきます。

「simplicity2」には子テーマが用意されているので、子テーマのフォルダ「simplicity2-child」にある「header-insert.php」と「style.css」を変更し、サーバーにアップロードします。

もし子テーマを使っていない場合には、子テーマをインストールしてから行って下さい。＊決して「simplicity2」の内容は変更しないようにしましょう。

「header-insert.php」にナビを固定させるコードを追加

「simplicity2-child」内の「header-insert.php」はディフォルトは以下のコードです。

<?php
//ヘッダー部分にタグを挿入したいときは、このテンプレート挿入（ヘッダーに挿入する解析タグなど）
//子テーマのカスタマイズ部分を最小限に抑えたい場合に有効なテンプレートとなります。
//例：<script type="text/javascript">解析コード</script>
?>
<?php if (!is_user_logged_in()) :
//ログインユーザーをカウントしたくない場合は
//↓ここに挿入?>

<?php endif; ?>
<?php //ログインユーザーも含めてカウントする場合は以下に挿入 ?>

ここに次のコードを追記します。

<?php //ナビを固定 ?>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
    var nav = $('#navi'),
    offset = nav.offset();
    $(window).scroll(function () {
      if($(window).scrollTop() > offset.top) {
        nav.addClass('fixed');
      } else {
        nav.removeClass('fixed');
      }
    });
});
</script>

追記する場所は分かりやすく一番下にするといいと思います。

参考にしたサイトのコードで

var nav = $('.navi'),

の部分は、「simplicity2」はID属性なので

var nav = $('#navi'),

とします。

「header-insert.php」の変更はここだけです。

参考サイトはHTMLサイトの場合で書いていますので、<body>以降の部分は必要ありません。

「style.css」にナビを固定させるコードを追加

「simplicity2-child」内の「style.css」はディフォルトは以下のコードです。

@charset "UTF-8";

/*!
Theme Name: Simplicity2 child
Template:   simplicity2
Version:    20161002
*/

/* Simplicity子テーマ用のスタイルを書く */

ここに以下のコードを追記します。

/*ナビを固定*/
.fixed {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10000;
}

これでおしまいです。

参考サイトではグローバルナビのスタイルを指定するコードも含めて記述されていますが、「simplicity2」では親テーマの「style.css」でグローバルナビのスタイルを指定しているので、上に書いた部分だけの追記でOKです。

おわりに

変更した二つのファイルをFTPクライアントでアップロードすると、グローバルナビが下の画像のように上部に固定されるようになります。

グローバルナビ固定

今回は「simplicity2」の場合のカスタマイズでしたが、他のテーマでもあまり変わらないと思います。

HTMLサイトは各ページの<head>内の追記と、CSSファイルの追記でグローバルナビの固定ができます。

「simplicity2」を使ってみたいという方は、Simplicityからダウンロードして下さい。

コメント

ホーム
トップ