Hiromuブログ

最近はこちら(https://zenn.dev/hiromu)が本体

カテゴリーのレイアウト調整

WordPressの標準のカテゴリー表示ってちょっと物足りないですよね。(ですよね?!)

なので少し手を入れて以下のような表示にしました(この段階ではjQuery適用前なので、子カテゴリーもすべて表示されています)。

blog02

階層表示されており、親カテゴリだけカラフルになっていますよね。これは以下のように実装しました。

category.php


出力されるHTML


出力されるHTMLを見るとそれぞれのliタグにclass=”cat-item cat-item-xx”が設定されています。

したがって親のcat-item-xxのxxの部分の番号をメモしておいて、それをcssで調整するという非常に泥臭い実装をしています。

style.css

.cat-item-107 {
    background-image:url(./img/category01.png);
    background-repeat:no-repeat;
    padding:0px 0px 0px 50px;
    vertical-align:middle;
}
.cat-item-160 {
    background-image:url(./img/category02.png);
    background-repeat:no-repeat;
    padding:0px 0px 0px 50px;
    vertical-align:middle;
}
・・・(略)

 

なお、試行錯誤した部分は端折りましたが、実はこのカテゴリ表示結構悩ましかったです。

並び順を自分の好きなようにしたり、親の記事数をうまく表示したり、自力で実装するのはなかなか大変そうですが以下のようにいろいろと試してみたので凝れば面白い表示もできそうな気もします。

いろいろ1


  • name;?> (count;?>)
  • いろいろ2

    name."
    "; echo " slug:".$cat[0]->slug."
    "; echo " parent:".$cat[0]->parent."
    "; echo " count:".$cat[0]->count."
    "; ?>

    いろいろ3

    count;
        echo " parentID:".$thisCat->parent; //親がない場合は0を返す
    ?>
    

    いろいろ4

    category_count; ?>
    

    いろいろ5

    category_parent) {//親の時
                if($category->name == "任意のカテゴリ名"){
                    //なんかの処理
                }
            }
        }
    ?>