カテゴリーリストをtable風に&プルダウン表示webデザイナーのちぃさんです。訪問者がサイト内で迷子にならず、目的のカテゴリーやページへ遷移できるよう、ツリー構造式にカテゴリーのリストが展開されているページがあったら、とても便利です。いえ、全カテゴリーをガリガリ静的に記述するなんて気が遠くなります。今後カテゴリーが増えるたびに、更新を手作業でしなくてはならないという運営においても大変手間です。任意のphpファイルに数行書くだけで、登録したカテゴリーを、その階層に基づいて、リスト形式かつツリー構造上に自動生成し、ページに出力してくれる、という優れものです。そこで生成された各カテゴリーにはリンクがついてるので、それらをクリックすることで、そのカテゴリーに紐づけられた投稿記事にダイレクトに移動できちゃいますよ、というタグです。categoriesを活用して、ツリー構造式カテゴリーリストを作る。それをアレンジしてtable風レイアウトに改造する。(長男)ひ孫と(3男)ひ孫にはそれぞれやしゃごが2人ずつ。いうカテゴリー構造があったとします。記述することで、やしゃごまでのリンク付きカテゴリーリストが自動生成されます。categoriesの記述方法)カテゴリーリストを出力させたいファイル内に、下記コードを記述。?></ul>コード内「親カテゴリーID」には、出力させたいカテゴリーツリーの親となるIDを記述して下さい。なくbrがいい(style=)などなど、用途に合わせて設定ができます。今回の例では、「title_li=」をセット。箇条書きの外側に表示するタイトルと表示形式。(日本語化ファイルで定義されていればその文字列)。このパラメータを中味を空で指定すると、箇条書きの外側には何も表示しません。いうもので、今回は見出しは出したくなかったので、「title_li=」に続く値を空にしています。それ以外のパラメータのバリエーションは、こちらから。登録カテゴリーがリスト形式かつツリー構造で表示されました。</li></ul>3.ここから、ちょっとアレンジ!リストをtable風レイアウトに改造する生成されたリンク付きカテゴリーリストを、table風レイアウトにするのは、テーブル要素のように表示するためのCSS「display:table;」と「display:table-cell;」を生成されたul,liにそれぞれ設定するだけ。右のとおり、table風になりました。slideToggleでプルダウン切り替えを行っていると便利です。作り方をざっくりご紹介。【JS】表示非表示切り替えしたい、やしゃごの前に「一覧を見る」を挿入し、出来た「一覧を見る」と「やしゃご」を.groupで包む。【css】包まれた.groupは一旦非表示。.groupをtable化。すると、下のようなかたちになります。孫ひ孫01ひ孫01-やしゃご01ひ孫01-やしゃご02ひ孫02ひ孫03ひ孫03-やしゃご01ひ孫03-やしゃご02ひ孫04今回のtable風カテゴリーリストページで、こんなページを作りましたよ。今回ご紹介したカテゴリーリストは数が少ないものですが、このtable風レイアウトを使用して、当社が作ったページをひとつご紹介。1万点以上の絵葉書を所蔵。それらを紹介、販売しているサイトをwordpressで作成いたしました。絵葉書の種類ごとにすべてカテゴリ分けし、その数延べ1000カテゴリ弱。訪問者が、それら全体を把握し、目的の絵葉書を探すのに、とっても活躍してくれそうなページが出来上がりました。声お問い合わせNORENは、株式会社のれんの登録商標です。弊社は、株式会社のれんと提携しNOREN製品をご提案・ご提供しております。