制作会社から制作会社じゃない会社に転職が決まりました。制作会社で学んだことを残らず記事にしたいと思います。

パンDKOTORI Blogの公式キャラクター「パンD」です。
コーディングWordPress「wp_dropdown_categories()」でoptionタグをカスタマイズ[WordPress]

「wp_dropdown_categories()」でoptionタグをカスタマイズ[WordPress]

2014年02月24日WordPress 便利コード 
「wp_dropdown_categories()」でoptionタグをカスタマイズ[WordPress]記事のアイキャッチ画像

「wp_dropdown_categories()」はselectタグごと出力してしまうので、optionタグを自由にカスタマイズすることができませんが別の方法でアプローチすることでoptionタグをカスタマイズすることができます。その方法を紹介します。

まえがき

サイドバー等に表示するカテゴリアーカイブリストは「wp_list_categories()」で表示すると思います。
そしてカテゴリアーカイブリストをドロップダウン形式で表示したい場合は「wp_dropdown_categories()」を使用します。
しかし、いいのか悪いのか
「wp_dropdown_categories()」は「select」タグごと出力してしまいます。

「select」タグごと表示するという事は「option」タグを自由に追加できないという事です。例えば「option」タグの最初に「ALL」とかを入れたい時等に対応できません。

因みによくわからないのが、月別アーカイブリストを表示する「wp_get_archives()」は「format」引数に「option」を指定すると「option」タグのみ出力することができます。
「wp_dropdown_categories()」にも同じ機能を付けて欲しいところですね笑

今回はその辺の問題をクリアするために「wp_dropdown_categories()」タグとは別の方法で、カテゴリアーカイブリストをドロップダウン形式で表示する手法を紹介します。

特に最近はスマホサイトの需要が高まりましたのでカテゴリアーカイブリストをドロップダウン形式で表示しなければならないシチュエーションも増えてくると思います。
そんな時に役立つかなと思います。

カテゴリアーカイブリストのドロップダウンで「option」タグを自由にカスタマイズするためのタグ

基本はカテゴリ毎の記事一覧を表示する方法の応用です!

カテゴリ毎の記事一覧を表示する方法[WordPress]

スマホサイトではドロップダウンで項目を選択した瞬間にページ遷移する形をとると思うので、そういう動作をするコードを例として出します。

<select onChange='document.location.href=this.options[this.selectedIndex].value;'> 
  <option value="">カテゴリを選択</option> 
  <option value="/site1">サイト1</option> 
  <option value="/site2">サイト2</option> 
  <option value="/blog">All</option> 
<?php
$categories = get_categories();
foreach($categories as $category) :
?>
<option value='<?php echo get_category_link( $category->term_id ); ?>'><?php echo $category->cat_name; ?>(<?php echo $category->count; ?>)</option>
<?php endforeach; ?>
</select>

コードを見れば意味は何となくわかると思います。
ループで「option」タグを出力するのですね。

因みに、第一階層の親カテゴリのみ出力したい場合はこのようなコードになります。

<select onChange='document.location.href=this.options[this.selectedIndex].value;'> 
  <option value="">カテゴリを選択</option> 
  <option value="/site1">サイト1</option> 
  <option value="/site2">サイト2</option> 
  <option value="/blog">All</option> 
<?php
$categories = get_categories('parent=0');
foreach($categories as $category) :
?>
<option value='<?php echo get_category_link( $category->term_id ); ?>'><?php echo $category->cat_name; ?>(<?php echo $category->count; ?>)</option>
<?php endforeach; ?>
</select>

「get_categories(‘parent=0′)」という感じで引数を指定してあげることで一番上の親カテゴリのみにソートできます。

まとめ

一番の理想は「wp_dropdown_categories()」の引数とかで指定すると「option」タグのみの出力になるとかにしてくれたほうが分かりやすくでいいと思うのですが、そうできない理由がなにかあるのでしょう。

まぁここで紹介したコードで全然対応できるので問題はないでしょう。

シェアするみんなシェアしてね

フォローするフォローする

いつもKOTORI Blogをご覧いただきありがとうございます。Facebook、Twitterを通じて、皆様と交流していき色んな情報を共有していければな~と思ってます。お気軽に登録してください!

基本フォロー返します。

RSSを登録する

RSSはこちらから。

follow us in feedly

Feedly使ってる人はこちらから。

Buy me a Beer

動く!パンDのLINEスタンプ
好きな人にアプローチスタンプ
パンDのLINEスタンプ

関連する記事関連する記事も読んでみてね

コメント

  • ひぽ

    まさに、wp dropdown categoriesで「all」をつけたくて格闘していたところだったので、
    本当にありがたい記事でした!
    以前も参考にさせていただいた記事がありまして、
    かゆいところに手が届くこちらのサイトの大ファンです!!

    • kotoriblog

      ひぽさん
      嬉しいコメントありがとうございます。
      まさかこの記事にコメントいただけるとは思ってもいませんでしたw
      この記事書いてよかったです!