こんにちは！ISAMU(@burlesca_isa)です！
ブログサイトでよく見るカテゴリが色分けされているタグ。
例えばWordPressで構築されたブログのタイトル横にこんな風に表示されている赤枠の部分。
今回は個別記事ページの親カテゴリだけでなく、祖先カテゴリまで取得して、タグを色分けして表示するプログラムについて書いていきたいと思います。
PHPのコード
例として下記のカテゴリを使用します。
- 個別記事が所属するカテゴリ:javascript
- javascriptの親カテゴリ:programming
- programmingの親カテゴリ:technology
functions.php
functions.phpの7行目「get_the_category();」で
アクセスしている個別記事が所属するカテゴリを取得しています。
取得した配列の[0]に親カテゴリが存在するかどうか確認するのに必要なデータが格納されているので、
一旦
$category_0 = $category_array[0];
で変数に格納しています。
9行目のif文で親カテゴリが存在するかの条件分岐をしています。
$category_0->parent
parentが「0」でない場合は親カテゴリが存在し、「0」の場合は親カテゴリが存在しません。
今回の例では親カテゴリが存在するので条件分岐はtrueとなります。
10行目では、get_ancestors(id,type)関数でカテゴリの親、祖先カテゴリを取得しています。
$ancestors = array_reverse(get_ancestors($category_0->cat_ID, 'category'));
第一引数はカテゴリID,第二引数はタイプ。
第二引数はカテゴリを取得したいので’category’を記述しています。
関数で取得したカテゴリは [programming, TECHNOLOGY]の順で取得されますので、
array_reverseで[TECHNOLOGY, programming]に配列の順番を入れ替えています。
取得した配列が格納されている変数ancestorsをforeachでまわして、ほしいデータを取得し、
foreachが終了したあとに最下層のカテゴリ(対象の個別記事が所属しているカテゴリ)を配列の最後に格納してreturn!!
今回配列に格納しているデータは
- slug：クラス名で使用する
- name: タグに出力するカテゴリ名
- url: aタグのhrefで使用するURL。
出力される配列の[0]番目には一番最上層の祖先カテゴリが入り、最後は一番最下層のカテゴリが入ります。
single.php
２行目で先程作成した関数get_category_nameを実行し戻り値を変数に格納します。
その変数をforeachで回して４行目からタグに必要な情報をechoで取得しながらhtmlを記述していきます。
肝は5行目です。‘cat-‘ とslugを組み合わせてカテゴリ別にクラスを作成しています。
作成したクラスに対してstyle.cssで色等を設定します。
style.css
今回は
- cat-single-tag-common
- cat-default
で共通のCSSを記述しました。
その後にカテゴリ別設定を記載します。
コードはcat-campになってますが、
例でいうと
- cat-javascript
- cat-tecnology
- cat-programming
などcat- + slug名で記述すれば良いです。
コードの解説
WordPressをカスタマイズをするにはある程度PHPの知識が必要です。
関連記事はこちら。
プログラミング未経験からの勉強法を記載しています。
[nlink url=”https://kajirinyo.com/programmer001″]
今回は祖先カテゴリが一つの場合でのみ取得するプログラムですが、
複数の祖先カテゴリが存在する場合、get_the_category()の配列をforeachすれば取得できるでしょう。
是非参考にしてみてください。
