「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

PCとスマホで表示内容を変更する方法(トップページコンテンツ編)

Q.スマホでのみ表示したいコンテンツがあります

トップページのコンテンツですが、PCでは、表示せずスマートフォンでのみ表示したいのですが可能でしょうか。

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

多くのテーマにて、下記内容は記載しております。一度、記載があるかご確認の上、追加してください。ユーザーエージェントを分岐するコードとなります。

編集するファイル:function.php
編集する箇所:
下記のコードを設置ください。

function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

2.使用方法

トップページのファイル(index.phpが主)のスマホでのみ表示したいコンテンツに下記コードを追記してください。
(フロントページに固定ページを設定するテーマでは当該固定ページテンプレートが編集の対象)

編集するファイル:index.php(フロントページに固定ページを設定するテーマでは当該固定ページテンプレートが編集の対象)
編集する箇所:

<?php if(is_mobile()) { ?>
    //スマホで表示したい内容
<?php } else { ?>
    //PC・タブレットで表示したい内容
<?php } ?>

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

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

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