竹炉山房

WordPress默认内置一个标签云（tag cloud）函数wp_tag_cloud，可以实现标签云的输出，其调用方式为：

<?php wp_tag_cloud('smallest=16&largest=34&unit=px&number=0&orderby=count&order=DESC');?>

其中smallest是最不常用的标签的字体大小，反之largest是最常用的标签的字体大小，orderby是选取方式是否按照使用频率排序，order是按照顺序还是逆序输出。

为了美观，可在上述默认标签云效果上叠加彩色效果，网上流传有一个简单函数，可实现彩色标签云，方法为在function.php中加入如下代码：

//边栏彩色标签
function colorCloud($text) {
 $text = preg_replace_callback('||i','colorCloudCallback', $text);
 return $text;
 }

function colorCloudCallback($matches) {
 $text = $matches[1];
 //网上写的将0-16777215的数字转换为16进制
 //$color = dechex(rand(0,16777215));
 //不用上面的16777215，而将0-13774215的数字转换为16进制，是因为13774215-16777215转换为接近于白色的大数字，会导致颜色看不清楚
 $color = dechex(rand(0,13774215));
 $pattern = '/style=(\'|\”)(.*)(\'|\”)/i';
 $text = preg_replace($pattern, "style=\"color:#{$color};$2;\"", $text);
 return "";
 }
 add_filter('wp_tag_cloud', 'colorCloud', 1);

网上还有一个利用jQuery重写标签云，按照字母顺序输出的实例，不详细写了，见链接：

http://www.wpdaxue.com/wordpress-tags-page.html

那么问题来了，如何将这两个有效结合起来，实现既按照首字母排列，又实现不同颜色显示呢？

于是经过中午一段时间的思忖，将彩色标签云的部分代码结合到jQuery中，实现了我们想要的效果：

