【Simplicity2】スマホ表示にミドルメニューを設置するカスタマイズ(コピペでOK)

ども、ゴマメです。

Simplicity2のスマホ表示のグローバルメニューは、クリックしないと展開されません。

慣れていない人は、ここにメニューがあることにさえ気づかないかもしれません。

最初からカテゴリーの一覧をみることができれば、回遊性やPVの向上が見込めます。

そこで今回は、最近他テーマでもはやっている「ミドルメニュー」をSimplicity2に設置する方法を紹介します。

こんな感じになります

MEMO
今回のカスタマイズは、くまぺクリップさんのサイトを参考にさせて頂いて、Simplicity用にカスタマイズしています。

Simplicity2にスマホ用のミドルメニューを作る

まずは、メニューの追加をします

Simplicity2の子テーマ(Simplicity2 child)のテーマのための関数(function.php)を開きます。

青四角の部分に以下のCSSをコピペします。

  1. /* カスタムメニューを追加 */
  2. register_nav_menus( array(
  3.     'sp_middle_menu' => 'スマートフォン用ミドルメニュー'
  4. ) );

メニューを開くと、「スマートホン用ミドルメニュー」が追加されているのがわかります。

スマートフォン用ミドルメニューを設定します

メニュー名に好きな名前を付けて、カテゴリーから表示したいメニューを選びます。

MEMO
スマホ表示では、表示範囲に制限があるので、ラベルは適度に短くすることをおすすめします。

メニュー設定は、□スマートフォン用ミドルメニューにチェックを入れます。⇒設定保存をします。

テーマの位置:スマートフォン用ミドルメニューは「スマホミドル」を選びます⇒設定保存をします。

ヘッダーにグローバルメニュー(ミドルメニュー)を挿入します

Simplicityの本テーマの方のテーマヘッダー「header.php」を編集します。

MEMO
本テーマを修正するので事前にバックアップをとっておくことをお勧めします。

テーマヘッダー(header.php)を編集します。

Header.phpの<!–本体部分–>の上部(青のラインの範囲)に、下記のCSSをコピペします。

  1. <?php if(is_mobile()):?>
  2. <div class="sp-middle-menu">
  3. <?php wp_nav_menu(array(
  4.      'container' => 'nav',
  5.      'container_class' => 'cf sp-middle',
  6.      'menu' => __( 'スマートフォン用ミドルメニュー' ),
  7.      'menu_class' => 'middle-menu',
  8.      'theme_location' => 'sp_middle_menu',
  9.      'before' => '',
  10.      'after' => '',
  11.      'link_before' => '',
  12.      'link_after' => '',
  13.      'depth' => 0,
  14.      'fallback_cb' => ''
  15. )); ?>
  16. </div>
  17. <?php endif;?>

ヘッダーの下にこのようなメニューが表示されます。

グローバルメニュー(ミドルメニュー)のデザインを調整します

Simplicity2の子テーマを編集します。

「responsive.css」を開きます。

青線より下の部分に以下のCSSをコピペします。

  1. /* スマホミドルメニューCSS */
  2. .sp-middle-menu {
  3.     background: #f68655; /*メニューの背景色*/
  4.     border-top: 1px solid #ffa44d; /*枠線の色*/
  5.     border-left: 1px solid #ffa44d; /*枠線の色*/
  6. }
  7. .sp-middle-menu .middle-menu li a {
  8.     font-size: 70%; /*折り返す時は文字サイズを調節*/
  9.     width: 33.3333%; /*50%で2等分 33.3333%で3等分*/
  10.     border-bottom: 1px solid #ffa44d; /*枠線の色*/
  11.     border-right: 1px solid #ffa44d; /*枠線の色*/
  12.     list-style: none;
  13.     text-align: center;
  14.     color: #ffffff; /*文字の色*/
  15.     float: left;
  16.     display: block;
  17.     padding: 10px;
  18.     box-sizing: border-box;
  19.     text-decoration: none;
  20. }
  21. .sp-middle-menu .middle-menu {
  22.     margin: 0px;
  23.     list-style: none;
  24.     margin-left: -43px;
  25.     font-size: 22px;
  26. }
  27. #h-top {
  28.         background-color: #f68655;/*ヘッダーの背景色*/
  29.         min-height: 50px;
  30. }
  31. #site-title a {
  32.     text-decoration: none;
  33.     color: #fff;/*サイトタイトルの色*/
  34.     font-size: 30px;/*サイトタイトル文字サイズ*/
  35.     font-weight: normal;/*サイトタイトル文字の太さ*/
  36. }
  37. .sp-middle-menu .middle-menu li a {
  38.     border-bottom: 1px solid #ffffff;
  39.     border-right: 1px solid #ffffff;
  40. }
  41. .middle-menu li a {
  42.     border-bottom: 1px solid #ffffff;
  43.     border-right: 1px solid #ffffff;
  44.     }
  45. .sp-middle-menu {
  46.     background: #f68655;
  47.     border-top: 1px solid #ffffff;
  48.     border-bottom: 1px solid #ffffff;
  49. }
  50. /* スマホミドルメニューCSS終わり */

このようなデザインになります。

Simplicity2のカスタマイズ例

文字サイズの変更

カテゴリ名が長いと折り返って、デザインが崩れます。

フォントサイズを小さくすることで、折り返しを防ぐことができます。

メニューの段数の変更

ここまで紹介したCSSだと横3段ですが、変更をすることができます。

widthの%を変更します。widthを33.333% ⇒ 50%にすると、2段になります。

goma.meと同じ色にするには

今ご覧になっている当サイト(goma.me)と同じ色にするのであれば、メニューの背景色とヘッダーの背景色を

「#1e73be」に変更しください。

 

Simplicity2のスマホ表示にミドルメニューを設置するメリット

このグローバルメニューは、常に一番上にあるので訪れた人の目に必ず入ります。

クリックの必要がなく、視認性も抜群です。

同じジャンルの他のページへの回遊性も向上しますので、ぜひお試しください。

 

最後まで読んでいただきまして、ありがとうございました。(ゴマメ)

2 COMMENTS

Aya

こんにちは&初めまして。

こちらの記事を参考にグローバルメニューの設置を試みたのですが
上手く表示されなかったのでコメントさせていただきました。

親テーマのテーマヘッダー(header.php)への編集までは上手くいき
スマホで確認すると、

・ホーム
・プロフィール
・ブログ
etc.

と、ちゃんと表示されておりました。

ですが「responsive.css」にてデザイン用CSSを挿入すると
全く反映されず、上記表示のままです。

もし、お分かりになればご教示いただけると幸いです。
お忙しいところ、失礼いたしましたm(__)m

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です