文章
文章用户商铺文档快讯圈子网址导航
!
也想出现在这里？ 联系我们吧
广告位

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

制作一个首字母排序的标签页面，通过代码实现所有站内标签按照 26 个字母进行分类排序。中文按首字母排列标签云有些麻烦，我们必须检索出标签第一个字的拼音的第一个字母，然后进行排序输出。提供用户体验，具体效果如图：

1、第一步

把下面汉字转字母类放到 functions.php 最后一个 ?>

  1. /**
  2. * 汉字转拼音类
  3. * Author: Maker Cloud
  4. * Homepage: https://www.weimahe.com
  5. */
  6. class Chinese_to_PY {
  7. /**
  8. * 拼音字符转换图
  9. * @var array
  10. */
  11. private static $_aMaps = array(
  12. 'a'=>-20319,'ai'=>-20317,'an'=>-20304,'ang'=>-20295,'ao'=>-20292,
  13. 'ba'=>-20283,'bai'=>-20265,'ban'=>-20257,'bang'=>-20242,'bao'=>-20230,'bei'=>-20051,'ben'=>-20036,'beng'=>-20032,'bi'=>-20026,'bian'=>-20002,'biao'=>-19990,'bie'=>-19986,'bin'=>-19982,'bing'=>-19976,'bo'=>-19805,'bu'=>-19784,
  14. 'ca'=>-19775,'cai'=>-19774,'can'=>-19763,'cang'=>-19756,'cao'=>-19751,'ce'=>-19746,'ceng'=>-19741,'cha'=>-19739,'chai'=>-19728,'chan'=>-19725,'chang'=>-19715,'chao'=>-19540,'che'=>-19531,'chen'=>-19525,'cheng'=>-19515,'chi'=>-19500,'chong'=>-19484,'chou'=>-19479,'chu'=>-19467,'chuai'=>-19289,'chuan'=>-19288,'chuang'=>-19281,'chui'=>-19275,'chun'=>-19270,'chuo'=>-19263,'ci'=>-19261,'cong'=>-19249,'cou'=>-19243,'cu'=>-19242,'cuan'=>-19238,'cui'=>-19235,'cun'=>-19227,'cuo'=>-19224,
  15. 'da'=>-19218,'dai'=>-19212,'dan'=>-19038,'dang'=>-19023,'dao'=>-19018,'de'=>-19006,'deng'=>-19003,'di'=>-18996,'dian'=>-18977,'diao'=>-18961,'die'=>-18952,'ding'=>-18783,'diu'=>-18774,'dong'=>-18773,'dou'=>-18763,'du'=>-18756,'duan'=>-18741,'dui'=>-18735,'dun'=>-18731,'duo'=>-18722,
  16. 'e'=>-18710,'en'=>-18697,'er'=>-18696,
  17. 'fa'=>-18526,'fan'=>-18518,'fang'=>-18501,'fei'=>-18490,'fen'=>-18478,'feng'=>-18463,'fo'=>-18448,'fou'=>-18447,'fu'=>-18446,
  18. 'ga'=>-18239,'gai'=>-18237,'gan'=>-18231,'gang'=>-18220,'gao'=>-18211,'ge'=>-18201,'gei'=>-18184,'gen'=>-18183,'geng'=>-18181,'gong'=>-18012,'gou'=>-17997,'gu'=>-17988,'gua'=>-17970,'guai'=>-17964,'guan'=>-17961,'guang'=>-17950,'gui'=>-17947,'gun'=>-17931,'guo'=>-17928,
  19. 'ha'=>-17922,'hai'=>-17759,'han'=>-17752,'hang'=>-17733,'hao'=>-17730,'he'=>-17721,'hei'=>-17703,'hen'=>-17701,'heng'=>-17697,'hong'=>-17692,'hou'=>-17683,'hu'=>-17676,'hua'=>-17496,'huai'=>-17487,'huan'=>-17482,'huang'=>-17468,'hui'=>-17454,'hun'=>-17433,'huo'=>-17427,
  20. 'ji'=>-17417,'jia'=>-17202,'jian'=>-17185,'jiang'=>-16983,'jiao'=>-16970,'jie'=>-16942,'jin'=>-16915,'jing'=>-16733,'jiong'=>-16708,'jiu'=>-16706,'ju'=>-16689,'juan'=>-16664,'jue'=>-16657,'jun'=>-16647,
  21. 'ka'=>-16474,'kai'=>-16470,'kan'=>-16465,'kang'=>-16459,'kao'=>-16452,'ke'=>-16448,'ken'=>-16433,'keng'=>-16429,'kong'=>-16427,'kou'=>-16423,'ku'=>-16419,'kua'=>-16412,'kuai'=>-16407,'kuan'=>-16403,'kuang'=>-16401,'kui'=>-16393,'kun'=>-16220,'kuo'=>-16216,
  22. 'la'=>-16212,'lai'=>-16205,'lan'=>-16202,'lang'=>-16187,'lao'=>-16180,'le'=>-16171,'lei'=>-16169,'leng'=>-16158,'li'=>-16155,'lia'=>-15959,'lian'=>-15958,'liang'=>-15944,'liao'=>-15933,'lie'=>-15920,'lin'=>-15915,'ling'=>-15903,'liu'=>-15889,'long'=>-15878,'lou'=>-15707,'lu'=>-15701,'lv'=>-15681,'luan'=>-15667,'lue'=>-15661,'lun'=>-15659,'luo'=>-15652,
  23. 'ma'=>-15640,'mai'=>-15631,'man'=>-15625,'mang'=>-15454,'mao'=>-15448,'me'=>-15436,'mei'=>-15435,'men'=>-15419,'meng'=>-15416,'mi'=>-15408,'mian'=>-15394,'miao'=>-15385,'mie'=>-15377,'min'=>-15375,'ming'=>-15369,'miu'=>-15363,'mo'=>-15362,'mou'=>-15183,'mu'=>-15180,
  24. 'na'=>-15165,'nai'=>-15158,'nan'=>-15153,'nang'=>-15150,'nao'=>-15149,'ne'=>-15144,'nei'=>-15143,'nen'=>-15141,'neng'=>-15140,'ni'=>-15139,'nian'=>-15128,'niang'=>-15121,'niao'=>-15119,'nie'=>-15117,'nin'=>-15110,'ning'=>-15109,'niu'=>-14941,'nong'=>-14937,'nu'=>-14933,'nv'=>-14930,'nuan'=>-14929,'nue'=>-14928,'nuo'=>-14926,
  25. 'o'=>-14922,'ou'=>-14921,
  26. 'pa'=>-14914,'pai'=>-14908,'pan'=>-14902,'pang'=>-14894,'pao'=>-14889,'pei'=>-14882,'pen'=>-14873,'peng'=>-14871,'pi'=>-14857,'pian'=>-14678,'piao'=>-14674,'pie'=>-14670,'pin'=>-14668,'ping'=>-14663,'po'=>-14654,'pu'=>-14645,
  27. 'qi'=>-14630,'qia'=>-14594,'qian'=>-14429,'qiang'=>-14407,'qiao'=>-14399,'qie'=>-14384,'qin'=>-14379,'qing'=>-14368,'qiong'=>-14355,'qiu'=>-14353,'qu'=>-14345,'quan'=>-14170,'que'=>-14159,'qun'=>-14151,
  28. 'ran'=>-14149,'rang'=>-14145,'rao'=>-14140,'re'=>-14137,'ren'=>-14135,'reng'=>-14125,'ri'=>-14123,'rong'=>-14122,'rou'=>-14112,'ru'=>-14109,'ruan'=>-14099,'rui'=>-14097,'run'=>-14094,'ruo'=>-14092,
  29. 'sa'=>-14090,'sai'=>-14087,'san'=>-14083,'sang'=>-13917,'sao'=>-13914,'se'=>-13910,'sen'=>-13907,'seng'=>-13906,'sha'=>-13905,'shai'=>-13896,'shan'=>-13894,'shang'=>-13878,'shao'=>-13870,'she'=>-13859,'shen'=>-13847,'sheng'=>-13831,'shi'=>-13658,'shou'=>-13611,'shu'=>-13601,'shua'=>-13406,'shuai'=>-13404,'shuan'=>-13400,'shuang'=>-13398,'shui'=>-13395,'shun'=>-13391,'shuo'=>-13387,'si'=>-13383,'song'=>-13367,'sou'=>-13359,'su'=>-13356,'suan'=>-13343,'sui'=>-13340,'sun'=>-13329,'suo'=>-13326,
  30. 'ta'=>-13318,'tai'=>-13147,'tan'=>-13138,'tang'=>-13120,'tao'=>-13107,'te'=>-13096,'teng'=>-13095,'ti'=>-13091,'tian'=>-13076,'tiao'=>-13068,'tie'=>-13063,'ting'=>-13060,'tong'=>-12888,'tou'=>-12875,'tu'=>-12871,'tuan'=>-12860,'tui'=>-12858,'tun'=>-12852,'tuo'=>-12849,
  31. 'wa'=>-12838,'wai'=>-12831,'wan'=>-12829,'wang'=>-12812,'wei'=>-12802,'wen'=>-12607,'weng'=>-12597,'wo'=>-12594,'wu'=>-12585,
  32. 'xi'=>-12556,'xia'=>-12359,'xian'=>-12346,'xiang'=>-12320,'xiao'=>-12300,'xie'=>-12120,'xin'=>-12099,'xing'=>-12089,'xiong'=>-12074,'xiu'=>-12067,'xu'=>-12058,'xuan'=>-12039,'xue'=>-11867,'xun'=>-11861,
  33. 'ya'=>-11847,'yan'=>-11831,'yang'=>-11798,'yao'=>-11781,'ye'=>-11604,'yi'=>-11589,'yin'=>-11536,'ying'=>-11358,'yo'=>-11340,'yong'=>-11339,'you'=>-11324,'yu'=>-11303,'yuan'=>-11097,'yue'=>-11077,'yun'=>-11067,
  34. 'za'=>-11055,'zai'=>-11052,'zan'=>-11045,'zang'=>-11041,'zao'=>-11038,'ze'=>-11024,'zei'=>-11020,'zen'=>-11019,'zeng'=>-11018,'zha'=>-11014,'zhai'=>-10838,'zhan'=>-10832,'zhang'=>-10815,'zhao'=>-10800,'zhe'=>-10790,'zhen'=>-10780,'zheng'=>-10764,'zhi'=>-10587,'zhong'=>-10544,'zhou'=>-10533,'zhu'=>-10519,'zhua'=>-10331,'zhuai'=>-10329,'zhuan'=>-10328,'zhuang'=>-10322,'zhui'=>-10315,'zhun'=>-10309,'zhuo'=>-10307,'zi'=>-10296,'zong'=>-10281,'zou'=>-10274,'zu'=>-10270,'zuan'=>-10262,'zui'=>-10260,'zun'=>-10256,'zuo'=>-10254
  35. );
  36. /**
  37. * 将中文编码成拼音
  38. * @param string $chinese 要转换为拼音的字符串
  39. * @param string $sRetFormat 返回格式 [first:每个字的首字母|all:全拼音|one:字符串字母]
  40. * @return string
  41. */
  42. public static function getPY($chinese, $sRetFormat='first'){
  43. $sGBK = iconv('UTF-8', 'GBK', $chinese);
  44. $sUTF8 = iconv('GBK', 'UTF-8', $sGBK);
  45. if($sUTF8 != $chinese) $sGBK = $chinese;
  46. $aBuf = array();
  47. for ($i=0, $iLoop=strlen($sGBK); $i<$iLoop; $i++) {
  48. $iChr = ord($sGBK{$i});
  49. if ($iChr>160)
  50. $iChr = ($iChr<<8) + ord($sGBK{++$i}) - 65536;
  51. if ('first' == $sRetFormat || 'one' == $sRetFormat)
  52. $aBuf[] = substr(self::zh2py($iChr),0,1);
  53. else
  54. $aBuf[] = self::zh2py($iChr);
  55. }
  56. if ('first' === $sRetFormat)
  57. return implode('', $aBuf);
  58. elseif('one' == $sRetFormat)
  59. return $aBuf[0];
  60. else
  61. return implode(' ', $aBuf);
  62. }
  63. /**
  64. * 中文转换到拼音(每次处理一个字符)
  65. * @param number $iWORD 待处理字符双字节
  66. * @return string 拼音
  67. */
  68. private static function zh2py($iWORD) {
  69. if($iWORD>0 && $iWORD<160 ) {
  70. return chr($iWORD);
  71. } elseif ($iWORD<-20319||$iWORD>-10247) {
  72. return '';
  73. } else {
  74. foreach (self::$_aMaps as $py => $code) {
  75. if($code > $iWORD) break;
  76. $result = $py;
  77. }
  78. return $result;
  79. }
  80. }
  81. }

