WordPressでPCとスマホ表示を切り替えする簡単な方法【レスポンシブデザイン】

悩み中の人

記事の表示で気になる部分があるんだけど、そこはPCとスマホで表示を変えることってできないのかな?

こんな疑問にお答えします。

ここのスマホ表示が気になる・・。
WordPressで記事を書いていると、どうしてもある一部分の表示が気になることってありますよね。

ある部分はPCに合うように表示して
ある部分はスマホに合うように見やすく表示させたい!

これが実は可能なんです。
自分が「意図した部分だけ」をショートコードで囲って、PCとPC以外(スマホやタブレット)の表示を変えることができます。

HIRO

記事内の意図した箇所を、スマホとPCで表示を切り替えたい時に簡単に使える方法です。

一度設定したら後は簡単です。
条件分岐タグをfunctions.phpに埋め込んだら、あとはそれをショートコードで簡単に使えるようになります。

設定の手順は2つだけ

  1. 条件分岐タグをコピペする
  2. ショートコードを使う

手順はたったこれだけです。
では早速いきましょう!

もくじ

WordPressでPCとスマホ表示を切り替えるコード

functions.phpにコピペする

まずはfunctions.phpです。
ひとまずこれさえ追加しておけばOKで、あとは簡単なショートコードを使うだけになります。まずは下記の記述をコピペですね。

//PCでのみ表示するコンテンツ
<pre class="brush: php; title: ; notranslate" title="">
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_nopc($atts, $content = null ) 
{
$content = do_shortcode( $content);
    if(wp_is_mobile())
        {
        return $content;
        }
}
add_shortcode('nopc', 'if_is_nopc');</pre>
HIRO

カスタマイズ前のファイルバックアップ等、テーマファイル編集はご利用者様の自己責任にてご対応下さい。

これを貼り付けるだけです。
WordPressの場合は「子テーマ」が便利なのでそちらを僕は使っています。

当ブログはSWELLというテーマです。
SWELL CHILDという子テーマのテーマファイル編集画面で、functions.phpにコピペして下記のように使用しています。

外観→テーマエディター編集

コピペは空いている所でOK。
これはPCとPC以外を区別するwp_is_mobile関数というもので、PCとスマホ(タブレット)のコンテンツを切り分けるタグになります。

貼り付けたら保存して完了。
WordPress側の設定はこれで以上です。

悩み中の人

WordPressテーマに最初からこの機能があればもっと良かったんだけどね。

HIRO

テーマによりますよ。「AFFINGER」というテーマなら最初からこの機能があるのでコピペ必要なしです。

テーマによっては実装されています。
WordPressテーマで「AFFINGER」を使っている人は、functions.phpは触らなくてOK。切替えは標準機能として備わっています。

ただそこまで細かい機能が付いているテーマは恐らくAFFINGERくらいなので、AFFINGER以外の方はfunctions.phpにコピペしたうえでお試し下さい。

エディタ内でショートコードを使って切替えしよう

コピペできたらもうほぼ完了ですよ。
あとはショートコードを使うだけ。

記事を書く際に[pc]と[nopc]というコードで、それぞれ表示させるコンテンツの前後を挟んであげればOKです。これで切替えできます。

使うショートコード

・PCのみ表示させる時
[pc]コンテンツ[/pc]

・PC以外で表示させる時
[nopc]コンテンツ[/nopc]

HIRO

実際使用する際は[]を半角にして使って下さいね。

これで完了です。
とっても簡単ですよね。

クラシックエディタなら「テキスト」
ブロックエディタなら「ショートコード」か「カスタムHTML」の中で[pc][nopc]を使います。

[pc][nopc]の使用例


画像で出すとこんな感じです。
上はPCのみの表示でされ、下はスマホやタブレッドのみで表示されるようになりました。

PCとスマホ表示の切り替え完了です。
[]を半角にして使ってみて下さい。

PCとスマホ表示切替えはテーブル(表)や画像に有効です

複雑なテーブルは表示切替えで解決

切替えで最も有効なのがテーブルですね。
PC表示では全然問題ないのに、スマホではめちゃくちゃ見づらい。その代表とも言えるのがテーブル(表)です。

横幅が違うので当たり前ではありますが。
でもどちらも綺麗に表示したいですよね。

HIRO

例えばこんなランキングのテーブルとかは、PCとスマホ表示を別で分けないとメチャクチャになります。

比較ランキング 価格 SEOの強さ カスタマイズ性 使いやすさ
公式ページへ

17,600円

公式ページへ

14,800円

公式ページへ

11,000円

公式ページへ

27,280円

公式ページへ

11,000円 +3,980円*

公式ページへ

14,800円

悩み中の人

PCとスマホでテーブルの見た目が違う!表示切替えで分けているってことなんだね。

こんなのは表示を分けないと無理です。
PCで表示するランキングテーブルとスマホで表示するランキングテーブルを[pc][nopc]で分けたため見やすくできました。

まとめ:横長のPCと縦長のスマホを両方見やすくしよう

テーブルの他には画像もそうですね。
スマホで見るとやたら画像が小さくなる時があります。

そんな時は表示切替で対応してみて下さい。
functions.phpにコピペ後は、コードで簡単に表示非表示を分けることができますよ。

よかったらシェアしてね!
もくじ
閉じる