很早就想制作这样一个页面了，废话不多说， 
先看看效果：传送门
在网上找了很多的代码，试了很久，修改了一些代码，最终就达到了现在的效果。
实现方法：（里面增加了缓存功能，打开页面更快，对数据进行了缓存，不用每次打开页面都查询所有标签然后按首字母分类。）
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
|
/**
* 根据标题首字母制作标签页面
*/
/**
* 拼音首字母
*/
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></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'
);
// 新发表文章/修改文章时
/**
* 根据标签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，然后更名为page-tag.php，然后上传到cpanel面板和page.php相同的路径下面
3.在page-tag.php中最上面添加下面代码：
|
1
2
3
4
5
|
<?php
/*
Template Name: Tags
*/
?>
|
4.把page-tag.php页面中的下面代码
|
1
|
<?php the_content(); ?>
|
修改为：
|
1
|
<?php specs_show_tags(); ?>
|
5.在style.css中加入下面的代码，我根据网上的代码修改了很多，比如开始的时候有li标签的小方块，之后我自己去掉了，又比如开始的时候宽度和我的主题不适合，之后我使用审查元素自己找到问题然后修改了，最后就有了下面的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 !important; 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 !important;float: left;margin: 0 5px 0 0;padding: 5px;list-style-type:none !important;}
.list-unstyled a{color: #333333; padding: 5px 8px;}
.list-inline {width:850px;list-style: none;height:100px; text-align:center; overflow:hidden; padding-top:0em;}
.list-inline li{float: left;list-style-type:none !important;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{color: #f7f8f8;}
.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;}
|
上面的这些CSS代码可能不适合你的主题，有任何问题请评论留言。我会尽快回复。
6.新建一个页面，名字就写“标签”，内容不写，右边的“模板”选择Tags，然后保存即可，最后可以像我一样在菜单中添加标签页的链接就可以了哦！ 
参考网址：
1.http://blog.0660hf.com/261.html
2.http://9iphp.com/opensystem/wordpress/895.html
866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
