LION MEDIA メニューをスマホ表示のときは横から開くようにする

WordPressのテーマ「LION MEDIA」のメニューをスマホでは画面の横から開くようにするとどうなるかやってみました、

LION MEDIAで自作したメニューを使おうと思ってるのですけど現在は使うほど記事が充実してないため、そのうち使いたくなるかもしれないのでヒント的に記事しておこうと思います。

1. LION MEDIAのヘッダーメニュー表示を確認
- 1.1. スマホ表示でメニューを横から開くには？
2. LION MEDIAのスマホメニューの作り方
- 2.1. スマホ表示のメニュー用のファイル作成
- 2.2. メニューに使うHTMLを書く
3. LION MEDIAにスマホ用メニューを読み込む
- 3.1. LION MEDIAにファイルを読み込む関数
- 3.2. トップページでメニュー表示する
4. LION MEDIAでメニューを横から表示させる
- 4.1. スマホだけメニューを表示するCSS
- 4.2. メニュー表示を確認してみる

LION MEDIAのヘッダーメニュー表示を確認

WordPressのテーマ「LION MEDIA」で使われてるデフォルトのヘッダーで表示できるメニューは、LION MEDIAの設定からメニュー項目を作成して簡単にグローバルメニューとして表示させることができます。

ただLION MEDIAのヘッダーメニューはグローバルメニューではありますが、スマホで表示を確認した場合、表示させるメニュー項目が多いと画面表示されてなくてスクロールしないとメニューが分かりづらい仕様になっています。

このLION MEDIAのスマホの表示でのメニュー仕様をどうにかできないかと考えたときに、横から開くメニューにしてみようとなったのです。

ほんの少しですけどね…

スマホ表示でメニューを横から開くには？

LION MEDIAのデフォルトのメニューを横から開くには、私の知識ではかなり時間がかかりそうなのです。

時間をかけたくなかったので自作でスマホ表示の時だけメニューを横から開くようにしてみようと試みました。

スマホ表示のときのメニューを横から開くためにハンバーガーメニューにしようと思うのですが、正しくは「ドロワーメニュー」というようです。

作成する流れとしては

スマホ表示用メニューのファイル作成
メニュー項目を自作
作成したファイルを関数で読み込む
CSSをかき集めてメニューのデザイン

実装後はスクロールすると一緒にハンバーガーアイコンがつきまとうイメージです。

LION MEDIAのスマホメニューの作り方

使いたいと思ったときに簡単にスマホ用のメニューを表示できるようにしたかったため、LION MEDIAにメニュー専用のファイルを作成して、WordPressの関数で出力できるようにします。

正確には私の場合ローカル環境で作成したので、なんでもありのぐちゃぐちゃなファイルになってしまってるんですけどね。

スマホ表示のメニュー用のファイル作成

スマホ表示用のメニューファイル作成はファイル拡張子を「.php」にしてファイルを作成します。

そして作成したファイルはLION MEDIAの子テーマに配置しました。

もしメニュー用のファイル作成がめんどくさいと思ったら、どのLION MEDIAのphpファイルでもいいのでコピペしてから、その子テーマファイルのファイル名を変更してファイル内の記述全部を削除してもいいかと思います。

これでLION MEDIAのスマホだけ表示させるメニュー用ファイルの完成です。

メニューに使うHTMLを書く

次はLION MEDIAに使用するメニューを作成したファイルにHTMLを書いていきます。

<input type="checkbox" id="navtoggle">
<label for="navtoggle" class="open"><span></span></label>
<label for="navtoggle" class="close"></label>
　<nav class="menu">
　　<h2>menu</h2>
　　<ul>
		　<li><a href="#1">サンプル１</a></li>
		　<li><a href="#2">サンプル２</a></li>
		　<li><a href="#3">サンプル３</a></li>
		　<li><a href="#4">サンプル４</a></li>
		　<li><a href="#5">サンプル５</a></li>
	　</ul>
　</nav>

HTMLのinput要素のtype属性にcheckboxを指定してidをつけます。そしてlabelをつけてスマホメニューを開閉するスイッチにします。

そしてメニュー項目は、それぞれのブログやサイトによって違うのでnav要素に好きな項目を作成することになります。

