JQuery『Sidr』をWordPressのカスタムメニューに対応させ設置する方法

sidr1

公開日:2014/10/5

sidr1

スマホ表示の時のメニューとしてよく目にする横からにゅっと出てるくメニューを設置できるJQueryプラグイン『Side』。WordPressに設置する際、メニュー項目をいちいち手入力しなくてもカスタムメニューをそのまま対応させる方法をご紹介します。

スポンサーリンク


『Sidr』の設置方法

はじめに『Sidr』の設置方法をざっくりと説明します。

Sidrの必要ファイルの用意

ファイルは以下の公式サイトからダウンロードします。また、『Sidr』の動作のデモもこちらの公式サイトで確認することができます。

ダウンロードしたファイルで必要なのはこれだけです。

①jquery.sidr.min.js
②以下どちらかのスタイルシート
 stylesheets/jquery.sidr.dark.css(暗い色)
 stylesheets/jquery.sid1r.light.css(明るい色)

Sidrのファイルの読み込み

ファイルは</head>の前に読み込みます。※jQueryが呼び出されていないテーマでは、jQueryを呼び出す必要があります。

Stinger5では

読み込みとか面倒だったらjquery.sidr.min.jsの中身のコードを全てコピーしてJs/base.jsにペースト、同じくjquery.sid1r.●●.cssスタイルシートもstyle.cssにコピペでも大丈夫です。

JQuery部分の記述

メニューを開く呼び出の命令文をJQueryに記述していきます。
以下左から開く場合の記述

<script>
jQuery(document).ready(function() {
jQuery('#simple-menu').sidr();
});
</scrip>

これを外部スタイルシートやhead内や</body>の直前などで読み込ませます。外部スタイルシートに記述するときは<sprict></script>は排除します。(STINGER5を使っているわたしはjs/base.jsにコピペしています。)

MEMO

Sidrのサイトには右側から開いたり、コンテンツを入れたりと色々な設定方法が載っています。英語ですがわかりやすいので確認してみてください。

リンクとメニューの記述

通常ですと以下のような記述になります。

<!--タップするリンク -->
<a id="simple-menu" href="#sidr">メニュー</a>
<!-- メニュー部分 -->
<div id="sidr">
<ul>
<li><a href="#####">メニュー内容1</a></li>
<li><a href="#####">メニュー内容2</a></li>
<li><a href="#####">メニュー内容3</a></li>
</ul>
</div>

これをヘッダーなどに組み込んでいくのですが、liタグのメニュー項目を書き加えるのは面倒なのでカスタムメニューに対応させてしまいます。

カスタムメニューに対応させるにはメニュー部分を以下に書き換えます

<div id="sidr">
<?php wp_nav_menu(
array(
'container' => false ,
'items_wrap' => '<ul>%3$s</ul>'
)
); ?>
</div>

<?php wp_nav_menu(); ?>で呼び出すとDIVタグなど余計なコードがついてくるので上記のように記述し、余計なDIVやクラス名を削除しています。
カスタムメニューにデフォルトでついてくるDIVやulのクラスの削除、またliのクラスの削除法などは以前のエントリーでご紹介しています。

※phpのコードを使うことになるので投稿や固定ページには設置できません。

まとめ

これで、『Sidr』をカスタムメニューに対応することができます。メニューの中身の更新や変更もダッシュボードで行うことができるので、便利ですね。それでは、ちゅんこ@shufulifeがお送りしましたー

昨日ルーターが逝ってしまってブログの更新がまた滞ってしまった(~_~;)巻き返さないと!

100日チャレンジ29日目分です「分」です。「分」です。「分」です。ヒロシです。

Please Share!!

この記事のタイトルとURLをコピーする

記事タイトルJQuery『Sidr』をWordPressのカスタムメニューに対応させ設置する方法
記事URLhttps://shufulife.com/sidr/

お使いの端末ではこの機能に対応していません。下のテキストボックスからコピーしてください。
sidr1

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

最新記事をお知らせします
WordPress

Recommend―関連のおすすめ記事―