🎨

文字列から数字を生成して、色相違いのスタイルを自動で適応する。【PHP, CSS, WordPress】

2023/01/20に公開約1,100字

WordPressにて、タグを羅列するときに、自動で背景色を付与したい時がある。
ただこれは、ページを開くたびでランダムではなくて、特定のタグに関しては毎回同じ色であって欲しい。

また、それらの色は、デタラメすぎると色がごちゃついて見栄えが汚くなるので、HSLを使って、同彩度、同輝度で色相のみを可変の値にすることで、ある程度の色のまとまりを生ませる。

function.php
function strings_to_colorAngle($strings)
{
    if (!$strings) return 0;

    $n = string_to_num($strings);
    $colorAngle = $n % 360;

    return $colorAngle;
}

function string_to_num($strings)
{
    $word2Int = (int)("1" . substr(preg_replace("/[^0-9]+/", "", md5($strings)), 1, 9));
    return $word2Int;
}

上記が文字列を受け取って、色相の値(1~360)を返す関数。
$word2Intの部分とかは参考にさせていただいたサイトに解説あります。

page.php
<div class="tags">
    <?php
    $terms = get_terms('news_tag');
    if (!empty($terms)) {
        foreach ($terms as $term) {
            echo '<span class="tags__tag" style="background: hsl(' . strings_to_colorAngle($term->slug) . 'deg,74%,50%)">' . $term->name . '</span>';
        }
    }
    ?>
</div>

今回タグはカスタムタクソノミーを用いています。
slugをパラメーターに色相生成して、style属性に直接指定。

【参考にさせていただいたサイト】
https://zenn.dev/phi/articles/javascript-string-to-number-to-color
https://neoinspire.net/archives/140

Discussion

ログインするとコメントできます