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


スポンサーリンク

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

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


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

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

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


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


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

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

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


テーマのfunction.php に以下を足します。
register_nav_menu( 'sidebar-navi', 'サイドバーウィジット-1' );

これで、sidebar-navi という配置場所が作られます。

2つめのメニューを作る


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


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


メニューを配置する


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


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

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


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


スポンサーリンク