【WordPress】 投稿記事・固定ページ内でパソコンとスマホのデバイスごとに内容を切り替える方法
[追記]
2013年当時は結構使い道があったデバイス別表示設定。
あれから年月も経ちスマホ性能がかなりよくなり、通信状況も5Gが登場するなど格段に良くなりました。
今はこの設定は私はしていませんのであしからず…。
[追記終わり]
パソコンとスマートフォンで表示を切り替える、と言うのはWordPress界隈では特段珍しくない技術です。
- wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム
- WordPress:PCとスマートフォンでコンテンツを切り替えたい際に便利なwp_is_mobile関数+α | NxWorld
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]
パソコンとスマホ、どちらから見ても中身は同一であるべきとはよく言われていますが、この程度の切り替えでしたら大丈夫だと思います。スマホからだと少しでも軽いほうが好まれますし、どちらかと言えばインストールしているYouTubeアプリで見られるようにしたほうが使い勝手良いと思いますしね。
ディスカッション
コメント一覧
初めまして、ワードプレス記事内で条件分岐を使うためにグーグル検索するとたどり着きました。
ver3.6で上記コードをfunction.phpに書き込み、記事内で使用してみたところ、記事のタイトル部分以下が表示されなくなりました。
どうか対処法はないでしょうか?
あーそういえば本文では書いてませんでしたね……。
リンク先のphpコードも同時に記載しておく必要があります。多分コレでちゃんと表示されると思いますー。
http://www.nxworld.net/wordpress/wp-is-mobile.html
めちゃくちゃ助かりました!ありがとうございます
使えたようで何より!
お世話になります。
分岐が固定ページでうまく反映してくれなくて、困っていましたが、このページを参考に少しできるようになりました!
ちょっとそれでも反映してくれない部分があるのですが、CONTACT FORM 7のショートコードを[pc-mieru]~[/pc-mieru]間に入れた場合、フォームが出ず、ショートコードがそのまま出てしまうんですが、これの解決策って何かありませんかね…?;;
コメントありがとうございますー。
調べてみたところ下記のような記事がありました。
[WordPress]ショートコードをショートコードで囲む際の注意点 | モノグサにお灸 | 明日なまけるために、今日はがんばってみる。
$content = do_shortcode( shortcode_unautop( $content ) );
この一文を function pccontents( $atts, $content = null ) { の次の行に挿入すればいいのかな?
スマートフォン向けコンテンツ
PC向けコンテンツ
の下にmoreタグを入れると崩れてしまうのですが、functions.phpに記述しなくてすむ方法はないでしょうか?
既存のコードをショートコードにするためだけにコピペで組んだだけですので、私自身には技術はないのでバグフィックスまではカバー出来そうにないですねー……。力になれそうになくて申し訳ありません。
ピンバック & トラックバック一覧
[…] 【WordPress】 投稿記事・固定ページ内でパソコンとスマホのデバイスごとに… […]
[…] 【WordPress】 投稿記事・固定ページ内でパソコンとスマホのデバイスごとに内容を切り替える方法 – ANKARE IIDX […]
[…] 事本文に直接アドセンスのコードを記述していましたが、WordPressではショートコードと言う機能を使ってみることにしま ANKARE IIDX スポンサーリンク (adsbygoogle = window.adsbygoogle || []).push({}); […]
[…] 【WordPress】 投稿記事・固定ページ内でパソコンとスマホのデバイスごとに内容を切り替える方法 – ANKARE IIDX […]
[…] は右も左も分からない状態。 具体的な書き方は、下のページが非常に参考になりました。 ANKARE IIDX seesaaでブログを指定た時は、記事本文に直接アドセンスのコードを記述していましたが […]
[…] 参考サイト様:【WordPress】 投稿記事・固定ページ内でパソコンとスマホのデバイスごとに内容を切り替える方法 […]