閉じる

Cocoonは超優秀なテーマです。その理由はカテゴリ別の人気記事リストを作れるところ。

なぜこれがいいかというとサイト型のトップページを作る場合カテゴリごとの記事リストが必須ですが多くの場合カテゴリごとの新着記事リストになってしまうと思います。これでも悪くはありませんが…。

新着記事リストだと一番上に来る記事が必ずしも読んでもらいたい記事とは限りません。しかし人気記事リストなら読んでもらいたい記事である可能性が高いです。

そのためトップページで使えるカテゴリ別に人気記事リストが出せるCocoonは超優秀なわけです。

この記事ではCocoonを使いサイト型トップページを作る方法について書きます。できることはトップページにカテゴリ別の記事リストをカラムわけで表示すること。CSSを使いタブで切り替えられる記事リストを表示すること。同時に新着記事リスト(もともとのトップページ)はそのまま残すことが出来ます。つまり構成としてはトップページ上部にタブ付き記事リスト(カテゴリを切り替えられる)、次にカラムわけされたカテゴリ別記事リスト、一番下に新着記事リストという並びにすることが可能です。

前提として、Cocoonのカラム機能の使い方について知っておいて下さい。

Cocoonでのサイト型トップページの作り方を簡単にまとめると次のようになります。

1、固定のトップページに

2、カラムを分けて

3、記事リストを表示する

※記事リストは重要な順が望ましい

固定のトップページの作り方と、今まであった新着記事リストのページを別に作る方法はこちらでまとめています。

ちなみに最後のほうに書くように、必ずしも固定ページを作らなくてもトップページは作れます。既存の新着記事ページの上部に固定ページのHTMLを入れればいいからです。

Cocoonでのカテゴリ別の人気記事リストの出し方(ショートコード)

Cocoonでカテゴリ別の人気記事リストを出すのは超簡単です。コードはこれだけ。

[popular_list days=30 rank=1 pv=1 count=3 cats=24,11 type=default]

これを記事内に貼ればカテゴリごとの人気記事リストが表示されます。ここでのポイントはcatsの数字はカテゴリのIDを,(カンマ)で区切って書くくらいですね。カテゴリの記事IDはWordPressの管理画面のメニューの投稿一覧とか新規追加の下にあるカテゴリーのページでそれぞれのカテゴリータイトルにマウスを合わせるとブラウザの下の方にURLが出ます。そのURLにあるid=の数字がそれです。(&の前)

2カラムのカテゴリー人気記事リストを作る

2からむん記事リスト

当サイトではこんな感じ

テーマが違うので見た目は違いますがこうなります。片方のカテゴリーが記事が少なすぎて失敗してます笑

ちなみにこのサイトはCocoonじゃないですが他のサイトではCocoon使っています。

カラムはCocoonの機能を使ってもGutenbergの機能を使ってもどっちでもいいです。Cocoonの機能を使うとテーマ変更時にカラムがなくなることに注意が必要です。

Cocoonでのカラムの使い方はこちらの記事にまとめています。

リストを表示するにはカラムごとにさっきのショートコード(カテゴリIDを変えたもの)をコピペするだけなので簡単ですよね?

さらに後で書くようにCocoonでは自分の好きな順に記事を並べたリストを出すことも出来ます。該当箇所に飛ぶ

人気記事リストのウィジェットが出せないテーマがほとんど

Cocoonではウィジェットどころか、記事内にショートコードを貼るだけで人気記事リストを表示できますが、Cocoon以外のテーマではプラグインなしではできないものも多いです。

そのためCocoonはトップページを作るのにも使いやすいテーマだといえますね。

トップページに作るリストは単なるカテゴリ一覧でなく人気記事リストでなければならない理由

トップページに記事のリストを貼るじゃないですか。例えばこれが単なるWordpreessのカテゴリーのリストだったらどうします?

ター坊
ター坊

そう…単に最新記事が先頭に来るんだよ

そうするとどういうことになるかというと、人気のある記事が埋もれて人気のない記事がリストの上位に来る可能性があるんです。それくらいなら自分でリスト作った方がましですよ。なおCocoonでは【メニュー】を利用して自分で選んだ記事のリストも作ることが可能です。詳細はCocoon本家サイトの記事をお読みください。

