みなさんこんにちは。副業ブログのaksyaです。本日は『WordPressで「サイト型トップページ」を作る方法【Cocoon編】』について解説していきます。前回の記事では、Cocoonでサイト型トップページを作る方法についてまとめています。ここでは固定ページのカスタマイズ方法について、具体的に触れていきます。
今回は、WordPress初心者の方がつまずきやすい「2カラム表示」と「もっと見るボタン」の設定方法について詳しく解説します。
Table of Contents
固定ページのカスタマイズ方法
Cocoonでサイト型トップページを作る際の固定ページのカスタマイズ方法を解説します。
固定ページの作成
Cocoonで「固定ページ」→「新規追加」で固定ページを作成する
- 見出しタイトル（トップページ名）の作成
- お知らせ欄の作成
- 2カラム表示で新着・人気記事欄の作成
- 2カラム表示で各カテゴリー欄の作成
- 「もっと見る」ボタンの設置
- ナビカードの設置
Cocoonでサイト型トップページを作る際は、上記6つのカスタマイズを固定ページに行う必要があります。
2カラム表示のカスタマイズ方法
カテゴリーごとに記事を表示するために、新着記事と人気記事一覧を2カラム表示にします。
ブロックエディターで「2カラム」を探した後に、2つに分かれたそれぞれの先頭に<h3>～</h3>で見出し名を設定します。この際、オリジナルの画像を見出しに設定しても構いません。
見出しを設定したら「段落」をクリックして、「ショートコード」→「新着記事（人気記事）一覧」を選択することで、以下のコードが表示されます。
上記のデフォルト状態のショートコードを、以下のようにあなた好みにカスタマイズしていきましょう。
|
count |
表示させたい記事数に応じて数値を入力する |
|
type |
カードの表示方法を以下のなかから指定する
|
|
cats |
WordPress管理画面から、「投稿」→「カテゴリー」に進み、表示したいカテゴリーにカーソルを当てると、管理画面下部にIDが表示されるので、表示されたIDを入力する |
|
children |
子カテゴリーの内容を含める場合は「1」 子カテゴリーの内容を含めない場合は「0」に設定する |
|
post_type |
「post」が投稿、「page」が固定ページ、「post,page」が投稿と固定ページを意味するので、お好みに応じて必要なコードを入力する |
新着記事・人気記事共に、上記のようにショートコードをカスタマイズしてカラム表示にしてみましょう。
「もっと見る」ボタンのカスタマイズ方法
ブロックエディターで、「COCOONブロック」→「ボタン」を選択して、「もっと見る」などの表示したい文字を入力します。
「中央揃え」に設定することで見栄えがよくなります。
また、右側に表示されている「ブロックタブ」→「ボタン設定」の項目では、以下のように設定していきます。
|
URL |
「投稿」→「カテゴリー」から、URLを調べたいカテゴリーの「表示」を選択してページを表示させて、URLをコピー＆ペーストする |
|
リンクの開き |
「現在のタブ」もしくは「新しいタブ」を指定する |
|
サイズ |
「中」もしくは「大」であれば見やすい |
|
円形にする |
ONにすることで、円形ボタンにすることが可能 |
|
光らせる |
ONにすることで、クリックするとボタンが光る |
上記のように設定することで、「もっと見る」ボタンを表示させてカテゴリー一覧をユーザーに見てもらうことが可能です。
尚、ブロックエディタが使いにくい場合は、プラグインでクラシックエディタに変更することもできます。クラシックエディタにする方法はこちらをご確認ください。
固定ページを作成する際の注意点
固定ページで作成したトップページに、広告や目次が表示されていると不自然なので、固定ページの編集ページ右側にある「固定ページ」に進み、以下のように設定しておきましょう。
- 広告…除外するにチェックを入れる
- ページ設定…目次を表示しないにチェックを入れる
これで広告と目次が表示されなくなり、よりサイト型トップページが整います。
まとめ
Cocoonでサイト型トップページを作る際は、固定ページのカスタマイズが大きな影響を与えるので、時間をかけてしっかりカスタマイズしていきましょう。
