スポンサーリンク
パソコンとスマートフォンで表示を切り替える、と言うのは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動画、パソコンからだと埋め込み再生されていますが、スマホからだとリンクのみ表示されています。
パソコンから見た場合とスマホから見た場合
WORLD ORDERいいよね
パソコンとスマホ、どちらから見ても中身は同一であるべきとはよく言われていますが、この程度の切り替えでしたら大丈夫だと思います。スマホからだと少しでも軽いほうが好まれますし、どちらかと言えばインストールしている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 ) { の次の行に挿入すればいいのかな？
[…] 【WordPress】 投稿記事・固定ページ内でパソコンとスマホのデバイスごとに… […]
[…] 【WordPress】 投稿記事・固定ページ内でパソコンとスマホのデバイスごとに内容を切り替える方法 – ANKARE IIDX […]
スマートフォン向けコンテンツ
PC向けコンテンツ
の下にmoreタグを入れると崩れてしまうのですが、functions.phpに記述しなくてすむ方法はないでしょうか？
既存のコードをショートコードにするためだけにコピペで組んだだけですので、私自身には技術はないのでバグフィックスまではカバー出来そうにないですねー……。力になれそうになくて申し訳ありません。
[…] 事本文に直接アドセンスのコードを記述していましたが、WordPressではショートコードと言う機能を使ってみることにしま ANKARE IIDX スポンサーリンク (adsbygoogle = window.adsbygoogle || []).push({}); […]
[…] 【WordPress】 投稿記事・固定ページ内でパソコンとスマホのデバイスごとに内容を切り替える方法 – ANKARE IIDX […]