モバイルに最適、横からスライドインするメニューを実装する

今やブログはモバイル用に限られたスペースの中に、コンテンツを作成することになります。そんな時、上下や横からスライドしてくるドロワーメニューを実装したくなると思います。ここでは、Wordpressにドロワーメニューをどうやって組み込むのか、一から順番に紹介しようと思います。

/wp/wp-content/uploads/2020/03/iphone_meeting.png photo
すっと出てくるドロワーメニューを
つくって見る!

ドロワーメニューとは、画面の上下左右から必要に応じてスライドして表示されるメニューのことです。下記の画像は、当ブログに実装したドロワーメニューで、左を指定したドロワーメニューです。

”当ブログのドロワーメニュー”のGIF動画
当ブログのドロワーメニュー

これから、このドロワーメニューを組み込んでいきます。

多少、プログラミングの知識が必要になりますが、サンプルを利用しながら説明させてもらいますので、ゆっくりとやれば出来ると思います。

まずは、作業の流れから説明しましょう!

あなたは、Wordpressのテーマは何をお使いでしょうか?

そのテーマに既にドロワーメニューがあるかも知れません。もしあるなら出来るだけそれを使った方が良いです。少しの我慢であれは断然そちらをオススメします。

もしない場合は、これから一緒に作っていきましょう。

さて、そうは言っても、全部自前でつくることは出来ませんので、もうすでにこういった部品は市場に流通していますので、それを利用して作成していきます。今回使用するのは、Jqueryライブラリーの「drawer.js」です。まず下記のサイトをクリックして開いてください。

drawer.jsソースセットをZIPにダウンロードし解凍する

上記のサイトを開くと下記のような画面が表示されますので、Download on GitHubボタンをクリックしてください。

downloadボタンを押す画像
ステップ1:ダウンロードボタンを押してください

次の画面は、実際にダウンロードするサイトで、GitHubというサイトになります。これはネットワーク上にソースを保存しておく保管庫のようなもので、画面にあるようにサインアップを求められますが、ソースをダウンロードするだけなら特にサインアップやログインに必要はありませんので、無視してください。画面の②にあるClone or Downloadボタンをクリックしてください。

以下のようなポップアップウィンドウが表示されますので、赤枠で示したDownload ZIPボタンをクリックしてください。

ここでダウンロードする初期のファイル名は、drawer-master.zipという名前になります。このZIPファイルをどこか適当な場所に解凍しておいてください。ここでは、簡易的にディスクトップに解凍したものとして、以降に説明をします。

ソースセットのサンプルを動かしてみる

私がダウンロードしたのは、バージョン3.2.2です。ディスクトップに解凍してソースセットの中には、sandboxというフォルダーがあります。このsandboxフォルダーのindex.htmlファイルが基本にファイルになり、このファイルをダブルクリックで起動すると、ブラウザが立ち上がりそのままサンプルとして実行できます。

ダウンロードしたZIPファイルのフォルダー構成は以下の通りです。ピンクで示したsandoboxの中のindex.htmlを実行してください。

zipのフォルダー構成
zipのフォルダー構成

起動したサンプルの左上に以下の形をしたボタンをクリックして実行します。

ハンバーガーアイコン

実際に起動したサンプル。上記のハンバーガーアイコンをクリックすると、左側にドロワーメニューが表示されました。このメニューは上から順に、

Top:上から降りてくるドロワーメニューサンプル

Left:左からスライドインするドロワーメニューサンプル

Right:右からスライドインするドロワーメニューサンプル

Navibar:上側にメニューバーを表示するサンプル

Fixed navbar:Navibarと同じだがスクロールしても固定される。

Sidebar:これも表示位置が左右になるが、スクロールアウトしない。

サンプルを実行したところ
サンプルを実行したところ

サンプルソース解説

それでは、上記のサンプルソースの解説をしていきます。かなり細かい図を載せてしまったので、スマートフォンでは見るのは難しいかも知れません。まぁこの手の技術解説を見る場合は当然パソコンやiPadになるとおもうのでそのまま進めます。

上記に記述したとおりsandboxフォルダにあるindex.htmlファイルの解説です。

下図に示したように、大きく6つのパートより構成されます。ある程度プログラミングが出来る方であれば、①や⑤および⑥の部分は、get_header()やget_footer()に置き換えればすぐにでもWordpress上に移植して実行できそうなことはわかると思います。

