WordPress制作一个首字母排序的标签页面-wordpress&系统-0660BBS_0660bbs
  2. wordpress&系统
  3. WordPress制作一个首字母排序的标签页面

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

创意威客 2019-2-2 2254

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

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

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

具体制作方法如下：

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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/**
* 根据标题首字母制作标签页面
* 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页面文件，在该文件的顶部添加：

1
2
3
4
<?
php/*Template Name: Tags
*/
?>

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

1
<?php the_content(); ?>

修改为：

1
<?php specs_show_tags(); ?>

。

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

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

1
2
3
4
5
6
7
8
9
10
11
12
.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;}

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


收藏的用户（0） X
正在加载信息~
最新回复 (0)
全部楼主
返回
发新帖