WordPress制作一个首字母排序的标签页面-白红宇

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

阅读量：7040 次

发布时间：2019-06-28

本文共 6464 字，大约阅读时间需要 21 分钟。

很早就想制作这样一个页面了，废话不多说，先看看效果：

在网上找了很多的代码，试了很久，修改了一些代码，最终就达到了现在的效果。

实现方法：（里面增加了缓存功能，打开页面更快，对数据进行了缓存，不用每次打开页面都查询所有标签然后按首字母分类。）

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

                                  
/**
* 根据标题首字母制作标签页面
*/
/**
* 拼音首字母
*/
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中最上面添加下面代码：

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

4.把page-tag.php页面中的下面代码

                            
<?php the_content(); ?>

修改为：

                            
<?php specs_show_tags(); ?>

5.在style.css中加入下面的代码，我根据网上的代码修改了很多，比如开始的时候有li标签的小方块，之后我自己去掉了，又比如开始的时候宽度和我的主题不适合，之后我使用审查元素自己找到问题然后修改了，最后就有了下面的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 !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

转载地址：http://ccxal.baihongyu.com/

你可能感兴趣的文章