WordPress如何制作(A-Z)纯英文Tags页面
由于自己的游戏攻略站内容多了起来，为了优化用户体验，非常需要作一个Game Lists页面，因为一直是使用的Tags作为游戏分类来使用，那么单独做一个Tags页面就可以实现我的目的，其他也考虑了去Themeforest上去购买相关主题，看中了一个Cloux的主题，因为Tags页面的事情还特意问了一下开发者，开发者告知这个主题的游戏页面属于Post Type，很显然并不能直接用Tags来做游戏专题页面。
网上关于制作A-Z Tags页面的教程并不算多，不过还是有少部分，我的这次成功离不开这些教程的帮助，文中我会把对这次制作有参考意义的教程链接加进来，因为属于摸石子过河，一个并不能难的页面前前后后花了我四五个小时，不过好在最终达成目的。
上传模板
正常情况下，在新建页面之后的页面属性里会有选择模板的选项，不过这个前提是你有模板可供选择，因为我最开始上传模板直接上传到wordpress根目录，这个选项就没出来，Google上找答案被带偏了（说要进php.ini文件里删除scandir函数），我找到这个文件发现这个函数根本就不存在，这才意识到我可能上传错了位置，重新上传后问题解决。
模板制作
在验证了模板上传的可行性之后，我开始是直接使用了WordPress英文标签按A-Z分类排序的页面这篇里面的代码，在替换里面的转义符号之后上传测试发现是可以用的，我有一些意外，其实我没有采用一些中文排序教程主要是觉得里面中文排序部分太累赘了，我这里都是英文Tags是完全不需要的。
既然可以用那就最好，我只需要将页面优化一下，因为原代码里是没有首行A-Z的一个导航，所以我需要加上一个带锚链接的导航，还有对应的字母分类也要加上id。因为既不太懂PHP，加之Html+CSS已经忘得差不多了，这里就踩了很多坑，这里要特别感谢Aimks的这篇教程，我基本上是在这个代码基础逻辑上在之前的那个代码上来修改的。
逻辑部分应该是整个过程中最复杂的一部分，因为有现成的代码可以借鉴，所以其实在这一部分花的时间并没有特别多，在不断修改上传预览再修改再上传预览的努力下成功了。
页面优化
样式部分基本上也是参考Aimks那篇教程里的样式，不过只是在A-Z导航栏那里引用了，其他地方觉得没必要就使用默认样式了。因为HTML+CSS忘得差不多了，这里基本上是变学边改；费时较多。
代码
<?php
/*
Template Name: Game Lists
*/
get_header(); ?>
<div id="primary" class="featured-content content-area">
<main id="main" class="site-main">
<?php
// Print A - Z
$html .= "<ul class='tag-letter' style='list-style-type:none'>";
$html .= "<li><a href='##'>#</a>";
for($i=65;$i<=90;$i++){
$html .= "<li><a href='#".chr($i)."'>".chr($i)."</a>";
}
$html .= "</ul><br>";
// Make an array from A to Z.
$characters = range('A','Z');
// Retrieve all tags
$getTags = get_tags( array( 'order' => 'ASC') );
// Retrieve first letter from tag name
$isFirstCharLetter = ctype_alpha(substr($getTags[0]->name, 0, 1));
// Special Character and Number Loop
// Run a check to see if the first tag starts with a letter
// If it does not, run this
if ( $isFirstCharLetter == false ){
// Print a number container
$html .= "<div class='tag-group'>";
$html .= "<h3 class='tag-title'><a href='/gamelists##'>#</a></h3>";
$html .= "<ul class='tag-list'>";
// Special Character/Number Loop
while( $isFirstCharLetter == false ){
// Get the current tag
$tag = array_shift($getTags);
// Get the current tag link
$tag_link = get_tag_link($tag->term_id);
// Print List Item
$html .= "<li class='tag-item'>";
// Check to see how many tags exist for the current letter then print appropriate code
if ( $tag->count > 1 ) {
$html .= "<p><a href='{$tag_link}' title='View all {$tag->count} articles with the tag of {$tag->name}' class='{$tag->slug}'>";
} else {
$html .= "<p><a href='{$tag_link}' title='View the article tagged {$tag->name}' class='{$tag->slug}'>";
}
// Print tag name and count then close the list item
$html .= "<span class='tag-name'>{$tag->name}</span></a><span class='tag-count'>#{$tag->count}</span></p>";
$html .= "</li>";
// Retrieve first letter from tag name
// Need to redefine the global variable since we are shifting the array
$isFirstCharLetter = ctype_alpha(substr($getTags[0]->name, 0, 1));
}
// Close the containers
$html .= "</ul>";
$html .= "</div>";
}
// Letter Loop
do {
// Get the right letter
$currentLetter = array_shift($characters);
// Print stuff
$html .= "<div class='tag-group'>";
$html .= "<span id='".$currentLetter."'><h3 class='tag-title'>{$currentLetter}</h3></span>";
$html .= "<ul class='tag-list'>";
// While we have tags, run this loop
while($getTags){
// Retrieve first letter from tag name
$firstChar = substr($getTags[0]->name, 0, 1);
// Does the first letter match the current letter?
// Check both upper and lowercase characters for true
if ( strcasecmp($currentLetter, $firstChar) == 0 ){
// Get the current tag
$tag = array_shift($getTags);
// Get the current tag link
$tag_link = get_tag_link($tag->term_id);
// Print stuff
$html .= "<li class='tag-item'>";
// Check to see how many tags exist for the current letter then print appropriate code
if ( $tag->count > 1 ) {
$html .= "<p><a href='{$tag_link}' title='View all {$tag->count} articles with the tag of {$tag->name}' class='{$tag->slug}'>";
} else {
$html .= "<p><a href='{$tag_link}' title='View the article tagged {$tag->name}' class='{$tag->slug}'>";
}
// Print more stuff
$html .= "<span class='tag-name'>{$tag->name}</span></a><span class='tag-count'>#{$tag->count}</span></p>";
$html .= "</li>";
} else {
break 1;
}
}
$html .= "</ul>";
$html .= "</div>";
} while ( $characters ); // Will loop over each character in the array
// Let's see what we got:
echo($html);
?>
</main><!-- #main -->
</div><!-- #primary -->
<?php
get_sidebar();
get_footer();
最后的话
样式没什么特别的就不加上了，其实，不过我这篇并没有引用到里面。这篇主要是介绍如何做英文标签的A-Z Tags页面，中文可以参考91php的按标签首字母分类的标签页面制作教程和文中Aimks的教程，基本上也额能解决问题。