Simplicity2にスマホ用のグローバルメニュー(ミドルメニュー)を設置するカスタマイズ(コピペでOK)

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

いちいち開くのは面倒です。

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

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

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

こんな感じになります

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

Simplicity2にスマホ用のグローバルメニューを作ろう

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コード

 

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

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

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

「responsive.css」を開きます。

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

コード
/* スマホミドルメニューCSS */
.sp-middle-menu {
    background: #f68655; /*メニューの背景色*/
    border-top: 1px solid #ffa44d;  /*枠線の色*/
    border-left: 1px solid #ffa44d; /*枠線の色*/
}

.sp-middle-menu .middle-menu li a {
    font-size: 70%;  /*折り返す時は文字サイズを調節*/
    width: 33.3333%; /*50%で2等分 33.3333%で3等分*/
    border-bottom: 1px solid #ffa44d; /*枠線の色*/
    border-right: 1px solid #ffa44d;  /*枠線の色*/
	list-style: none;
    text-align: center;
	color: #ffffff; /*文字の色*/
	float: left;
    display: block;
    padding: 10px;
    box-sizing: border-box;
    text-decoration: none;
}

.sp-middle-menu .middle-menu {
    margin: 0px;
    list-style: none;
    margin-left: -43px;
    font-size: 22px;
}
#h-top {
        background-color: #f68655;/*ヘッダーの背景色*/
        min-height: 50px;
}
#site-title a {
    text-decoration: none;
    color: #fff;/*サイトタイトルの色*/
    font-size: 30px;/*サイトタイトル文字サイズ*/
    font-weight: normal;/*サイトタイトル文字の太さ*/
}
.sp-middle-menu .middle-menu li a {
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
}
.middle-menu li a {
    border-bottom: 1px solid #ffffff;
    border-right: 1px solid #ffffff;
    }
.sp-middle-menu {
    background: #f68655;
    border-top: 1px solid #ffffff;
    border-bottom: 1px solid #ffffff;
}
}
/* スマホミドルメニューCSS終わり */

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

Simplicity2のカスタマイズ例

文字サイズの変更

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

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

メニューの段数の変更

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

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

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

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

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

 

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

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

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

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

コメントを残す

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