PCとモバイルで表示を変える条件分岐タグ-WordPress

 WordPressサイトでPCとモバイルで表示を変えたい場合も条件分岐タグを使う。

 WordPressの条件分岐は、PCとモバイルでの表示を分けたり、ブラウザやOS別で表示を分けたりできるがfunctions.phpをいじらないといけないので、今回は割愛。

 基本的な条件分岐だけをメモ。




条件分岐タグはウィジットや記事内では利用できない

 条件分岐タグはウィジットや記事内では利用できない。

PC以外のモバイル末端に表示する条件分岐タグ

 パソコン以外のモバイル末端に表示する場合は〔wp_is_mobile()〕を使う。
wp_is_mobile()〕はスマートフォンやタブレットに表示したい場合に使う。

〔wp_is_mobile()〕は「スマートフォン」と「タブレット」を分けることはできず、すべて「モバイル末端」として扱う。

モバイルに表示してPCには非表示

 まずは、「モバイルだけに表示してPCには何も表示しない場合」の記載方法。

<?php if ( wp_is_mobile() ) ://モバイル表示のとき ?>
スマホ・モバイル末端で表示させたい内容をここに記載する
<?php endif; ?>

モバイルには非表示、PCは表示する

 モバイルには非表示にし、PCだけに表示するばあいはwp_is_mobile()の前に半角の!を付ける

<?php if ( !wp_is_mobile() ) ://モバイル表示ではないとき ?>
スマホ・モバイル末端で非表示にする内容をここに記載する。
<?php endif; ?>

モバイルの表示とPCの表示を別内容で分けたい場合

 モバイルの表示とPCの表示を別内容で分けたい場合は↓のように記載する。

<?php if ( wp_is_mobile() ) : //モバイル表示のとき?>
 スマホ・モバイル末端で表示させたい内容をここに記載する
<?php else://モバイル表示ではないとき ?>
PCで表示させたい内容をここに記載する
<?php endif; ?>

HTMLを入れ込むことも可能

 条件分岐の中にHTMLを入れ込むことも可能。

 例えば、↓のように<p>タグや<br />も入れることができる。

<?php if ( wp_is_mobile() ) ://モバイル表示のとき ?>
 <p>スマホ・モバイル末端で表示させたい内容をここに記載する。<br />注意!スマホもタブレットも区別されません。</p>
<?php else: ?>
 <p>PCで表示させたい内容をここに記載する。</p>
<?php endif; ?>

複数の条件で表示を分けたい場合

 PCとモバイル末端で表示を分け、さらにページの種類で表示を分けたい!

 という場合は、&&(ANDの意味)と||(ORの意味)を使って、2つ以上の条件を組み合わせることができる。

例えば、検索結結果のページをパソコンとモバイル末端で切り分ける場合↓

<?php if ( wp_is_mobile() && is_search() ) ://モバイルで検索結果のページで表示される ?>
「モバイル」かつ「検索結果ページ」のときに表示するものをココに書く
<?php endif; ?>
 「モバイルの検索結果ページ」で表示される。
<?php if ( wp_is_mobile() ||is_search() ) ://モバイルまたは検索結果のページに表示される ?>
「モバイル」もしくは「検索結果ページ」のときに表示するものをココに書く
<?php endif; ?>
 「モバイルまたは検索結果ページ」で表示される。

phpの中に記載する

 例えば、以下のphpの記載があったとする。

<?php
/* [searchの時キーワードを表示] */
if (get_query_var("s")){
?>
   <h1 class="search-page">検索キーワード:<?php echo get_search_query(); ?>
<?php
if ($wp_query->found_posts > 0){
echo '('.$wp_query->found_posts.' 件 / '.$wp_query->max_num_pages.' ページ)';
}
?>
</h1>
<?php
}
?>

 これに「〔モバイル以外の検索結果ページ〕で表示される。」条件分岐を加えたい場合は

<?php if ( !wp_is_mobile() && is_search() ) ://モバイル以外で検索結果のページで表示される ?>
<?php
/* [searchの時キーワードを表示] */
if (get_query_var("s")){
?>
   <h1 class="search-page">検索キーワード:<?php echo get_search_query(); ?>
<?php
if ($wp_query->found_posts > 0){
echo '('.$wp_query->found_posts.' 件 / '.$wp_query->max_num_pages.' ページ)';
}
?>
</h1>
<?php
}
?>
<?php endif; ?>
スポンサーリンク

シェアする

フォローする