WordPressのサイドバーをモバイルで非表示にする実践的な方法

コンピュータのサイドバーは、検索、クラシファイド、広告、おすすめ記事などのコンテンツを配置するためによく使われますが、携帯電話では、これらの領域がメインのコンテンツスペースを圧迫し、読書体験に影響を与えることがよくあります。モバイルからのアクセスをよりスムーズにするために、多くのウェブマスターは携帯電話ではサイドバーを非表示にすることを選択します。この記事では、パソコン側の表示の前提に影響を与えることなく、モバイル端末で非表示にするための一般的な方法をいくつか紹介します。 WordPressサイドバー操作も簡単で、複雑な設定も必要ない。

I. なぜモバイルサイドバーを隠すのですか？

流暢な読書携帯電話の画面は小さく、サイドバーがページを圧迫しやすい。
より速いローディング不要なコンポーネントのロードを避ける
直帰率の低減モバイルユーザーはよりメインコンテンツに集中するため、気が散るものを取り除くことで訪問者を維持しやすくなります。
ユーザーエクスペリエンスの向上小さなアイコンやリンクなど、小さな要素に不用意に触れないようにしましょう。

II.CSSメディアクエリを使ってサイドバーを隠す

これが最も簡単な方法だ。プラグインなし、影響なし SEOほとんどの教科に適している。

サンプルコード

メディア (最大幅: 768px) { { サイドバー
  .sidebar、
  #secondary {
    display: none；
  }
}

使い方：

WordPressのバックエンドにログインして外観 → カスタム "

余分なCSSを見つけ、上記のコードを貼り付けて保存する。

第三に、Elementorユーザーがサイドバーを隠す方法である

エレメンタページビルダー以下の操作が可能である：

ページの編集 → サイドバーがあるコンテナにチェックを入れる
をクリックしてください。アドバンスド」→「レスポンシブタブ
ダニ"モバイルで隠す"

このアプローチデスクトップのレイアウトに影響を与えないカスタムページユーザーに最適

IV.テーマ設定で隠す

いくつかのテーマ（例：Astra、GeneratePress、OceanWP）には、以下のものが付属しています。レスポンシブ可能なレイアウト設定：

出向く「外観 → カスタマイズ

を見つける。サイドバー「セッティング
を設定する。モバイルレイアウト"ために"サイドバーなし"

第五に、プラグインの助けを借りて以下を実現する。

CSSを記述したくない場合は、プラグインを使用してサイドバーの表示ルールを自由に制御することもできます。

ウィジェットオプション 各ガジェットに "デバイス表示 "オプションを提供し、デバイスタイプによる有効/無効をサポートする。

エレメンタル・プロ(条件付き表示） デバイス別、カスタム条件別のブロック表示に対応。有料版サポート

備考と提言

非表示にする方法は、デスクトップでの体験に影響を与えないよう、モバイル専用とする。
操作の前にテーマや子テーマをバックアップすることをお勧めします。ごかんけいせいぼおんCSS
キャッシュ・プラグインを使用し、キャッシュをクリアしてから、非表示効果をテストする。
認証は、ブラウザの「モバイル・デバイス・モード」または携帯電話の実アクセスによって行うことができる。

まとめ

モバイルのサイドバーを非表示にすることで、読書体験と読み込み速度を向上させることができます。これは、CSS、テーマ設定、またはビジュアルエディター導入が簡単、操作がシンプル、パソコンのディスプレイに影響を与えない。サイト構成に応じて適切な方法を選択することで、モバイルからのアクセスを効率化することができます。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：[email protected]
④ 勤務時間: 月～金、9:30～18:30、祝日休み