XeoryExtensionのヘッダーメニューを固定にする方法!

      2017/04/20

XeoryExtensionのスマホメニューを右上にするカスタマイズ。の記事で、ヘッダーメニューを固定(追尾式)にする方法について教えて欲しいというコメントがありました。

カスタマイズ自体は難しくないのですが、どこに何のコードを追加すればいいのか、他にも気になっている方がいると思うので、そのカスタマイズ方法についてご紹介します。

(コードを見たところ、XeoryBaseでも同じようなカスタマイズが試せそうです)

CAUTION

バックアップを取ってからお試しください!

スタイルシートにコピペでOK!固定ヘッダーにする方法!

まず、単純にヘッダーを固定にする方法ですが、下記のコードをスタイルシート(style.css)にコピペするだけです。子テーマのスタイルシートでもOKです。

#header {
 position: fixed;
 left: 0;
 right: 0;
 z-index: 999;
}
#main_visual,
.breadcrumb-area {
 padding-top: 92px;
}
POINT

スマホメニューがデフォルトの状態(タイトルやロゴの下にある状態)であれば、padding-topの値を適宜変更してください:D

POINT2

ヘッダーを固定にすると、その下の要素がヘッダーの高さ分、上にズレるので、ヘッダーに隠れてしまわないようにpadding-topで余白を作ればOKです。

上記のコードでは、メインビジュアル(トップページの場合)とパンくずリスト(その他の記事の場合)の上に余白を作ることで対応しています。

スマホ表示時のみ、固定ヘッダーにする

上記の方法だと、パソコンで表示する時も固定ヘッダーになりますが、スマホ表示時だけ固定ヘッダーにする方法もあります。

下記のコード(おそらく、146行目)を探し、

@media screen and (max-width: 767px) {
 /* phone */
 .wrap,
 .one-column #content .wrap {
 margin-left: 12px;
 margin-right: 12px;
 }

 /* phone end */
}

この下に先ほどのコードをコピペするだけです。追加後はこのようになります。

@media screen and (max-width: 767px) {
 /* phone */
.wrap,
.one-column #content .wrap {
 margin-left: 12px;
 margin-right: 12px;
}
#header {
 position: fixed;
 left: 0;
 right: 0;
 z-index: 999;
}
#main_visual,
.breadcrumb-area {
 padding-top: 92px;
}

 /* phone end */
}

スクロール量に合わせてヘッダーを表示させる方法

また、「最初はヘッダーを非表示にして、後から表示させる方法」についても合わせてご紹介します。

lib→jsの中に、「jquery.pagetop.js」というファイルがあるので、そこに下記のコードを追加します。

/*--------------------------------
 ヘッダー表示・非表示切り替え
--------------------------------*/
$(function() {
 var header = $('header');
 header.hide();
 $(window).scroll(function() {
 if ($(window).scrollTop() > header.height()) {
 header.show();
 } else {
 header.hide();
 }
 });
});

追加後は、このようになります。

;(function ( $, window, document, undefined ) {

$(function(){
 $(window).bind('scroll', function(){
 if( $(this).scrollTop() > 150 ){
 $('.pagetop').fadeIn('fadeIn');
 } else {
 $('.pagetop').fadeOut();
 }
 });
 $('a[href^="#"]').click(function(){
 var speed = 500;
 var href= $(this).attr("href");
 var target = $(href == "#" || href == "" ? 'html' : href);
 var position = target.offset().top;
 $("html, body").animate({scrollTop:position}, speed, "swing");
 return false;
 });
});

/*--------------------------------
 ヘッダー表示・非表示切り替え
--------------------------------*/
$(function() {
 var header = $('header');
 header.hide();
 $(window).scroll(function() {
 if ($(window).scrollTop() > header.height()) {
 header.show();
 } else {
 header.hide();
 }
 });
});

})(jQuery, window, document);

本来は、〇〇.jsというファイルを作って読み込むのですが、面倒だと思うので、今回のように既存のファイルに追加してください。

まとめ

以上、XeoryExtensionのヘッダーメニューを固定にする方法でした。デザインなどは、適宜微調整していただければと思います。

