Simplicityカスタマイズ!モバイル表示時に横スクロールできるグローバルメニューを設置する方法

Simplicityのスマートフォン表示では、メニューを表示するのにワンアクション必要です。そこでPC表示と同じようにヘッダー下にメニューを設置し、さらに横スクロールできるようにしてみました。

カスタマイズ方法

このような横スクロールができるメニューを設置します。

まずは子テーマのbefore-main.phpに以下を追記します。

<?php if ( wp_is_mobile() ) : ?>
 
<div id="mb-nume">
<span  class="cate"><a href='カテゴリー1のURL'>カテゴリー1</a></span>
<span  class="cate"><a href='カテゴリー2のURL'>カテゴリー2</a></span>
</div>

<?php else: ?>
<?php endif; ?>

“mb-menu”や”cate”等は好みで分かりやすい名前に変えて下さい。カテゴリーの数に合わせて1、2、3、と増やしていきます。もちろんカテゴリー以外のリンクでもOKです。

次に同じく子テーマのスタイルシート (style.css)に以下を記述します。

#mb-nume{
　　　display: flex;　
　　　display: -moz-flex;
　　　display: -o-flex;
　　　display: -webkit-flex;
　　　display: -ms-flex;
　　　overflow-x: scroll;
　　　flex-direction: row;
　　　-moz-flex-direction: row;
　　　-o-flex-direction: row;
　　　-webkit-flex-direction: row;
　　　-ms-flex-direction: row;
　　　display: -webkit-flex;
　　　width: 100%;
     text-align: center;

}

#mb-nume a{
 color: #fff;
 text-decoration: none;
 word-wrap: break-word;
}

#mb-nume .cate{
    background-color: rgba(6, 6, 6, 0.9);
    padding:5px;
    border-radius: 10px;
    min-width: 150px;
    max-width: 150px;
}

カテゴリー名が長く改行してしまい全体が縦長になる場合は、width:の値を大きくし、カテゴリー名を1行に収めることで対処できます。文字の大きさはfont-size、背景色はbackground-colorで好みのものに変更できます。私の場合は背景はあらかじめ用意していた画像を使用しています。

以上のカスタマイズで横スクロールができるメニューが設置できるはずです。Simplicityにはあらかじめbefore-main.phpというメインの上をカスタマイズできるファイルが用意されているので簡単に実装できました。見た目のインパクトのわりに簡単に実装できるので参考になれば幸いです。