Cocoonカスタマイズ 〜HARU channelを作ってみよう〜【その3:カテゴリー】

アイキャッチ画像 Cocoonカスタマイズ

WordPressの無料テーマ「Cocoon(コクーン)」。

それを使って、私が当サイト「HARU channel」をどのようにカスタマイズしてきたのか、その過程をご紹介しています。


前回は、投稿を複数個作成したところまで進みました。

Cocoon トップページ 投稿仮入れ後

これを最終的に、以下の状態にまでカスタマイズしていきます。

HARU channel トップページ

今回は、

  • カテゴリー

について、説明していきます。

カテゴリーとは

カテゴリー

カテゴリーとは、投稿(ブログ記事)をジャンル分けするために使うもの、とでも思ってもらえればいいと思います。


当サイトでは、上のメニュー部分に表示しています。

ちなみに、このメニュー部分の呼び方ですが、

  • グローバルメニュー
  • グローバルナビゲーション
  • ナビゲーションメニュー
  • ヘッダーメニュー

などと呼ばれます(正式名称があるわけではないので、呼び方が多いです…笑)。



では、投稿のジャンル分けとはどういうことでしょうか。

例えば、「ブログ・Web制作」の部分をクリックすると…

カテゴリー

ブログ・Web制作に関する記事の一覧が出てきます。
(よければ実際にクリックして確認してみてくださいね。)



カテゴリーの考え方を図で表すと、以下のようになります。

HARU channel サイトマップ

青い太線で囲っているところがカテゴリーです。

あくまで、当サイトでのカテゴリー(2021/10時点)の一例ですが、「投稿のジャンル分け」というイメージが分かりましたでしょうか。


続いて、カテゴリーの作成方法を説明していきます。

カテゴリーの作成方法

  • STEP1
    カテゴリーの作成画面へ
    投稿→カテゴリー

    投稿→カテゴリー」をクリックします。

    デフォルトだと、「未分類」というカテゴリーがあり、何も設定しないままだと投稿は全て「未分類」のカテゴリーに分類されます。

  • STEP2
    新規カテゴリーを追加
    新規カテゴリーの追加
    1. カテゴリー名を記入
    2. スラッグ(URLの .com や .site 以下になる部分)を記入

    カテゴリー作成画面の左側の部分を入力していきます。
    説明」の部分は特に入力しなくても大丈夫です。

    新規カテゴリーを追加」をクリックすると、カテゴリーが追加されます。

    新規カテゴリーの追加

  • STEP3
    【参考】子カテゴリーの追加

    また、カテゴリーの中で、さらに細かいカテゴリーに分けたい(子カテゴリーを作りたい)場合は、以下のようになります。

    子カテゴリーの追加
    1. カテゴリー名を記入
    2. スラッグ(URLの .com や .site 以下になる部分)を記入
    3. 親カテゴリーを設定

    親カテゴリー」の設定を追加(③部分)した上で、「新規カテゴリーを追加」をクリックします。


    子カテゴリーの追加

    子カテゴリーも追加されました。



この要領で、必要なカテゴリーを追加していきます。
追加・削除はいつでも行うことができますので、定期的に見直していくことをおすすめします。)

カテゴリー

投稿へのカテゴリーの設定方法

では、作成した記事に、カテゴリーを設定するにはどうすればいいのでしょうか?

投稿へのカテゴリー設定

投稿の編集画面を開き、右側の「投稿」タブ→「カテゴリー」の欄より、設定したいカテゴリーにチェックを入れます。

上の画像の場合だと、「妊活」にチェックを入れておけば、「結婚・出産」のカテゴリーにもチェックが入っていることになるので、子カテゴリーにのみチェックを入れておけば大丈夫です。


チェックを入れたら「更新」をクリックして、カテゴリーの設定は完了です。

カテゴリーの表示方法

続いて、カテゴリーをナビゲーションメニュー(ページ上部のメニュー)として表示する方法をご紹介します。

  • STEP1
    メニューを作成
    カテゴリーをヘッダーメニューに追加

    管理画面の「外観→メニュー」に移動します。

    メニュー名」を入力します。

    名前は何でもOKです。
    (ここでは分かりやすいように、「メニューの位置」で選択している「ヘッダーメニュー」と同じ名前にしておきます。)

    メニューの位置の「ヘッダーメニュー」にチェックを入れます。

    メニューを作成」をクリックします。

  • STEP2
    作成した「ヘッダーメニュー」の中に、カテゴリーを追加
    カテゴリーをヘッダーメニューに追加

    左側「メニュー項目を追加」の欄より、「カテゴリー→すべて表示」のタブをクリック。
    表示させたいカテゴリーにチェックを入れて、「メニューに追加」をクリックしてカテゴリーを追加します。

  • STEP3
    (マウス操作で順番を入れ替え)
    カテゴリーをヘッダーメニューに追加

    カテゴリーが追加されました。

    追加したカテゴリーは、マウス操作で順番を入れ替えることもできます

  • STEP4
    【参考】子カテゴリーを副項目として設定
    子カテゴリーを副項目として設定

    上の画像のように、マウスをドラッグして右にちょっとずらし、「メニューを保存」をクリックします。


    トップページを見るとこんな感じです↓↓

    子カテゴリーを副項目として設定

    「結婚・出産」のところをマウスオーバーすると、下に副項目に設定した子カテゴリーが現れます。


    カテゴリーの中の更に細かく分けられたカテゴリーなんだな、と見た目で分かるようにするには、

    1. 子カテゴリーを作る
    2. メニューから副項目として設定する

    この2つの作業が必要だということを覚えておいてください。


以上のカスタマイズをして、サイトは以下のような状態になりました。

HARU channelトップページ

少し分かりにくいですが、ヘッダー部分(サイト上部)にナビゲーションメニューが追加されましたね。


次回は、

  • 固定ページ

について解説します!

コメント

タイトルとURLをコピーしました