WordPress:authorページを一括リダイレクト
AMPの公式イメージ利用方法とガイドライン【画像ダウンロード】
【MAC】スクリーンショットの保存フォルダを変更・JPGファイルにする
MAMPでMySQLが起動しない時の解決方法
AMP化と一緒にHTTPSにすることにした:設定方法
@ 2016 fwary

2カラムのレスポンシブをWordPressのPHPで実装する

モバイルからのアクセスが9割のfwaryでは、サイドバーは、いらないと思って、ずっと1カラムサイトを作ってきていました。最近、CSSや技術的なことなどを書きたくなりまして、そうなるとPC向けのテーマを作らなきゃなと思いました。
モバイルもPCも、どちらでもOKな2カラムで、モバイルでは、サイドバーが消えるというのをWordPressのPHPで実装することにしました。
 
海外のわたしが参考にしているサイトは1カラムのレイアウトが多いです。下の、さらに下のほーうに運営会社の会社概要が載ってたりします。あとは、ハンバーガーメニューを開くと下の方にfooterっぽいものが載ってたりします。
 
こういったサイトから参考にしたのは、モバイルでは表示されない、サイトを開いてすぐの広告です。PCだと、どーん。と広告が出てきます。モバイルだと出てきません。アドセンス違反を避けるためだと思います。1カラムでもできるのですが。fwaryにはまだ実装していません。
 
今回は、PC向けに、sidebarを作り、sidebarにある縦長の広告を表示します。わたしのサイトをPCで見る方は、お仕事中かな?とも思うので、autherも上の方に載せておきます。コピペしたらリンクもらえると嬉しいですね。
そして、モバイルでは、このsidebarを見えないようにします。
以下、その方法です。

 
使うのはこちらのPHPです。
 


<?php if(!wp_is_mobile()): ?>
<!--モバイルの時見えない-->
<?php endif; ?>
 

 
使い方も簡単。の中にモバイルの時見せたくないものを入れるだけ。わたしは、サイドバーをこれで囲いました。例えば、ダブルレクタングのアドセンスやサイトを開いてすぐ見えるアドセンスを入れると、モバイルでは非表示になるという使い方もできます。大事なのは、「wp_is_mobile」の前に否定の「!」がつくということ。
 
ワードプレスがモバイルかどうかを検知して、表示、非表示を分けています。詳しくは、公式リファレンスに載っています。
注意点は、タブレットもモバイルデバイスとして認識されていること。また、解像度や、ウィンドウの幅などは考慮されていないので、PCでウィンドウ幅を狭めても非表示にはなりません。モバイル端末でチェックするか、PC上のモバイル画面で表示をした時は、リロードするとちゃんと認識されました。

sharing is caring