WordPressではテンプレートタグを使って色々な要素を出力できますがデフォルトで付与されるクラス名をサイトに合わせて変更したい場合もあるかと思います。(私はBEMによる命名規則に合わせたいときに変更したくなりました。)
今回はwp_list_categories()
で出力されるカテゴリーリストのクラス名をPHPで変更します。
wp_list_categories()によるカテゴリー一覧の基本形
カテゴリーのリストを表示する関数の使い方
まずはカスタマイズの元となるカテゴリーリストです。
次のように記述すると基本的なカテゴリーのリストが出力されます。
テンプレートファイル
<?php wp_list_categories(); ?>
出力結果
<li class="categories">カテゴリー <ul> <li class="cat-item cat-item-1">トヨタ</li> <li class="cat-item cat-item-2">マツダ <ul class='children'> <li class="cat-item cat-item-3">ワゴン</li> <li class="cat-item cat-item-4">SUV</li> </ul> </li> </ul> </li>
- デフォルトでは全体が1つの
<li>
に内包される形で出力されるため、使用する際はHTMLの構造に注意してください。 - カテゴリーに階層がある場合は入れ子で表示されます。
- それぞれの要素には自動的にクラス名が付与されます。
パラメータ設定値は配列で指定する
wp_list_categories()
で指定可能なパラメータは設定値を配列にしたものを引数とすることで有効になりますが、クラス名を変更可能なオプションはありません。
参考リンク
WordPress Codex – wp_list_categories()
WordPress.org – wp_list_categories()
今回は自動的に付与された<li>
のクラス名cat-item
と<ul>
のクラス名children
を書き換えていきたいと思います。
クラス名の書き換えを行う
大まかな流れ
出力されるHTMLを一つの文字列としてまとめる
wp_list_categories()
のパラメータを配列にして指定します。
4行目:空欄を指定することで外側の<li class="categories">カテゴリー
の部分が無くなります。
5行目:ここではまだ出力しないので0
を指定します。
7行目:wp_list_categories()
にパラメータの配列を渡したものを変数$categories
に代入します。
これで書き換え前のHTMLソースが入った変数$categories
が用意できました。
サンプルコード
<ul class="cat-list"> <?php $args = array( 'title_li' => '', 'echo' => 0, ); $categories = wp_list_categories( $args ); $cat_serch = array( '"cat-item', 'children' ); // 変換前の文字列. $cat_replace = array( '"cat-list__item', 'cat-list-child' ); // 変換後の文字列. $categories = str_replace( $cat_serch, $cat_replace, $categories ); echo $categories; ?> </ul>
目当ての文字列をPHPの str_replace() で置換する
本来出力されるHTMLが入っている$categories
を9~11行目で次のように書き換えています。
- cat-item → cat-list__item
- children → cat-list-child
9行目:置換したい文字列を配列で指定します。"cat-item
のように直前のダブルクォーテーションも含めて指定することでcat-item-1
の部分は当てはまらず、目的の箇所以外は置換されないようにします。
10行目:置換後の文字列を配列で指定します。置換前の配列に順序を合わせる必要があります。
11行目:前述の配列をstr_replace()のパラメータとして実行します。$categories
に含まれる$cat_serch
を$cat_replace
に置換するという形式になります。
置換後の文字列(HTML)を書き出す。
13行目:書き換えたものを表示します。
目当てのクラス名が正しく書き換えられていれば完成です。
出力例
<ul class="cat-list"> <li class="cat-list__item cat-item-1">トヨタ</li> <li class="cat-list__item cat-item-2">マツダ <ul class='cat-list-child'> <li class="cat-list__item cat-item-3">ワゴン</li> <li class="cat-list__item cat-item-4">SUV</li> </ul> </li> </ul>