WordPressで記事を作成していると「スマホだけアフィリエイトのボタンを表示させたい」「パソコンだけCSSやJava Scriptを書きたい」など考えたことはないですか？
CSSのメディアクエリを使ってウィンドウサイズを指定すれば表示の切り替えは可能ですが、いちいち要素を指定してdisplay：noneを書くのは大変です。
そこで、簡単に実現する方法としてサンプルコードをご用意いたしました。
記事内でショートコードで囲むだけでPCとスマホの切り替えができるようになりますので、是非参考になさってください。
導入方法が分からない方のため、プラグインもご用意しています。そちらもご活用いただければ幸いです。
動作確認はクラシックエディタのみ。
記事内でPCとスマホの表示内容を切り替える方法
サンプルコード
以下は、ショートコードを使用して、パソコンとスマホの表示を切り替えるサンプルコードです。以下のコードをfunctions.phpに追記してくご利用ください。
ショートコードを使って記事内でPCとスマホの表示を切り替えることができます。
function pc_smartphone_toggle_pc( $atts, $content = null ) {
if (wp_is_mobile()) {
return '';
} else {
return do_shortcode($content);
}
}
add_shortcode( 'pc-only', 'pc_smartphone_toggle_pc' );
function pc_smartphone_toggle_mobile( $atts, $content = null ) {
if (wp_is_mobile()) {
return do_shortcode($content);
} else {
return '';
}
}
add_shortcode( 'mobile-only', 'pc_smartphone_toggle_mobile' );上記のコードは、pc-onlyとmobile-onlyというショートコードを定義し、記事内で使用することができます。pc-onlyはPCバージョンの表示、mobile-onlyはスマホバージョンの表示を切り替えます。また、wp_is_mobile()関数を使用して、ユーザーエージェントを判別しています。
使用例は以下のようになります。
[pc-only]
<h2>PCバージョンの見出し</h2>
<p>PCバージョンの文章</p>
[/pc-only]
[mobile-only]
<h2>スマホバージョンの見出し</h2>
<p>スマホバージョンの文章</p>
[/mobile-only]プラグインのダウンロード
初心者の方、テーマファイルを頻繁に変更している方はプラグインの利用がおすすめです。
プラグインの有効化方法
- メニューからプラグインを選択
- 新規追加
- プラグインのアップロード
- ファイルを選択（zipフォルダを選択）
- 今すぐインストール
- プラグインを有効化
まとめ
今回はWordPressの記事内でPCとスマホの表示内容を切り替える方法について紹介しました。
仕組みはいたってシンプルで、wp_is_mobile()というWordPressの関数を使って、PCかスマホかを判定し適切なHTMLを表示。
表示するHTMLは、pc-onlyとmobile-onlyという2つのショートコードを使い、それぞれのデバイスで表示したいコンテンツを囲む、という方法で異なるコンテンツを表示できるようにしました。
簡単なサンプルコードですので、WordPressがアップデートしても長く使い続けられると思います。ぜひお役立てくださいね。