2、第二步

接着就是获取所有标签生成标签页的代码（依然放入主题 functions.php 函数文件中）：

  1. function specs_show_tags() {
  2. if(!$output = get_option('specs_tags_list')){
  3. $categories = get_terms( 'post_tag', array(
  4. 'orderby' => 'count',
  5. 'hide_empty' => 1
  6. ) );
  7. $r = array();
  8. foreach($categories as $v){
  9. for($i = 65; $i <= 90; $i++){
  10. if(strtoupper(Chinese_to_PY::getPY($v->name,'one')) == chr($i)){
  11. $r[chr($i)][] = $v;
  12. }
  13. }
  14. for($i=48;$i<=57;$i++){
  15. if(strtoupper(Chinese_to_PY::getPY($v->name,'one')) == chr($i)){
  16. $r[chr($i)][] = $v;
  17. }
  18. }
  19. }
  20. ksort($r);
  21. $output = "<ul class='list-inline' id='tag_letter'>";
  22. for($i=65;$i<=90;$i++){
  23. $tagi = $r[chr($i)];
  24. if(is_array($tagi)){
  25. $output .= "<li><a href='#".chr($i)."'>".chr($i)."</a></li>";
  26. }else{
  27. $output .= "<li>".chr($i)."</li>";
  28. }
  29. }
  30. for($i=48;$i<=57;$i++){
  31. $tagi = $r[chr($i)];
  32. if(is_array($tagi)){
  33. $output .= "<li><a href='#".chr($i)."'>".chr($i)."</a></li>";
  34. }else{
  35. $output .= "<li>".chr($i)."</li>";
  36. }
  37. }
  38. $output .= "</ul>";
  39. $output .= "<ul id='all_tags' class='list-unstyled'>";
  40. for($i=65;$i<=90;$i++){
  41. $tagi = $r[chr($i)];
  42. if(is_array($tagi)){
  43. $output .= "<li id='https://www.22vd.com/".chr($i)."'><h4 class='tag_name'>".chr($i)."</h4>";
  44. foreach($tagi as $tag){
  45. $output .= "<a href='https://www.22vd.com/".get_tag_link($tag->term_id)."'>".$tag->name."(".$tag->count.")</a>";
  46. }
  47. }
  48. }
  49. for($i=48;$i<=57;$i++){
  50. $tagi = $r[chr($i)];
  51. if(is_array($tagi)){
  52. $output .= "<li id='https://www.22vd.com/".chr($i)."'><h4 class='tag_name'>".chr($i)."</h4>";
  53. foreach($tagi as $tag){
  54. $output .= "<a href='https://www.22vd.com/".get_tag_link($tag->term_id)."'>".$tag->name."(".$tag->count.")</a>";
  55. }
  56. }
  57. }
  58. $output .= "</ul>";
  59. update_option('specs_tags_list', $output);
  60. }
  61. echo $output;
  62. }
  63. function clear_tags_cache() {
  64. update_option('specs_tags_list', ''); // 清空 specs_archives_list
  65. }
  66. add_action('save_post', 'clear_tags_cache'); // 新发表文章/修改文章时

