ホテル・結婚式場などのホームページがつくれるエレガントなデザインのテンプレート「CANON」

ワードプレステーマ別

PCとスマホで表示内容を変更する方法

WordPressテーマ「NULL」

TCD LABOはWordPressテーマ「NULL」を使用して作られています。

ダウンロード

Q.PCとスマホで別々の表示にしたい

PCでの表示とスマートフォンでの表示の内容を変えたいのですが可能でしょうか。

2.下記のphpファイルの該当箇所を編集します

編集するファイル: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.使用方法

投稿画面などで、PCで表示したい項目を[PC][/PC]で囲み、スマホで表示したい項目は[SP][/SP]で囲んで下さい。
※実際に記入する場合には小文字で入力ください。表示の都合上、こちらでは大文字で記載しております。

記入例:

[PC]<img src="https://tcd-manual.net/wp-content/uploads/2016/02/amore300_250.jpg" alt="amore300_250" width="300" height="250" class="alignnone size-full wp-image-782" />[/PC]
[SP]<img src="https://tcd-manual.net/wp-content/uploads/2016/02/300_250.jpg" alt="300_250" width="300" height="250" class="alignnone size-full wp-image-780" />[/SP]

実際の表示:
PCで見ている場合はAmoreが、スマホで表示している場合はsweetyが表示されている事と思います。

[pc]amore300_250

現在、PCで表示されています。

[/pc] [sp]300_250

現在、スマホで表示されています。

[/sp]

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事