index.htmlのパート解説
index.htmlのパート解説です
  1. CSSファイルを呼んでます。
    後に、get_header()に置き換わります
  2. 重要!bodyに独自クラスを付加しています
  3. ハンバーガーアイコン(メニュー)を作成
  4. li要素でメニュー項目を作成しています。特に、drawer~という独自クラスに注目してください。
  5. Jquery実行に必要なスクリプトファイルを呼んでいます。get_footer()に置き換え可能です。
  6. 案外忘れてしまいそうなスクリプト実行部分です。ここも同じくget_footer()に置き換わります。

この解説で特に重要なのは、②にあるbodyに、drawerクラスとdrawer–leftクラスを追加しているところです。このbodyに追加されるクラスによって、動作を切り替えています。左側からスライドインさせる場合は、ここにあるようにdrawer–leftクラスですが、右側からスライドインさせる場合は、drawer–rightクラスになりますし、まだ解説していませんが、ドロップダウンリストが子孫ノードのサブメニューを表示している場合は、drawer-openクラスが追加されたりします。これらの追加はすべてJavaScriptで実行されています。

必要な環境ファイル

WordPressに移植するには、どの環境ファイルが必要か確認しておく。なんと言ってもJqueryをはじめとしてJSファイルは忘れずに導入しておきたい。これらのファイルは、前述したdrawer.jsソースセットに含まれているものをそのまま使うことができます。

JSファイル

ファイルバージョン
jquery.min.jsVer2.2.4
iscroll.jsVer5.2.0
bootstrap.min.jsVer.3.3.7
drawer.min.js 

CSSファイル

ファイル 
drawer.min.css 
  

環境ファイルとしては、以上の5本だけです。CSSファイルは見た目をつくるファイルなので、もし修正する場合は、圧縮されたminファイルではなく、圧縮されていないdrawer.cssファイルも同梱されているので、こちらを使用します。

ちなみに、jquery.min.jsは本書では2.2系を使用していますが、実践したところ私のところの1.11.3でも動かすことができました。参考までに!

もう一点注意があります!

drawer.min.jsをロードする場合は、フッタでないと動きませんので、wp_enqueue_scriptのパラメータは以下の例題にようにしてください。

以下のコーディング例は、wordpress本体に移植する場合に既存のコードと合体させるか、function.phpに挿入してお使いください。

function my_enqueue_scripts() {

    wp_deregister_script( 'jquery' );
	wp_enqueue_script( 'jquery'	, '//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js',array(),'1.11.3',false);
	wp_enqueue_script( 'drawer_js', get_stylesheet_directory_uri() . "/drawer/js/drawer.min.js" ,array(),'1.1',true);
	wp_enqueue_script( 'iscroll', '//cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js',array('jquery'));
	wp_enqueue_script( 'bootstrap', '//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js',array('jquery'));

}
add_action( 'wp_enqueue_scripts', 'my_enqueue_scripts',99 );

CSSの部分は以下のとおり。

function my_enqueue_styles() {

	wp_enqueue_style('drawer_css', get_stylesheet_directory_uri() . '/drawer/css/drawer.css');
	
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );

bodyにクラスを付加する

まずWordpressへのDrawer.js移植の第1歩とし、bodyに以下のクラスを付加する。

  • drawer
  • drawer–left,drawer–right,drawer–top,drawer–sidebarなど

この作業はかなり重要なものなので、必ず以下の方法で追加してください。トラブル似合った場合、案外気づかないことが多いかも知れません。

wordpressの場合、以下の2つのコーディングがあるので好きな方で追加してください。

bodyの定義場所で直接追加する

header.php等bodyタグの定義場所で修正する方法

<body <?php body_class('drawer drawer--left'); ?>>

※左サイドからスライドインさせるドロワーメニューを例としています。

アクティブフィルターで追加する

function.php等別の場所で追加させる場合は、以下のアクティブフィルターを使うことが出来る

add_filter( 'body_class', 'my_class_names' );
function my_class_names( $classes ) {
$classes[] = 'drawer';
$classes[] = 'drawer--left';
$classes[] = 'drawer-close';
return $classes;
}

スクリプトを自動起動するコードの挿入

下記のコードをfunction.phpのどこかに挿入して、drawer.jsスクリプトを起動するようにしよう! サンプルソースの⑥の部分ですね。

<?php
function my_footer() {
?>
<script>
$(document).ready(function() {
    $('.drawer').drawer();
    /* 以下はメニューをクリックした時に閉じるようにしていますが、必要なければ省いてください */
    $('.drawer-nav').on('click', function() {
        $('.drawer').drawer('close');
    });
});
</script>
<?php
}
add_action('wp_footer','my_footer',99);
?>

独自メニュー部分を作成する

