[Å] 【WordPress】サイドエリアに親カテゴリーのみを表示させる方法

WordPressでブログを運営しています。こんにちは、あかめです。PC版のデザインのタグエリア、前から気になっていてこの度表示を止め、カテゴリーリストを変わりに表示することにしました。カテゴリーリストをサイドエリアに表示させる方法を備忘録としてメモしておきます。

カテゴリーリスト

以前のごちゃごちゃしていたタグ一覧をやめました。
タグ一覧

そしてカテゴリーリストに切り替えました。
カテゴリーリスト

ちなみにまだ作ったばかりなので親カテゴリー表示のみです。子カテゴリーは以前作ったカテゴリーページへ飛ばして対応しています。

ご覧になりたい方はカテゴリーページを参考ください。

カテゴリーリスト設置

JavaScriptやプラグインを使用しないで表示させることが目標です。

カテゴリー全表示

今回はWordPressにあるテンプレートタグ「wp_list_categories() 」を使用します。

サイドエリアの表示させたいところに以下のソースを入力します。

<?php wp_list_categories(); ?>

これを使うとカテゴリーが全部表示されます。

詳しい内容はWordPressの公式サイトをご覧ください。

親カテゴリーのみ表示

私は親・小カテゴリーと作成しているので全部表示させてしまうとカテゴリーだけでとんでもない長さになってしまうので親カテゴリーのみ表示しています。親カテゴリーまでを表示させたい人は以下を入力。

<?php wp_list_categories('title_li=&depth=1'); ?>

ちなみに小カテゴリーまでを表示させたい場合はdepthを2に変えます。3に変えたら孫カテゴリーまで表示が可能です。

各カテゴリーがliタグに囲まれた形で出力されますので、ulタグで囲みます。

最終的な形

<ul>
<?php wp_list_categories('title_li=&depth=1'); ?>
</ul>

あとはこれをdivで囲んだり、ulにclassやIDを指定してデザインが可能となります。

今後の予定

今回は見にくいタグをカテゴリーに切り替えるのが目標だったので設定はここまで。今後は親カテゴリーをクリックしたら小カテゴリーが出てくる仕様に変えたいなぁと計画中。上手くいくかは不明です。そしていつやるのかも。

さいごに

久しぶりにMacを起動してデザインを修正しました。WordPressは好きですが、まだまだ勉強中の身です。こうしてメモのような記事をこれからも書いていくことがあるかもしれません。WordPressを始めたばかりの方のお役に立てれば幸いです。それではこれからあかめ(@mk_mizuho)をよろしくお願いします。

■ 同じカテゴリについてもっと読む

ブログ運営者をフォローする!

\ この情報を周りの人にも教える /

プロフィールあかめの画像
あかめAkame Mizuho
横浜在住。フリーランス。
食べ歩き / 旅行 / カメラ / WEBデザイン 好き。

プロフィール / お問い合わせ

個人アカウント(メイン)▼

ブログ公式アカウント▼