WordPressテーマCocoonを使っているとき、トップページやそのほかの固定ページ内で、更新日や著者名などを非表示にしたい時ってありますよね。今回はCSSを使って簡単にできるやり方を紹介します。
CSSを使って固定ページの情報を非表示にするやり方
フロントページに固定ページを設定したときの非表示方法
CSSを使うことで、フロントページで非表示する方法がCocoonの公式ページで紹介されています。
このCSSを適用することで、簡単に指定した要素を消せます。
フロントページで使わない主な例
- タイトル（H1見出し）
- シェアボタン
- フォローボタン
- 投稿日
- 更新日
- 投稿者名
次のCSSを子テーマのstyle.cssに貼り付けることで、フロントページで非表示にします。
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
display: none;
}
/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{
display: none;
}
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{
display: none;
}
/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
display: none;
}
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
display: none;
}style.cssは外観からアクセスできます。
全ての固定ページで設定する方法
上記は、フロントページを固定ページとして設定した場合ですが、そのほかの全ての固定ページで設定することもできます。
これは、先程のフロントページのCSSから「.home」部分だけを抜き取ることで変更が可能です。
タイトルだけに絞って例を紹介します。これをstyle.cssに記載いただければ大丈夫です
/*全ての固定ページのタイトルを非表示*/
.page .entry-title{
display: none;
}任意の固定ページで設定する方法（投稿ページも同様）
任意の数ページだけ設定をする場合は、ページごとの「追加CSS」の項目に書き加えていきます。先程のCSSにさらに「.page」を除いた記載をします。
/*任意のページのタイトルを非表示*/
.entry-title{
display: none;
}編集場所は個別ページの下に追加CSSがあるので、ここに上記のコードを入れていきます。
そのほかの情報を特定して非表示にしたい場合（WordPress共通）
最後に消したいブロックを特定して非表示にする方法をお伝えします。CocoonだけでなくWordPress共通の話です。これを知っていると細かく非表示設定を行うことができて便利です。
要素を特定するために、chromeのデベロッパーツールを使いますのである程度知識がある方向けの説明とさせてください。
デベロッパーツールを開いて非表示にしたいスタイルを探します。
ブラウザを右クリックし、検証からアクセスできます。
その後、矢印をクリックして消したい場所を選びます。
自動で範囲が選択されるので、その時のクラス名を控えておきます。今回の場合は、サイドバーを消してみます。なのでクラス名は「.sidebar」です。
このページだけに適用しますので、先ほどと同じように追加のCSSに書き込みます。
.sidebar{
display:none
}
このまま保存すると完了です。消えてますね
紹介した要素のまとめ（少なくともCocoon内で有効です）
| 非表示にしたいもの | 指定方法（クラス名） |
| タイトル | .entry-title |
| シェアボタン | .sns-share |
| フォローボタン | .sns-follow |
| ページの投稿日 | .post-date |
| ページの更新日 | .post-update |
| 投稿者名 | .author-info |
| サイドバー | .sidebar |
