当ブログは広告が含まれています

【Cocoon】初心者向け カテゴリーとカテゴリーラベルの設定方法

Cocoon カテゴリーの設定方法 Cocoon

こんにちは、ikuzo(いくぞう)です。

今回は、Cocoonのカテゴリーとカテゴリーラベルの設定方法を解説します。

なぜ、ブログでカテゴリーを作る必要があるのかというと、

記事をカテゴリーごとに分類・整理すると、サイトに来てくれた読者が記事を探しやすくなるからです。

今回は例として「親」と「子」のカテゴリーをこんな感じで作ります。

親カテゴリーと子カテゴリー

スポンサーリンク

親カテゴリーの作り方

まずは、親カテゴリーの作り方です。

WordPressメニューの「投稿」→「カテゴリー」をクリックします。

ダッシュボードの「投稿」→「カテゴリー」をクリック

親カテゴリーは例として「果物」と「野菜」の2つを作ります。

カテゴリーの名前の欄に1つめの「果物」と入力します。

カテゴリーの名前の欄に「果物」と入力

続いてスラッグの欄には、英語の「fruit」(フルーツ)と入力します。

スラッグには「fruit」(フルーツ)と入力

絶対に「fruit」にしなくてはいけないわけではありませんが、

スラッグはカテゴリー名に関連する半角英数字を使った英語表記にするのが一般的です。

プー太郎
プー太郎

スラッグって、なぁに?

スラッグとは、URLの最後の部分です。

たとえば、CocoonのカテゴリーURLはこのように表記されます。

CocoonのカテゴリーURL(スラッグ含む)

このURLを見ただけで、「フルーツ(果物)というカテゴリーなんだな」ということが分かりますよね。

「果物」自体が親カテゴリーなので、親カテゴリーは「なし」のままで、説明の欄も特に入力する必要はありません。

これで「新規カテゴリーを追加」を押します。

「新規カテゴリーを追加」を押す

カテゴリーの1つめに「果物」が入りました。

「果物」というカテゴリーができた

同じように親カテゴリー2つめの「野菜」を作ります。スラッグは「vegetables」にします。

「野菜」という親カテゴリーを作る

果物」と「野菜」という2つの親カテゴリーができました。

「果物」と「野菜」2つの親カテゴリーができた

スポンサーリンク

子カテゴリーの作り方

子カテゴリーの作り方も「名前」と「スラッグ」を入力するところまでは同じです。

そして子カテゴリーの場合は親を指定します。

親カテゴリーを指定すると子カテゴリーになる

プー太郎
プー太郎

そっか!「親」を指定するだけで子カテゴリーになるんだね!

子カテゴリーは、このように名前の前に「ー」がついて、親よりも一段下がった状態で表示されます。

子カテゴリーは親よりも一段下がった状態で表示される

「果物」の子カテゴリーに「りんご」と「みかん」を

「野菜」の子カテゴリーに「レタス」と「きゅうり」を作りました。

親カテゴリー2つと、子カテゴリー4つが完成

プー太郎
プー太郎

無理に「子カテゴリー」を作る必要はありません。カテゴリーは親だけでも大丈夫です。

カテゴリーの削除方法

作ったけど「やっぱりいらない」というカテゴリーは削除できます。

カテゴリーの一覧には一見何もありませんが

WordPressのカテゴリー一覧

マウスオーバー(カーソルをのせる)するとメニューが出現します。

カテゴリーの一覧にマウスオーバーでメニューが出現

メニューの「削除」を押すと確認ダイアログが出るので、削除してよければ「OK」を押します。

カテゴリーを削除するには確認ダイアログの「OK」を押す

複数のカテゴリーをいっぺんに削除するには

削除したいカテゴリー全てに チェックを入れて、一括操作の「削除」→「適用」を押します。

削除したいカテゴリー全てにチェックを入れて「削除」→「適用」を押す

こちらは確認ダイアログが出ずに、「適用」を押したらすぐにカテゴリーが消えるのでご注意を。

スポンサーリンク

