【WordPress】 投稿記事・固定ページ内でパソコンとスマホのデバイスごとに内容を切り替える方法

2019年12月31日

[追記]

2013年当時は結構使い道があったデバイス別表示設定。
あれから年月も経ちスマホ性能がかなりよくなり、通信状況も5Gが登場するなど格段に良くなりました。
今はこの設定は私はしていませんのであしからず…。
[追記終わり]

パソコンとスマートフォンで表示を切り替える、と言うのはWordPress界隈では特段珍しくない技術です。

WordPress本体に組み込まれている『wp_is_mobile関数』とそれを少し使い勝手を良くした『is_mobile』の2つが王道。
ですが、これらの関数を使う際にはphpが必要で、投稿記事内では使うことが出来ません…。

<?php if (is_mobile()) :?>
	スマートフォン向けコンテンツ
<?php else: ?>
	PC向けコンテンツ
<?php endif; ?>

どこを探しても投稿記事内で使う方法が見つからなかったので、自力でショートコードに対応させましたー。
以下は『is_mobile』に追加、発展させるためのPHPコードになります。というか is_mobile をショートコードにするコードです。
上記リンク先のコードと同時に functions.php に追記してくださいな。

function pccontents( $atts, $content = null ) {
if(is_mobile()) {  
        return '';   
 } else {
        return '' . $content . '';
 }
}
function spcontents( $atts, $content = null ) {
if(is_mobile()) {  
        return '' . $content . '';   
 } else {
        return '';
 }
}
add_shortcode('pc-mieru', 'pccontents');
add_shortcode('sp-mieru', 'spcontents');

で、このコードを設定していると、以下のようにpc-mieruで囲むとパソコンからのみ表示され、sp-mieruで囲むとスマホからのみ表示されるコードの出来上がり！

[pc-mieru]パソコンからのみ表示される[/pc-mieru]
[sp-mieru]スマホからのみ表示される[/sp-mieru]

下に表示されているYoutube動画、パソコンからだと埋め込み再生されていますが、スマホからだとリンクのみ表示されています。[pc-mieru]

[/pc-mieru][sp-mieru]
IMPERIALISM / WORLD ORDER ワールドオーダー – YouTube[/sp-mieru]

パソコンから見た場合とスマホから見た場合

パソコンから見た場合とスマホから見た場合
WORLD ORDERいいよね

パソコンとスマホ、どちらから見ても中身は同一であるべきとはよく言われていますが、この程度の切り替えでしたら大丈夫だと思います。スマホからだと少しでも軽いほうが好まれますし、どちらかと言えばインストールしているYouTubeアプリで見られるようにしたほうが使い勝手良いと思いますしね。

WordPress

Posted by はりす