ご参考までに!(`・ω・´)ゞ

カテゴリー WordPressカスタマイズ

注目 【dマガジン】初回31日間無料で180誌以上の雑誌が読み放題!

注目 初めての就職・転職で失敗しないためのおすすめサービス一覧!

注目 失敗なし!au・docomoからmineo(マイネオ)へのMNP方法!

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人:

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!

コメント

  1. まさくん より:

    わざわざ記事の作成ありがとうございます。早速試してみました。何もカスタマイズしてない状態から始めました。
    レイアウトが崩れて、「WordPress4.5でXeoryのメニューが開かない不具合の解決方法。」に記載の現象(スペースがなくなる)が起こります。
    WordPress4.5でXeoryのメニューが開かない不具合の解決方法。の記事のように前のバージョンにJsを古いバージョンに戻したりしましたが、うまくいきません。
    ワードプレスのバージョンもxeoryのバージョンも最新です。どうにかなりませんでしょうか??お力添えをお願いいたします。

    • シェフ より:

      まず、WordPress、XeoryExtensionともに最新版でOKです。JSファイルも古いものに戻さなくてOKです。(というか、古いものに戻した方がエラーの原因になります)
      その上で、何のカスタマイズをしていないExtensionのスタイルシート(style.css)に冒頭で紹介しているコードを追加すると、ヘッダーが追尾式になり、メインビジュアル部分の上部に余白ができるはずです。
      おそらく、メインビジュアル部分の表示が崩れているのは、高さの指定がされていないからではないかと思います。
      Extensionの最新版では、この不具合が修正されていて、同じカスタマイズをしている僕の管理サイトで不具合が発生していないので、何とも言えないのが本音なんですが、念のため、一度スーパーリロード(強制再読み込み)をしてみるのも良いかもしれません。
      意外と、ファイル自体は問題ないのにキャッシュが悪さをしていた…なんてことがありますので^^;

  2. まさくん より:

    回答ありがとうございます!
    まっさらの何もカスタマイズしていない状態の子テーマのスタイルシートに冒頭のコードを入れました。
    追尾式にはなりますが、メインビジュアルの上部に余白はできず、やはりズレたままでした。
    スーパーリロードや、キャッシュクリアを試してみましたが、変化はありませんでした。

    • シェフ より:

      サイト拝見しました。コード微調整済みなので、もう一度、冒頭のコードコピペしていただけますか?^_^
      メインビジュアルの上部には余白があったので、おそらく、「メインコンテンツ=メインビジュアル」と認識されているような気がします。
      ※Xeoryの「メインビジュアル」はサイトのトップページのみ表示される部分で、その他のページ(普通の記事、固定ページ)ではそもそも表示されないページです。

  3. まさくん より:

    トップページおよび記事ページで確認したところ、隠れていた部分がみえるようになりました!ありがとうございます!
    ただ、メインビジュアルに画像挿入(バックグラウンドにて)すると、ヘッダー部分に隠れてしまいます。なぜでしょうか?
    ちなみにあるサイトを参考にさせていただいたときのコードはこれです。
    画像を固定して、パララックス効果というものも採用しています。(画像を固定するコードを消しても画像が上にずれてしまいます。)
    長々と大変恐縮ですが、ご教授お願いいたします。上記のコードを入力した状態でサイトを置いています。よろしくお願いいたします。

    • シェフ より:

      いえいえ〜^_^
      確認しましたが、background-position: center;が原因ですね。
      削除するか、任意の値を指定すればOKです。見た目によっぽどこだわりがなければ、削除でいいと思います。
      (値を指定する場合は検索してみてください)

  4. まさくん より:

    Centerを任意の値で指定したらできました!
    携帯の場合はどうしてもパララックスが出来ないため諦めました笑
    ありがとうございました!また色々参考にさせいただきます!

  5. かざまっくす より:

    とても分かりやすい解説をありがとうございます。
    今回の記事とは別の質問なのです。
    XeoryExtensionはスマホですと”ハンバーガーメニュー”で表示されますが、
    こちらを「MENU」という文字に置き換える、あるいは横とか下に文字を加えることはできるでしょうか?

    色々なサイトを見てみたのですが、XeoryExtensionとは違うテーマだったりしてわからずじまいな状況です。

    もしわかりましたら、どうぞよろしくお願いいたします。

コメントを残す

CAPTCHA