WordPressのウィジェットをスマートフォン幅で非表示にするなら、まずクラシックテーマかブロックテーマかを確認し、対象ウィジェットまたはそれを包むグループに専用CSSクラスを付け、テーマのブレークポイントに合わせたmedia queryでdisplay: noneにする方法が基本です。ただしCSSで隠してもHTML、画像、JavaScript、外部通信は配信・実行される場合があります。速度改善や機密情報保護が目的なら、単なる非表示では足りません。表示要件、アクセシビリティ、キャッシュ、テーマ更新まで分けて設計します。
最初にクラシックテーマかブロックテーマか確認する
WordPress 5.8以降のクラシックテーマでは、外観→ウィジェットにブロックベースのWidgets Editorが表示され、テーマが定義したサイドバーやフッターのWidget Areaへブロックと従来ウィジェットを配置できます。古いウィジェットはLegacy Widgetブロック経由で残る場合があります。一方、ブロックテーマでは従来のWidget Areaではなく、外観→エディターでヘッダー、フッター、テンプレートにブロックを配置します。画面名だけで手順を決めません。
- 外観→ウィジェットがある：クラシック／ハイブリッドテーマのWidget Areaである可能性が高い。
- 外観→エディターが中心：ブロックテーマで、フッターやサイドバー相当もテンプレート・パーツとして編集する。
- 外観→カスタマイズ→ウィジェット：クラシックテーマのCustomizer経由でライブプレビューできる構成。
- テーマ独自の管理画面：製品版と子テーマ版に合う公式マニュアルを確認する。
- ページビルダー内の要素：WordPressコアのWidget Areaではなく、ビルダーのレスポンシブ表示設定を使う場合がある。
何を隠したいかを特定する
「ウィジェット名」だけではCSSの対象を安全に選べません。同じ検索ブロックやバナーが複数のWidget Areaにある場合があります。表示ページ、Widget Area、ブロック階層、既存CSSクラス、モバイル幅だけか全端末かを記録します。Chrome DevToolsで要素を選び、対象だけを包む安定したクラスがあるか確認します。自動生成IDや位置依存のnth-childは、並べ替えや更新で別要素を隠すため避けます。
ブロックに専用クラスを付ける
Widgets EditorまたはSite Editorで対象ブロックを選び、「高度な設定」の追加CSSクラスへdesktop-only-widgetのようなサイト固有クラスを付けます。複数ブロックをまとめて隠すならGroupブロックで包み、そのグループへクラスを付けると管理しやすくなります。クラス欄へ先頭の点は入力せず、英小文字、数字、ハイフンで分かりやすい名前にします。テーマやプラグインが同じ名前を使っていないか確認します。
従来ウィジェットで追加クラスUIがない場合は、テーマが出力するbefore_widgetのID・クラス、テーマ公式の表示制御、または保守されたプラグインを検討します。HTMLを文字列置換する不安定な方法や、コア・親テーマファイルの直接編集は避けます。
media queryで非表示にする
クラシックテーマなら外観→カスタマイズ→追加CSS、ブロックテーマならテーマの追加CSS機能、子テーマのスタイルシート、または管理されたサイト専用プラグインなど、更新で消えない場所へCSSを追加します。次はviewport幅が782px以下のときだけ対象クラスをレイアウトから除く例です。782pxはWordPress管理UIで見かける値ですが、フロント側の最適値はテーマ設計で異なります。既存ブレークポイントに合わせてください。
@media (max-width: 782px) {
.desktop-only-widget {
display: none;
}
}最初から!importantを付けると、将来の表示切り替えやアクセシビリティ用スタイルを上書きします。Computedパネルで詳細度を確認し、必要最小限のセレクターにします。CSSファイルを子テーマへ入れる場合はwp_enqueue_style()で親子テーマの依存関係とバージョンを管理し、キャッシュ更新を確実にします。
ブレークポイントはコンテンツから決める
「スマホ=767px以下」と固定せず、対象テーマのナビゲーション、サイドバー、コンテンツ幅が切り替わる地点を確認します。小型タブレットを非表示に含めるか、デスクトップの狭いウィンドウではどうするかを要件にします。viewport幅は端末種別と同じではありません。ブラウザーの分割表示、ズーム、折りたたみ端末でも変化します。幅を連続的に動かし、境界の前後1pxもテストします。
display:noneのアクセシビリティ
display: noneの要素は通常、画面だけでなくアクセシビリティツリーからも除かれます。補助的な人気記事一覧なら許容できる場合がありますが、ナビゲーション、検索、ログイン、購入、同意、連絡先、法的情報をモバイルだけ消すと利用者が目的を達成できません。同じ機能を別の位置へ置くなら、重複ID、フォーカス順、読み上げ名を確認します。視覚的に隠すだけのCSSと、完全に非表示にするCSSを混同しません。
CSSで隠しても軽くならないことがある
CSS非表示でも、サーバーはウィジェットHTMLを生成し、ブラウザーは画像、フォント、埋め込み、解析スクリプトを読み込む場合があります。広告、SNSタイムライン、地図、動画、ランキングAPIなど重いウィジェットでは、見えないのに通信とJavaScript実行が残り得ます。NetworkとPerformanceで実際のリクエストとCPUを測ります。速度改善が目的なら、ウィジェット側の遅延読み込み、サーバー側レンダリング抑制、軽量な代替リンクをテーマ・プラグインの公式機能で検討します。
wp_is_mobile()を画面幅判定に使わない
WordPressのwp_is_mobile()はUser-AgentやClient Hintsを基に、モバイル端末らしいリクエストかを判定します。公式リファレンスは、画面幅を検出する機能ではなく、CSS media queryやプラットフォーム別スタイルの代替ではないと説明しています。タブレットもtrueになり得て、狭いデスクトップウィンドウはfalseのままです。レスポンシブ非表示にはCSSを使います。
さらにページキャッシュがモバイル／デスクトップで分離されていないと、最初に生成されたHTMLが別端末へ配られる可能性があります。サーバー側で重いウィジェットを出さない高度な要件では、キャッシュ変種、CDN、User-Agent、Client Hints、プラグイン互換性を設計し、保守担当者が管理できる実装にします。個人情報や権限制御を端末判定へ依存させてはいけません。
テーマ独自の表示制御を優先する場面
商用テーマやページビルダーには、デスクトップ／タブレット／モバイル表示を切り替える公式設定がある場合があります。テーマがマークアップやブレークポイントを管理するため、独自CSSより更新に追従しやすい利点があります。ただし「非表示」がCSSだけかサーバー側非出力かを文書で確認し、速度とアクセシビリティを実測します。設定名や場所は版で変わるため、古いブログの画面を基準にしません。
CustomizerとSite Editorの保存先
Customizerの追加CSSやWidget Areaは、アクティブテーマと関連して保存される設定があります。テーマ／子テーマを切り替えると同じように見えない場合があります。Site Editorのスタイルやテンプレート変更もデータベースへユーザー変更として保存され、テーマファイルだけをバックアップしても戻らないことがあります。変更前にデータベースとwp-contentのバックアップ、エクスポート可否、復旧手順を確認します。
安全な変更手順
- ステージング環境を本番に近いテーマ、プラグイン、キャッシュ設定で用意する。
- 対象Widget Area／テンプレート、ブロック、ページ、利用者役割を記録する。
- 専用クラスを付け、テーマ既存ブレークポイントに合わせた最小CSSを追加する。
- 小型スマホ、標準スマホ、横向き、タブレット、狭いデスクトップで境界を確認する。
- キーボード、スクリーンリーダー、拡大、フォーカス、代替導線を確認する。
- Networkで非表示要素の資産が残るか、キャッシュ前後、ログイン有無を確認する。
- 変更記録と戻し方を残し、バックアップ後に本番へ反映してキャッシュを限定パージする。
反映されない場合の切り分け
- クラス名：ブロックへ付いた実際のclass属性とCSSセレクターが完全一致するか。
- ブレークポイント：viewport metaが有効で、現在幅がmedia query条件内か。
- 詳細度：テーマCSSが後からdisplayを上書きしていないかComputedで確認する。
- 読み込み：子テーマCSSや追加CSSがそのページへ読み込まれ、404や構文エラーがないか。
- キャッシュ：ブラウザー、WordPress、最適化プラグイン、CDN、Service Workerを一層ずつ確認する。
- 別マークアップ：モバイル時にテーマが別のWidget Areaやテンプレートを出していないか。
隠してはいけないもの
Cookie同意、プライバシー設定、法定表示、緊急連絡、購入条件、アクセシビリティ機能、重要なナビゲーションを端末幅だけで消しません。広告やアフィリエイト表記を隠して内容だけ残すことも規約・法令上の問題になり得ます。第三者ウィジェットをモバイルで止めたい場合は、その提供者の表示条件、同意管理、広告ポリシーを確認します。
単純な補助ウィジェットなら、専用クラスとmedia queryが保守しやすい方法です。ただし「見えない」と「配信されない」は別です。テーマ種別、ブレークポイント、アクセシビリティ、通信、キャッシュを確認し、必要ならテーマ公式の条件付きレンダリングへ段階的に進めてください。
コメント