非常大气的标签页面(标签云导航)、标签模板(标签归档)的制作。
2014-10-25_tags-page
实现方法也不难:创建循环输出标签的函数,然后制作标签页面模板,通过循环输出标签函数,最后进行样式化。

步骤一

自定义循环输出标签的函数,加入 functions.php

function inlo_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 "I";
    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 inlo_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 .= inlo_getfirstchar($s2);
    }else{
        $ret .= $s1;
    }
    return strtoupper($ret);
}

function inlo_show_tags() {
    //if(!$output = get_option('inlo_tags_list')){
        $categories = get_terms( 'post_tag', array(
            'orderby'    => 'count',
            'hide_empty' => 1
         ) );
        foreach($categories as $v){
            for($i = 65; $i <= 90; $i++){
                if(inlo_pinyin($v->name) == chr($i)){
                    $r[chr($i)][] = $v;
                }
            }
            for($i=48;$i<=57;$i++){
                if(inlo_pinyin($v->name) == chr($i)){
                    $r[chr($i)][] = $v;
                }
            }
        }
        ksort($r);
        $output = "<ul id='tag-nav'>";
        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><a class='none' href='javascript:;'>".chr($i)."</a></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><a class='none' href='javascript:;'>".chr($i)."</a></li>";
            }
        }
        $output .= "</ul>";
        $output .= "<ul id='my-tags'>";
        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><div class='tag-list clearfix'>";
                foreach($tagi as $tag){
                    $output .= "<a href='".get_tag_link($tag->term_id)."'>".$tag->name."<span class='number'>".inlo_post_count_by_tag($tag->term_id)."</span></a>";
                }
                $output .= '</div>';
            }
        }
        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><div class='tag-list clearfix'>";
                foreach($tagi as $tag){
                    $output .= "<a href='".get_tag_link($tag->term_id)."'>".$tag->name."<span class='number'>".inlo_post_count_by_tag($tag->term_id)."</span></a>";
                }
                $output .= '</div>';
            }
        }
        $output .= "</ul>";
        update_option('inlo_tags_list', $output);
    //}
    echo $output;
}

function inlo_post_count_by_tag ( $arg ,$type = 'include'){
    $args=array(
        $type => $arg,
    );
    $tags = get_tags($args);
    if ($tags) {
        foreach ($tags as $tag) {
            return $tag->count;
        }
    }
}

add_action('save_post', 'clear_tags_cache');
function clear_tags_cache() {
    update_option('inlo_tags_list', '');
}

步骤二

新建一个标签云模板,比如 page-tags.php,加入以下代码

<?php
/*
Template Name: INLO标签页面
*/
?>
<?php get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <div id="main">
        <div class="wrap">
            <div class="breadcrumb"><?php echo get_breadcrumbs();?></div>
            <?php inlo_set_view( get_the_ID() );?>
                <div class="post">
                    <h1 class="post-title"><?php the_title() ?></h1>
                    <div class="p_info">
                        <span class="info_author info_ico"><?php the_author();?></span> 
                        <span class="info_date info_ico"><?php the_time('m-d')?></span>
                        <span class="info_views info_ico"><?php echo inlo_get_view( get_the_ID() );?></span>
                        <span class="info_comment info_ico"><?php echo inlo_comts_count( $post->ID ); ?></span>
                        <span style="font-size:12px;position:relative;top:-1px"><?php edit_post_link('[编辑]'); ?></span>
                    </div>
                    <div id="inlo-page-tags">
                        <?php inlo_show_tags(); ?>
                    </div>
                    <div class="clear"></div>
                </div>
        </div>
    </div>
    <div class="clear"></div>
<?php endwhile; endif;?>
<?php get_footer(); ?>

其中的 inlo_show_tags() 函数就是步骤一中定义好的。

步骤三

相关的CSS,仅作参考

/*标签导航页面*/
#inlo-page-tags{background:#fff;overflow:hidden;padding:25px}
#tag-nav{float:right;width:250px;display: inline-block;letter-spacing: 0px;vertical-align: top;}
#tag-nav li a{float:left;display: inline-block;background-color: #F2F4F6;font-size:15px;margin:3px;border-radius:2px;width:30px;height:30px;line-height:30px;text-align:center;border:1px solid #eee;}
#tag-nav li a.none{background-color:#fff;cursor: not-allowed;border:1px solid #eee;}
#my-tags{float:left;display: inline-block;letter-spacing: 0px;margin-left: 50px;max-width: 700px;width: calc(100% - 200px);}
#my-tags li{overflow: hidden;padding: 20px 0px;border-bottom: 1px dotted #eee;}
#my-tags .tag-name{font-size: 24px;color: rgba(0, 0, 0, 0.44);width: 100px;float: left;margin-top: -20px;font-style: italic;}
#my-tags .tag-list{margin-left: 100px;}
#my-tags .tag-list a{margin-right:15px;padding:5px 0;box-sizing:border-box;float:left;font-size:14px;position:relative;}
#my-tags .tag-list a .number{padding:1px 2px;color:#aaa;display: inline-block;line-height: 1;margin-left:3px;border-radius:1px;background:#F2F4F6;font-size:11px}