ブログのトップページをカスタマイズしました！
トップページを自由自在に作れるプラグインもありますし、
WordPressのGutenberg（ブロックエディター）でも、投稿画面からカラムを作成できるんですが、
今回は、「Cocoon」のカラム機能を利用してカスタマイズしてみました。
※ 「ブロックエディター+Cocoon 」での作成方法になります。
Cocoonの拡張機能について
Cocoonの拡張機能は、ブロックエディターのブロックメニューで「Cocoon」が付いているメニューからブロックを選択し利用できます。
- Cocoonブロック
- Cocoon汎用ブロック
- Cocoonマイクロコピー
- Cocoonレイアウト
今回利用するのは、「Cocoonレイアウト」の「2カラム」「3カラム」のブロックです。
以下、方法はめっちゃ簡単なので普段からブロックエディターに慣れているのであれば、説明するほどでもないほど、ちょちょいのちょいでトップページのカスタマイズが完成します！
ブログトップの作り方
どんなトップページにするか、作成する前にイメージを作ってた方が作業もやりやすいかと思いますが、ワタシの場合ぶっつけ本番だったので、その流れでの説明になること何卒ご了承ください。(-。－;)
- ブログTOP用のページを「新規作成」する。
- ページ設定で形式を決める。
- Cocoonレイアウトから任意のカラムを選択
- ショートコードを記述
- 装飾を整える
- 表示形式（デフォルト、1カラム（本文以外も表示）、本文のみ
- TOPページに表示させるもの（例：新着記事、カテゴリーごと新着）
- レイアウト
ブログTOP用のページを新規作成
固定ページ、投稿ページのどちらかで「新規作成」します。（どちらで可。）
※ワタシは、固定ページで作成しています。
記事タイトルは、とりあえず何でもいいです。
表示・非表示の設定をCSSで設定できるのでカスタマイズしながら考えていいと思います。
ページ設定で形式を決める
ブロックエディターのサイドメニュー「ページ設定」から表示形式を選択します。
ページタイプ
以下の4種類から選択できます。
- 1カラム（広い）
- 1カラム（狭い）
- 本文のみ（広い）
- 本文のみ（狭い）
目次を表示しない
Cocoonでは、プラグイン無しで記事に目次を表示させる機能がついています。（ON、OFF可）
記事ページで基本的に目次を表示させていて、トップページでは表示させたくない場合はここにチェックを入れます。
Cocoonレイアウトから任意のカラムを選択
ブロックエディター画面から、「Cocoonレイアウト」の「3カラム」「2カラム」を追加します。
ショートコードを記述する
あとは、Cocoon機能の「ショートコード」をカラム内に入れていきます。
ワタシは以下のショートコードを入れてます。
- 新着記事
- 人気記事
- カテゴリー新着記事
- ナビカード
ショートコードの詳細、その他のショートコードについては、Cocoon公式をご確認ください。
装飾を整える
レイアウトが決まったら、後は見出しを入れたり見た目を整えるだけです。
通常の記事と同じように、Cocoonの拡張機能も使えるので装飾も楽々です！
また、トップページのみで利用するCSSも指定できます。
その場合、CSSをエディター画面の下部「カスタムCSS」に記述します。
（「カスタムCSS」は、Cocoon独自機能）
/*全てをまとめて非表示*/
.entry-title,.sns-share,
.date-tags,
.author-info,
.breadcrumb{
display: none;
}上記は、固定ページで、タイトル、シェア・フォローボタン、投稿日、更新日、投稿者名の表示・非表示を切り替えるCSSの記述になってます。
トップページの場合、やっぱり、その辺非表示にしたいですよね。
Cocoon公式の参考記事をそのままコピペさせていただいてます。
その他、独自のCSSを記述することで記事ページとの差別化もできます。
ワタシは、現在、トップページでh1、h2を利用しておらず、独自CSSを追記し、ブロックエディー本体のサイドメニュー「高度な設定」から、見出し枠をCSSしています。
（構文的にどうなのかなってところはありますが…汗）
なので、エディター画面で見出しが確認できないんですけど特にやりづらいってことはないです。
カスタマイズしたページをブログトップにする方法
ブログトップ用のページを作成したら、次はWordpressの設定で
作成したページをブログトップに指定する設定にします。
また、これまでトップだった記事一覧ページも別URLで表示させる設定もできます。
記事一覧ページにもリンクを貼りたいのであれば、トップ用ページと記事一覧ページを作成します。
記事一覧ページは、固定ページ或いは投稿ページで「新規作成」するだけ。
記事タイトルもなんでもOK。実際の記事一覧ページに記事タイトルは表示されません。
（ダミーみたいなものです。）
ブログトップおよび記事一覧ページの指定は、同画面での設定になるのでどっちも表示させたい場合、トップページのカスタマイズが済んだらサクッと作ってしまいましょう。(^^)
設定も簡単です♪
- WordPress管理画面のメニュー「設定」から、「表示設定」を選択
- 「ホームページの表示」で「最新の投稿」から「固定ページ」にチェックを変更
- ホームページのプルダウンでトップとして作成したページを選択
- 「投稿ページ」のプルダウンから記事一覧表示用に作成したページを選択
トップ用ページと記事一覧ページのタイトル名の注意点
トップページ用と記事一覧ページを作成する時に、記事タイトルは何でもいいと言いましたが一点だけ注意点はあります。
WordPressで、固定ページ、投稿ページ、カテゴリーを一つのページに表示させてサイトマップにしてるカスタマイズを行っている場合…
「固定ページ」の記事タイトルがそのまま表示されます。
その場合は、見られる事を意識したタイトルにした方がいいと思われます。
Cocoonのショートコード機能の「サイトマップ」であれば、固定ページを表示させないようショートコードのカスタマイズも可能です。
［sitemap］
まとめ
以上、ブロックエディター+Cocoonでブログトップのカスタマイズして公開までする方法を紹介しました。
- 固定ページ or 投稿ページを新規作成
- Cocoonレイアウトで、「3カラム」 or 「2カラム」でレイアウト
- Cocoon拡張機能でいつものように装飾を整える
ブロックエディターの使い方に慣れている方であれば、「ブロックから追加する」というだけで特に説明も要らないくらい簡単にカスタマイズができますので、まだお試しでない方はぜひお試しください♪
また、説明不足の見直し、補足したい点ができたら都度記事に加筆していきます♪
それでは、また！けろら～でした♪＼(^▽^)／