🎨
文字列から数字を生成して、色相違いのスタイルを自動で適応する。【PHP, CSS, WordPress】
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属性に直接指定。
【参考にさせていただいたサイト】
Discussion