WordPress のスマホ対応 – WPtouch からレスポンシブテーマへ考え方を変える

以前は、WordPress をスマートフォンに対応させるために WPtouch のようなプラグインを使うことがありました。PC 向けテーマとは別に、スマホ向けの表示をプラグイン側で用意する考え方です。

当時はそれが合理的な選択肢でした。しかし現在の WordPress 運用では、スマホ対応はプラグインで別表示を作るより、テーマ、ブロック構造、CSS をレスポンシブ前提で整える方が自然です。

昔はスマホ専用プラグインが有効だった

スマートフォンが普及し始めた頃は、PC 向けテーマがスマホ表示に十分対応していないことが多くありました。そのため、スマホからアクセスされた場合だけ別テーマのような表示に切り替えるプラグインには意味がありました。

WPtouch は、その時代の文脈では分かりやすい解決策でした。テーマを大きく作り直さなくても、スマホ向けの見た目を用意できるからです。

現在は、多くの WordPress テーマがレスポンシブ対応を前提にしています。PC、タブレット、スマホで別々のテーマを切り替えるより、同じ HTML 構造を CSS で画面幅に合わせて調整する方が一般的です。

スマホ専用プラグインは便利ですが、運用上の問題もあります。PC とスマホで表示構造が変わると、広告、内部リンク、関連記事、コードブロック、表、見出しなどの見え方がずれやすくなります。

技術ブログでは、スマホで見たときの装飾だけでなく、本文構造が崩れないことが重要です。見出し、表、コードブロック、関連記事、広告カードが画面幅に合わせて自然に読める必要があります。

特にコマンド例や設定ファイルを扱う記事では、コードブロックの横スクロール、表の折り返し、見出しのサイズ、広告カードの幅が読みやすさに直結します。スマホ専用テーマに切り替えるより、記事本文と CSS をレスポンシブ前提で整えた方が、長期的には管理しやすいです。

スマホ表示に不満がある場合、すぐにプラグインを追加するのではなく、まず現在のテーマと CSS で直せるかを確認します。

現在の WordPress では、スマホ対応はプラグインで別表示を作るより、テーマ、ブロックエディタ、CSS、内部リンク設計をまとめて整える方がよいです。

このブログでも、見出しの my1 クラス、コードブロック、広告カード、関連記事リンクを記事側で揃え、CSS 側でレスポンシブに見えるようにする方針に寄せています。記事本文の構造を共通化できるため、PC とスマホで別々の管理をしなくて済みます。

WPtouch のようなスマホ対応プラグインは、当時の WordPress テーマ事情では意味のある選択肢でした。しかし現在は、レスポンシブテーマと CSS を前提に、同じ本文構造を各画面幅で読みやすくする方が自然です。

スマホ対応は、単にスマホ用の見た目を出すことではありません。記事構造、コードブロック、表、広告、関連記事まで含めて、どの端末でも読める状態にすることです。古いプラグイン記事は、その変化を理解するための記録として整理しておくのがよいと思います。

参考書籍

WordPress 仕事の現場でサッと使える！デザイン教科書 [WordPress 6.x対応版] 改訂第3版

WordPress のサイト構築、テーマ、カスタマイズ、運用項目を確認したい場合の参考書籍です。価格や在庫、WordPress の最新仕様との差分はリンク先や公式ドキュメントで確認してください。

このリンクは Amazon アソシエイトリンクです。

WordPress のスマホ対応 – WPtouch からレスポンシブテーマへ考え方を変える