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

 2014/10/05

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日目分です「分」です。「分」です。「分」です。ヒロシです。

WordPress

Please comment!

  

3件のコメント

  • トーマ 2015年11月13日 13:21

    返信ありがとうございます。

    帰ったら試してみます!!

    これからも参考にさせていただこうと思っています。
    よろしくお願いします。

  • トーマ 2015年11月12日 23:33

    初めまして。

    「Sidrのファイルの読み込み」とありますが、
    具体的にはどれをどのようにしたらよいのでしょうか?

    初歩的な質問で申し訳ありませんが、
    よろしくお願いします

    • ちゅんこ 2015年11月13日 9:58

      トーマ様

      WordPressを使っているか、普通のHTMLサイトを使っていらっしゃるかで設置の方法は違ってきます。
      Wordpressでしたら寝ログさんに詳しい記事があります。

      http://nelog.jp/wordpress-sidr

      「sidr設置」でググると上位に表示されている記事です。

Messege




1件のトラックバック