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

パソコンとスマートフォンで表示を切り替える、と言うのは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動画、パソコンからだと埋め込み再生されていますが、スマホからだとリンクのみ表示されています。

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

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

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

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

  1. 初めまして、ワードプレス記事内で条件分岐を使うためにグーグル検索するとたどり着きました。

    ver3.6で上記コードをfunction.phpに書き込み、記事内で使用してみたところ、記事のタイトル部分以下が表示されなくなりました。

    どうか対処法はないでしょうか?

  2. お世話になります。
    分岐が固定ページでうまく反映してくれなくて、困っていましたが、このページを参考に少しできるようになりました!

    ちょっとそれでも反映してくれない部分があるのですが、CONTACT FORM 7のショートコードを[pc-mieru]~[/pc-mieru]間に入れた場合、フォームが出ず、ショートコードがそのまま出てしまうんですが、これの解決策って何かありませんかね…?;;

  3. Pingback: QuickAdsenseで挿入するアドセンスコードをPCとスマホで切り替える方法

  4. Pingback: スマホにのみ投稿記事内に広告を表示する方法 #WordPress -SAKULIFE

  5. スマートフォン向けコンテンツ

    PC向けコンテンツ

    の下にmoreタグを入れると崩れてしまうのですが、functions.phpに記述しなくてすむ方法はないでしょうか?

    • 既存のコードをショートコードにするためだけにコピペで組んだだけですので、私自身には技術はないのでバグフィックスまではカバー出来そうにないですねー……。力になれそうになくて申し訳ありません。

  6. Pingback: seesaa→WordPress移転 googleアドセンスを簡単に貼るために、ショートコードを設定する | カワハラ雑記

コメントを残す