WordPressなので、もしカテゴリーの一覧を表示させるなら以下のようなコードをnav要素に書くと、メニューがカテゴリーリストになります。

<?php
$categories=get_categories('orderby=id');
foreach($categories as $category) {
echo '<a href="' . get_category_link( $category->term_id ) . '" title="' . $category->name . '" ' . '>' . $category->name . '<br /><span' . $category->description .'</span></a></p>';
}
?>

LION MEDIAにスマホ用メニューを読み込む

メニュー用のファイルを作成してメニューを表示できるまでにきたら、LION MEDIAに作成したスマホ用のメニューファイルを読み込んで表示したい場所に出力します。

とりあえずメニュー表示を確認するだけで使うわけではないので、トップページあたりにWordPressの関数でファイルを読み込めるようにしておこうと思います。

LION MEDIAにファイルを読み込む関数

まずはLION MEDIAに作成したスマホだけ表示するメニューのファイルを読み込むWordPressの関数です。

get_template_part()

get_template_part()関数のパラメータにスマホだけ表示させるメニューのファイル名を指定してLION MEDIAの投稿ページやトップページを読み込んで出力します。

トップページでメニュー表示する

LION MEDIAのトップページでスマホに表示するメニューを使う場合はトップページを表示してる「index.php」にget_template_part()でメニューファイルを読み込みます。

<?php get_template_part( ‘practice’ ); ?>

メニューファイルを読み込むのでget_template_part()のパラメータはファイル名にしてます。

index.phpの37行目あたりに記述してみました。ピックアップ記事関係の上です。

ファイル更新してトップページの表示を確認するとチェックボックスとメニュー項目が表示されてればおっけー。

LION MEDIAでメニューを横から表示させる

作成したスマホ用のメニューファイルの読み込みができたら最後にメニュー用のCSSを書きます。

LION MEDIAでスマホ表示のときだけ作成したメニューが横から開くようになればいいので、メディアクエリでスマホ用のCSSを記述してメニューを完成させます。

スマホだけメニューを表示するCSS

#navtoggle:checked ~ .contents {
　transform: translateX(250px);
}

/* toggle button */
#navtoggle {
　display: none;
}
label {
　cursor: pointer;
　position: fixed;
　top: 0;
　left: 0;
}
.open {
　z-index: 12;
　width: 48px;
　height: 48px;
　background: #aab1ff;
　transition: background .6s, transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before,
.open::after {
　content: "";
}
.open span,
.open::before,
.open::after {
　content: "";
　position: absolute;
　top: calc(50% - 1px);
　left: 30%;
　width: 40%;
　border-bottom: 2px solid white;
　transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.open::before {
　transform: translateY(-8px);
}
.open::after {
　transform: translateY(8px);
}
.close {
　z-index: 12;
　width: 100%;
　height: 100%;
　pointer-events: none;
　transition: background .6s;
}
#navtoggle:checked + .open {
　background: #ff7555;
　transform: translateX(250px);
}
#navtoggle:checked + .open span {
　transform: scaleX(0);
}
#navtoggle:checked + .open::before {
　transform: rotate(45deg);
}
#navtoggle:checked + .open::after {
　transform: rotate(-45deg);
}
#navtoggle:checked ~ .close {
　pointer-events: auto;
　background: rgba(0,0,0,.3);
}

/* drawer menu */
.menu {
　z-index: 100;
　position: fixed;
　overflow: auto;
　top: 0;
　left: 0;
　width: 250px;
　height: 100%;
　margin: 0;
　padding: 10px;
　box-sizing: border-box;
　background: rgba(0,0,0,.6);
　transform: translateX(-100%);
　transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.menu h2,
.menu a {
　color: white;
}
.menu h2 {
　text-align: center;
}
.menu ul {
　margin: 0;
　padding: 0;
}
.menu li {
　font-size: .8em;
　line-height: 1.4;
　list-style-type:none;
}
.menu li:not(:first-child) {
　border-top: 1px solid rgba(255,255,255,.6);
}
.menu a {
　display: block;
　padding: 1em 2em;
　text-decoration: inherit;
　transition: background .6s;
}
.menu a:hover {
　background: black;
}
#navtoggle:checked ~ .menu {
　transform: none;
}
.open {
　display: none;
}
@media screen and (max-width: 767px) {
.open {
　display: block;
}
}