スマホサイトでFacebookページのいいねを増やすための「Like Box」や画像のサイズを最適化したいことありますよね。そんな時に便利な方法を紹介します。
Like BoxサイズをスマホとPCで切り替える
ここで使うのがおなじみwp_is_mobile()関数です。
<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<?php $like_width = 300; ?>
<?php else: ?>
<?php $like_width = 550; ?>
<?php endif; ?>
<div class="fb-like-box" data-href="facebookページリンク" data-width="<?php echo $like_width; ?>" data-height="210" data-show-faces="true" data-stream="false" data-header="true"></div>
上記のコートでは、スマホからのアクセスがあった時にLike Boxの幅を300pxに、PCの場合は通常幅の550pxに設定しようとしています。$like_widthの中に幅の値を入れているのです。あとは、Like Boxの「data-width」の中で幅（width）を指定します。
これで、Like Boxのスマホサイト最適化が完了です。
スポンサーリンク
画像サイズをスマホとPCで切り替える
画像のサイズもスマホ最適化しないと、はみ出してかっこ悪くなってしまいます。それを防いでくれるのがまたもやwp_is_mobile()関数です。
<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
<?php $mobile_class = "mobile_img"; ?>
<?php else: ?>
<?php $mobile_class = "pc_img"; ?>
<?php endif; ?>
<img class="<?php echo $mobile_class; ?>" src="画像パス">
今回はスマホとPCからのアクセスでそれぞれ違うclass名を与えて、CSSでスマホからアクセスがあった時のclass名「mobile_img」にてサイズを指定します。
ここで、気をつけてほしいのがスマホ用画像サイズの指定は、smart.cssにて行うという事です。style.cssではありません。stingerではPCとスマートフォンからのアクセスで参照するCSSファイルを分けているようで、style.cssにスマホ最適化のプロパティを指定しても全く動きません。
これで1時間くらいハマったので注意！
.mobile_img {
width:75px;
height:75px;
}
これでOK。
スポンサーリンク
まとめ
・スマホ最適化するにはwp_is_mobile()関数が必須
・stingerを利用している場合は、スマホ最適化のためのCSSはstyle.cssに記述する
それでは！
