WordPressでスマートフォン閲覧時のみ条件分岐をさせるwp_is_mobile()関数

WordPressでスマートフォンで閲覧時のみ、PCと違う表示をしたい時の方法です。

例として「LINEで送る」ボタンをスマートフォンの時のみ表示をする、という設定でご紹介です。
※僕がそうだったので。


LINEで送るボタンをソースコードを手に入れる

まずは、↓のリンクからボタン画像とソースコードを手に入れます。
設置方法|LINEで送るボタン

 

こちらのページには、ご丁寧に「WordPressのテンプレートに記述する場合」という↓のようなWordpress用のサンプルコードがあります。

<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>">
<img src="[ボタン画像のURL]" width="[ボタン幅]" height="[ボタン高さ]" alt="LINEで送る" />
</a>

 

ダウンロードした画像もサーバーにアップします。


テンプレートに反映させる

wp_is_mobile() 関数でスマートフォンかどうかを判定することができます。
「LINEで送る」ボタンを表示させたい個所に下記のように記述します。

<?php if(function_exists('wp_is_mobile') && wp_is_mobile()):?>
<a href="http://line.naver.jp/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>" target="_blank">
<img src="<?php bloginfo('template_url'); ?>/images/linebutton_86x20.png" width="88" height="20" alt="LINEで送る" />
</a>
<?php endif; ?>

すると以下のようになるはずです。

 

 

以上です。wordpress便利です。
なお、wp_is_mobile() 関数は、WordPress3.4移行から対応です。

 

この記事を書いた人:

ナカシマ

北区赤羽在住のWEBデザイナー兼エンジニア。インターネット、WordPress、本・漫画、音楽が大好き。妻と猫と暮らすアップル信者。

BLOG: 着ぐるみ追い剥ぎペンギン