WordPressのテーマ「LION MEDIA」のメニューをスマホでは画面の横から開くようにするとどうなるかやってみました、
LION MEDIAで自作したメニューを使おうと思ってるのですけど現在は使うほど記事が充実してないため、そのうち使いたくなるかもしれないのでヒント的に記事しておこうと思います。
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">サンプル1</a></li>
<li><a href="#2">サンプル2</a></li>
<li><a href="#3">サンプル3</a></li>
<li><a href="#4">サンプル4</a></li>
<li><a href="#5">サンプル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;
}
}
メニュー表示を確認してみる
LION MEDIAのメニューをスマホ表示のときは横から開くようにして表示を確認してみると、とりあえずは無事にメニューの表示はできました。
でもハンバーガーがサイトロゴと重なるかもしれません。その場合サイトロゴを右に寄せるかハンバーガーのアイコンを下に下げるかになると思います。一番真下に配置するメニューも斬新なのかもです。
その後は検証してませんが、例えば投稿ページに使うとしたら目次の閉じるか開くのボタンに影響しないかどうかなど気になったことなので、そのうち試そうと思います。