欢迎访问晨星博客!

  • 【晋级】WordPress自定义标签云随机背景颜色

    文章目录
    1. 实现方法
    2. 如何调用标签云
    3. CSS实现彩色背景标签云方法
    4. php实现彩色背景标签云方法

    从wordpress 2.3版本开始,使用wp_tag_cloud函数来调用文章标签显示列表,WP博主可以轻易地通过设置wp_tag_cloud函数的标签参数属性,使标签实现多样化显示。相信大家都见过各种各样色彩纷杂的标签云吧,但是我们以往都是做的标签字体颜色,今天给大家分享如何自定义标签的背景色。

    wp-pic-mobie-v1-0-12

    实现方法

    如果我们想实现多彩WP标签云背景的话方法很多,js、css、php都可以实现,今天我们介绍css和php这两种方法:

    css实现多彩标签云背景色

    这种方法是通过css的:nth-child伪类来实现的。

    评价:可自定义每一个标签特定的背景色、设置复杂、没有随机

    php实现随机标签云背景色

    这种方法是通过php关联wp的内置wp_tag_cloud函数来调整WP默认参数来实现随机标签云背景色的,使用灵活,可自定义颜色范围。

    评价:使用方便、设置简单、随机显示

    看完了这两种方法的介绍,您可以根据自己网站的实际情况选择适合自己的方法,下面我就把两种方法的实现步骤写出来方便大家使用。

    如何调用标签云

    生成标签云我们可以使用WP的内置函数wp_tag_cloud($args)用法如下:

    1. <aside class=“tags”><?php wp_tag_cloud(‘smallest=12&largest=12&number=45&order=DESC’); ?></aside>
    1. smallest=12定义标签云最小字体;
    2. largest=12定义标签云最大字体;
    3. number=45定义需要显示的数量;
    4. order=DESC定义标签云的排序方式;

    我们在使用过程中我们如果不需要随机字体大小的话可以把smallestlargest的值设置为相同的即可。

    CSS实现彩色背景标签云方法

    我们先来看看WP生成的标签的html格式:

    1. <aside class=“tags”>
    2.         <a href=“http://www.chenxingweb.com/wp-pic/tag/chagnfa/”>长发美女</a>
    3.         <a href=“http://www.chenxingweb.com/wp-pic/tag/xiaohua/”>校花美女</a>
    4.         <a href=“http://www.chenxingweb.com/wp-pic/tag/keting/”>客厅</a>
    5. </aside>

    有了上面的格式我们可以得出,用css实现标签云的多彩背景是通过控制tags选择器下面的a标签实现了,那么结合前面提到的:nth-child伪类就可以实现这个功能了。

    实现代码

    1. /* 定义 标签云a标签的通用属性*/
    2. .tags a{color#fff;background-color#428BCA;displayinlineblock;margin: 0 5px 5px 0;padding: 0 6px;line-height21px}
    3. /* 使用nth-child定义 标签云每个a标签的独立属性*/
    4. .tags a:nth-child(9n){background-color#4A4A4A;}
    5. .tags a:nth-child(9n+1){background-color#428BCA;}
    6. .tags a:nth-child(9n+2){background-color#5CB85C;}
    7. .tags a:nth-child(9n+3){background-color#D9534F;}
    8. /* 定义标签云鼠标经过a标签的属性*/
    9. .tags a:hover{opacity: 1;filter:alpha(opacity=100);}

    代码说明:

    .tags a:nth-child(9n)就是我们定义WP标签云中第一个标签的背景色,那么.tags a:nth-child(9n+2)就是定义第二个标签的背景色,依次类推。

    所以呢我们得出一个结论也就是:我们生成了多少个标签就要定义多少次.tags a:nth-child(9n+n)属性,灵活度降低。

    php实现彩色背景标签云方法

    这种方法相对简单了很多,就是通过一段php控制WP在生成标签云时使用什么样的格式具体看代码:

    1. /* 彩色静态标签云 Color Tag Cloud 
    2. /* ——————————– */
    3. function colorCloud($text) {
    4.   $text = preg_replace_callback(‘|<a (.+?)>|i’, ‘colorCloudCallback’, $text);
    5.   $text=preg_replace(‘/<a /’,'<a ‘,$text);
    6.   return $text;
    7. }
    8. function colorCloudCallback($matches) {
    9.   $text = $matches[1];
    10. //这里定义我们背景色的范围,如果不想设置背景色的输出范围我们可以使用
    11. //$color = dechex(rand(0,16777215));从所有颜色中随机出一个
    12.   $a = array(‘8D7EEA’,’F99FB2′,’AEE05B’,’E8D368′,’F75D78′,’55DCAB’,’F75DB1′,’ABABAF’,’7EA8EA’);
    13.   $co = array_rand($a,2);
    14.   $color = $a[$co[0]];
    15. //随机颜色代码结束,下面开始吧颜色赋值给每个标签生成背景色
    16.   $pattern = ‘/style=(\’|\“)(.*)(\’|\”)/i’;
    17.   $text = preg_replace($pattern, “style=\“background:#{$color};\””$text);
    18.   return “<a $text>”;
    19. }
    20. //把php代码挂载到wp_tag_cloud钩子上
    21. add_filter(‘wp_tag_cloud’, ‘colorCloud’, 1);

    通过把上面的代码添加到functions.php文件中我们就简单的实现了WP多彩背景云标签的功能了,赶紧给自己也设置一个吧。

    声明:原创文章请勿转载,如需转载请注明出处!

    • 共 2 条评论

    请登陆后再发表您的观点吧!

    最新评论

    1. Q160809994

      彩色标签云看起来舒服多了

    2. 免费建设

      看起来美观简单,不错

    账号登陆

    快捷登陆