ワードプレステーマをカスタマイズしている人で、is_mobile()関数を使っている方、少なくないと思います。PCよりも全然小さな画面サイズのスマホ端末で情報をお伝えするのって大変ですよね。

ところで、管理人はワードプレスの運用で、is_mobile()関数を使うのをやめました。理由は、キャッシュとの相性が良くないから。

google広告

スマートフォンで、モバイル用キャッシュが作れないケースが散見された

管理人は、WP Super Cacheを使っています。忙しいユーザーさんに情報を見ていただくのに、キャッシュは欠かせないと考えています。設定する必要がありますが、PCのキャッシュとモバイル端末のキャッシュを別に生成することができます。

ところが、is_mobileで変更してるはず・・・の部分が、PC表示になっているところがあって驚き、ftpソフト（filezilla）でキャッシュを確認すると、モバイルのキャッシュが作られていません。

「is_mobile　wp super cache」などで検索すると、相性の悪い組合せとして紹介されています。

どうやら、is_mobile側で「これはスマートフォン」というものと、wp super cache側のそれとでは違うことが原因のようです。

スマホとPCでは同じものを、表示切替はCSSで

今回やったのは以下の３つ

  1. スマホ、PCで表示するものを同じにする
  2. 地図の大きさをcssで変更する
  3. スマホ用のキャッシュを生成しない

is_moblie関数を導入した最初の目的はgoogle広告でした。PCでは、適正なサイズでもスマートフォンでは画面を占める割合が大きすぎて邪魔だったんです。しかし、今はgoogle adssense側でサイズを変えてくれる便利なタグが出されていますので要らないです。

管理人は、グーグルマップスapiを使って地図表示していますが、この地図の大きさ変更にもis_mobile関数を使っていました。パソコンでは大きく、スマホではそれなりの大きさにというやり方。さすがにこれは同じ大きさで見てくださいとはいきません。そこで、cssで対応しました。

<?php
     if (is_mobileorpc()){//モバイルかどうか判定しmapの横幅高さを決める
      $content_width = "90%" ;
      $content_height = 250 ;
     }
     else{
      $content_width = "900px" ;
      $content_height = 450 ;
     }
?>
<div id="map" style="width: <?php echo $content_width ?>; height: <?php echo $content_height ?>px;"></div>

このコードを

<div id="map"></div>

こう変えてcssを

#map{
margin-left: 5px;
width: 600px;
height: 400px;
}

@media
only screen and (max-width : 640px){
#map{
margin-left: 5px;
width: 90%;
height: 300px;
}
}

テーマ内のcssの必要なところに入れます。管理人は賢威を使っていて、design.css　と　mobile.cssに書き込みました。

表示方法をcssに変更できたので、もう一ついいことがあります。それは、キャッシュをモバイル用に造らなくてもいいこと。モバイルでもPCでも一度アクセスすればキャッシュができるので、スピードアップも期待できます。

管理画面から　設定　→　WP Super Cache　→　詳細　→　Mobile device support. (External plugin or theme required. See the FAQ for further details.)のチェックを外すと設定できます。

感謝：キャプチャ写真はぱくたそより引用しました。素敵な写真をありがとうございます。

広告