WordPressでボタンを押すとメニューが横からニュッと出るようにする方法|Sidrプラグイン、スマホ用デザインなどに

Sidr - A jQuery plugin for creating side menus

最近、Wordpressテーマのスマホ用デザインをいじったりしています。

スマホ用デザインだと、どうしてもWordpressのデフォルトメインメニュー部分のデザインが崩れてしまいます。

そのため、多くのテーマではスマホ用デザインでは、メインメニューのところを隠しておいて、「メニュー」ボタンを押したらメニューが表示されるという手法をとっているところが多いです。

僕も同じようにしようと方法を、調べていたら、Sidrというプラグインが良いと書かれているの見つけたので試しに使ってみました。

Sidrを使えば基本的に簡単にスマホ向けの横からニュッと出るメニューが設置できます。こんな感じのやつ。 『Sidr』サンプル

screenshots

ただ、ちょっとWordpressに設置するには、ちょっとした手順が必要なので、今回は自分が忘れないためにも、その方法の紹介です。

スポンサーリンク
レクタングル(大)広告

ファイルの設置

まずは、Sidrからファイルをダウンロードします。

中に入っているもので使うのはこのファイル。

stylesheets/jquery.sidr.dark.css
Sidrの暗いテーマのスタイルシート
stylesheets/jquery.sidr.light.css
Sidrの明るいテーマのスタイルシート
jquery.sidr.min.js
メニュー部分を動作させるjQuery

これらのファイルを階層を保ったままテーマフォルダ内にコピーします。

スタイルシートの呼び出し

まずはスタイルシートの呼び出しです。

header.php内の<head>内に以下を記述してください。

上は、明るいテーマ(jquery.sidr.light.css)のスタイルの呼び出しでしたが、暗いテーマ(jquery.sidr.dark.css)を呼び出すときは、次のように呼び出してください。

jQueryの呼び出し

jQueryが呼び出されていないテーマでは、jQueryを呼び出す必要があります。

jQueryは、以下のコードで呼び出せます。

このコードを、header.phpのwp_head();の前に呼び出してください。(※既に呼び出されている場合は不要)

SidrのjQueryファイルの呼び出し

SidrのjQueryファイルは、以下のように呼び出します。

これはheader.phpのwp_head();の後に呼び出します。

単純にまとめるとこんな感じ。

コードの編集

Sidrが使えるようにHTMLタグを編集します。

WordPressメニューをSidr IDタグで囲む

いろいろな方法は、あると思いますが、今回は最も簡単にwp_nav_menu()関数を呼び出しているところを<div id=”sidr”></div>タグで囲みます。

Sidrメニュー表示用ボタンを設置

Sidrメニューを表示させるトリガーとなるボタンを設置します。以下を表示させたい場所に挿入してください。

jQueryで動作部分を書く

上のボタンをSidrを動作させてメニューを表示するには以下のようなjQueryコードを書きます。

</head>の手前あたりに以下のコードを挿入してください。(※JavaScript用に別ファイルを作成して、そこに書くのがコードのメンテナンス的には望ましい)

メニューを開くとき、と閉じるときをトリガーとする以下のような書き方もできます。

Sidrには、その他の.sidr()関数のオプションが詳しく載っています。

スタイルの編集

今回は、こんな感じに画面一番上にメニュー表示ボタンが来るようにスタイルしてみました。

メニュー表示ボタン

コードは以下です。スタイルはサイトに合わせて変更してください。

一応これで、Menuボタンを押すと、左からメニューが表示されます。

ただ、Wordpressのデフォルトのスタイルが適用されるので、出てきたメニュー欄は以下のようにスタイルが崩れているかもしれません。

スタイルが適正でない

これを、以下のようにスタイルを調整してやります。スマホ用のスタイルシートファイルに以下のように書きます。(テーマによってID名やクラス名が違うので、それぞれの環境に合わせてください)

調整をしてやると、このように表示されました。

スタイルの調整後

こんな感じで設置できました。

参考 クリックすると横からメニューが現れるjQueryプラグイン『Sidr』

まとめ

Sidrを使用すれば、複雑なjQueryコードを書かなくても、横からニュッと出るメニューを作ることができます。

ただ僕は、1度はSidrを設置はしてみたもののWordpressテーマに採用するのをやめました。

というのも、Sidrでメニューを出した場合、下にスクロールしていっても、ずっと横にメニューが出っ放しになります。メニューが消えるようにするには、もう一度Menuボタンを押して閉じなければならず、その一手間が訪問者には面倒くさいだろうと思ったからです。

ただ、Sidrはアプリみたいでカッコイイ感はあるので、変わったメニューを設置したい場合はお試しください。