Simplicity のモバイルメニューを変更する

当方と同じ Simplicity を使っている方々から

モバイルで見た時のメニューを当ブログと同じにしたいけど、
どーすればいいの？

って、問い合わせが、かれこれ4件・・・orz

1件1件、メールで答えるのも、なんなので、
記事に書いておくことにする。

Simplicity モバイルメニューのビフォーアフター

とどのつまり、何をしたいのかって言うと、
Simplicity をモバイルで見た時のメニューのボタン

これを

こーしたいらしい

変更方法

やり方

但し書き

  • 子テーマの使用を推奨
  • とりあえず、この記事を書いている Simplicity 1.5.5 までは対応可

header.php から以下を削除

<?php get_template_part('button-menu'); //モバイルメニューボタンの呼び出し?>

navi.php に以下の5～7行目を追加

<!-- Navigation -->
<nav>
<div id="navi">
  <div id="navi-in">
    <?php if ( is_navi_visible() ): ?>
    <div class="mobile-nav"><i class="fa fa-list fa-fw"></i> メニュー</div>
    <?php endif; ?>
    <?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?>
  </div><!-- /#navi-in -->
</div><!-- /#navi -->
</nav>
<!-- /Navigation -->

javascript.js に以下を追加

jQuery(document).ready(function() {
    jQuery('.mobile-nav').click(function() {
        header_menu = jQuery('#navi ul');
            if (header_menu.css('display') == 'none') {
                header_menu.slideDown();
            } else {
            header_menu.slideUp();
        };
    });
});

style.css に以下を追加

#navi-in .mobile-nav { display: none; }
@media screen and (max-width: 1150px){
    #navi-in .mobile-nav {
        display: block;
        padding: 8px 20px;
        color: #444;
        background-color: #efefef;
        cursor: pointer;
    }
    #navi-in .mobile-nav .fa-list {
        color: #aaa;
    }
    #navi-in .mobile-nav:hover {
        background-color: #e0e0e0;
    }
}

以上でござる。

WordPress

Posted by るな