探索建站和运维乐趣

实现侧栏WordPress彩色标签方法 侧栏标签体验更加

我们经常看到有不少的WordPress网站右侧栏标签是彩色标签云效果的,这个在一般的主题中是没有的,仅仅是比较单调标签输出。有些比较绚丽的WordPress主题才会有这样的彩色标签效果。如果我们希望实现这样的单独彩色标签效果如何做呢?

在这里,我们老部落整理出来WordPress实现彩色标签效果,如果我们网友希望在自己网站实现这个效果可以效仿参考配置,不需要使用插件,直接代码实现即可。

我们需要先找到"simple-tags.client.php"文件。然后找到:

function getColorByScale($scale_color, $min_color, $max_color)

找到这行,建议注释这一行,万一以后需要用到的时候还可以恢复。

$scale_color = $scale_color / 100; 
$minr = hexdec(substr($min_color, 1, 2)); 
$ming = hexdec(substr($min_color, 3, 2)); 
$minb = hexdec(substr($min_color, 5, 2)); 
$maxr = hexdec(substr($max_color, 1, 2)); 
$maxg = hexdec(substr($max_color, 3, 2)); 
$maxb = hexdec(substr($max_color, 5, 2)); 
$r = dechex(intval((($maxr - $minr) * $scale_color) + $minr)); 
$g = dechex(intval((($maxg - $ming) * $scale_color) + $ming)); 
$b = dechex(intval((($maxb - $minb) * $scale_color) + $minb));

我们getColorByScale这个function中的以下语句。然后加上以下代码:

$r = dechex(rand(0,255)); 
$g = dechex(rand(0,196)); 
$b = dechex(rand(0,255));

但是,我们需要显示多少个标签、字体、排序等还需要在Simple Tags的选项中设置。然后我们需要在需要显示的位置调用。

<?php st_tag_cloud(); ?>

这个办法稍微有点麻烦,这里我们可使用自定义函数的方式实现。这里我们看看一个新的方法。

function colorCloud($text) {
$text = preg_replace_callback('|<a (.+?)>|i', 'colorCloudCallback', $text);
return $text;
}
function colorCloudCallback($matches) {
$text = $matches[1];
$color = dechex(rand(0,16777215));
$pattern = '/style=('|")(.*)('|")/i';
$text = preg_replace($pattern, "style="color:#{$color};$2;"", $text);
return "<a $text>";
}
add_filter('wp_tag_cloud', 'colorCloud', 1);

在当前主题Functions.php文件中加上定义函数。然后我们在侧边栏调用:

<?php wp_tag_cloud('smallest=8&largest=24&number=50'); ?>

可以根据需要设置调用的数量和字体大小。建议还是用第二个方法,因为第一个方法需要修改内置文件,如果升级WordPress可能会被覆盖。

赞(1)
转载保留:老部落 » 实现侧栏WordPress彩色标签方法 侧栏标签体验更加


关注公众号『老蒋朋友圈』

获取更多建站运营运维新知!
互联网创业、前沿技术......