スポンサーリンク

Cocoonでホーム画面にカテゴリーごとの新着記事を表示する方法

男女
スポンサーリンク

現在わたしはワードプレスのテーマCocoonを利用してブログを書いています。

ブログ移行の様子はこちら

Cocoonのカスタマイズについてはこちら

合わせて読んで下さい。

いままでちょこちょこ自分のブログをカスタマイズしてきたのですが、自分のブログのホーム画面をみてみると、なにかアッサリしているなぁ、物足りないなぁと感じています。

現在のホーム画面の構成はこんなかんじ。PCでみた場合です。

ホームページ

新着記事のところから下のフッターまで広いスペースが空いています。

これはもったいないので回遊率(一人のユーザーがホームページ内のページをどれだけ閲覧したのかを表す指標です)をあげるために、ここにカテゴリーごとの新着記事を貼ってみたいと思います。

スポンサーリンク

カラムを作ってそこに新着記事のショートコードをいれる

こちらの記事を参考にしました。

https://zeroblo.net/2018/10/22/958/

大きく分けて2通りの方法があるようです。

  1. 固定ページに1から作る方法
  2. 既存のホーム画面にウィジェットを追加する方法

1の方法はかなり大変そうなので、ここでは2の方法、すでにあるホーム画面を生かしてそこにウィジェットを挿入しようと思います。

今回は2カラムのものを2段作って、4つのカテゴリーの新着記事を表示させてみましょう。

まずお試しで作ってみる

まずお試しで作ってみましょう。

WordPressで「投稿」 → 「新規追加」で適当なページを作ります。

タグをクリックして「2カラム 1:1」を選択します。

お試しページ

するとこのような画面になります。

お試し

入力するところが2つに分かれました。

試しに左側に新着記事、右側に人気記事を表示するショートコードを入れてみます。

「新着記事」「人気記事」とキーボードから入力したあと

赤丸のところにカーソルを合わせて、「ショートコード」 → 「新着記事一覧」とクリックします。

ショートコードお試し

こんなかんじでコードが表示されます。

お試しショートコード

同様に右側の人気記事のところも「ショートコード」 → 「人気記事一覧」とクリックします。

ショートコードお試し

プレビューで確認してみましょう。

記事一覧

シンプルでいいかんじですね。

ただこのままだと全記事の新着記事、人気記事が表示されます。

今回の目的は

カテゴリーごとの新着記事を表示させることなので、ショートコードを少し変えなければなりません。

新着記事のショートコードを調整する

新着記事のショートコードの詳細は、Cocoon作者わいひらさんのこちらのページを熟読してください。

新着記事一覧を表示するショートコードの利用方法
新着記事ウィジェットのようなリスト表示を実現できるショートコードの利用方法です。

新着記事のショートコードをみていきます。

new_list count=”5″ type=”default” cats=”all” children=”0″ post_type=”post”

これを[]で囲ったものがコードになります。

count=”5″ → 表示される記事の数

type=”default” → 記事の表示の仕方(3種類あり)

cats=”all” → 表示するカテゴリーを指定(allはすべてのカテゴリー)

children=”0″ → 子カテゴリーを含めるかどうか

post_type=”post” → 表示する投稿タイプを選択

ここで重要なのはcats=”   ” で表される部分です。
ここに表示したいカテゴリーのIDを入力する必要があります。

カテゴリーのIDを確認する

カテゴリーのIDを確認する方法は

カテゴリー

WordPressで「投稿」 → 「カテゴリー」と進みます。

ID確認

この画面でIDを知りたいカテゴリーにマウスカーソルを合わせると、下のところの真ん中あたりにID=〇〇と表示されるので、これをメモしておきます。

今回当ブログの「生活」「北海道」「ブログ」「エンタメ」の4つのカテゴリーの新着記事を表示させようと思っています。

上の方法でIDを確認すると「生活」=「3」、「北海道」=「6」、「ブログ」=「23」、「エンタメ」=「25」でした。

お試しで作ったものを本番用に作り変えます

ショートコードお試し

さきほどお試しで作ったこちらを変えていきます。

まず「新着記事」と書いてあるところをカテゴリー名「生活」に変え、「人気記事」を「北海道」へ、右側の人気記事のショートコードは削除し、新着記事のショートコードを貼ります。

カテゴリー

「生活」と「北海道」の文字は中央寄せして、フォントサイズを変え、太字にしました。

