【WordPress】テーマ「LION MEDIA」のメニューを改善する

今回はWordPressテーマLion Mediaについてです。

LionMediaは2017年にリリースされた無料のワードプレステーマです。

そこらの有料テーマよりも高性能で使いやすいので非常に人気があります。このサイトもLionMediaで作られています。

が、ひとつだけ気に入らないことがある。

今回はそれを改善したので、備忘録として書いておきます。

スマホ表示のときのメニューが気に入らない

気に入らないのはスマホ表示のときのメニューです。

画像のように横並びに表示されます。

このサイトではメニューにカテゴリーを並べているのでこれでは幅が全然足りません。

さらに<>マークもないので、メニューが横にスライドできるのが分かりずらくなっています。

カスタマイズでは直せなさそうなので自分で直すことにします。

header.phpをカスタマイズ

メニューの閉じるボタンを追加するために子テーマのheader.phpに手を加えます。

header.phpが子テーマ内に無い場合は親テーマから子テーマ内にコピーしましょう。

　　　　　　　</ul>
　　　　　　　<button class="menuNavi-close">
　　　　　　　　　<span class="menuNavi-close-title">Close</span>
　　　　　　　</button>
　　　　　　</nav>
　　　　</div>
　　</div>
<!--/l-extra-->

これはheader.phpの一番最後の部分です。赤くなっている部分を追加しました。

style.cssをカスタマイズ

スタイルシートに書き加えていきます。

button.menuNavi-close {
    display:none;
}

@media only screen and (max-width: 767px){
    nav.globalNavi {
        position: absolute;
        background: linear-gradient(180deg, rgba(25,25,25,1), rgba(48,48,48,1));
        z-index: 99;
        width: 100%;
        padding: 5px 0 45px;
    }
        ul.globalNavi__list {
            width: 100% !important;
            padding: 0 !important;
        }
    .globalNavi__list .page_item, .globalNavi__list .menu-item {
        display: block;
        text-align: center;
        height: 30px;
        padding: 8px 0 0;
        border-left: none;
        position: relative;
    }
        .globalNavi__list .menu-item:after {
            content: "";
            width: 4%;
            height: 1px;
            position: absolute;
            bottom: 0;
            border-top: solid 1px #999;
            left: 48%;
        }
        .globalNavi__list .menu-item:last-child:after {
            border: none;
        }
    button.menuNavi-close {
        display: block;
        width: 100%;
        position: absolute;
        bottom: 0;
        height: 40px;
        background: #00989e;
        border: none;
        color: white;
        font-weight: bold;
    }
        span.menuNavi-close-title {
            position: relative;
            padding: 0 25px;
        }
            span.menuNavi-close-title:after,span.menuNavi-close-title:before{
                content: "";
                background: white;
                width: 18px;
                height: 4px;
                position: absolute;
                top: 6px;
                left: 0px;
            }
            span.menuNavi-close-title:before{
                transform: rotate(45deg);
            }
            span.menuNavi-close-title:after{
                transform: rotate(-45deg);
            }
}

これらをStyle.cssに追加します。

タブレットでは横並びでもいいと思ったんで、スマホのみの対応になります。

疑似要素のbeforeとafterで1本ずつ線を作り、Closeの横のバツを作りました。画像がいい場合はbackgroundで指定してください。

JQueryの追加

メニューを開いたり閉じたりする機能をJQueryで実装します。

外部ファイルに書いて読み込んでもいいですが、私は面倒なのでfooter.phpのbodyタグ直前に追加しました。

jQuery(function($){
  $(function(){
    var width = $(window).width();
    $(".menuNavi-close,#menuNavi__search").click(function(){
      $("#extra__menu").addClass("l-extraNone").removeClass("l-extra");
      $("#extra__search").addClass("l-extra").removeClass("l-extraNone");
      $("#menuNavi__search").addClass("menuNavi__link-current");
      $("#menuNavi__menu").removeClass("menuNavi__link-current");
    });
    $("#menuNavi__menu").click(function(){
      $("#extra__menu").addClass("l-extra").removeClass("l-extraNone");
      if(width <= 767){
          $("#extra__search").addClass("l-extra").removeClass("l-extraNone");
      }
    });
    
  });
});

スマホ表示の時は検索バーを常に表示させるようにしました。上部の虫メガネアイコンとメニュー下部のCloseボタンでメニューを閉じられるようになっています。

JQuery(function($){}で囲んでいるのは、テーマ内で「$」が定義されているみたいで、そのままだとエラーが出たので再定義しています。

さいごに

これが完成版です。とりあえずいい感じですかね。

LION MEDIAを使っている人は参考にしてみてください。