最近、Wordpressテーマのスマホ用デザインをいじったりしています。
スマホ用デザインだと、どうしてもWordpressのデフォルトメインメニュー部分のデザインが崩れてしまいます。
そのため、多くのテーマではスマホ用デザインでは、メインメニューのところを隠しておいて、「メニュー」ボタンを押したらメニューが表示されるという手法をとっているところが多いです。
僕も同じようにしようと方法を、調べていたら、Sidrというプラグインが良いと書かれているの見つけたので試しに使ってみました。
Sidrを使えば基本的に簡単にスマホ向けの横からニュッと出るメニューが設置できます。こんな感じのやつ。 『Sidr』サンプル
ただ、ちょっとWordpressに設置するには、ちょっとした手順が必要なので、今回は自分が忘れないためにも、その方法の紹介です。
目次
ファイルの設置
まずは、Sidrからファイルをダウンロードします。
中に入っているもので使うのはこのファイル。
- stylesheets/jquery.sidr.dark.css
- Sidrの暗いテーマのスタイルシート
- stylesheets/jquery.sidr.light.css
- Sidrの明るいテーマのスタイルシート
- jquery.sidr.min.js
- メニュー部分を動作させるjQuery
これらのファイルを階層を保ったままテーマフォルダ内にコピーします。
スタイルシートの呼び出し
まずはスタイルシートの呼び出しです。
header.php内の<head>内に以下を記述してください。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/stylesheets/jquery.sidr.light.css">
上は、明るいテーマ（jquery.sidr.light.css）のスタイルの呼び出しでしたが、暗いテーマ（jquery.sidr.dark.css）を呼び出すときは、次のように呼び出してください。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/stylesheets/jquery.sidr.dark.css">
jQueryの呼び出し
jQueryが呼び出されていないテーマでは、jQueryを呼び出す必要があります。
jQueryは、以下のコードで呼び出せます。
<?php wp_enqueue_script('jquery'); ?>
このコードを、header.phpのwp_head();の前に呼び出してください。（※既に呼び出されている場合は不要）
SidrのjQueryファイルの呼び出し
SidrのjQueryファイルは、以下のように呼び出します。
<script src="<?php echo get_template_directory_uri(); ?>/jquery.sidr.min.js"></script>
これはheader.phpのwp_head();の後に呼び出します。
単純にまとめるとこんな感じ。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/stylesheets/jquery.sidr.light.css">
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<script src="<?php echo get_template_directory_uri(); ?>/jquery.sidr.min.js"></script>
コードの編集
Sidrが使えるようにHTMLタグを編集します。
WordPressメニューをSidr IDタグで囲む
いろいろな方法は、あると思いますが、今回は最も簡単にwp_nav_menu()関数を呼び出しているところを<div id="sidr"></div>タグで囲みます。
<div id="sidr"> <?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?> </div>
Sidrメニュー表示用ボタンを設置
Sidrメニューを表示させるトリガーとなるボタンを設置します。以下を表示させたい場所に挿入してください。
<!-- モバイルメニュー表示用のボタン --> <div id="mobile-menu"> <a id="mobile-menu-toggle" href="#sidr">Menu</a> </div>
jQueryで動作部分を書く
上のボタンをSidrを動作させてメニューを表示するには以下のようなjQueryコードを書きます。
</head>の手前あたりに以下のコードを挿入してください。（※JavaScript用に別ファイルを作成して、そこに書くのがコードのメンテナンス的には望ましい）
<script>
jQuery(document).ready(function() {
jQuery('#mobile-menu-toggle').sidr();
});
</script>
メニューを開くとき、と閉じるときをトリガーとする以下のような書き方もできます。
jQuery(document).ready(function() {
jQuery('#mobile-menu-toggle').sidr({
onOpen: function(name) {
jQuery('#mobile-menu-toggle').css('text-align', 'left');
},
onClose: function(name) {
jQuery('#mobile-menu-toggle').css('text-align', 'center');
}
});
jQuery('#header .menu').show();
});
Sidrには、その他の.sidr()関数のオプションが詳しく載っています。
スタイルの編集
今回は、こんな感じに画面一番上にメニュー表示ボタンが来るようにスタイルしてみました。
コードは以下です。スタイルはサイトに合わせて変更してください。
/************************************
** モバイルメニューボタン
************************************/
#mobile-menu{
display:block;
}
#mobile-menu a{
color:#fff;
padding:10px;
text-decoration:none;
display:block;
cursor:pointer;
text-align:center;
background:#aaa;
line-height:100%;
border-radius: 10px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
#mobile-menu a:hover{
background:#8b8b8b;
-webkit-transition:all 0.3s;
-moz-transition:all 0.3s;
transition:all 0.3s;
}
一応これで、Menuボタンを押すと、左からメニューが表示されます。
ただ、Wordpressのデフォルトのスタイルが適用されるので、出てきたメニュー欄は以下のようにスタイルが崩れているかもしれません。
これを、以下のようにスタイルを調整してやります。スマホ用のスタイルシートファイルに以下のように書きます。（テーマによってID名やクラス名が違うので、それぞれの環境に合わせてください）
/************************************
** メニュースタイルの調整
************************************/
#header div.menu > ul > li,
#header ul.menu > li {
float:none;
border-top:0px;
}
#header .menu li a:hover {
text-decoration:none;
}
#header .menu li a {
font-size: medium;
}
#header ul.children{
display:none !important;
}
調整をしてやると、このように表示されました。
こんな感じで設置できました。
参考 クリックすると横からメニューが現れるjQueryプラグイン『Sidr』
まとめ
Sidrを使用すれば、複雑なjQueryコードを書かなくても、横からニュッと出るメニューを作ることができます。
ただ僕は、1度はSidrを設置はしてみたもののWordpressテーマに採用するのをやめました。
というのも、Sidrでメニューを出した場合、下にスクロールしていっても、ずっと横にメニューが出っ放しになります。メニューが消えるようにするには、もう一度Menuボタンを押して閉じなければならず、その一手間が訪問者には面倒くさいだろうと思ったからです。
ただ、Sidrはアプリみたいでカッコイイ感はあるので、変わったメニューを設置したい場合はお試しください。
これらのファイルを階層を保ったままテーマフォルダ内にコピーします。
という所のやり方が初心者なのでわかりません。教えてくださいm(_ _”m)