スマホとパソコンで表示内容を変えるショートコード作成

最近では、サイトやブログに訪れるユーザーのデバイスのほとんどはスマートフォンです。

とはいえ、まだまだパソコンからのユーザーも多くいます。

私の場合、複数のサイトを見ながら調べものをするときは、圧倒的にパソコンの方が作業効率が上なので、何か作業をするときにはパソコンからサイトやブログを閲覧します。

スマホとパソコンでは、画面の大きさも異なるので、それぞれのデバイスで最適なレイアウトや情報を表示できれば、どちらのユーザーにとっても有益なコンテンツを提供できます。

使用するテーマによっては初めから用意されている

WordPressを使用してブログを作成する場合に、テーマというブログのテンプレートのようなものがあります。

それぞれのテーマには、様々な機能が提供されていて、最近のテーマのほとんどがレスポンシブ対応 と言って、スマホとパソコンでアクセスしたときにそれぞれにとって見やすいレイアウトで表示するようになっています。

しかし、全体的なレイアウトは、各デバイスに対応していたとしても、コンテンツをスマホとパソコンで別の内容を表示したいときもあります。

当ブログで使用しているテーマ「LION BLOG（ライオンブログ）」では、スマホとパソコンで違う内容を表示するための機能 があります。

他にも、有料テーマの「AFFINGER4（アフィンガー4）」でも同様の機能があります。

実現する方法が異なる

テーマによって、スマホとパソコンで別の内容を表示する機能はありますが、それを実現させるための方法が違います。

「LION BLOG（ライオンブログ）」では、ユーザーの画面解像度によって、CSSで表示/非表示となるようなClassが設定されています。（display:noneで処理）

ユーザーは、スマホとパソコンで違う内容を表示させたいときは、要素をこのClassで囲むことで可能になっています。

対して「AFFINGER4（アフィンガー4）」では、アクセスのあったデバイスの種類そのものを判断して、表示/非表示となるようなショートコードが用意されています。（Wordpressのwp_is_mobile関数で、ユーザーエージェントを判断する処理）

「LION BLOG（ライオンブログ）」のようにCSSで対応する方法は、CSSを少し勉強すれば初心者の方にもできる方法なのでお手軽に使用しているテーマで使用することができます。

ただ、デメリットとして、CSSで「display:none」を設定した場合、ブラウザ上で非表示になっていても、実際には読み込まれているので、無駄な内容を読み込んでいる分、表示速度という観点からは良くありません。

ここでは、AFFINGER4と同じようにデバイスを判断して表示/非表示を分けることができるショートコードを作成していきます。

functions.phpを編集

ショートコードの基本的な作成方法 は、ここでは説明しません。

functions.phpに以下のコードを貼りつけます。
※ ここで紹介する方法では、スマホとタブレットを分けることはできません

PCのみに表示する場合

function pc_only($atts,$content = null) {
ob_start();
if (!wp_is_mobile()) {
return $content;
}else{
return '';
}
ob_get_clean();
}
add_shortcode('pc_only', 'pc_only');

スマホ/タブレットのみに表示する場合

function mobi_only($atts,$content = null) {
ob_start();
if (wp_is_mobile()) {
return $content;
}else{
return '';
}
ob_get_clean();
}
add_shortcode('mobi_only', 'mobi_only');

作成したショートコードを呼び出す

作成したショートコードを呼び出してみます。
方法は、他のショートコードを呼び出すときと同じです。

WordPressのテキストエディタに以下のように記入します。

PCのみに表示する場合

[pc_only]PCのみに表示されているはずです[/pc_only]

スマホ/タブレットのみに表示する場合

[mobi_only]スマホ/タブレットのみに表示されているはずです[/mobi_only]

便利な使い方

広告の内容をデバイスごとに分けて表示

例えば、ブログのサイドバーの最上段に広告を表示していて、更に記事下にも広告を表示している場合、スマホからアクセスしたとき、広告が続けて表示されることになります。
そんなときは、サイドバー上部の広告はパソコンからのアクセスのみに限定して表示するなどという使い方ができます。

その他、スマホ独特のサービスを紹介する広告を表示するのに、パソコンからのユーザーに表示しても効果が薄かったり、広告主の方でスマホからのアクセスでないと、公式ページへ行けないということもあります。

記事内でスクリーンショットなどの使っての説明記事

画像を使って使用方法を説明する記事を書く場合にも有効です。

アクセスしたデバイス向けの画面を表示したり、逆に違うデバイスの画面を表示したりできるので、不要な画面をロードして表示する必要がないので、別々に記事を書く必要もありません。

デバイスによる画像の回り込み

これは、CSSで用意した方が、効率が良いですが、例えばパソコンで表示する場合は文字を画像の横に回りこませるけれど、モバイルで表示する場合は、回り込みを解除して表示するなどという使い方も可能です。