そしてショートコードはcatsのところの数字をカテゴリーのIDに変えるだけです。

プレビューをみてみましょう。

プレビュー

まあ これでもいいけれど一番下にそのカテゴリーにとぶボタンを置いてみましょう。

記事へ飛ぶ

下段に「生活の記事へ」「北海道の記事へ」と入力しました。

ここで一旦自分のブログに戻ってカテゴリーにとぶURLを調べます。

当ブログの場合パソコンでみたときサイドバーにカテゴリーがあるので、そのなかから「生活」をクリックします。

サイドバー

生活カテゴリー

このURLをコピーします。

コピーしたら、また記事に戻って

リンクつけ

  1. 「生活の記事へ」を範囲選択して
  2. リンクの挿入ボタンをクリックします

下の画面のようになります。

リンクはり

さきほどコピーした「生活」カテゴリーのURLをペーストして、適用ボタンをクリックします。

このままだとただのリンクなので、これをボタンに変えましょう。

囲みボタン

「生活の記事へ」を範囲選択している状態で、「スタイル」 → 「囲みボタン」といってお好みの色と大きさを選びます。

私はとりあえずオレンジの(中)にしてみました。

となりの「北海道」カテゴリーも同様にボタンを作りました。

プレビューはこんなかんじ

サンプル

できたものをウィジェットを使ってホーム画面に設置する

ここからが本題ですが、上で作った2つのカテゴリーの新着記事一覧を、ウィジェットの中の「カスタムHTML」を利用してブログに設置します。

まず上で作った記事のコードをみてみましょう。

コード

テキストモードにするとコードが表示されるので、まるごとコピーします。

コピーしたらWordpressの「外観」 → 「ウィジェット」から 「カスタムHTML」をクリックします。

カスタムHTML

設置する場所はとりあえず、インデックスリストボトムにしました。

カスタムHTML

  1. 「インデックスリストボトム」をクリック
  2. 「ウィジェットを追加」をクリック

カスタムHTML

この画面になるので、赤枠の中に先ほどコピーしたコードを貼り付けます。

コードをはる

貼ったら「保存」をクリック

自分のサイト

自分のサイト

すべてのカテゴリーの新着記事の下に「生活」と「北海道」の新着記事が完成です。

この下にあと2つ「ブログ」と「エンタメ」のカテゴリーを、同様の手順で追加しました。

自分のサイト

まとめ

「ブログ」と「エンタメ」の新着記事のコードは以下のようになります。

<div class=”column-wrap column-2″>
<div class=”column-left”>
<p style=”text-align: center;”><strong><span style=”font-size: 24px;”>ブログ</span></strong></p>
<p>●new_list count=”5″ type=”default” cats=”23” children=”0″ post_type=”post”○<br />
<br />
</p>
<p style=”text-align: center;”><br />
<span class=”btn-wrap btn-wrap-orange btn-wrap-m”><a href=”https://gobgoblog.com/category/%E3%83%96%E3%83%AD%E3%82%B0“>ブログの記事へ</a></span></p>
</div>
<p>&nbsp;</p>
<div class=”column-right”>
<p style=”text-align: center;”><strong><span style=”font-size: 24px;”>エンタメ</span></strong></p>
<p>●new_list count=”5″ type=”default” cats=”25” children=”0″ post_type=”post”○<br />
<br />
</p>
<p style=”text-align: center;”><br />
<span class=”btn-wrap btn-wrap-orange btn-wrap-m”><a href=”https://gobgoblog.com/category/%E3%82%A8%E3%83%B3%E3%82%BF%E3%83%A1“>エンタメの記事へ</a></span></p>
</div>
<p>&nbsp;</p>
</div>

コピペして使う場合、赤マーカーのところは、ご自身のブログに合わせて変更が必要なところです。

また途中に2個づつ出てくる、●と○はショートコードに使う記号を置き換えたものです。

そのままここで使ってしまうと、ここでショートコードが発動してしまうのでかえています。

●は”[“、○は”]” に置き換えて使って下さい。

これでスペースが埋まって、記事を読んでもらえる機会が増えるんじゃないかと期待しています。

アプリ系アフィリエイトでおすすめのASPはこのふたつ

私が使っている独自ドメインはお名前.com



私が使っているレンタルサーバーはエックスサーバー



どうも カンジ(@gobugobukanji)でした。

コメント

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