wordpress で表示するメニューを画面サイズで切り替えたい。そんな要望ががががが・・・
要するにスマホで見るときには、見せなくていいコンテンツがあるけど、ブラウザで見るときにはメニュー項目の多いメニューを表示させたい。

画面サイズによってブロックの表示非表示を切り替える

wordpressaは、php という言語で書かれていますが、画面サイズを php で取得することはできません。
php は、サーバーで動いていて、ブラウザは、ローカル。。。つまり手元の機器で見ている・・・でわかるかな？

いずれにしても php では、現在の画面サイズを確認することはできません。
画面サイズを取得できるのは、ローカル・・・手元の機器、ブラウザで動く javascript しかありません。

javascript で画面サイズを受け取るには、以下の書き方ができます。
<script><br /> var ua = navigator.userAgent;<br /> var wintype=0;<br /> if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){<br /> wintype=1;<br /> }else if(ua.indexOf('iPad') > 0 ){ // || ua.indexOf('Android') > 0){<br /> wintype=1;<br /> }else{<br /> wintype=0;<br /> }<br /> if (wintype==0) {<br /> // pcブラウザ系<br /> }else{<br /> // スマホ系<br /> }<br /> </script><br />

wordpress の 表示するメニューを画面サイズで切り替える

PCブラウザ系、スマホ系、でメニューを切り替えるということで、メニューを2つ定義しておかないといけない。
外観⇒メニュー

2つのメニューのうち、一つはトップレベルメニュー、もう一つは配置場所を作ってそこに配置します。
具体的には、

メニューの配置位置を作る

テーマのfunction.php に以下を足します。
register_nav_menu( 'sidebar-navi', 'サイドバーウィジット-1' );<br />
これで、sidebar-navi という配置場所が作られます。

２つめのメニューを作る

外観⇒メニュー⇒新規メニュー

メニューの項目を追加して保存します。

メニューを配置する

今回は同じ場所に配置することにして。(header.php に書き込みました)
<div id="menu1"><br /> <nav id="gnavi"><br /><?php<br /> // トップナビの位置に配置しているメニューを表示させる<br /> wp_nav_menu( array( 'theme_location' => 'header-navi' ) );<br />?><br /> </nav><br /> </div><br /> <div id="menu2"><br /> <nav id="gnavi"><br /><?php<br /> // sidebar-naviの位置に配置しているメニューを表示させる<br /> wp_nav_menu( array( 'theme_location' => 'sidebar-navi' ) );<br />?><br /> </nav><br /> </div><br />

ポイントは、メニューを id 付き div でくくっているところ。

画面サイズによって片方のメニューを非表示にする

footer.php にいれましたけど、以下のように画面サイズによって style.display を使って表示非表示を切り替えます。
<script><br /> var menu1=document.getElementById("menu1");<br /> var menu2=document.getElementById("menu2");<br /> <br /> var ua = navigator.userAgent;<br /> var wintype=0;<br /> if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){<br /> wintype=1;<br /> }else if(ua.indexOf('iPad') > 0 ){ // || ua.indexOf('Android') > 0){<br /> wintype=1;<br /> }else{<br /> wintype=0;<br /> }<br /> if (wintype==0) {<br /> // pc<br /> menu1.style.display='';<br /> menu2.style.display='none';<br /> }else{<br /> // ip<br /> menu1.style.display='none';<br /> menu2.style.display='';<br /> }<br /> </script><br />