【WordPress】スマホ表示時だけサイドバーを簡単に消すけど特定のページでは表示させる方法

最近使われているWordPressのほとんどのテーマは「スマホでアクセスした場合、サイドバーは本文やコメント欄よりさらに下へ追いやられる仕様」になっていると思うんだけど。

こんなの「読まれないのに重くなるし無駄な広告を表示してしまったりするサイドバー」なだけなので、一部のページでのみ非表示にする方法を説明します。

使うもの

「Widget Logic」というプラグインを使います。プラグインのインストールが嫌な方は自力で実装しましょう。このあとを読めば分かりますが、イメージはすぐに湧くはず。

使い方

プラグイン単体の設定画面はない（一応あるけどないレベル）。「外観」→「ウィジェット」の各項目に設定欄が追加されるイメージです。

そこに自分で考えた条件文を書き込んでいく。プログラムというものに理解がある人ほどちょっと記述がやりにくいだろうなと感じたので、次から軽く説明します。

基本タグ

• is_home()
• is_single()
• is_page()

この辺りを使ってカスタマイズしていきます。それぞれ「トップページで表示する」「投稿記事ページで表示する」「固定ページで表示する」の意です（本来は「トップページなら」などという条件文に使われるものですが、このプラグインの入力に限りこれ単体の入力で条件文になります。if文のかっこの中だけ書くイメージ）。

一応Codexの説明サイト→こちら

否定

• ! A

なにがややこしいって、肯定文で書いたものは「表示する条件」として扱われ、否定文で書いたものは「非表示にする条件」として扱われるのです。そんなの当然だろ！と思うでしょうけど条件の複合をやり始めるとハマっていきます。書いていないものにはなにも起きないという大原則を念頭に置いておきましょう。

最初、よくある「検索条件の絞り込み」のチェックボックスみたく「どこかに1つでも条件を記入したら残りにも表示の命令が要る」のかと思いこんでいて大変だった。

表示と非表示の条件幅をそれぞれで狭めていくイメージで理解しておくとやりやすいでしょう。

and

• A && B

こういう単品記述は普通です。

「ここで書いた条件にマッチするページに、そのウィジェットが表示される」ということを再確認しておきましょう。

or

• A || B

上と一緒。

複合

• ! (( A && B ) || C )

この辺から頭がこんがらがってくる。（）も普通に使えますが、落ち着いて1つずつ書いていきましょう。

ちなみに上のは、「AかつBのものかCのときは表示しない」です。</>

ページ種別の指定

• is_archive()
• is_search()
• is_404()

固定ページ、個別投稿ページなど、さっき紹介したよくある指定以外も可能。404ではサイドバーとか一切なくしたい、みたいなケースはけっこうあるのでは。

ページの個別指定

• is_single( '13' )
• is_single( array( 1, 2, 3 ) )

ページID、記事タイトル、記事スラッグなどでピンポイントの指定もできる。

使い方の一例

そもそもこの記事にどんな意味があるのか、今さらだけど書いておく。笑</>

スマホ時、本文を読み終わった後に関連記事を紹介する

冒頭に書いたような背景から、基本的にスマホ時はサイドバーを消している方も多いと思うけど、サイドバーに「関連記事はこちら」みたいなのを用意している場合は、それをそのまま記事下に置いて二次利用できる。僕も以前やっていた。

コードはこんな感じになる。

• ! is_mobile()

もちろん、他のウィジェットを追加したい場合はその表示させたいウィジェットにも同じコードを記入すればいい。

空の固定ページにサイドバーを全部表示させて「スマホ用簡易コンテンツ一覧」を作る

需要があるかは謎だけど、一瞬僕もやっていた方法なので一応載せてみます。

スマホ用のナビメニューをなんか手軽なものでとりあえず用意しようと思ったときに、「なんにも記述しない空のページにサイドバーだけ横幅100%で表示したら、いい感じのコンテンツ一覧ページみたいになるのでは？」とウキウキで考え始めた。結局色々あってオシャカになったのだけど。

で、コードはこんな感じ。xxxxが作成したコンテンツ一覧用固定ページのID。

• (is_mobile() && is_page(xxxx)) || (!is_mobile())

ややこしいね。

まとめ

以上です。

やっていることは「ウィジェットで読み込み可否の条件文を足している」ってだけなので、知識がある方は実装も簡単でしょう。