<?php
 $d = array(
 array("a",-20319),
 array("ai",-20317),
 array("an",-20304),
 array("ang",-20295),
 array("ao",-20292),
 array("ba",-20283),
 array("bai",-20265),
 array("ban",-20257),
 array("bang",-20242),
 array("bao",-20230),
 array("bei",-20051),
 array("ben",-20036),
 array("beng",-20032),
 array("bi",-20026),
 array("bian",-20002),
 array("biao",-19990),
 array("bie",-19986),
 array("bin",-19982),
 array("bing",-19976),
 array("bo",-19805),
 array("bu",-19784),
 array("ca",-19775),
 array("cai",-19774),
 array("can",-19763),
 array("cang",-19756),
 array("cao",-19751),
 array("ce",-19746),
 array("ceng",-19741),
 array("cha",-19739),
 array("chai",-19728),
 array("chan",-19725),
 array("chang",-19715),
 array("chao",-19540),
 array("che",-19531),
 array("chen",-19525),
 array("cheng",-19515),
 array("chi",-19500),
 array("chong",-19484),
 array("chou",-19479),
 array("chu",-19467),
 array("chuai",-19289),
 array("chuan",-19288),
 array("chuang",-19281),
 array("chui",-19275),
 array("chun",-19270),
 array("chuo",-19263),
 array("ci",-19261),
 array("cong",-19249),
 array("cou",-19243),
 array("cu",-19242),
 array("cuan",-19238),
 array("cui",-19235),
 array("cun",-19227),
 array("cuo",-19224),
 array("da",-19218),
 array("dai",-19212),
 array("dan",-19038),
 array("dang",-19023),
 array("dao",-19018),
 array("de",-19006),
 array("deng",-19003),
 array("di",-18996),
 array("dian",-18977),
 array("diao",-18961),
 array("die",-18952),
 array("ding",-18783),
 array("diu",-18774),
 array("dong",-18773),
 array("dou",-18763),
 array("du",-18756),
 array("duan",-18741),
 array("dui",-18735),
 array("dun",-18731),
 array("duo",-18722),
 array("e",-18710),
 array("en",-18697),
 array("er",-18696),
 array("fa",-18526),
 array("fan",-18518),
 array("fang",-18501),
 array("fei",-18490),
 array("fen",-18478),
 array("feng",-18463),
 array("fo",-18448),
 array("fou",-18447),
 array("fu",-18446),
 array("ga",-18239),
 array("gai",-18237),
 array("gan",-18231),
 array("gang",-18220),
 array("gao",-18211),
 array("ge",-18201),
 array("gei",-18184),
 array("gen",-18183),
 array("geng",-18181),
 array("gong",-18012),
 array("gou",-17997),
 array("gu",-17988),
 array("gua",-17970),
 array("guai",-17964),
 array("guan",-17961),
 array("guang",-17950),
 array("gui",-17947),
 array("gun",-17931),
 array("guo",-17928),
 array("ha",-17922),
 array("hai",-17759),
 array("han",-17752),
 array("hang",-17733),
 array("hao",-17730),
 array("he",-17721),
 array("hei",-17703),
 array("hen",-17701),
 array("heng",-17697),
 array("hong",-17692),
 array("hou",-17683),
 array("hu",-17676),
 array("hua",-17496),
 array("huai",-17487),
 array("huan",-17482),
 array("huang",-17468),
 array("hui",-17454),
 array("hun",-17433),
 array("huo",-17427),
 array("ji",-17417),
 array("jia",-17202),
 array("jian",-17185),
 array("jiang",-16983),
 array("jiao",-16970),
 array("jie",-16942),
 array("jin",-16915),
 array("jing",-16733),
 array("jiong",-16708),
 array("jiu",-16706),
 array("ju",-16689),
 array("juan",-16664),
 array("jue",-16657),
 array("jun",-16647),
 array("ka",-16474),
 array("kai",-16470),
 array("kan",-16465),
 array("kang",-16459),
 array("kao",-16452),
 array("ke",-16448),
 array("ken",-16433),
 array("keng",-16429),
 array("kong",-16427),
 array("kou",-16423),
 array("ku",-16419),
 array("kua",-16412),
 array("kuai",-16407),
 array("kuan",-16403),
 array("kuang",-16401),
 array("kui",-16393),
 array("kun",-16220),
 array("kuo",-16216),
 array("la",-16212),
 array("lai",-16205),
 array("lan",-16202),
 array("lang",-16187),
 array("lao",-16180),
 array("le",-16171),
 array("lei",-16169),
 array("leng",-16158),
 array("li",-16155),
 array("lia",-15959),
 array("lian",-15958),
 array("liang",-15944),
 array("liao",-15933),
 array("lie",-15920),
 array("lin",-15915),
 array("ling",-15903),
 array("liu",-15889),
 array("long",-15878),
 array("lou",-15707),
 array("lu",-15701),
 array("lv",-15681),
 array("luan",-15667),
 array("lue",-15661),
 array("lun",-15659),
 array("luo",-15652),
 array("ma",-15640),
 array("mai",-15631),
 array("man",-15625),
 array("mang",-15454),
 array("mao",-15448),
 array("me",-15436),
 array("mei",-15435),
 array("men",-15419),
 array("meng",-15416),
 array("mi",-15408),
 array("mian",-15394),
 array("miao",-15385),
 array("mie",-15377),
 array("min",-15375),
 array("ming",-15369),
 array("miu",-15363),
 array("mo",-15362),
 array("mou",-15183),
 array("mu",-15180),
 array("na",-15165),
 array("nai",-15158),
 array("nan",-15153),
 array("nang",-15150),
 array("nao",-15149),
 array("ne",-15144),
 array("nei",-15143),
 array("nen",-15141),
 array("neng",-15140),
 array("ni",-15139),
 array("nian",-15128),
 array("niang",-15121),
 array("niao",-15119),
 array("nie",-15117),
 array("nin",-15110),
 array("ning",-15109),
 array("niu",-14941),
 array("nong",-14937),
 array("nu",-14933),
 array("nv",-14930),
 array("nuan",-14929),
 array("nue",-14928),
 array("nuo",-14926),
 array("o",-14922),
 array("ou",-14921),
 array("pa",-14914),
 array("pai",-14908),
 array("pan",-14902),
 array("pang",-14894),
 array("pao",-14889),
 array("pei",-14882),
 array("pen",-14873),
 array("peng",-14871),
 array("pi",-14857),
 array("pian",-14678),
 array("piao",-14674),
 array("pie",-14670),
 array("pin",-14668),
 array("ping",-14663),
 array("po",-14654),
 array("pu",-14645),
 array("qi",-14630),
 array("qia",-14594),
 array("qian",-14429),
 array("qiang",-14407),
 array("qiao",-14399),
 array("qie",-14384),
 array("qin",-14379),
 array("qing",-14368),
 array("qiong",-14355),
 array("qiu",-14353),
 array("qu",-14345),
 array("quan",-14170),
 array("que",-14159),
 array("qun",-14151),
 array("ran",-14149),
 array("rang",-14145),
 array("rao",-14140),
 array("re",-14137),
 array("ren",-14135),
 array("reng",-14125),
 array("ri",-14123),
 array("rong",-14122),
 array("rou",-14112),
 array("ru",-14109),
 array("ruan",-14099),
 array("rui",-14097),
 array("run",-14094),
 array("ruo",-14092),
 array("sa",-14090),
 array("sai",-14087),
 array("san",-14083),
 array("sang",-13917),
 array("sao",-13914),
 array("se",-13910),
 array("sen",-13907),
 array("seng",-13906),
 array("sha",-13905),
 array("shai",-13896),
 array("shan",-13894),
 array("shang",-13878),
 array("shao",-13870),
 array("she",-13859),
 array("shen",-13847),
 array("sheng",-13831),
 array("shi",-13658),
 array("shou",-13611),
 array("shu",-13601),
 array("shua",-13406),
 array("shuai",-13404),
 array("shuan",-13400),
 array("shuang",-13398),
 array("shui",-13395),
 array("shun",-13391),
 array("shuo",-13387),
 array("si",-13383),
 array("song",-13367),
 array("sou",-13359),
 array("su",-13356),
 array("suan",-13343),
 array("sui",-13340),
 array("sun",-13329),
 array("suo",-13326),
 array("ta",-13318),
 array("tai",-13147),
 array("tan",-13138),
 array("tang",-13120),
 array("tao",-13107),
 array("te",-13096),
 array("teng",-13095),
 array("ti",-13091),
 array("tian",-13076),
 array("tiao",-13068),
 array("tie",-13063),
 array("ting",-13060),
 array("tong",-12888),
 array("tou",-12875),
 array("tu",-12871),
 array("tuan",-12860),
 array("tui",-12858),
 array("tun",-12852),
 array("tuo",-12849),
 array("wa",-12838),
 array("wai",-12831),
 array("wan",-12829),
 array("wang",-12812),
 array("wei",-12802),
 array("wen",-12607),
 array("weng",-12597),
 array("wo",-12594),
 array("wu",-12585),
 array("xi",-12556),
 array("xia",-12359),
 array("xian",-12346),
 array("xiang",-12320),
 array("xiao",-12300),
 array("xie",-12120),
 array("xin",-12099),
 array("xing",-12089),
 array("xiong",-12074),
 array("xiu",-12067),
 array("xu",-12058),
 array("xuan",-12039),
 array("xue",-11867),
 array("xun",-11861),
 array("ya",-11847),
 array("yan",-11831),
 array("yang",-11798),
 array("yao",-11781),
 array("ye",-11604),
 array("yi",-11589),
 array("yin",-11536),
 array("ying",-11358),
 array("yo",-11340),
 array("yong",-11339),
 array("you",-11324),
 array("yu",-11303),
 array("yuan",-11097),
 array("yue",-11077),
 array("yun",-11067),
 array("za",-11055),
 array("zai",-11052),
 array("zan",-11045),
 array("zang",-11041),
 array("zao",-11038),
 array("ze",-11024),
 array("zei",-11020),
 array("zen",-11019),
 array("zeng",-11018),
 array("zha",-11014),
 array("zhai",-10838),
 array("zhan",-10832),
 array("zhang",-10815),
 array("zhao",-10800),
 array("zhe",-10790),
 array("zhen",-10780),
 array("zheng",-10764),
 array("zhi",-10587),
 array("zhong",-10544),
 array("zhou",-10533),
 array("zhu",-10519),
 array("zhua",-10331),
 array("zhuai",-10329),
 array("zhuan",-10328),
 array("zhuang",-10322),
 array("zhui",-10315),
 array("zhun",-10309),
 array("zhuo",-10307),
 array("zi",-10296),
 array("zong",-10281),
 array("zou",-10274),
 array("zu",-10270),
 array("zuan",-10262),
 array("zui",-10260),
 array("zun",-10256),
 array("zuo",-10254)
 );
 ?>

