WordPressウィジェットをモバイルで非表示にする方法（初心者向け・簡単）

特定のWordPressウィジェットをモバイルユーザーに非表示にしたいですか？

ウィジェットは、ウェブサイトのサイドバーやフッターに表示されることが多い動的なコンテンツです。場合によっては、ウィジェットがデスクトップコンピューターやラップトップでは見栄えが良くても、小さなモバイルデバイスではそうでないことがあります。

この記事では、コードを書かずにWordPressのウィジェットをモバイルデバイスで非表示にする方法をご紹介します。

WordPressでモバイル向けウィジェットを非表示にする理由

ウェブサイトはフルサイズのコンピューター画面では見栄えが良くても、小さい画面でも同様に見栄えが良いとは限りません。

WordPressサイトのモバイルバージョンを表示しても、レイアウトがすぐに散らかって見えない場合でも、必ず一番下までスクロールすることが重要です。

ほとんどのレスポンシブWordPressテーマでは、ウィジェットは訪問者の画面サイズに応じて異なる場所に表示されます。多くの場合、WordPressテーマはウィジェットをページの一番下に移動させます。

例を見てみましょう。

次の画像は、デスクトップコンピューターでサイトがどのように表示されるかを示しています。ご覧のとおり、検索ウィジェットはサイドバーの上部に表示されます。

ただし、スマートフォンで表示すると、サイドバーウィジェットはコンテンツの下に表示されます。

これは、訪問者がブログ投稿、製品、その他のコンテンツを検索するためにページの一番下までスクロールする必要があることを意味します。

さらに悪いことに、この動作により、2つの同一のウィジェットが隣り合って表示されることがあります。

例えば、多くのWordPressブログの所有者は、サイドバーとフッターの両方に連絡先情報ウィジェットを配置します。これらのウィジェットが移動すると、モバイル訪問者は同じウィジェットが隣り合って表示される可能性があります。

それでは、WordPressでウィジェットをモバイルで簡単に非表示にする方法を見てみましょう。

WordPressでモバイル時にウィジェットを非表示にする方法

モバイルユーザーのためにウィジェットを非表示にする最も簡単な方法は、Widget Options プラグインを使用することです。このプラグインを使用すると、日付、ユーザーロール、デバイスなどに応じて異なるウィジェットを表示できます。

まず、Widget Optionsプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。WordPressプラグインのインストール方法。

有効化したら、WordPressダッシュボードの外観 » ウィジェットページに移動する必要があります。

この画面には、WordPressウェブサイトに追加したすべてのウィジェットが表示されます。

ウィジェットを編集するには、その名前をクリックするだけです。

ウィジェット設定では、Widget Options プラグインによって追加された新しいセクションが表示されます。

まず、小さなモバイルアイコンをクリックし、「非表示/表示」ドロップダウンが「選択したデバイスで非表示」になっていることを確認してください。

その後、ウィジェットを非表示にしたい各デバイスで確認するだけです。

通常は、「タブレット」と「モバイル」の横にあるチェックボックスをオンにします。

その後、「保存」ボタンをクリックして変更を保存します。

さて、モバイルデバイスを使用してWordPressウェブサイトにアクセスしてください。ウィジェットはウィジェットエリアに表示されなくなります。

WordPress でウィジェットのモバイルバージョンを作成する方法

場合によっては、モバイル訪問者にはウィジェットのバージョン1を表示し、デスクトップユーザーには別のバージョンを表示したい場合があります。

例えば、デスクトップでは最新の投稿を5つ表示したいが、モバイルデバイスでは画面がごちゃごちゃしないように3つだけ表示したい場合があります。

そのためには、サイトに2つの個別の「最近の投稿」ウィジェットを追加するだけです。詳細については、WordPressでウィジェットを追加する方法に関するステップバイステップガイドをご覧ください。

その後、デスクトップコンピューターに表示するウィジェットと、モバイルデバイスに表示するウィジェットをそれぞれ設定できます。

まず、デスクトップユーザーに表示したいウィジェットを開きます。次に、小さなモバイルアイコンをクリックし、「非表示/表示」ドロップダウンが「選択したデバイスで非表示」に設定されていることを確認してください。

その後、「タブレット」と「モバイル」の横にあるチェックボックスにチェックを入れます。

これで、このウィジェットはデスクトップコンピューターを使用している訪問者にのみ表示されます。

次に、ウィジェットに変更を加えることができます。例えば、「表示する投稿数」の横のボックスに「5」と入力します。

終了したら、「保存」ボタンを押して設定を保存することを忘れないでください。

その後、2番目のウィジェットをモバイル専用にすることができます。

上記と同じ手順を繰り返しますが、今回は「デスクトップ」の横にあるチェックボックスをオンにして、デスクトップデバイスでウィジェットを非表示にします。

これで、モバイルウィジェットに変更を加えることができます。たとえば、「表示する投稿数」ボックスに「3」と入力することができます。

いつものように、完了したら「保存」をクリックしてください。これで、同じウィジェットのデスクトップ版とモバイル版ができました。

この記事が、WordPress でモバイルデバイスのウィジェットを非表示にする方法を学ぶのに役立ったことを願っています。また、サイトに最も役立つウィジェットのリストを確認したり、特定のページでウィジェットを表示または非表示にする方法に関するガイドを参照したりすることもできます。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。