PC表示とモバイル表示を条件分岐で制御する方法 ~ WordPress条件分岐 ~

最適なユーザビリティを

 

WordPressでサイトを作成していくにあたって、必ず「これはスマホでは表示させたくないな」「これだけスマホで表示させたいな」という事が出てくることが多々あります。例えば、細かくて綺麗な画像を追加したけどスマホで見ると小さくてよく分からない、ページのギャラリー表示はPCのみだけで表示させたい、ウィジェットがスマホで見ると崩れる、などなど。

サイトのデザイン性、また、PCやタブレット、スマホなどの色々な解像度の違う媒体が数多くある中、レスポンシブデザインだけではサイトのユーザビリティを維持できない場合があります。あなたのサイトに来ていただくユーザーにとって見やすい最適なサイトを構築していくには、デバイスごとの条件分岐は必須であると思いますので、ぜひ当記事で紹介している分岐方法をご活用いただけましたら幸いです。

 

 


PHPによるPC・モバイル表示分岐

 

このTIPSは「wp_is_mobile関数」を利用する方法です。2019年現在ではさすがに大丈夫かと思いますが、念のためお手元のWordpressのバージョンが3.4以上であることを確認してください。もしバージョンが3.4以下の場合はwp_is_mobile関数が利用できませんので、Wordpressをバージョンアップしてください。

wp_is_mobile関数を使用した基本的な形は下記です。

 

<?php if(wp_is_mobile()): ?>
//ここにスマホに表示したいものを書く//
<?php else: ?>
//ここにPCに表示したいものを書く//
<?php endif; ?>

 

上記のwp_is_mobile関数を記事内でショートコードとして利用できるようにしたphpコードが下記の枠内になります。テーマのfunctions.phpを開いて下記のコードをそのままコピペしましょう。functions.phpはメニューの「外観」>「テーマの編集」より選択が可能です。また、念のためにfunctions.phpは子テーマを使用しての編集が安全です。

 

//PCのみで表示するコンテンツ

function if_is_pc($atts, $content = null )
{
$content = do_shortcode( $content);
if(!wp_is_mobile())
{
return $content;
}
}
add_shortcode('pc', 'if_is_pc')

//スマホ・タブレットでのみ表示するコンテンツ

function if_is_nopc($atts, $content = null )
{
$content = do_shortcode( $content);
if(wp_is_mobile())
{
return $content;
}
}
add_shortcode('nopc', 'if_is_nopc');

 

上記をfunctions.phpにコピペしたら、下記のショートコードで実装が可能となります。

・[pc][/pc]でPCのみで表示されるコンテンツ
・[nopc][/nopc]でモバイルのみで表示されるコンテンツ

 

以上がwp_is_mobile関数を使用して、functions.phpにショートコード化とした表示分岐方法となります。こちらの方法ではhtmlで構成のできる記事投稿内での分岐方法となります。ウィジェットなどの外部ツールをPC・モバイル表示に分岐させる方法を次に説明していきます。

 

 


ウィジェットの表示分岐

 

ウィジェットなどの表示と非表示を分岐させる方法は色々あるかと思いますが、当サイトでは「Widget CSS Classes」というプラグインを使用しております。

先に述べておりました、phpを使用したコンテンツ分岐方法ではウィジェットなどの表示を分岐させることはできません。この「Widget CSS Classes」というプラグインは、ウィジェットに対して表題の「PCとスマホ分岐」など任意のCSSクラスを追加できますので、CSSにモバイル分岐のクラスを設定し、それをウィジェットに反映させることが可能です。

例えば、レスポンシブ用CSS内にdisplay:のクラスを作成し、表示と非表示を制御させることによって、ウィジェットの表示分岐のクラスとして使用できます。

 

@media only screen and (max-width: 1023px){
.u-none-sp{display:none}
.u-none-pc{display:block}
}

 

当ブログでは、上記CSSの通りクラスに「u-none-sp」とつけるとスマホでは非表示となり、「u-none-pc」とつけるとPCでは非表示となるようにCSSによるクラス分けを設定して使用しております。表題のPCとモバイルの分岐方法に関するクラス設定は、こちらの方法で分岐が可能となります。

「Widget CSS Classes」の各項目の簡単な説明と、当ブログが行っているクラス設定は下記の通りとなりますので、よろしかったらご参考頂ければと思います。

 

・Add Widget Number Classes:ウィジェットナンバーのクラスを追加
・Add First/Last Classes:最初と最後のウィジェットにクラスを追加
・Add Even/Odd Classes:奇数番目・偶数番目を識別するクラスを追加
・Show Additional Field for ID:ID付与の有効化
・Class Field Type:クラス追加フォームの種類
・Predefined Classes:定型クラスの追加
・Fix widget parameters:ウィジェットのパラメータを修正
・Remove duplicate classes:重複したクラスを削除

 

 

 


 

 

以上、ざっくりとPC表示とスマホ表示の分岐方法を説明させていただきました。「Widget CSS Classes」はPCとモバイル表示の分岐だけではなくウィジェットに任意のクラスを追加できますので、それぞれのクラスや要素に異なるCSSを適用したいという時には、大変役に立つプラグインです。是非ご活用いただければと思います。