追加質問させてください。
２．レスポンシブにするのにPCサイトでは横並び、スマフォではトグルさせるjsがあったと思うのですが、こちらを利用する場合、カスタムメニューは利用しては使えないのでしょうか？
CSSには:hoverセレクタというものがあります。”css hover background”などで検索すれば情報があります。
追加の方ですが、どういう構造でそのJavaScriptが書かれているのかを見ていないのでわからないですが、通常、問題ないかと思います。WordPressテーマや自作テーマの場合はそのJavaScriptの作者などに質問した方が正確な答えがもらえます。
＞Daisuke Takahashiさん
ご回答ありがとうございます。cssはわかりますので、:hoveセレクタは存じています。
では、みなさんcssで制御している方が多いのでしょうか。wpだからといって特別に考える必要はないのですね。
追加の方ですが、直接メニューを打てないと、jsでPCサイトとスマフォのメニューの切り替えができなかった気がします。今ちょっと記事が見当たらないのですが、あとはcssで別にスマフォ用のメニューを書いて、display:blockとnoneで切り替える方法があると思いますが、重くなるから皆さん違う方法をとっているのかな？と思い質問させていただきました。
自分はカスタムメニューのように項目の量の変更が後からある場合でも対応できるようにTwitterのBootstrapのように書いています。
メニューの入れ子などもPC/モバイル共通のHTMLで記述して、あとはJavaScriptとCSSで画面サイズに応じて、切り替えるっていう方法です
タッチデバイスでは :hover と言う概念がないので当然cssの :hover も無視されます。
画像の切り替えをスクリプトで実装しても当然無視されるはずですので、
気にしなくていいような気がします。
２．について
一般的なWordPressのテーマを見る限り、メニューを2個作って切り替えるのでは無く
一つのメニューをcssのメディアクエリを使って見栄えを変えているだけです。
デフォルトテーマを参考にしてください。
jQueryのプラグインを使う場合は、
– jQueryがわをWordPressで出力されたクラスなどに合わせて動作するようにする
– HTMLを修正する必要がある場合は wp_nav_menu で walker パラメーターを指定してテーマにコードを追加する
下記ページ内の「Using a Custom Walker Function」
http://codex.wordpress.org/Function_Reference/wp_nav_menu
＞Daisuke Takahashiさん
そうです。rBootstrapがまだ使いこなせてないのですが、自動的に切り替えした際に、右上にスクエアに横のライン三本のアイコンに切り替えたいと思っています。
＞gatespaceさん
上記のように切り替えたいと思っているのですが、walkerパラメーターに関してもみてみたいと思います。
実はすでにWPでレスポンシブのデモサイトを作成済みなのですが、ヘッダーのcssやjsをfunctions.phpに記述しなおしたり、メニューをカスタムメニューにしていなかったので、WPらしい仕様に改修中です。メニューも今まではcssのメディアクエリで切り替えていたのですが、スマホ表示時に右上にドロップダウンを作成したかったので、ご質問いたしました。
お二人ともありがとうございます。
ちょっとメニューに関して改変できてから質問を閉じたいと思います。
＞Daisuke Takahashiさん
＞gatespaceさん
結局コリスさんのところで紹介されていたレスポンシブメニュー対応のjsを使いました。
まだcssでの整形が終わっていませんが、実装はできましたのでお二人にお礼申し上げます。
ありがとうございました。
