※当サイトではGoogleAdSense、アフィリエイトを使用した商品の紹介で収益を得ています。

【Cocoon】トップページにカテゴリ別の新着記事を表示する方法

wordpress
この記事は約5分で読めます。

テーマにCocoonを使用していてトップページをサイト形式にしている場合のトップページへカテゴリ別の新着記事を表示する方法です

サイト形式とは固定ページをトップページにしている状態
逆にブログ形式は記事一覧ページをトップページにしている状態です

散々検索をかけて調べて出来ねーなーと思ってたトップページでカテゴリ別新着記事の表示がこんな簡単に出来たとは…という記事です

Sponsor Link
Sponsor Link

やりたかった事

当サイトはトップページがサイト形式でブログ形式ではないので、そこへカテゴリ別の新着記事を特定数表示させること
色々検索をかけてやってみた事だと思うように出来なかったのだが、Cocoonを使っている人なら同じような事が簡単にできます

ナビカード

2019/03/23追記
ver1.6.7~追加されたナビカードを使っても同じような事ができます

当サイトの記事でも書いていますが、ナビカードを使う事で自分が表示させたい記事を選んで表示させる事が出来ますよ

コード

必要なものはnew_listというショートコードだけです、ほんと無駄に遠回りをしました(;・∀・)
テーマ製作者のわいひらさんが書いてくれていますが、自分用の備忘録として書いておく

やりたい事はトップページでカテゴリ別の新着記事を表示することなので

new_list cats=ID count=◯ children=1

上記ショートコードをテキストウィジェットや固定ページに追加するだけです

引数のcatsがカテゴリID、countが表示させる記事数、childrenが子カテゴリを含めるかどうか
この他にサムネ表示を変更するtype、表示する投稿タイプを変更するpostがあります

Sponsor Link

実際のコード

自分は2列表示で2段にしたかったので、固定ページのHOMEへ

ソースコードを開く
<div class="column-wrap column-2">
    <div class="column-left">
        <div class="topcat">GADGET</div>
            new_list count=5 cats=7 children=1

        <div class="topc-text"><a href="https://haineons.com/gadget/">...and more</a></div>
    </div>
    <div class="column-right">
        <div class="topcat">PC</div>
            new_list count=5 cats=4 children=1

        <div class="topc-text"><a href="https://haineons.com/pc/">...and more</a></div>
    </div>
</div>

<div class="column-wrap column-2">
    <div class="column-left">
        <div class="topcat">LIFE</div>
            new_list count=5 cats=10 children=1

        <div class="topc-text"><a href="https://haineons.com/life/">...and more</a></div>
    </div>
    <div class="column-right">
        <div class="topcat">PHOTOGRAPHY</div>
            new_list count=5 cats=12 children=1

        <div class="topc-text"><a href="https://haineons.com/photography/">...and more</a></div>
    </div>
</div>

このような形で追加しました、これで子カテゴリを含む4カテゴリ、各カテゴリ3記事表示になります
リンクの部分を自分が表示させたいカテゴリへのアドレスにしてあげればOK!

角括弧を付けたままだとリスト表示になってしまうのでカッコ抜きで書いていますが
実際に使う時はショートコード部分を角括弧で囲ってくださいね

あとはCSSでスタイリングして完成!

/* トップページカテゴリ装飾 */
.topcat {
    color: #6c6c6c;
    background: #f3f4f5;
    font: 700 1em "Raleway", sans-serif;
    margin-bottom: 12px;
    padding: 7px;
    border-bottom: 3px double #9ed1fc;
    height: 40px;
}

.topc-text {
    text-align: right;
    font: 700 1em "Raleway", sans-serif;
}

どのように表示されているかは当サイトのTOPを見てくださいね

コピーした状態だと角括弧などがエンコードされていますので以下のサイトなどを使ってデコードしてください

おわり

トップページってどれぐらい見られてるのか分からないけど、一応カテゴリ別の新着記事を数記事だけでも載せておくかなと
functions.phpへ追記してー表示用のphpを作ってーとかやっても上手く行かなかった事が
1つのショートコードで簡単に出来ました…色々やってたのは一体何だったのかって感じですw

トップページを固定ページにしていて、同じような事をしたいなーと思っている人の参考になれば

[share]

タイトルとURLをコピーしました