[WordPress]スマホページとPCページを切り分けるwp_is_mobile関数

This entry was posted on
March 30 , 2014, Category is

WordPress3.4以降で追加されたモバイル向けの関数 wp_is_mobile を使えば簡単にスマホページとPCページを切り分ける事が可能です。

// for WordPress Themas
<?php if (wp_is_mobile()) :?>
 /* ここにスマホページの処理内容 */
<?php else: ?>
 /* ここにPCページの処理内容 */
<?php endif; ?>

例えば以下のように使用する。

// for WordPress Themas
<?php if (wp_is_mobile()) :?>
<h1 class="title"><a href="<?php bloginfo( 'url' ); ?>">コードドロップ</a></h1>
<?php else: ?>
<h1 class="title"><a href="<?php bloginfo( 'url' ); ?>">制作・開発・構築メモ – コードドロップ</a></h1>
<p class="description">WEBディレクター/デザイナーだけどプログラムわかんねぇよって人の為の初心者向けWEBトピックス。</p>
<?php endif; ?>

PCページでは表示されるディスクリプションに対し、スマホページでは指定をしておらず表示がされないようにしている。CSSでも消す事が可能だが文法上スマートではないので元々表示されないようにしておこう。

Media QueriesやWordPressの機能で分岐条件を与えれば、1つのテンプレートファイルで様々なデバイスに対応したレスポンシブサイトを構築する時にもとても便利ですね。

皆様の応援が次の記事を書く原動力です