制作一个首字母排序的标签页面.

制作一个首字母排序的标签页面.通过代码实现所有站内标签按照26个字母进行分类排序，提供用户体验，具体效果如图：

WordPress制作一个首字母排序的标签页面

具体制作方法如下：

1、functions.php函数文件中添加以下代码：

/**
* 根据标题首字母制作标签页面
* Author：Specs
* Blog：http://blog.0660hf.comn/
*/
/**
* 断笔扶琴 <Get post title first letter> in the theme.
* 拼音首字母
*/
function specs_getfirstchar($s0){
$fchar = ord($s0{0});
if($fchar >= ord("A") and $fchar <= ord("z") )return strtoupper($s0{0});
$s1 = iconv("UTF-8","gb2312", $s0);
$s2 = iconv("gb2312","UTF-8", $s1);
if($s2 == $s0){$s = $s1;}else{$s = $s0;}
$asc = ord($s{0}) * 256 + ord($s{1}) - 65536;
if($asc >= -20319 and $asc <= -20284) return "A";
if($asc >= -20283 and $asc <= -19776) return "B";
if($asc >= -19775 and $asc <= -19219) return "C";
if($asc >= -19218 and $asc <= -18711) return "D";
if($asc >= -18710 and $asc <= -18527) return "E";
if($asc >= -18526 and $asc <= -18240) return "F";
if($asc >= -18239 and $asc <= -17923) return "G";
if($asc >= -17922 and $asc <= -17418) return "H";
if($asc >= -17417 and $asc <= -16475) return "J";
if($asc >= -16474 and $asc <= -16213) return "K";
if($asc >= -16212 and $asc <= -15641) return "L";
if($asc >= -15640 and $asc <= -15166) return "M";
if($asc >= -15165 and $asc <= -14923) return "N";
if($asc >= -14922 and $asc <= -14915) return "O";
if($asc >= -14914 and $asc <= -14631) return "P";
if($asc >= -14630 and $asc <= -14150) return "Q";
if($asc >= -14149 and $asc <= -14091) return "R";
if($asc >= -14090 and $asc <= -13319) return "S";
if($asc >= -13318 and $asc <= -12839) return "T";
if($asc >= -12838 and $asc <= -12557) return "W";
if($asc >= -12556 and $asc <= -11848) return "X";
if($asc >= -11847 and $asc <= -11056) return "Y";
if($asc >= -11055 and $asc <= -10247) return "Z";
return null;
}
function specs_pinyin($zh){
$ret = "";
$s1 = iconv("UTF-8","gb2312", $zh);
$s2 = iconv("gb2312","UTF-8", $s1);
if($s2 == $zh){$zh = $s1;}
$s1 = substr($zh,$i,1);
$p = ord($s1);
if($p > 160){
$s2 = substr($zh,$i++,2);
$ret .= specs_getfirstchar($s2);
}else{
$ret .= $s1;
}
return strtoupper($ret);
}
/**
* 9IPHP <Get all tags> in the theme.
* 标签页面
*/
function specs_show_tags() {
if(!$output = get_option('specs_tags_list')){
$categories = get_terms( 'post_tag', array(
'orderby' => 'count',
'hide_empty' => 1
) );
foreach($categories as $v){
for($i = 65; $i <= 90; $i++){
if(specs_pinyin($v->name) == chr($i)){
$r[chr($i)][] = $v;
}
}
for($i=48;$i<=57;$i++){
if(specs_pinyin($v->name) == chr($i)){
$r[chr($i)][] = $v;
}
}
}
ksort($r);
$output = "<ul class='list-inline' id='tag_letter'>";
for($i=65;$i<=90;$i++){
$tagi = $r[chr($i)];
if(is_array($tagi)){
$output .= "<li><a href='#".chr($i)."'>".chr($i)."</a></li>";
}else{
$output .= "<li>".chr($i)."</li>";
}
}
for($i=48;$i<=57;$i++){
$tagi = $r[chr($i)];
if(is_array($tagi)){
$output .= "<li><a href='#".chr($i)."'>".chr($i)."</a></li>";
}else{
$output .= "<li>".chr($i)."</li>";
}
}
$output .= "</ul>";
$output .= "<ul id='all_tags' class='list-unstyled'>";
for($i=65;$i<=90;$i++){
$tagi = $r[chr($i)];
if(is_array($tagi)){
$output .= "<li id='".chr($i)."'><h4 class='tag_name'>".chr($i)."</h4>";
foreach($tagi as $tag){
$output .= "<a href='".get_tag_link($tag->term_id)."'>".$tag->name."(".$tag->count.")</a>";
}
}
}
for($i=48;$i<=57;$i++){
$tagi = $r[chr($i)];
if(is_array($tagi)){
$output .= "<li id='".chr($i)."'><h4 class='tag_name'>".chr($i)."</h4>";
foreach($tagi as $tag){
$output .= "<a href='".get_tag_link($tag->term_id)."'>".$tag->name."(".$tag->count.")</a>";
}
}
}
$output .= "</ul>";
update_option('specs_tags_list', $output);
}
echo $output;
}
function clear_tags_cache() {
update_option('specs_tags_list', ''); // 清空 specs_archives_list
}
add_action('save_post', 'clear_tags_cache'); // 新发表文章/修改文章时
/**
* 9IPHP <Get post count by tag term_id> in the theme.
* 根据标签ID活动标签文章数
*/
function specs_post_count_by_tag ( $arg ,$type = 'include'){
$args=array(
$type => $arg,
);
$tags = get_tags($args);
if ($tags) {
foreach ($tags as $tag) {
return $tag->count;
}
}
}

2、复制模板中的page.php页面文件，在该文件的顶部添加：

<?
php/*Template Name: Tags
*/
?>

然后修改名称，可以修改为 page-tag.php文件，然后把其中的内容调用代码：

<?php the_content(); ?>

修改为：

<?php specs_show_tags(); ?>

。

3、把 Template Name名字替换为“Tags”，然后在后台新建一个页面，模板选择“Tags”，保存即可。

4.之后效果都可以自己选择，在css哪里设置，下面是上面的图片一样效果的代码例子：

.tag_name{ width:1034px; float:left; line-height:30px; margin:25px 0 0 26px; font-size:14px; color:#000;line-height: 200%;}
.tag_name_a{ width:1034px; float:left; border:2px solid #d8d9d9;}
.tag_name_b{ width:680px; float:left; line-height:30px; margin:25px 0 0 26px; font-size:14px; color:#000;}
.tag_name_c{ width:980px; height:45px; float:left; border-bottom:1px solid #d8d9d9; margin:25px 0 0 26px; font-size:20px; color:#000;}
.list-unstyled{ width:1034px; float:left; line-height:30px; margin:25px 0 0 26px; font-size:14px; color:#000;line-height: 200%;margin: 2px;}
.list-unstyled li{width: 1000px;float: left;margin: 0 10px 0 0;padding: 5px;}
.list-unstyled a{color: #333333; padding: 5px 8px;}
.list-inline {width:1000px;list-style: none;height:100px; text-align:center; overflow:hidden; padding-top:0em;}
.list-inline li{float: left;}
.list-inline a{display: block;text-decoration: none;background: none repeat scroll 0 0 #333333; border: 5px solid #333333; color: #f7f8f8; margin: 1px; padding: 3px 8px;}
.list-inline a:hover,.ist-inlin a.current {text-decoration: underline;background: none repeat scroll 0 0 #da5a04; border: 4px solid #da5a04;
color: #f7f8f8; font-weight: bolder;}

具体情况根据你的网站进行修改。