WordPressブログの記事内でPCとスマホの表示内容を切り替える方法

解説

WordPressでブログを運営している場合で、PCで表示させる画像とスマホで表示させる画像を切り替えたいと思ったことは無いでしょうか。

この記事では、投稿記事内のコンテンツ表示を切り替える方法について説明します。

なお、このこの説明では当ブログで利用しているWordpressテーマ「Cocoon」の子テーマを利用しています。

 

スポンサーリンク
スポンサーリンク

1.やろうとしていること

PC用に用意した画像ではスマホから見ると小さくなってしまって見づらい。

PC用に準備したこんな画像。

画像1
PCの画面

 

スマホで見ると小さくなってしまい見づらい。

画像2
スマホの画面

 

スマホで見やすい画像は用意できる。

画像3スマホの画面

 

そんな時にPCから見るときとスマホから見るときで、それぞれに用意した画像を表示させたい時に便利です。

画像4

 

 

2.設定方法

 1) 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');

 2) ショートコードの貼り付け方

貼り付ける場所はCocoonの子テーマです。(お使いのテーマでも子テーマがあれば子テーマを利用するようにしてください。)

  • 「ダッシュボード」>「外観」>「テーマの編集」

説明画像1

  1. 編集するテーマを選択:Cocoon Childを選択
  2. テーマファイル:テーマのための関数(function.php)を選択
  3. 選択したファイルの内容に上記コードを貼り付けます

最後に「ファイルを更新」を押して完了です。

 3) 使い方

投稿画面のテキストモードで下記のショートコードを挿入することで使えます。

  • PCで表示させたいコンテンツ

画像:PC表示

  • スマホで表示させたいコンテンツ

画像:スマホ表示

 

 

まとめ

ここにサンプル画像を張り付けてみました。

PC用画像

パソコンから見ると「PC画像」、スマホから見ると「スマホ画像」が表示されるようになっています。

これは、サイズの違う画像や広告などをPCとスマホで使い分けしたい時に便利です。

 

関連記事

WordPressサイトで使うと便利なプラグイン紹介

レンタルサーバー ColorfulBoxのメリット・デメリット

スポンサーリンク
スポンサーリンク
WordPress
すだれもち

当サイトの運営者。
世間の常識も発見も、とりあえず気になったことをいろいろ書いています。

すだれもちをフォローする
シェアする
すだれもちログ