ワードプレスで親子カテゴリが階層表示されない理由

そのままの状態のカテゴリ表示

ワードプレスでブログを作り始めたわけですが、上手くいかないことが多いです。
カテゴリの設定をしていたのですが、階層分けをしてもブログに表示されない、という出来事が。

初心者でもワードプレスでカテゴリの階層をブログで表示する方法を説明します。
あわせて、カテゴリのドロップダウン表示、カテゴリ横に記事数を表示する方法を掲載しています。

スポンサーリンク


カテゴリの階層が上手くバラバラに表示される

そもそも、どういう事象で僕が悩んだかを説明します。
ワードプレスで親カテゴリと子カテゴリを設定しました。(階層分けです)
僕のブログの場合は、「食べ歩き日記」の中に「ラーメン食べ歩き」と階層分けをしました。

ここまでの設定は良かったのですが、実際にページを見てみると、バラバラに表示されてるじゃないですか。

そのままの状態のカテゴリ表示
初心者の僕は焦りまくりです。
これじゃあ階層分けをした意味がないじゃないですもんね。

僕はバズ部さんのテンプレートxeoryを使っているので、それで表示されないのかなと、バズ部さんを疑ったりもしました。
(バズ部さん、すみません、全く関係ありませんでした。僕の設定ミスです。)

ネットで色々検索したのですが、解決策が出てこない。(それで僕がこの記事を書きました)
自分でワードプレスのダッシュボードをイジッていると、ようやく解決することができました。

親カテゴリと子カテゴリを並べて表示する方法

設定を変更する場所を説明します。

ワードプレスのカテゴリ表示設定画面

①の外観をクリック。
次に、②のウィジェットをクリック。
ウィジェットページが表示されるので、サイドバー項目にある③のカテゴリをクリック。

上手く表示されなかった理由が分かりました。
④の項目にチェックが入っていなかったからです。

ここにチェックが入っていないせいで、ブログのカテゴリ欄が上手く階層分け(親と子が並んで表示)されていなかったんです。
階層を表示にチェックを入れました。
最後に⑤の保存をクリック。

ワードプレスでのカテゴリ階層表示

上手く親と子が並んで表示されました。

小カテゴリが親カテゴリに紐づいて表示

 

 

子カテゴリの階層をより分かりやすくする方法

先ほどの変更で順番には並びましたが、並列になってるので、どっちが元なのか、はっきり階層が分かり難いです。
xeoryを使うとこうなるのですが、これを分かり易くする方法を紹介します。
スタイルシートを少し触りますが、簡単なので安心して下さい。

ワードプレスで子カテゴリをずらす方法
ワードプレスのダッシュボードより①の外観をクリックし、②のテーマの編集をクリック。
スタイルの項目にある③の「base.css」をクリックします。

ずらずらーっと魔法の文字が出てきますが、慌てないで下さい。
④のように、一番下の部分に下記内容を全てコピーして、貼り付けてファイルを更新して下さい。

/*– 親カテゴリと子カテゴリを見やすく分ける –*/
li.cat-item .children {
padding-left: 30px !important;
}

子カテゴリを右にずらした
右にズレて、見やすくなりました。

 

カテゴリ横に記事数を表示する方法

ワードプレスのカテゴリ表示設定画面
ワードプレスの管理画面から同様に、④の投稿数を表示にチェックを入れて保存します。
すると、カテゴリ横に投稿数が表示されました。

カテゴリの横に記事数を表示

カテゴリをドロップダウンで表示する方法

ワードプレスのカテゴリ表示設定画面
ワードプレスの管理画面から同様に、④のドロップダウン表示にチェックを入れて保存します。
すると、すっきりしたページに仕上がります。

カテゴリドロップダウン表示

分かってしまうと、とても簡単だったんですが、最初はとても悩みました。
今回記事にしたのは、僕と同じような事で困っている人がすぐに対処できればいいな、と思い書きました。
誰もが分かる簡単な事だから書かれてないのかもしれませんが(笑)

スポンサーリンク

記事に興味を持っていただけたら、シェア頂けると嬉しいです(^^)

Pocket

SNSでもご購読できます。

コメント

コメントは停止中です。