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; ?>
スマホ・モバイル末端で表示させたい内容をここに記載する
<?php endif; ?>
モバイルには非表示、PCは表示する
モバイルには非表示にし、PCだけに表示するばあいはwp_is_mobile()の前に半角の!を付ける
<?php if ( !wp_is_mobile() ) ://モバイル表示ではないとき ?>
スマホ・モバイル末端で非表示にする内容をここに記載する。
<?php endif; ?>
スマホ・モバイル末端で非表示にする内容をここに記載する。
<?php endif; ?>
モバイルの表示とPCの表示を別内容で分けたい場合
モバイルの表示とPCの表示を別内容で分けたい場合は↓のように記載する。
<?php if ( wp_is_mobile() ) : //モバイル表示のとき?>
スマホ・モバイル末端で表示させたい内容をここに記載する
<?php else://モバイル表示ではないとき ?>
PCで表示させたい内容をここに記載する
<?php endif; ?>
スマホ・モバイル末端で表示させたい内容をここに記載する
<?php else://モバイル表示ではないとき ?>
PCで表示させたい内容をここに記載する
<?php endif; ?>
HTMLを入れ込むことも可能
条件分岐の中にHTMLを入れ込むことも可能。
例えば、↓のように<p>タグや<br />も入れることができる。
<?php if ( wp_is_mobile() ) ://モバイル表示のとき ?>
<p>スマホ・モバイル末端で表示させたい内容をここに記載する。<br />注意！スマホもタブレットも区別されません。</p>
<?php else: ?>
<p>PCで表示させたい内容をここに記載する。</p>
<?php endif; ?>
<p>スマホ・モバイル末端で表示させたい内容をここに記載する。<br />注意！スマホもタブレットも区別されません。</p>
<?php else: ?>
<p>PCで表示させたい内容をここに記載する。</p>
<?php endif; ?>
複数の条件で表示を分けたい場合
PCとモバイル末端で表示を分け、さらにページの種類で表示を分けたい！
という場合は、&&（ANDの意味）と||（ORの意味）を使って、2つ以上の条件を組み合わせることができる。
例えば、検索結結果のページをパソコンとモバイル末端で切り分ける場合↓
<?php if ( wp_is_mobile() && is_search() ) ://モバイルで検索結果のページで表示される ?>
「モバイル」かつ「検索結果ページ」のときに表示するものをココに書く
<?php endif; ?>
「モバイル」かつ「検索結果ページ」のときに表示するものをココに書く
<?php endif; ?>
「モバイルの検索結果ページ」で表示される。
<?php if ( wp_is_mobile() ||is_search() ) ://モバイルまたは検索結果のページに表示される ?>
「モバイル」もしくは「検索結果ページ」のときに表示するものをココに書く
<?php endif; ?>
「モバイル」もしくは「検索結果ページ」のときに表示するものをココに書く
<?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
}
?>
/* [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; ?>
<?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; ?>
コメント