やりたいこと

「Cocoon」のモバイルで表示されるスライドインメニュー（ハンバーガーメニュー）は通常、ヘッダーモバイルボタンやフッターモバイルボタンで呼び出します。
それを単独のHTMLパーツで呼び出せるようにしたいと思います。

本ブログのモバイル表示時のヘッダーにあるメニューアイコンはこの方法で実装しています。

追加のカスタマイズとしてスライドメニューの表示方向を通常の「左から表示」から「右から表示」に変更する方法もご紹介します。

検証済みテーマ

「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%);
}

完成

参考

スマホ用ハンバーガーメニューを右側から登場させたい

スマホ用のハンバーガーメニューを実装した場合、通常は左から右へスライドして登場するかと思います。 こちらを右から左へ登場させたいのですが、どこをどう編集すれば可能でしょうか？ どなたかお教えいただけませんでしょうか。

wp-cocoon.com