ちなみにやり方は実は簡単で、上記ページを見なくてもOKです。メニュー(グローバルメニューとかのメニューです)を作り、以下のショートコードにメニュー名を入れるだけ。

[navi name=”メニュー名”]

これでできてしまいます。このやり方もトップページにはおすすめですね。

タブ付き記事リストを作る(おまけ)

トップページにカテゴリごとの記事リストをタブで表示できたらカッコいいですよね。私はそんなCSSを委作れませんが公開している方がいたのでそれをお借りして作ることとします。こちらのページが参考ページです。

CSSだけでタブ切り替えを作る方法 

この方法を使うと、このようにタブ付きの記事リストを作れます。

 

記事リストにはなっていませんが、ここにCocoonのショートコードを入れればリストになるのがわかりますよね。

これがトップページ上部にあると格好いい気がします。

Cocoonのサイト型トップページを仕上げる

一番楽なのはこれらのHTMLをCocoonの【インデックスリストトップ】ウィジェットに突っ込む方法です。(固定ページを作らない)

テキストウィジェットだとうまくいかない場合があるのでその場合カスタムHTMLを使って下さい。

 

Cocoonのインデックスリストトップウィジェット

 


インデックスリストトップはこれですね。

ここにテキストかカスタムHTMLで先程作ったページのHTML(ビジュアルエディターじゃないやつ、テキストです)を入れてあげれば完成です。

このやり方のいいところはウィジェットを色々作って場所を入れ替えたりもできるところです。

HTMLとショートコードをほぼ放り込むだけなので簡単ですよね。

コピペ コピペ

タブ付き記事リストにを作るHTMLとCSS

ほぼ完全に引用ですが一応載せておきます。一部変えています。

<div class="tabs">
<input id="all" type="radio" name="tab_item" checked>
<label class="tab_item" for="all">カテゴリー1</label>
<input id="programming" type="radio" name="tab_item">
<label class="tab_item" for="programming">カテゴリー2</label>
<input id="design" type="radio" name="tab_item">
<label class="tab_item" for="design">カテゴリー3</label>
<div class="tab_content" id="all_content">
<div class="tab_content_description">
<div class="c-txtsp">カテゴリー1のショートコード</div>
</div>
</div>
<div class="tab_content" id="programming_content">
<div class="tab_content_description">
<div class="c-txtsp">カテゴリー2のショートコード</div>
</div>
</div>
<div class="tab_content" id="design_content">
<div class="tab_content_description">
<div class="c-txtsp">カテゴリー2のショートコード</div>
</div>
</div>
</div>

コピペ

/*タブ切り替え全体のスタイル*/
.tabs {
margin-top: 50px;
padding-bottom: 40px;
background-color: #fff;
box-shadow:#fff;
width: 700px;
margin: 0 auto;}

/*タブのスタイル*/
.tab_item {
width: calc(100%/3);
height: 50px;
border-bottom: 3px solid #5ab4bd;
background-color: #d9d9d9;
line-height: 50px;
font-size: 16px;
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
}
.tab_item:hover {
opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name=”tab_item”] {
display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
display: none;
padding: 40px 40px 0;
clear: both;
overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
background-color: #5ab4bd;
color: #fff;
}
#top-tab-box{
font-size:32px;
}

コピペ

元のサイトから若干変えています。こちらのCSSを公開しているサイトはこちら。CSSだけでタブ切り替えを作る方法

トップページに記事リストにするにはbox-shadowの線はいらないかなと思い変えてます。もとのCSSはbox-shadow: 0 0 10px rgba(0, 0, 0, 0.2);となっています。

このCSSをスタイルシートか追加CSSにコピペした上で上のHTMLをウィジェットに入れるだけで完成です。後は好きに入れ替えたりして下さい。

ちなみにプラグインを使って、ウィジェットを固定ページに入れる方法もあります。私はそれやってます。

ター坊
ター坊

サイトが多くて1つ1つのサイトに作り込み出来ないという方にはおすすめ!

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)