この記事では、Cocoonのトップページに表示される「新着記事」を非表示にする手順について、くわしく解説していきます。
テーマはCocoonを対象としています。
Cocoonのトップページはいろんなタイプを指定することができますが、知らないうちに「新着記事」のカテゴリーが表示されていることがあります。
この記事では、トップページに表示されている「新着記事」を非表示にする2つの方法を解説しているので、非表示にしたい場合は、ぜひ参考にしてください!
サイドバーにある「新着記事」、「最近の投稿」ウィジェットを非表示にする方法は、以下の記事を参考にしてください。
トップページの「新着記事」を非表示にする
トップページの「新着記事」を非表示にする2つの方法を、それぞれ紹介します。
フロントページタイプを一覧形式に変更する
これはトップページのフロントページタイプを誤って設定したために、以下のように意図しないで「新着記事」が表示されてしまったパターンです。
これはトップページのフロントページタイプを変更すればよいです。
管理画面メニュー「Cocoon設定」の「Cocoon設定」(①)をクリック。
「インデックス」(①)をクリックし、フロントページタイプでは「一覧(デフォルト)」(②)にチェックをつけて「変更をまとめて保存」をクリック。
以下のように、「新着記事」が非表示になります。
CSSで「新着記事」のみ非表示にする
続いては、フロントページタイプを「カテゴリーごと」にした時に、先頭に無条件に表示される「新着記事」を非表示にするパターンです。
こっちのパターンは、先頭の「新着記事」のみを非表示にするCSSを追加することで対応します。
CSSの追加には2つの方法がありますが、以下の表に書いている特徴をよく読んで、どちらかの方法で対応してください。
CSSの追加方法 | 特徴 |
---|---|
カスタマイザーで追加 | Cocoonをバージョンアップすると追加CSSはクリアされる。 → バージョンアップのたびに、再追加が必要 |
テーマファイルエディタで追加 | 子テーマにCSSを追加する。 子テーマのインストール→有効化の作業が必要。 Cocoonのバージョンアップがあっても追加CSSは残る(クリアされない) |
表にも書いていますが、「カスタマイザーで追加」は、CocoonのバージョンアップのたびにCSSの再追加が発生します。
「テーマファイルエディタで追加」は、子テーマのインストール→有効化という手間がかかる作業が発生しますが、一度子テーマを有効化すれば、Cocoonのバージョンアップの影響を受けずに追加したCSSはずっと残ってクリアされません。
もちろん、既に子テーマを使っている場合は有効化の作業は必要ありません。
今後、ブログを運営していくと、スキンの適用や、デザインの変更(CSS追加)などを行うことも考えられるため、「テーマファイルエディタで追加」(子テーマ有効化)をおすすめします。
カスタマイザーでCSSを追加
カスタマイザーでCSSを追加する方法です。
管理画面メニュー「外観」の「カスタマイズ」(①)をクリック。
「追加CSS」をクリック。
「追加CSS」をクリック。
上にある「公開」をクリック。
テーマファイルディタでCSSを追加
テーマファイルエディタでCSSを追加する方法です。
「子テーマ」のstyle.cssにCSSを追加することが前提のため、子テーマを使っていない場合は、子テーマのインストール/有効をしてください。
以下のCocoonの公式サイトが参考になります。
では、テーマファイルエディタでのCSSの追加方法です。
WordPress管理画面の左メニュー「外観」(①)→「テーマファイルエディター」(②)とクリック。
以下の「注意!」画面が出た場合、「理解しました」をクリック。
「編集するテーマを選択」のところを「Cocoon Child」に切り替えて(①)、「選択」(②)をクリックし、「スタイルシート(style.css)」(③)をクリックします。
左の編集画面の一番下に、以下のCSSをコピー&ペーストで貼り付けて「ファイルを更新」をクリック。
/* 「新着記事」を非表示にするCSS */
div#list-wrap .list-new-entries {
display: none;
}
「新着記事」を非表示にできないページタイプ
トップページはフロントページタイプとしていくつかのタイプが選択できますが、CSSを使っても「新着記事」を非表示にできないタイプがあります。
「一覧(デフォルト)」、「タブ一覧」はCSSで非表示にできない
フロントページタイプが「タブ一覧」の場合は、「新着記事」を非表示にできません。
※「一覧(デフォルト)」は、「新着記事」などのカテゴリーが表示されないタイプのページです。
まとめ
ここまで、トップページで「新着記事」を非表示にする方法を解説しましたが、「新着記事」を非表示にするパターンはいくつかあるので、どのパターンに該当するかを確認してから、ここで紹介している方法を試してみてください!
サイドバーにある「新着記事」、「最近の投稿」ウィジェットを非表示にする方法は、以下の記事を参考にしてください。
コメント