WordPressでブログを運営している場合で、PCで表示させる画像とスマホで表示させる画像を切り替えたいと思ったことは無いでしょうか。
この記事では、投稿記事内のコンテンツ表示を切り替える方法について説明します。
なお、このこの説明では当ブログで利用しているWordpressテーマ「Cocoon」の子テーマを利用しています。
１．やろうとしていること
PC用に用意した画像ではスマホから見ると小さくなってしまって見づらい。
PC用に準備したこんな画像。
PCの画面
スマホで見ると小さくなってしまい見づらい。
スマホの画面
スマホで見やすい画像は用意できる。
スマホの画面
そんな時にPCから見るときとスマホから見るときで、それぞれに用意した画像を表示させたい時に便利です。
２．設定方法
１) function.phpにショートコードを追加する
//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_sp($atts, $content = null ){
$content = do_shortcode( $content);
if(wp_is_mobile()){
return $content;
}
}
add_shortcode('sp', 'if_is_sp');
２) ショートコードの貼り付け方
貼り付ける場所はCocoonの子テーマです。（お使いのテーマでも子テーマがあれば子テーマを利用するようにしてください。）
- 「ダッシュボード」＞「外観」＞「テーマの編集」
- 編集するテーマを選択：Cocoon Childを選択
- テーマファイル：テーマのための関数(function.php)を選択
- 選択したファイルの内容に上記コードを貼り付けます
最後に「ファイルを更新」を押して完了です。
３) 使い方
投稿画面のテキストモードで下記のショートコードを挿入することで使えます。
- PCで表示させたいコンテンツ
- スマホで表示させたいコンテンツ
まとめ
ここにサンプル画像を張り付けてみました。
パソコンから見ると「PC画像」、スマホから見ると「スマホ画像」が表示されるようになっています。
これは、サイズの違う画像や広告などをPCとスマホで使い分けしたい時に便利です。
