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カラムのカテゴリー人気記事リストを作る
当サイトではこんな感じ
テーマが違うので見た目は違いますがこうなります。片方のカテゴリーが記事が少なすぎて失敗してます笑
ちなみにこのサイトはCocoonじゃないですが他のサイトではCocoon使っています。
カラムはCocoonの機能を使ってもGutenbergの機能を使ってもどっちでもいいです。Cocoonの機能を使うとテーマ変更時にカラムがなくなることに注意が必要です。
Cocoonでのカラムの使い方はこちらの記事にまとめています。
リストを表示するにはカラムごとにさっきのショートコード（カテゴリIDを変えたもの）をコピペするだけなので簡単ですよね？
さらに後で書くようにCocoonでは自分の好きな順に記事を並べたリストを出すことも出来ます。該当箇所に飛ぶ
人気記事リストのウィジェットが出せないテーマがほとんど
Cocoonではウィジェットどころか、記事内にショートコードを貼るだけで人気記事リストを表示できますが、Cocoon以外のテーマではプラグインなしではできないものも多いです。
そのためCocoonはトップページを作るのにも使いやすいテーマだといえますね。
トップページに作るリストは単なるカテゴリ一覧でなく人気記事リストでなければならない理由
トップページに記事のリストを貼るじゃないですか。例えばこれが単なるWordpreessのカテゴリーのリストだったらどうします？
そう…単に最新記事が先頭に来るんだよ
そうするとどういうことになるかというと、人気のある記事が埋もれて人気のない記事がリストの上位に来る可能性があるんです。それくらいなら自分でリスト作った方がましですよ。なおCocoonでは【メニュー】を利用して自分で選んだ記事のリストも作ることが可能です。詳細はCocoon本家サイトの記事をお読みください。
ちなみにやり方は実は簡単で、上記ページを見なくてもOKです。メニュー（グローバルメニューとかのメニューです）を作り、以下のショートコードにメニュー名を入れるだけ。
[navi name=”メニュー名”]
これでできてしまいます。このやり方もトップページにはおすすめですね。
タブ付き記事リストを作る（おまけ）
トップページにカテゴリごとの記事リストをタブで表示できたらカッコいいですよね。私はそんなCSSを委作れませんが公開している方がいたのでそれをお借りして作ることとします。こちらのページが参考ページです。
この方法を使うと、このようにタブ付きの記事リストを作れます。
記事リストにはなっていませんが、ここにCocoonのショートコードを入れればリストになるのがわかりますよね。
これがトップページ上部にあると格好いい気がします。
Cocoonのサイト型トップページを仕上げる
一番楽なのはこれらのHTMLをCocoonの【インデックスリストトップ】ウィジェットに突っ込む方法です。（固定ページを作らない）
テキストウィジェットだとうまくいかない場合があるのでその場合カスタムHTMLを使って下さい。
インデックスリストトップはこれですね。
ここにテキストかカスタムHTMLで先程作ったページのHTML（ビジュアルエディターじゃないやつ、テキストです）を入れてあげれば完成です。
このやり方のいいところはウィジェットを色々作って場所を入れ替えたりもできるところです。
HTMLとショートコードをほぼ放り込むだけなので簡単ですよね。
タブ付き記事リストにを作るHTMLとCSS
ほぼ完全に引用ですが一応載せておきます。一部変えています。
<div class="tabs">
<input id="all" type="radio" name="tab_item" checked>
<label class="tab_item" for="all">カテゴリー１</label>
<input id="programming" type="radio" name="tab_item">
<label class="tab_item" for="programming">カテゴリー２</label>
<input id="design" type="radio" name="tab_item">
<label class="tab_item" for="design">カテゴリー３</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をウィジェットに入れるだけで完成です。後は好きに入れ替えたりして下さい。
ちなみにプラグインを使って、ウィジェットを固定ページに入れる方法もあります。私はそれやってます。
サイトが多くて１つ１つのサイトに作り込み出来ないという方にはおすすめ！
この記事を読んでもWordpreessでのサイト作成が難しいと感じた方は優良のWordpreess用の「ビルダープラグイン・ビルダー付きテーマ」を買うのもおすすめです。所有サイト全てにつかるアカウントなので現在39800円と高いですがサイト数の多い方にはコスパがいいです。
サイト型テーマについて
Wordpreessを使えばどんなサイトも構築可能なのは間違いないと思います。特にCocoonなどは非常にSEO的にも優れていてカスタマイズ性も高いです。しかし例えばCocoonで当サイトのようなデザインが作れるかと言ったらたぶんほぼ無理なんですよね。ここに答えがある気がします。ここでテーマを使う意味ついて考えてみたいです。
テーマを使う意味ってなに？
実は今Movable Typeで作ったサイトを数記事入れた時点で「あーこれもう無理」ということでWordpreessに移転するためにバックアップしているところなんですね。そこで思ったのがMovable Typeの使いづらさですね。テーマもほとんどないですし、デフォルトテーマはレスポンシブじゃないし…レスポンシブテーマにして見たらトップページだけ変わって記事は元のままという…しかも情報も全然ないし、これじゃCMSの役目を果たせないんですよね。調べているうちに何記事もかけちゃいますから。
というわけでテーマというのは「自分の手を煩わせないため」に使うのです。テーマといってもHTMLはほとんどかわらなくてCSSで表示を変えているわけですから、Cocoonのようにシンプルなテーマを別のテーマに変える場合「自分の手を煩わせる」ことによって可能になるわけです。
なので「自分の手を煩わせたくない」方は素直に自分の要望するサイトに一丸近いテーマを使うのがいいということなんです。
なので以下に無料テーマも含めてサイト型トップページの構築におすすめなテーマを挙げておきますのでCocoonのカスタマイズが難しいと思った方は使ってみてください。
Lightning
BizVektorを作っている会社さんが制作しているテーマです。日本のテーマではもっともサイト型のテーマだと思います。私も１サイトで導入して試しています。
The THor(ザ・トール)
サイト型でかなりデザインにもこだわった有料テーマです。SEOにも強いという評判がありアフィリエイターで使っている人は結構多いみたいですね。Twitterでつぶやいてますよみんな。 公式サイトのデモを見ると最強テーマという呼び声が高いのもわかります。
corporate
LIQUID PRESSのcorporateというテーマもサイト向けになります。デモを見てもわかりますが、コンテンツ、フッターなどのエリアわけとその内部のカラムが大事だとわかりますね。要はこれがデフォルトで設定されているかいないかがサイト型テーマかそうじゃないかの違いです。
Emanon
個人的にはサイト型テーマに最もイメージが近いのがこのEmanonです。Emanonを使えばシンプルな企業っぽいサイトもサイト型トップページも簡単に作れるでしょう。というかそのためのテーマです。
サイト型のページ作成で困っていませんか？サイト型のトップページの作成って意外と難しいものです。色々やってみてもプロがやるようにはうまく行かないんですよね。そんな方には有料テーマもおすすめです。わかりやすく言えば、仮に時給1000円としてもサイト型のページ作成に30時間かかるなら3万円以下の有料テーマを買ってしまった方が割安です。その時間で記事書けますしね。おすすめはEmanon Pro！このテーマで時間が節約できないかぜひ公式サイトを見てみて下さい。
)
