こんにちは、ハナです。
今回は、 Cocoonサイト型トップページの作成手順2ということで、ハナが以前作成していたページを参考に書いてみたいと思います。
こちらを読む前に、Cocoonサイト型トップページの作成手順1をご覧ください。
トップページ用固定ページ設定の変更
ページ右側文書下で広告や目次の非表示設定ができます。
また、トップページのタイプも設定できます。
トップページ用固定ページ内容作成
いよいよトップページの内容を作成していきます。
ハナの作成したトップページでは、新着情報、カテゴリー別に記事表示させていました。
こちらの表示方法を書きたいと思います。
新着情報表示
ブロックの追加で段落を選び、ショートコードをクリックすると挿入できる一覧が表示されます。
その中の新着記事一覧をクリックします。
赤枠の中の数字は表示させる件数です。お好きな数を設定してください。
count=”5″ ・・・・ アイテムの表示数
type=”default” ・・・通常のリスト表示
cats=”all” ・・・・・全てのカテゴリを表示
children=”0″ ・・・ 子カテゴリーは含めない
post_type=”post” ・ 表示する投稿タイプ、 postは投稿ページ pageは固定ページ 。
上記のようにデフォルトでは設定設定されていますが、ここも好きなようにカスタマイズできます。
詳しくは公式サイトに書かれています。
色々カスタマイズするのも楽しいかと思います。
Cocoonでは、ショートコードを用いて新着記事一覧を表示することが可能です。
Cocoon公式サイト
見出し作成
「ナビカード」によりカテゴリー記事表示を作成する前に、見出しを作成します。
カテゴリーを横に2つ表示させたいので、2カラムにします。
ブロックの追加 ⇒ レイアウト要素 ⇒ カラムをクリックします。
このように表示が変わります、真ん中にあるブロックの追加をクリックします。
次に、見出しをクリックします。
ここで見出しの種類を選びます。
今回はトップページのみで使用するh2ということで、ブロック下の高度な設定の追加cssクラスに任意のクラス名を付けてカスタマイズします。
クラス名に「top」を追加しました。
子テーマのstyle.cssに下記のようにCSSを書き込みました。
/*トップページh2装飾*/
h2.top {
background-color: #ffffff;
border: none;
padding: 0;
}
h2.top {
color: #333; /*文字の色を変更*/
padding: .5em 0;
margin-top: 40px;
border-top: 3px solid #F7CDDA; /*線の色を変更*/
border-bottom: 3px solid #F7CDDA; /*線の色を変更*/
}
このように見出しが出来ました！
「ナビカード」ショートコードの使い方
次に、カテゴリー別に記事表示させるカスタマイズについて書きます。
ナビカードを使用して作成しています。
以前こちらのページで説明した、WordPressでのメニュー作成を参考に表示させたいグループのメニューを作成してください。
ブロックの追加で段落を選び、ショートコードをクリックすると挿入できる一覧が表示されます。
その中のナビカード一覧をクリックします。
このようにショートコードが挿入されました。
メニュー名の所を、先ほど作成したメニューの名前を入力します。
type=”default” ・・・・ 通常のリスト
bold=”0″ ・・・・・・ 記事タイトルを太字にするかどうかです。（1が太文字）
arrow=”0″ ・・・・・ カードに矢印を表示するかどうかです。 （1がやじるしを表示する）
上記のようにデフォルトでは設定設定されていますが、ここも好きなようにカスタマイズできます。
詳しくは公式サイトに書かれています。
色々カスタマイズするのも楽しいかと思います。
Cocoonの本文中や、サイドバー等に「自分の表示させたいリンク」をカード形式で表示できるナビカードショートコードを実装しました。
Cocoon公式サイト
ボタン作成
「新着記事一覧」などのボタンを作成します。
ブロックの追加 ⇒ Cocoonブロック ⇒ ボタンをクリックします。
ボタンの箇所に「新着記事一覧」 など文字を入力します。
右側ブロックのボタンで、リンク先、リンクの開き方、ボタンのサイズ、光るボタンなど色々設定できます。
ハナの以前のトップページの作成手順でした。
近いうちに、トップページを変更しようと思います。
また、その手順なども書きたいと思います。お楽しみに！
