[WordPress/jQuery]モバイル等でよく使うスライドメニューの実装(Sidr使用)スポンサーリンクスポンサーリンクモバイル等でよく使うスライドメニューの実装メモです(Sidr使用)20150424追記しました。ここからが元々のオリジナルな投稿です。Posts20150424追記(sidr-package-1.2.1とAndroid4.1との相性が悪いみたいです)・とあるクライアント様から、Android端末でsidrで実装したメニューボタンを押すと、メニューを選択していないのに別ページに遷移してしまうとの指摘あり。SC02E(バージョンアップを行っていなければ、Android4.1)で不具合発生とのこと。4.2.2)では問題ないことを確認。・機種依存かANdroidOSバージョン依存だろうと。・こういう時はGoogleさんに頼ります。GitHubにもレポートされてますね。GitHubより、sidr1.1.1をダウンロードし、入れ替えましたところ、無事動作しました!!・jQuery.sidr1.1.1に関しては、Mac/Win7/iOS/Android等各OS/ブラウザで問題なく動作しています。・Andoroid系の確認作業をどうするか新たな課題。Chrome開発者ツールのエミュレータだと、OSまでは特定した動作確認は出来ないのかな?ここからが元々のオリジナルな投稿です。概要モバイル等でよく使うスライドメニューをSidrというjQueryプラグインを利用して実現しました。こんな感じの表示になります。メニューリストが表示され、もう一度、メニューアイコンを押すとメニューリストが閉じられます。http://sample.nakamurayuji.com/wp5/で使用することを前提にURLやftpフォルダ等を記載していますので、随時読み替えて下さい。・上記サイトでは、Newsyという有料テーマの子テーマを利用しています。menusより、Sidrをダウンロードします。・「sidr-package-1.2.1.zip」というファイル名でダウンロードされますので、解凍します。フォルダ「sidr-package-1.2.1」が出来ます。・解凍したフォルダをまるごと、サーバーの任意の場所にアップロードします。※私は下記にアップロードしました。・アップロードしたsidrをサイト内に読み込みます。</body></html>準備1部分のコード説明(1)WordPressの場合、メニューを表示しているテンプレート(一般的には、header.php)内に記述します。・「jquery.sidr.dark.css」の代わりに「jquery.sidr.light.css」も指定できます。スライドメニューの装飾用CSSです。href="javascripts/sidr/stylesheets/jquery.sidr.dark.css">(2)jQuery本体を読み込んでいます。WordPressのテーマによってはすでに読み込んでいるものもありますし(その場合ここの箇所の記述は不要)、最新バージョンをダウンロードして組み込む場合は「jquery.js」の箇所を「jquery-1.11.2.min.js」のように変更して下さい。src="javascripts/jquery.js"></script>(3)Sidr本体を読み込んでいます。・公式サイトのコード例を実際のサイトに則して少し変更したものを掲載します。});});</script>準備2部分のコード説明(1)各記述箇所の関係(2)タップする箇所の記述です。classの箇所は、Awesomeフォントを利用し、三本線を表示しています。☆#mobile_menuで指定されている文字(本例では三本線)を押すと、#sidr-mainの箇所が表示されます。fa-bars"></i></a>(3)実際のメニューのリストです。</ul></div>(4)sidrが動作する部分の記述です。☆#sidr-mainの箇所に#sidrに記述されたメニューリストを生成し、#mobaile_menu部分が押される(タップ)されるごとに表示/非表示が切り替わります。‘right’」と書き換えると、右側にスライドメニューが表示されます。‘left’」の場合は省略できます。});});</script>(5)これで準備完了です。適用サイト・ウインドウ幅が狭い時に適用されるため、ウインドウ幅を指定した新しいウインドウを開きます。・テーマ;Newsyのカスタマイズに特化したサンプルサイトです。最後に・最近はレスポンシブ対応したWordPressテーマも多いので、こういったプラグイン実装の機会も少なくなるのかもしれませんが、今回扱ったテーマがレスポンシブ対応でなかったので、このjQueryプラグインでとても助かりました。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。