JQuery『Sidr』をWordPressのカスタムメニューに対応させ設置する方法JQuery『Sidr』をWordPressのカスタムメニューに対応させ設置する方法スマホ表示の時のメニューとしてよく目にする横からにゅっと出てるくメニューを設置できるJQueryプラグイン『Side』。WordPressに設置する際、メニュー項目をいちいち手入力しなくてもカスタムメニューをそのまま対応させる方法をご紹介します。スポンサーリンク[toc]『Sidr』の設置方法はじめに『Sidr』の設置方法をざっくりと説明します。Sidrの必要ファイルの用意ファイルは以下の公式サイトからダウンロードします。『Sidr』の動作のデモもこちらの公式サイトで確認することができます。menusダウンロードしたファイルで必要なのはこれだけです。1jquery.sidr.min.js2以下どちらかのスタイルシート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に記述していきます。});</scrip>これを外部スタイルシートやhead内や</body>の直前などで読み込ませます。外部スタイルシートに記述するときは<sprict></script>は排除します。(STINGER5を使っているわたしはjs/base.jsにコピペしています。)MEMOSidrのサイトには右側から開いたり、コンテンツを入れたりと色々な設定方法が載っています。英語ですがわかりやすいので確認してみてください。通常ですと以下のような記述になります。</ul></div>これをヘッダーなどに組み込んでいくのですが、liタグのメニュー項目を書き加えるのは面倒なのでカスタムメニューに対応させてしまいます。?>で呼び出すとDIVタグなど余計なコードがついてくるので上記のように記述し、余計なDIVやクラス名を削除しています。カスタムメニューにデフォルトでついてくるDIVやulのクラスの削除、またliのクラスの削除法などは以前のエントリーでご紹介しています。【WordPress】カスタムメニューのクラスやidを削除したり、liに任意のクラスを付けたり。Shufulife※phpのコードを使うことになるので投稿や固定ページには設置できません。まとめこれで、『Sidr』をカスタムメニューに対応することができます。メニューの中身の更新や変更もダッシュボードで行うことができるので、便利ですね。昨日ルーターが逝ってしまってブログの更新がまた滞ってしまった(~_~;)巻き返さないと!100日チャレンジ29日目分です「分」です。