WordPress制作一个首字母排序的标签页面
制作一个首字母排序的标签页面,通过代码实现所有站内标签按照26个字母进行分类排序。提供用户体验,具体效果如图:
具体看我的爱吃零食的网站:
具体制作方法如下:
1、functions.php函数文件中添加以下代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 | 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); } 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>"; }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>"; }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'); // 新发表文章/修改文章时 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页面文件,在该文件的顶部添加:
1 2 3 4 5 6 | < ? php/*Template Name: Tags */ ?> |
然后修改名称,可以修改为 page-tag.php文件,然后把其中的内容调用代码:
1 2 | < ?php the_content(); ?>修改为:< ?php specs_show_tags(); ?>。 |
3、把 Template Name名字替换为“Tags”,然后在后台新建一个页面,模板选择“Tags”,保存即可。
4、之后效果都可以自己选择,在css哪里设置,下面是上面的图片一样效果的代码例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 | .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;} |
具体情况根据你的网站进行修改。
js数组与json的区别和用法 用CSS让字体在一行内显示不换行