さて、ここまでは特に問題なく移植できていると思います。というかまだコーディングすることはほとんどなかったと思います。

それでは実際にメニューを作ってみましょう。

サンプルソース解説で図示した④の部分ですね。③の部分のコーディングは説明はいらないと思いますのでそのまま純粋にコピーしてお使いください。

通常メニューを作成する場合は、htmlのulタグを利用して作ります。階層メニューを作る場合も親要素のliに、ulタグを使って作ることができます。それはこれまでの作り方と全く同じです。

<nav class="drawer-nav" role="navigation">
	<ul class="drawer-menu" id="nav">
		<li><a href="#">MENU1</a></li>
		<li class="drawer-dropdown">
		<a class="drawer-menu-item" href="#">MENU2</a>
		<ul class="drawer-dropdown-menu">
			<li><a class="drawer-dropdown-menu-item" href="#">SUB1</a></li>
			<li><a class="drawer-dropdown-menu-item" href="#">SUB2</a></li>
			<li><a class="drawer-dropdown-menu-item" href="#">SUB3</a></li>
		</ul>
		</li>
		<li><a href="#">MENU3</a></li>
		<li><a href="#">MENU4</a></li>
	</ul>
</navi>

このメニューのコーディング例はあとから使いますので、よく覚えておいてください。特にどんなクラスが使われているか注目。実際にイメージにすると以下のようなものです。

・MENU1
・MENU2
	・SUB1
	・SUB2
	・SUB3
・MENU3
・MENU4

メニュー構築に使う特別なクラス

ここまで非常に簡単に説明していますが、既にドロワーメニュー構築の半分以上は出来ているかも知れません。

あとはここで使われているdrawer.jsのクラスとHTMLタグ(navi,ul,li,aそれぞれのタグ)の関連付けを勉強すれば、手動ならいつでも簡単にメニュー構築ができます。ここをちゃんと作れれば、勝手にメニューがスライドして、サブメニューが閉じたり開いたりしてドロワーかつドロップダウンのかっこいいメニューが構築できます。

bodyに追加されるクラスには、以下のものがあります

  • drawer
  • drawer–left
  • drawer–right
  • drawer–top
  • drawer–sidebar

ハンバーグアイコンメニュー構築するためのクラスには、以下のものがあります

  • drawer-toggle
  • drawer-hamburger

メニュー構築に使われるクラスには以下のようなものがあります

  • drawer-navi

  • drawer-menu

  • drawer-menu-item

  • drawer-dropdown

  • drawer-dropdown-menu

  • drawer-dropdown-menu-item

以上のクラスの使い方を簡単にまとめてみた。

使用するクラス 使用する部位 説明
drawer bodyクラス drawer.jsを使う場合は必ずbodyに追加する必須のクラス
drawer–left bodyクラス 左側からスライドインするメニューの場合に付加する
drawer–right bodyクラス 右側からスライドインするメニューの場合に付加する
drawer–top bodyクラス 上部にクラシカルな固定メニューを表示する場合に付加するクラス
drawer–sidebar bodyクラス 左右サイドにメニューを固定表示する場合に付加するクラス
drawer-open bodyクラス ドロップダウンの状態により、スクリプトで自動挿入される
drawer-close bodyクラス ドロップダウンの状態により、スクリプトで自動挿入される
drawer-toggle ハンバーガーアイコン ハンバーガーアイコンボタンに必ず付加
drawer-hamburger ハンバーガーアイコン ハンバーガーアイコンボタンに必ず付加
drawer-navi メニュー構築 構築するメニューは、このクラスを持ったnaviタグで挟む
drawer-menu メニュー構築 トップのuiタグに付加するクラス
drawer-menu-item メニュー構築 liタグに必ず付加するクラス
drawer-dropdown メニュー構築 サブメニューを持つliタグはまたaタグに付加する
drawer-dropdown-menu メニュー構築 サブメニューのulタグに付加するクラス。これをいれると自動的にサブメニューの開閉をしてくれる。
drawer-dropdown-menu-item メニュー構築 遷移させなければならないサブメニューアイテムに付加するクラス。このクラスがないとメニューは遷移しない。
drawer-caret キャレットを表示するスパンクラス メニューの開閉を示す三角まーく”キャレット”を点ける場合に、<span class=”drawer-caret”></span>のようにして使う。

さらに詳しくdrawer.js用クラスやオプションについて知りたい場合は、以下が詳しく解説されています。

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

スポンサーリンク

googleカスタム検索

ランキング

インデックス

※右側の記事と連動したインデックスです。見たいインデックスをクリックしてください。
ページ上部へ戻る