【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アプリで見られるようにしたほうが使い勝手良いと思いますしね。

 この記事へのコメント

  1. なおや より:

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

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

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

  2. くろえつ より:

    めちゃくちゃ助かりました!ありがとうございます

  3. NANA より:

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

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

  4. […] 【WordPress】 投稿記事・固定ページ内でパソコンとスマホのデバイスごとに… […]

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

  6. 匿名 より:

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

    PC向けコンテンツ

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

    • はりす◆mSoYU62K22 より:

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

  7. […] 事本文に直接アドセンスのコードを記述していましたが、WordPressではショートコードと言う機能を使ってみることにしま ANKARE IIDX スポンサーリンク (adsbygoogle = window.adsbygoogle || []).push({}); […]

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

コメントを残す

関連記事

NO IMAGE

【WordPress対応】Flickrの写真を正しく引用するブックマークレット

NO IMAGE

スポンサードリンクとしてスポンサードリンクを追記

NO IMAGE

スポンサードリンク、サイドバーに移動してスポンサードリンクバーになる

NO IMAGE

WP用プラグイン『Feedback Champuru』でコメント欄を賑やかし

NO IMAGE

Googleアドセンス・アナリティクス用のプライバシーポリシーを設置しました【例...

NO IMAGE

WordPress用プラグイン『Sharebar』を設置してみた