码疯窝

一直没有接触到wp的代码,一直都在玩玩JS,CSS小打小闹一下,今天该搞搞PHP了吧。

一、标签云
在主页瞄了一下,现在就剩下这个标签云让我最不爽咯。竟然还是静态HTML的。
果断注释掉。可是怎么去生成所有所有的标签呢,是个问题,
BAIDU 一下找着了这个 //www.wpdaxue.com/wp-tag-cloud.html
讲得太详细了,还有制作彩色标签云的方法,非常受用,差那么一点点就是我想要的效果咯,看来自己想要的还得自己动手。
wp-tag-cloud生成的HTML。
竟然自带生成了title和style去区分字体,定义了inline-style的话CSS就不好控制了。
参考上文的那个彩色标签去,我按照我的需求做了一个。
     /**
     * Add numbers and remove the font size.
     * @since  Gcaufy
     */
     function fixTags($text) {
          $text = preg_replace_callback('/.*?<\/a>/i','fixTagsCallBack', $text); return $text; } function fixTagsCallBack($matches) { $count = 0; // Get the article counts if (preg_match('/title=(\'|\")(.*?)(\'|\")/i', $matches[1], $title)) { $count = intval(substr($title[0], 7)); } // Replace the title and style $text = preg_replace('/style=(\'|\”)(.*)(\'|\”)/i', "", str_replace($title[0], '', $matches[0])); // Put the article counts after the tag name return str_replace('', '(' . $count . ')', $text);
     }
     add_filter('wp_tag_cloud', 'fixTags', 1);
代码很简单,我就不解释了。
生成的HTML代码这这样的。
二、上色
拿到了自己想要的HTML代码之后,接下来要做的就是CSS工作咯。
/* tags */
.d_tags {
    padding-top: 10px;
}
.d_tags a:nth-child(9n) {
    background-color: #4A4A4A;
}
.d_tags a:nth-child(9n+1) {
    background-color: #428BCA;
}
.d_tags a:nth-child(9n+2) {
    background-color: #5CB85C;
}
.d_tags a:nth-child(9n+3) {
    background-color: #D9534F;
}
.d_tags a:nth-child(9n+4) {
    background-color: #567E95;
}
.d_tags a:nth-child(9n+5) {
    background-color: #B433FF;
}
.d_tags a:nth-child(9n+6) {
    background-color: #00ABA9;
}
.d_tags a:nth-child(9n+7) {
    background-color: #B37333;
}
.d_tags a:nth-child(9n+8) {
    background-color: #FF6600;
}
.d_tags a {
    background-color: #428BCA;
    color: #FFFFFF;
    display: inline-block;
    line-height: 21px;
    margin: 0 5px 5px 0;
    opacity: 0.8;
    border: 1px solid #EEEEEE;
    border-radius: 5px;
    box-shadow: 1px 1px 1px #B3B3B3;
    padding: 0px 6px;
}
.d_tags a:hover {
    opacity: 1;
    border: none;
    padding: 1px 7px;
}
加上CSS一下子酷炫了很多。效果图:
于是那个分类目录神马的就可以去掉了,直接腾块地方出来。
继续查看有关 日志连载的文章

0个访客评论