W-Tips

WordPressでモバイルとPC（デスクトップ）で表示を分けたい場合、いくつかの方法があります。
用途に応じて下記より選んでみてください。

方法1：CSSで分岐（最も簡単・一般的）

メディアクエリを使う

CSSのメディアクエリを使って、表示する要素を切り替える方法です。

/* PCで表示する */
.pc-only {
  display: block;
}

.sp-only {
  display: none;
}

@media screen and (max-width: 768px) {
  /* スマホで表示する */
  .pc-only {
    display: none;
  }

  .sp-only {
    display: block;
  }
}

HTML：

<div class="pc-only">これはPC用の表示</div>
<div class="sp-only">これはスマホ用の表示</div>

方法2：PHPで分岐（出力そのものを切り替える）

PHP側でスマホかPCかを判定して、出力する内容自体を変える方法です。

関数を使って判定

WordPressには wp_is_mobile() という便利な関数があります。

<?php if ( wp_is_mobile() ) : ?>
    <p>これはスマホ用のコンテンツです。</p>
<?php else : ?>
    <p>これはPC用のコンテンツです。</p>
<?php endif; ?>

※ wp_is_mobile() は スマホ・タブレットを含むモバイルデバイス全般 に対応。

方法3：プラグインを使う

コードを書くのが難しい場合、表示制御用のプラグインを使うのもアリです。

• WP Mobile Detect（ショートコードでデバイス別表示ができる）
• Elementor（表示設定でデバイスごとに表示/非表示が可能）

使い分けのコツ

CSS（メディアクエリ）：レイアウトだけ変えたいとき
PHP（wp_is_mobile）：内容そのものを変えたいとき
プラグイン：ノーコードで制御したいとき

最後までお読みいただきありがとうございました！