カテゴリー別にラベルの色を設定する方法

カテゴリーを作ると、Cocoonは記事のアイキャッチにカテゴリーラベルが表示されます。

アイキャッチの左上に表示されているカテゴリーラベル

このラベル、デフォルトはどのカテゴリーも同じ色です。

これをカテゴリー別にラベルの色を設定してみましょう。

ラベルの色を指定するにはカテゴリーの「編集」を押します。

ラベルの色を指定したいカテゴリーの「編集」を押す

カテゴリー色の「背景色」と「文字色」を指定します。

カテゴリーラベルの「背景色」と「文字色」を指定する

色は「#6桁」のカラーコードを入力するか、実際の色から選びます。

こちらは、赤のカラーコード「#ff0000」を入れた状態です。

カラーコードを指定するか、カラーサンプルから「カテゴリー色」を選ぶ

プー太郎
プー太郎

カラーコードを入れるときは“#”と英数字は必ず半角文字を使ってください。

カラーコードはカラーコードの一覧表か、HTMLカラーコードが役に立つと思います。

文字色は指定しないと「白」になります。

設定が完了したら一番下の「更新」を押します。

これでカテゴリーラベルの色が変わります。

カテゴリーラベルの色が「赤」になったアイキャッチ画像

カテゴリー別にラベルの色を変えました。

カテゴリーごとにラベルの色を変更

スポンサーリンク

Cocoonのカテゴリーラベルを消す方法

アイキャッチにカテゴリーラベルを表示させない方法もあります。

Cocoon設定の「画像」タブにある「アイキャッチラベルを表示する」のチェックを外します

「アイキャッチラベルを表示する」のチェックを外す

プー太郎
プー太郎

チェックを外したら「変更をまとめて保存」を押すのを忘れないでね。

アイキャッチのカテゴリーラベルはこれで消せますが、

記事一覧などのカテゴリーラベルは、この設定では消えません。

カテゴリーラベルを全て消すには、次のCSSを使います。

/* カテゴリーラベルを非表示 */
.cat-label{
display: none;
}
プー太郎
プー太郎

このCSSで全てのカテゴリーラベルが消せるよ。

設定方法は、WordPressメニューの「外観」→「テーマファイルエディター」をクリックします。

ダッシュボードの「外観」→「テーマファイルエディター」を選択

編集するテーマは「Cocoon Child」になっていることを確認します。

編集するテーマは「Cocoon Child」を選択

「子テーマ用のスタイルを書く」という欄があるので、そこに先ほどのCSSを貼り付けます。

スタイルシートにカテゴリーラベルを消すためのCSSを貼り付ける

プー太郎
プー太郎

CSSを貼り付けたら下にある「ファイルを更新」を忘れずに押してください。

これでトップページなどのカテゴリーラベルは全て消えます

カテゴリーラベルがなくなった画像

スポンサーリンク

サイドバーに表示されているカテゴリーの順番を変える方法

サイドバーに表示されているカテゴリーの順番を変更するには「Category Order and Taxonomy Terms Order」というプラグインをインストールします。

プラグイン「Category Order and Taxonomy Terms Order」

インストールしたら「投稿」→「タクソノミーの並び順」を押します。

「タクソノミーの並び順」を押す

ドラッグで順番を入れ替えて「更新」を押すとカテゴリーの表示順が変わります。

ドラッグでカテゴリーの順番を入れ替える

最後に

おつかれさまでした!

カテゴリーを作ったら、次はカテゴリーで「グローバルナビメニュー」を作られてはいかがでしょうか。

【Cocoon】グローバルナビメニューの設定方法とカスタマイズ
Cocoonを使い始めたばかりの方は、「ヘッダー部分にメニューが表示されないのはなぜ?」なんて困ったりしていませんか?Cocoonのデフォルト(初期状態)では、グローバルメニュー(ヘッダーメニュー)はありません。グローバルメニューは自分で作

 

本日は最後まで読んでいただき、ありがとうございました。

Cocoon
スポンサーリンク

コメント