記事数が増えてきたから、トップページで過去の記事も掲載できるようにしたいけど、カスタマイズむずかしそう…
WordPress最強の無料テーマといわれる「Cocoon」ならサイト型へカスタマイズは簡単です！
本当に製作者のわいひらさん
←この人
神です。どんな頭脳してんだろう、、、
というぐらいCocoonはカスタマイズ性にすぐれる万能テーマ。
トップページのサイト型への移行も簡単です！
ここでいう「サイト型」とは、次のような定義です。
簡単、簡単というけれどHTMLやCSSの知識がいるんでしょ？
結論からいうとHTML・CSS、プログラミングの知識は1ミリも必要ありません、Cocoonのサイト型への移行は。
使うのはショートコードだけ、これもテンプレがあります。
実際にHTMLやCSSの知識があまりなかった僕でも、このようなトップページをサクッと作ることができました。（※画像は2020年2月現在←今後ゴリゴリ変えていくかもデス）
拍子抜けするほど簡単かつ、日本一わかりやすく（の意気込みで）説明していきますんで、レッツ・チェレンジです！
Cocoonトップページのカスタマイズ【3ステップでサイト型】
- STEP1トップページに表示したい内容を考えよう！←じっくり考えて！
※ここでは私がトップページに適用させたベーシックなレイアウト、新着記事と人気記事、2つのカテゴリー記事を掲載します。
- STEP2トップページ用の固定ページを作成、表示させたい記事を入れていく←最重要パート
トップページの土台を作成、カラムを使いショートコードを放り込む
- STEP3ワードプレスの表示設定から新しい固定ページを適用する←一瞬！
ワンクリックで完了！
STEP1:Cocoonトップページに表示する内容を考えておこう！
今回は左上に新着記事、右上に人気記事、下に任意のカテゴリー記事を表示させていきます。
自分なりに作りたいレイアウトがあれば紙などに書いてみると、より具体的にイメージできるようになりますよ。
STEP2:Cocoonトップページ用の固定ページを作成、記事挿入
本記事ではワードプレスの新エディタ・Gutenbergで説明します。ブロックエディタはコンテンツの入れ替えが簡単です。ていうか、クラシックエディタを使った経験がない！
Cocoonトップページ用の固定ページ作成
Cocoonカラムを使ってレイアウト【新着＆人気記事編】
さぁ土台の設定が終えたところでレイアウトに入っていきます！
具体的には「カラム」を使って構成していきます。
デフォルトのカラムでもいいんですが、「Cocoonレイアウト」の方が３カラムまで選べる上、カラムごとに色分け（色分けはエディタだけ）されており見やすいです。
やっぱ、わいひらさん神！
手順①：まず「Cocoonレイアウト」から２カラムを選択
手順②：カラムごとの構成へ。まず左上の「新着記事」から！
「新着記事」と入力します（見出し入力でもOK！）。
その下に、お好みで任意の「画像」を付けます（なくてもいいよ）。
ここは写真にしてもオシャレですね！
手順③：次に「新着記事」のショートコードを埋め込む
Cocoonの場合、エディタから一発でショートコードが呼び出せます。
これをプレビューで確認すると
はい、もうできてますね！
新規記事で使ったショートコードはこちら
new_list count=”5″ type=”default” cats=”all” children=”0″ post_type=”post”
記事数はcountの数字を変えればいいだけですが、記事ごとに線を入れたりアイキャッチ画像の大きさを変更したいなどの場合は、こちらの「Cocoonで使えるショートコードまとめ」の記事がとても参考になります。
基本これで１カラム分の構成は終了です。
記事数がさらに増えてきたら、その下に「新着記事をもっと読む」みたいなボタンを付けてもいいかもです！
右上の「人気記事」の作成手順も「新着記事」とまったく同じ流れです。
「人気記事」のショートコードも同じようにCocoonが用意してくれています。
Cocoonカラムでレイアウト（カテゴリー記事編）
基本の流れは「新着＆人気」と同じですが、カテゴリー記事の場合は少しコードをイジる必要があります。
コードヲイジル…？
っていっても１箇所数字を挿入すればいいだけなんで、無問題です！
カテゴリ記事一覧を出す場合、先ほど使用した新着記事一覧を出すショートコードを使います。
new_list count=”5″ type=”default” cats=”all” children=”0″ post_type=”post”
※コピペで使う場合は、このコードを[ ]で囲ってください
上記の「cats=”all”」の箇所を「cats=3,12,25」などのカテゴリーIDに変更します。
カテゴリーIDは「カテゴリーページ編集」の画面でURLを見るとIDが確認できます。
それぞれ２列に表示させたいカテゴリーIDを入れ、プレビューを見てみると
はい、表示されましたね！
記事数や画像の大きさなどの変更は「新着＆人気記事」の手順と同じです。
タイトルを消す
最後にトップページのタイトル（トップページ作るだよ〜）は不要ですので、消し去ります。
次のコード（●●●●は固定ページID※固定ページ編集画面URLにある4ケタの数字）を
/* トップページのタイトル非表示 */
#post-●●●● h1.entry-title {
display: none;
}
外観→テーマエディター→CSSに入って貼ってください。
STEP3：ワードプレス表示設定から新しい固定ページを適用
「設定」→「表示設定」を開いて
の順に設定してください。
これでトップページに、作成した固定ページが設定されました！
お疲れさまでした^_^
Cocoonトップページをカスタマイズしたユーザーからの声
このCocoonトップページのカスタマイズ記事、ありがたい事にけっこう反響をいただいてます。
大好きなCocoonのユーザーの役に立ててるなら、これ以上の嬉しみはない！
おかげさまで、本記事はじわじわ順位を上げてGoogle1位をとることができましたm(_ _)m
Cocoonトップページのカスタマイズ：まとめ
いかかでしたでしょうか。
簡単に「サイト型」にできて、過去記事にも光があたるトップページになったんじゃないかな、と思います。
同じ要領で３カラムのレイアウトや、下にもう２カラム足したりとか、必殺技として２カラムの中に２カラムを入れて４カラムにしたりとか、バリエーションは無限です。
どんどんカスタマイズして（記事を書きつつ！）、最強の無料テーマCocoonを楽しみましょう！
初めまして、だいふく奮闘記を運営しているだいふくと申します。
固定ページを使ったトップページの作成を行っているのですが、最後の表示設定のところがうまくいきません。
設定→表示設定 の順でたどっていくと同じ画面にたどり着けないのですが・・・
僕が開くと
・1ページに表示する最大投稿数
・RSS/Atom フィードで表示する最新の投稿数
などの項目が出てきてしまいます。
どのようにすればよろしいですか？
お手数おかけしますがご回答よろしくお願いします。
だいふく奮闘記さん
はじめまして
お問い合わせの件ですが、その表示設定の「1ページに表示する最大投稿数」の上にホームページ表示という項目はないでしょうか？
だいふく奮闘記さんのURLはhttps://daifukublog.net/ですか？
たった今ブログをのぞかせて頂きましたが、しっかり表示はできているように見受けられました。