WordPressテーマTCDのカスタマイズを研究するサイト

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

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="http://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="http://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が表示されている事と思います。

amore300_250

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


The following two tabs change content below.

tcd

TCD LABO | WordPressテーマTCDのカスタマイズを研究するサイト

関連記事

TCD LABO ご利用上の注意

TCD LABO(ティーシーディー・ラボ)に掲載しているTCDテーマのカスタマイズ情報のご利用にあたっては、必ずカスタマイズするファイルのバックアップをご用意の上、ご利用者様責任において実施していただきますようお願いいたします。

カスタマイズの実施により生じたいかなる不具合等についてもTCD LABOはその責任を負いかねます。
何卒ご理解、ご了承の上、当サイトをご活用いただけますようお願い申し上げます。

お問合せ・ご要望

TCDLaboへのお問合せやご要望は
ご連絡フォーム をご利用ください。