Cocoonの「新着記事」をCSSで非表示に!

Cocoonの「新着記事」をCSSで非表示に!

この記事では、「サイト型トップページ」で表示される「新着記事」を非表示にする方法を書いています。

ウィジェットとして「新着記事」を表示させたくない(使いたくない)場合は、下の画像にあるように、WordPress管理メニューの「Cocoon設定」→「ウィジェット」と進み、「[C] 新着記事:新着記事リストをサムネイルつきで表示するウィジェットです。」にチェックをつけて、除外してください。

Cocoonの新着記事を除外ウィジェットで非表示にする

これより以降は、「サイト型トップページ」に「新着記事」を表示させない方法の説明です。

Cocoonは設定だけで、サイト型のトップページが簡単に作れます。

なので、読者に読んで欲しい記事を「カテゴリー」単位にまとめて、トップページに配置するなんてこともできます。

大きなところではトップページの機能に不満はないですが、ただ1点だけ、改善してほしいことがあるんですよね。

それは、「新着記事」が必ず表示される仕様であること。

典型的なブログだったら、「新着記事」は必須表示でもいいかなと思いますが、サイト型のトップページだと、「新着記事」を表示してほしくない場合もあると思うんですよね。

Cocoonで表示される「新着記事」を非表示にする!

「新着記事」が他のカテゴリーの後ろの方に表示できるのであればまだいいんですが、必ず先頭に表示される仕様なのがちょっと悩ましいところです。

そこで、今回は暫定対策として、CSSを使って「新着記事」が非表示となる方法を紹介します。

目次

CSSで「新着記事」を非表示にできるフロントページタイプ

さっそく、「新着記事」を非表示にできるCSSの追加方法を紹介したいところですが、その前に制限事項について説明します。

このCSSは、Cocoonのトップページの設定(「Cocoon設定」→「インデックス」)のフロントページタイプが「カテゴリごと」のみ機能するということです。

Cocoonで表示される「新着記事」を非表示にする!

※「一覧(デフォルト)」は、そもそもサイト型トップページの表示形式ではないので、ここでは関係ない指定となります。

つまり、以下のように表示形式に「タブ一覧」を指定した場合、CSSで「新着記事」を非表示にすることはできないので、その点だけ注意してください。

※「新着記事」のタブを表示させるないようにするためには、CSSではなくPHPファイルを編集する必要があり、簡単には対応できません。

Cocoonで表示される「新着記事」を非表示にする!

子テーマのstyle.cssに「新着記事」を非表示にするCSSを追加する

では、「新着記事」を非表示にするCSSを追加してみましょう!

ここでは、「子テーマ」のstyle.cssに追加することを前提としています。

「子テーマ」って何?って人は、Cocoonの以下の公式サイトを確認して、「子テーマ」の有効化を行ってください。

Cocoonも日々テーマのバージョンアップを行っており、バージョンアップすると「親テーマ」が置き換わります。

その関係で、「親テーマ」に追加したCSSがクリアされるので、バージョンアップしても追加したCSSがそのまま残る「子テーマ」を有効にするのがおすすめです。

ではCSSの追加方法です。

(01) WordPress管理画面の左メニュー「外観」(①)→「テーマファイルエディター」(②)とクリック。

Cocoonで表示される「新着記事」を非表示にする!

(02) 以下の「注意!」画面が出た場合、「理解しました」をクリック。

Cocoonで表示される「新着記事」を非表示にする!

(03) 「編集するテーマを選択」のところを「Cocoon Child」に切り替えて(①)、「選択」(②)をクリックし、最後に「スタイルシート(style.css)」(③)をクリックします。

Cocoonで表示される「新着記事」を非表示にする!

(04) 「スタイルシート(style.css)」の編集画面になるので、一番下に以下のCSSをコピー&ペーストで貼り付けて、「ファイルを更新」をクリック。

/* 「新着記事」を非表示にするCSS */
div#list-wrap .list-new-entries {
  display: none;
}
Cocoonで表示される「新着記事」を非表示にする!

これで、「新着記事」を非表示にするCSSが「子テーマ」のスタイルシートに追加されたので、トップページで「新着記事」が非表示なったことを確認します。

下の画像の、右側がCSSを追加した後で、「新着記事」が非表示になっていることがわかります。

CSSを追加する前
Cocoonで表示される「新着記事」を非表示にする!
CSSを追加した後
Cocoonで表示される「新着記事」を非表示にする!

今回紹介した「新着記事」を非表示にするCSSは「タブ一覧」では使えませんが、「タブ一覧」はカテゴリーの数が最大3つまでの制限があるため、そんなに利用されないと思っています。

なので、CSSの制限による影響はそんなにないでしょう。

もし、サイト型トップページを作った時に、「新着記事」を隠したい場合は、今回紹介した方法をぜひ試してください!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次