WordPressでカテゴリー一覧を表示するときにPHPのstr_replace関数で改行させカテゴリーをきれいに表示した方法

はじめに

WordPressのカスタム投稿タイプのカテゴリー一覧を以下のように表示させて欲しいというご要望がありました。

簡単なように見えますが、

簡単なように見えますが、WordPressなので、普通にカテゴリーを表示させると下記のようになります。

普通にカテゴリーを表示させると、WordPressの管理画面で入力した文字がそのまま表示されるため、「ファッション・美容」「健康・フィットネス」の「・」も表示されて、ご要望通りの表示になりません。

WordPressのカスタム投稿タイプのカテゴリーを表示させるソースコード

下記が出力ソースコードの例になりますが、静的htmlのページではないので「・」の部分に「<br>」を入れることはできません。

PR

<?php
    $taxonomy = 'product_category';
    $product_terms = get_terms($taxonomy);
?>
<div class="category__list">
    <?php foreach ($product_terms => $product_term): ?>
        <div class="category__item">
            <a href="<?php echo get_term_link($product_term->term_id, $taxonomy); ?>">
                <span><?php echo $product_term->name; ?></span>
            </a>
        </div>
    <?php endforeach; ?>
</div>

「$product_term->name」がカテゴリー名の出力部分なので、直接<br>タグを入れることはできません。

ご要望を満たすために考えたこと

「・」の部分が「<br>」タグに変わればご要望を満たせると考えました。すると思い出しました。

「あ、そういえばstr_replaceを使用すればできる。」

str_replace関数で改行させカテゴリーをきれいに表示したソースコード

<?php
    $taxonomy = 'product_category';
    $product_terms = get_terms($taxonomy);
?>
<div class="category__list">
    <?php foreach ($product_terms => $product_term): ?>
        <div class="category__item">
            <a href="<?php echo get_term_link($product_term->term_id, $taxonomy); ?>">
                <span><?php echo str_replace('・', '<br>', $product_term->name); ?></span>
            </a>
        </div>
    <?php endforeach; ?>
</div>

str_replaceを使用することで、ご要望通りの表示にすることができました。

まとめ

カテゴリーを表示させるときに、「・」を非表示にして改行させたい場合はstr_replaceを使用することで実現が可能なので同じような悩みをお持ちの方はぜひやってみてください。

>お問い合わせはこちら

お問い合わせはこちら