然后复制一份 page.php 文件，把其中 <?php the_content(); ?> 部分换成 <?php specs_show_tags(); ?>，并把 Template Name 名字替换为“标签页面”，然后在后台新建一个页面，模板选择“标签页面”，保存即可。

3、第三步

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

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

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

已有 722 人购买
    此资源下载价格为2元立即购买（VIP 免费）立即升级
查看演示升级 VIP立刻购买

给TA打赏
共{{data.count}}人
人已打赏
CSSDIVwordpress代码标签
WordPress教程

wordpress代码检测当前页面百度是否收录

2024-5-24 9:34:34

WordPress教程

实现WordPress站内搜索结果URL伪静态化

2024-5-31 10:22:15

下载说明

  • 1、微码盒所提供的压缩包若无特别说明，解压密码均为weimahe.com；
  • 2、下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;
  • 4、资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行反馈，以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程，这里不一一讲解。

站长声明

本站大部分下载资源收集于网络，只做学习和交流使用，版权归原作者所有；若为付费资源，请在下载后24小时之内自觉删除；若作商业用途，请到原网站购买；由于未及时购买和付费发生的侵权行为，与本站无关。本站发布的内容若侵犯到您的权益，请联系本站删除，我们将及时处理！
0 条回复 A文章作者 M管理员
    暂无讨论，说说你的看法吧
❯

解锁会员权限

开通会员

解锁海量优质VIP资源

立刻开通
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索

  • 扫码打开当前页

返回顶部