WordPress bones スマートフォンのメニュー表示をカスタマイズ

jQueryプラグインのSidrを利用してスマートフォン用のメニューをスライドで表示する設定にします。
書籍の「現場でかならず使われているWordPressデザインのメソッド」を参考に作りました。
CSSの設定詳細は現場でかならず使われているWordPressデザインのメソッドの内容をほぼそのまま利用しています。
この記事では本と違う箇所とBonesでの設定を載せています。
現場でかならず使われているWordPressデザインメソッドの参考ページは226ページになります。

ボタン表示

ボタン表示


スライドメニュー

スライドメニュー


Sidrのサイトからファイルをダウンロードします。
ダウンロードしたファイルは次の構成になっています。

Sidrファイル構成

  • 使用するファイルは
  • jquery.sidr.min.js
  • jquery.sidr.dark.css
  • jquery.sidr.light.css

2種類のcssはメニューの色違いになります。
このブログではjquery.sidr.light.cssを使用しています。
ダウンロードしたファイルはテーマディレクトリの任意のフォルダに入れます。
記事では/lib/js/sidr/に追加したという内容にしています。

bonesにSidrの読み込みを追記

bonesでSidrのJavaScriptとCSS(このブログではjquery.sidr.light.css)ファイルを読み込みます。
library内にあるbones.phpにSCRIPTS & ENQUEUEINGという項目があります。
そこにSidr用のJavaScriptとCSSファイルを追記します。
以下の15〜16行目が追記した箇所になります。

header.phpの指定

スマートフォン表示のとき2〜4行目のタグがメニュー用ボタンアイコンの設定になります。
メニュー用のボタンにはLigature Symbolsを使っています。
PC表示のときは、Javascriptでボタンが隠れる設定にしています。

メニュー展開ボタンのCSS設定

ここまで書きましたが、肝心のiPhoneでボタン表示になっていません。
ブラウザで縮小していくとボタン表示になるのですが…
修正して表示できるようになりましたら改めてその部分を記事にします。

Comment

  • 2 Comments

はじめまして。bonesでスライドメニューを構築したく悩んでいる者です。
何か参考になるサイトがあるか探していたところ、このサイトに行き着きました。
で1点ご質問なのですが記載されている内容で構築すると、どうしてもPC表示した際、
プルダウンメニューがスライドメニュー内に表示されてしまいます。
私のやり方が悪いのかご教授いただければ幸いです。

はじめまして。コメントありがとうございます。
sidrの場合、プルダウンメニューはスライドメニュー内に表示されると思います。
sidrサイトのThe Menu ContentにあるLoad remotellyをみても2階層目が表示されていますので。
現在サイト休止状態で、8月くらいにまたデザイン再構築して再開予定です。再構築の時に、スライドメニューまわりで新しくできましたら、記事にいたします。今回はお役に立てず申し訳ありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Share・Feedly