Cocoonは、デフォルトでは新着記事が一覧表示されるブログ型のトップページが表示されます。
それに対して、カテゴリーごとに並べて表示できる「サイト型トップページ」にすることもできるんです。
ただ、このサイト型トップページの場合、先頭に「新着記事」が表示される仕様になっているんですよね。
でも、「新着記事」は表示させたくないんだけどな～
人によっては、「新着記事」を表示させたくないという場合もあるでしょう。
この記事では、CSSを使って簡単に「新着記事」を非表示にするカスタマイズについて、詳しく解説します。
カスタマイズと言っても、超簡単にできるのでぜひ参考にしてください！
非表示の対象となるフロントページタイプ
これから紹介する方法は、以下の「カテゴリーごと」を選択したフロントタイプページを対象としてします。
以降の手順で、「新着記事」を非表示にしていきます。
CSSを追加して「新着記事」を非表示にする
CSSを追加することで「新着記事」を非表示にしますが、CSSの追加はカスタマイザーを利用します。
カスタマイザーだと、CSSの追加結果がリアルタイムで確認できますよ。
WordPressにログインしたら、管理ツールバーの左にあるサイト名をクリックします。
※これでトップページが表示されます
管理ツールバーの「管理メニュー」（①）→「カスタマイズ」とクリック。
カスタマイザーが開くので、「追加CSS」をクリック。
以下のCSSコードをコピーして貼り付けると（①）、「新着記事」が非表示になります。
非表示になったことを確認したら、「公開」（②）をクリック。
/* 「新着記事」を非表示にするCSS */
div#list-wrap .list-new-entries {
display: none;
}
これで、トップページの先頭に表示されていた「新着記事」を消すことができます。
CSSなどによるカスタマイズをする場合は、子テーマの利用をおすすめします。
親テーマに対してカスタマイズしてしまうと、Cocoonのバージョンアップでカスタマイズの内容がクリアされるので、画像のように必ず子テーマを有効化しておきましょう！
子テーマを使った方がいい理由については、以下の抜粋を参考にしてください。
親テーマのみインストールした場合は、テーマのアップデート時にCSSやテンプレートカスタマイズがリセットされてしまいます。子テーマをインストールすることで、テーマカスタマイズを保持したままアップデートができます。CSSやテンプレートをカスタマイズしない場合でも、子テーマを利用することをおすすめします。
Cocoonテーマをインストールする方法
「新着記事」を非表示にできないフロントページタイプ
「新着記事」を非表示にできないフロントページタイプというのもあるので、参考までに補足しておきます。
フロントページタイプに「タブ一覧」を選択している場合は、「新着記事」を非表示にすることはできません。
頑張ればできないこともないですが、おそらくCSSではなくJavascriptを使ったカスタマイズが必要となるので、難易度が高くなります。
ただ、「タブ一覧」はカテゴリーの数が「新着記事」も含めて4つしか表示できないので、「タブ一覧」そのものがほとんど使われることもないかなと思います。
まとめ
Cocoonの場合はカテゴリー別のサイト型トップページに簡単に切り替えられますが、「新着記事」が必ず先頭に表示されます。
「新着記事」がそのまま表示されても構わない場合はいいですが、表示されるのが嫌だという人は、今回の方法を使うと簡単に非表示にできるので、ぜひ参考にしてください！
コメント