<?php
function g($num){
  global $d;
  if($num>0&&$num<160){
    return chr($num);
  }
  elseif($num<-20319||$num>-10247){
  return "";
  }else{
    for($i=count($d)-1;$i>=0;$i--){
      if($d[$i][1]<=$num)break;
    }
  return $d[$i][0];
  }
}

function c($str){
  $ret="";
  for($i=0;$i<strlen($str);$i++){
    $p=ord(substr($str,$i,1));
    if($p>160){
      $q=ord(substr($str,++$i,1));
      $p=$p*256+$q-65536;
    }
    $ret.=g($p);
  }
  return $ret;
}

//此处因我的标签都是中文因此去掉了中文中没用的I、U、V三个首字母
$letters="ABCDEFGHJKLMNOPQRSTWXYZ";
$lehtml = "<span class='all-tags'>";

for($i=0;$i<strlen($letters);$i++){
  $firstLetter = $letters{$i};
  $lehtml.= " <span id='".$firstLetter."'>".$firstLetter."</span>&nbsp;";
}

$lehtml .= "</span>";
  echo $lehtml;
  $index = 0;
  $html = '[';

foreach (get_tags( array('number' => 2000, 'orderby' => 'name', 'order' => 'DESC', 'hide_empty' => true) ) as $tag){
  $tag_link = get_tag_link($tag->term_id);
  $fl= substr( c( iconv("UTF-8","GB2312",$tag->name)), 0, 1 );
  $html.='{"firstL":"'.$fl.'","tagName":"'.$tag->name.'<sup>['.$tag->count.']</sup> '.'","tagUrl":"'.$tag_link.'"}';
  $html.=",";
}

$html = substr($html,0,strlen($html)-1);
$html .= ']';
echo "<script>var data=".$html.";</script>";
?>

<script>
//此处增加了一个随机函数，用以在javascript里实现在一定范围内选取一个随机数
function selectfrom (lowValue,highValue){
  var choice=highValue-lowValue+1;
  return Math.floor(Math.random()*choice+lowValue);
}

jQuery(document).ready(function ($){
  for(var i=0;i<data.length;i++){
    var d = data[i];
    //将随机数转换为16进制
    var number = selectfrom (0,13774215);
    var color = number.toString(16);
    //输出色彩
    $("#"+d.firstL.toUpperCase()).append(" <a href='"+d.tagUrl+"' style='border-bottom:0px;color:#"+color+"'>"+d.tagName+"</a> ");
  }
})
</script>

最终效果：见足迹页面。