記事内でpcとスマホ(タブレット)の表示内容を切り替えるwordpressのショートコード
2014 April 30
久しぶりの更新です^O^
「pc」と「スマートフォン」で表示を切り替える方法はいくつかありますが、”意図した部分だけ”をショートコードで簡単に内容を切り替えられるようにする手順メモ。
広告の出し分けなどがとっても簡単にできるので便利です!
記事内で使う場合と、テンプレートファイル内で使う場合の手順をまとめました。
参考にした記事:Web Shufu
▼追記 2014/12/17▼ 関連記事書きました!
【wordpress】PC(タブレット)とスマートフォンで記事内の表示内容を切り替えるショートコードの設定方法
タブレットはPC表示に含む場合の記述方法です。タブレット以外でも、特定のデバイスを指定する場合に応用できます。
手順一覧
2,ショートコードを作成
3,実際に使うショートコード
4,テンプレートファイル内でこのショートコードを使う
1,「PC」と「スマートフォン・タブレット」を判別する関数
wordpress3.4から加わった条件分岐タグ「wp_is_mobile」関数を使います。
「wp_is_mobile」は、ユーザーがWebサイトを閲覧している端末のヘッダー情報を見て、pc用のコンテンツとスマートフォン(タブレット)用のコンテンツを切り分ける、WordPressの条件分岐タグです。
2,ショートコードを作成
functions.phpに以下を記述します。コピペでOK。
//PCでのみ表示するコンテンツ function if_is_pc($atts, $content = null ) { $content = do_shortcode( $content); if(!wp_is_mobile()) { return $content; } } add_shortcode('pc', 'if_is_pc'); //スマートフォン・タブレットでのみ表示するコンテンツ function if_is_nopc($atts, $content = null ) { $content = do_shortcode( $content); if(wp_is_mobile()) { return $content; } } add_shortcode('nopc', 'if_is_nopc');
3,実際に使うショートコード
投稿、または固定ページ内で、下記ショートコードを使います。
*pcで表示させたいコンテンツ
[pc]hoge[/pc]
*pc以外(スマートフォン・タブレット)で表示させたいコンテンツ
[nopc]piyo[/nopc]
※↑[]を半角になおしてくださいね!
実際に使ってみた
パソコンで見ているときだけ表示されるよ〜!
4,テンプレートファイル内でこのショートコードを使う
テンプレートファイル内でショートコードを使うには、以下の関数を使います。
<?php echo do_shortcode('ここにコピーしたショートコードを挿入'); ?>
ここに、「ショートコードの始まり〜読み込ませたいコード(または文字列)〜ショートコードの閉じタグ」までをいれます。
#pc <?php echo do_shortcode('かわたまだよ〜'); ?> #sp/tb <?php echo do_shortcode(''); ?>
のように記述します!もちろん間に画像やaタグを入れられます。
いちどfunctions.phpに記述したら、任意の部分だけ切り替えたり、非表示にしたりできるので便利です!