やりたいこと
「Cocoon」のモバイルで表示されるスライドインメニュー(ハンバーガーメニュー)は通常、ヘッダーモバイルボタンやフッターモバイルボタンで呼び出します。
それを単独のHTMLパーツで呼び出せるようにしたいと思います。
本ブログのモバイル表示時のヘッダーにあるメニューアイコンはこの方法で実装しています。
追加のカスタマイズとしてスライドメニューの表示方向を通常の「左から表示」から「右から表示」に変更する方法もご紹介します。
検証済みテーマ
Cocoon | Luxeritas | その他テーマ |
OK | NG | 未検証 |
「Cocoon」独自実装のスライドメニューを使用しているので「Cocoon」以外では十中八九使えません。使うにしてもアニメーションや表示に関わるCSSをコピーして引っ張ってくる必要があります。
やりかた
「カスタムHTML」へのコード記載
「Wordpress管理画面」>「外観」>「ウィジェット」から表示したい場所に「カスタムHTML」を設置します。
「カスタムHTML」の内容に以下のコードを記載します。
<div class="custom-navi-menu-button menu-button">
<input autocomplete="off" id="navi-menu-input" type="checkbox" class="display-none">
<label id="custom-navi-menu-open" class="menu-open menu-button-in" for="navi-menu-input">
<span class="fa fa-bars" aria-hidden="true"></span>
</label>
<label class="display-none" id="navi-menu-close" for="navi-menu-input"></label>
<div id="navi-menu-content" class="navi-menu-content menu-content">
<div><label class="custom-navi-menu-close-button menu-close-button" for="navi-menu-input"><span class="fa fa-close" aria-hidden="true"></span></label></div>
<!-- コンテンツ -->
・スライドインメニューの中身です
</div>
</div>
「<!– コンテンツ –>」と記載されている所にスライドインメニューに表示したいコンテンツを記載してください。
その後のメンテナンス性を考えると同期ありのパターンを呼び出すショートコードを記載し、メニューの内容の変更にはパターンの内容を変更することで対応するのがおすすめです。
このブログでも実際そうしています。
スライドインメニューを右側から表示する
テーマの「style.css」にコードを記載する方法で変更します。
以下の場所から編集できます。
「Wordpress管理画面」>「外観」>「テーマファイルエディター」右側から編集するファイルを選択します。
以下のコードを「style.css」に追記してください。
/*ハンバーガーメニューを右からスライドに変更*/
.navi-menu-content {
left: auto;
right: 0;
transform: translateX(105%);
}