
いいねボタンを設置する事が出来るプラグイン、「WP ULike」を使った際に、トップページやアーカイブページなど記事の外にも「いいね数」を表示させようとこちらの対応をしました。
いいね数の表示方法
今回はいいね数の表示と一緒に、いいね数の値に応じてクラスを付与する事で、たくさんいいねを押されてる記事を強調出来るように指定してみました。
いいね数が100以下の時に「low_color」、101~200の時に「middle_color」、201以上の時には「high_color」と指定し、CSSでそれぞれに色指定をしています。
php
<?php
if(wp_ulike_get_post_likes($post->ID) <= 100){
$class_good = "low_color";
}elseif(wp_ulike_get_post_likes($post->ID) <= 200){
$class_good = "middle_color";
}elseif(wp_ulike_get_post_likes($post->ID) >= 201){
$class_good = "high_color";
}
echo '<div class="good_count '.$class_good.'">'. wp_ulike_get_post_likes($post->ID) .'</div>';
?>

わぷまる
前半のif部分で100以下の場合、200以下の場合、201以上の場合を指定しているので、調整して使ってくださいね
CSS
.good_count:before{
content:url(/wp-content/plugins/wp-ulike/assets/img/svg/like.svg);
}
.low_color{
filter: invert(72%) sepia(26%) saturate(63%) hue-rotate(1deg) brightness(105%) contrast(102%);
}
.middle_color{
filter: invert(72%) sepia(26%) saturate(6428%) hue-rotate(1deg) brightness(105%) contrast(102%);
}
.high_color{
filter: invert(15%) sepia(95%) saturate(6932%) hue-rotate(358deg) brightness(95%) contrast(112%);
}

わぷまる
CSSは、filterを使ってグッドアイコンと、いいね数に色を付けています
プラグインに元々入っているアイコンを使っているためこのような方法で対応していますが、お好みでアレンジしてみてくださいね
プラグインに元々入っているアイコンを使っているためこのような方法で対応していますが、お好みでアレンジしてみてくださいね