記事ページだけにサイドバーを表示させる方法【SANGOカスタマイズ】

webデザイン

こんな感じ↓


厳密に言えばサイドバーを

  • 記事ページに表示
  • アーカイブページ(カテゴリーページ/タグページ/著者ページ/日付別ページ)は非表示
  • トップページも非表示

にする方法です。ググってもでてこなかったので自分で頑張ってみました。(もっとスマートなやり方があるかも)

[say]CSSもphpもよくわからないまま使ってるので、コードが汚いです。自己責任で試してください。[/say]

1トップページのサイドバーを非表示にする

外観>テーマの編集>スタイルシートにコピペするだけです。

[codebox title=”コード”]

.home div#sidebar1 {
    display: none;
}

[/codebox]

SANGOでは.homeクラスがトップページに使われています。なのでトップページだけなにか変えたいという場合には前に.homeを書くだけで実装できます。

2アーカイブページのPHPをいじる

外観>テーマの編集>SANGO(親テーマ)>アーカイブ(archive.php)に書き加えます。

「<div id=”kateyou”></div>」を上記のとおりサイドバーを囲むようにコピペです。id名は適当につけました。カテゴリー用って意味でkateyou。ダサくてわかりにくい。勘のいい人はこれだけで次にやることがわかるかも。

3さっきのタグを非表示にする

外観>テーマの編集>子テーマのスタイルシートにコピペ

[codebox title=”コード”]

div#kateyou {
    display: none;
}

[/codebox]

更新してサイト表示するとアーカイブページのサイドバーが消えています。

解説

[say]説明下手ですみません[/say]

今回はサイドバーがすべての場所で表示されている状態から、記事ページのみ表示されている状態に変更したかったので、記事ページ以外を非表示にするというやり方を考えることにしました。トップページはすでに.homeを前に付ける方法で非表示にできることを知っていたのでCSSを追加するだけでした。アーカイブページのサイドバー非表示はトップページのようなクラス名が存在しなかったのでPHPをいじって.homeのようなのつくり、似たような方法で非表示にしました。

 

 

 

 

コメント

  1. 記事、参考にさせていただきました!
    非表示になったのですが、記事を3列に表示する方法を教えていただきたいです!

    • コメントありがとうございます!わたしは
      @media only screen and (min-width: 1030px){.cardtype__article {
      width: 30%;
      margin: 10px;
      }}
      を使っています。が中央寄せにしたりデバイス別に大きさを変えたりするとかなり複雑になるので、解説はできません。ごめんなさい💦

タイトルとURLをコピーしました