wp_list_categories()のデフォルトのクラス名を書き換える【WordPress/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>

パラメータ設定値は配列で指定する

wp_list_categories()で指定可能なパラメータは設定値を配列にしたものを引数とすることで有効になりますが、クラス名を変更可能なオプションはありません。

参考リンク
WordPress Codex – wp_list_categories()
WordPress.org – wp_list_categories()

今回は自動的に付与された<li>のクラス名cat-itemと<ul>のクラス名childrenを書き換えていきたいと思います。

クラス名の書き換えを行う

大まかな流れ

1. 出力されるHTMLを一つの文字列としてまとめる。
2. その中の該当する箇所をPHPで置換。
3. 置換後の文字列（HTML）を書き出す。

出力される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>

参考リンク
PHP.net – str_replace()

---