WordPressのカテゴリーリストを作成するwp_list_categoriesがとてもステキ

スポンサーリンク

こんな便利な機能があったのね

categorize keywords
categorize keywords / Bruce Clay, Inc

ハッキング事件で破壊された初代の自作WordPressテーマには設置していたのですが、現在使ってるテーマでは「カテゴリーリスト」をこれまで設置していませんでした。

一応、現在使ってるテーマにもナビゲーションバー(スマートフォン表示だとアコーディオン形式のナビゲーション)があることはあるけど、カテゴリー全部を表示できません。うちのブログは雑多に書いてるのでカテゴリーの数が多いから。

初代テーマと比較して直帰率が明らかに悪化しているため、カテゴリーリストは一刻も早く設置しないとなーと思いつつ、これまでノンキに放置してました。年が明けてカスタマイズの時間を設け、ようやく作業に着手。

その過程で知ったのが、今回紹介する「wp_list_categories」という機能。これ知らなかった、というか今まで使ってなかった。

初代テーマで設置していたカテゴリーリストは、別の方法でカテゴリーのデータを1つ1つ取ってきて、それを並べて表示させるという手法だった記憶があります。もうテーマファイルが存在しないので確認は出来ないのだけど。

ところが、wp_list_categoriesを使えば1行で済んじゃう

↑ たったこれだけですよ。これでカテゴリーリストが表示できちゃうんです。

スポンサーリンク



wp_list_categoriesパラメータの簡単な解説

サンプルコードでは2つのパラメータをセットしてます。

★title_li パラメータ

まず「title_li」は、カテゴリーリストなどの外側にタイトルを表示させたい場合に指定するのだそうです。そんなもん必要ないので、「title_li=」という風に、イコールの後を無指定にしてます。

【ここで注意!】上のようにtitle_liを何も指定しなかった場合、通常であれば出力してくれる「ul」タグが出力されなくなってしまうので、自分でulタグ(あるいはolタグ)を追加してあげればOK。詳しくは後述します。

★depth パラメータ

2つめの「depth」はカテゴリーの階層を指定するパラメータ。何も指定しなかった場合のデフォルト値はゼロ(=全てのカテゴリーを表示する)です。

WordPressはカテゴリーに階層を付けることが出来ます。親カテゴリーの下に子カテゴリー、さらにその下に孫カテゴリーという風に。

親子階層など設定しておらず、1つのカテゴリー階層だけで運用しているブログであれば、この「depth」は何も考えず、何の指定もいりません。

もし階層設定をしていて、カテゴリーリストには親カテゴリーだけ表示させたい場合(=うちのブログがまさにコレ)、「depth=1」と指定します。1は親カテゴリーの意味。2なら子階層という風に、数字が増えていくほど深い階層の指定になります。

★各パラメータは「&」でつなぐ

以上2つのパラメータをサンプルではセットしていて、その2つをつなぐために「&」を使います。

wp_list_categoriesには他にも様々なパラメータが用意されていて、幾つでも同時にセットすることができます。複数をセットする場合は前述の通り「&」でつなげばOK。

まとめます。「wp_list_categories(‘title_li=&depth=1’);」という1行の命令だけでカテゴリーリストは表示されますが、前述の通りulタグが出力されなくなってますので、自分で追加する必要があります。

さらに、リストの背景色を自分好みに変えたいとか、カテゴリーの並びを縦じゃなくて横にしたいとか、改行間隔を広くしたいとか、デザイン的にカスタマイズしたいこともあると思いますので、全体をdivタグで囲んであげてもいいんじゃないでしょうか。

以上を踏まえて、

↑これが完成形ですね。あとはCSSを使って見た目をカスタマイズすれば良し。CSSに関しては今回割愛します。

screenshot_201401_004

↑サイドバーにカテゴリーリストを設置できました。上のはPC表示版で、スマートフォン表示版は少しデザインを変えています。

表示させたくないカテゴリーを除外することもできる

登録してあるカテゴリーを全部表示させるのであれば、上の解説で終了なんですけど、今回私が「wp_list_categories便利やなー」と思ったのは、表示させたくないカテゴリーを除外できるパラメータがあること

screenshot_201401_005

↑以前書いていた日報カテゴリーと週報カテゴリーは現在更新していないので、表示させたくないなぁ。消したいなぁ。

wp_list_categoriesだと簡単な指定で消せます。

★カテゴリーIDを調べる

表示させたくないカテゴリーのIDを調べます。調べるのはWordPress管理画面。「投稿」>「カテゴリー」を開きます。

screenshot_201401_006

↑カテゴリーの一覧が表示されるので、その中の「表示させたくないカテゴリーの名前」にカーソルを合わせます。

screenshot_201401_007

↑カーソルを合わせると、ChromeやFirefox、IEなどブラウザの左下に、URLが表示されます。その中にある「tag_ID=83」、これがカテゴリーのID。つまり「りくま日報」のIDは83だということ。

※カテゴリーの一覧でカテゴリー名をクリックすると「カテゴリーの編集」画面に移動しますが、そのページ上部のURL欄に「tag_ID=」を含む同じ内容が表示されてるので、その方法で確認することもできます。そっちの方が簡単かな…

以上の方法で、表示させたくないカテゴリーのIDを調べ、メモしておきます。

★除外カテゴリーをパラメータにセットする

あとはwp_list_categoriesのパラメータに「除外ID」をセットしてあげるだけです。

↑コメントを付けたかったのと、後で削除しやすくするため、意図的に改行を増やしてます。

除外するカテゴリーは「exclude」というパラメータで指定します。複数指定したい場合はカンマで区切って連続記入すればOK。上のサンプルでは、31、83、75という3つのカテゴリーを表示から除外する、という設定になります。

↑コメントを外し、1行でシンプルに書くと上のようになります。

screenshot_201401_008

↑これで除外指定したカテゴリーが消えます。

ちなみに、登録したはいいけど記事を1つも書いてないカテゴリーの場合は、wp_list_categoriesが自動的に非表示としてくれるみたいです。イチイチ除外指定する必要がないので、ありがたい機能です。

りくま ( @Rikuma_ )的まとめ

以前に使ってた方法では除外設定ができなかった気がするので(私が知らなかっただけかもしれないけど…)、除外設定が簡単なのはポイント高かったです。

他にも階層化させて表示させたり、カテゴリー毎の記事数を表示させたりと、パラメータを組み合わせることでいろんなリストが作成できます。

パラメータに関しては「WordPress Codex」にて詳しく解説されていますので、興味のある方はそちらを参照して頂ければ、いろいろ面白いものを作ることが出来るのではないかと思います。

カテゴリーリストを設置してから1週間ほど経過しましたが、直帰率が少し改善されてイイ感じになってきてます。やっぱり早く設置しとけば良かったな。

スポンサーリンク
この記事がお気に召したら
「いいね!」をお願いします!
「りくまろぐ」の最新情報を
Facebookにお届けします
CATEGORY :