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

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

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

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

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

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

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

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

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

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

SWELLはモバイルのページ表示が爆速だった
目次

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

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

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

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

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

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

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

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

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

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

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

Cocoon
Cocoonテーマをインストールする方法 WordPressに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の制限による影響はそんなにないでしょう。

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

SWELLはモバイルのページ表示が爆速だった
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA


目次
閉じる