こんにちは、ikuzo(いくぞう)です。
今回はCocoonのカテゴリー、およびカテゴリーラベルの設定方法を解説します。
なぜカテゴリーを作る必要があるのかというと、
記事を分類・整理してサイトに来てくれた読者が記事を探しやすくするためですね。
今回は例として、親と子のカテゴリーをこんな感じで作ってみたいと思います。
親カテゴリーを作る
まずは、親カテゴリーを作りしょう。
WordPressのダッシュボードから「投稿」→「カテゴリー」をクリック。
親カテゴリーは「果物」と「野菜」の2つを作ります。
名前に1つめの「果物」と入力して
スラッグには、英語の「fruit」（フルーツ）と入力します。
絶対に「fruit」にしなくてはいけないわけではありませんが、
スラッグはカテゴリー名に関連する半角英数字を使った英語表記にするのが一般的です。
スラッグって、なぁに？
スラッグとは、URLの一番最後の部分です。
CocoonのカテゴリーURLはこんなふうに表記されます。
これだとURLを見ただけで何を表示しているのか、一目で分かりますよね。
「果物」自体が親なので、親カテゴリーは指定を「なし」にして、説明の欄も特に記入する必要はありません。
これで「新規カテゴリーを追加」を押します。
カテゴリーの1つめに「果物」ができました。
同じように「野菜」の親カテゴリーを作ります。
「果物」と「野菜」、2つの親カテゴリーの出来上がりです。
子カテゴリーを作る
子カテゴリーも、親と同じように「名前」と「スラッグ」を入力して、今度は親を指定します。
「親」を指定すれば「子」になるんだね。
子カテゴリーは、こんなふうに名前の前に「ー」がついて、親よりも一段下がった状態で表示されます。
「果物」の子カテゴリーに「りんご」と「みかん」を、
「野菜」の子カテゴリーに「レタス」と「きゅうり」を作りました。
無理に「子カテゴリー」を作る必要はないよ。親だけでもいいからね。
カテゴリーの削除
作ったけど「やっぱりいらない」というカテゴリーは削除できます。
カテゴリー一覧には一見、何もありませんが
マウスオーバー（カーソルをのせる）するとメニューが出現します。
「削除」を押すと確認ダイアログが出るので、削除してよければ「OK」を押します。
複数のカテゴリーをいっぺんに削除するには
削除したいもの全てに チェックを入れて、一括操作から「削除」→「適用」を押します。
こちらは確認ダイアログが出ずに、「適用」を押したらすぐにカテゴリーが消えるのでご注意を。
カテゴリー別にラベルの色を設定する
Cocoonは、アイキャッチの左上にカテゴリーラベルが表示されています。
デフォルトはすべて同じ色ですが、これをカテゴリーごとに色分けしてみましょう。
色を指定したいカテゴリーの「編集」を押します。
カテゴリ色の「背景色」と「文字色」を指定します。
色は「#6桁」のカラーコードを入力するか、実際の色から選びます。
赤のカラーコード「#ff0000」を入れてみました。
カラーコードの“#”と英数字は半角を使ってね。
カラーコードはカラーコード表か、HTMLカラーコードが役に立つと思います。
文字色は指定しないと「白」になります。
設定が完了したら一番下の「更新」を押して下さい。
これでラベルの色が変わりました。
他のカテゴリーラベルも色を変えてみました。
カテゴリーラベルを消す方法
アイキャッチにカテゴリーラベルを表示させない方法は
Cocoon設定の「投稿」タブ→「アイキャッチラベルを表示する」のチェックを外します。
設定したら「変更をまとめて保存」を押すのを忘れないでね。
アイキャッチのカテゴリーラベルはこれで消せますが、
トップページの記事一覧などのカテゴリーラベルは、この設定では消えません。
カテゴリーラベルを全て消す方法は、以下のCSSを使います。
/* カテゴリーラベルを非表示 */
.cat-label {
display: none;
}
これで全てのカテゴリーラベルが消えるよ。
設定方法は、WordPressダッシュボードの「外観」→「テーマエディター」をクリック。
編集するテーマは「Cocoon Child」を選択して下さい。
「子テーマ用のスタイルを書く」という欄があるので、そこに先ほどのCSSをコピーして貼り付けます。
一番下にある「ファイルを更新」を押せば
これでトップページなどのカテゴリーラベルは全て消えているはずです。
最後に
おつかれさまでした。
せっかくカテゴリーができたので、
次はカテゴリーを使った「グローバルナビメニュー」や「トップページ」の設定もしてみましょう。
本日は最後まで読んでいただき、ありがとうございました。
コメント