08/21
2015
比较简单的一个小玩意，昨天做的网站里需要这个类似的功能，于是改了下单独发出来。 代码如下：
<div id="wrap">
<a href="">hug_(artist)</a><a href="">single_shoe</a><a href="">豊聡耳神子</a><a href="">東方 東方project 東方プロジェクト touhou Touhou 东方 东方project</a><a href="">百合 レズ</a><a href="">碧眼</a><a href="">青髪 青い髪 水色髪</a><a href="">髪飾り</a><a href="">花 はな フラワー</a><a href="">short_sleeves</a><a href="">short_sleeves</a><a href="">御札</a>
</div>
<style>
#wrap{width: 900px;}
#wrap a{display: inline-block; padding: 0 10px;margin:0 8px 8px 0;font-family: "Microsoft YaHei";font-size: 13px;color: #fff;line-height: 26px;text-decoration: none;border-radius: 2px;}
#wrap a:hover{opacity: 0.8;transition:all .3s;}
</style>
<script>
function setbg (id,allColor) {//参数为容器id和颜色数组
var alla=document.getElementById("wrap").getElementsByTagName("a");
/*如果展示的区域太窄，可以截取字数以控制a标签的长度，以确保一行最少能有2个或几个
for (var i = 0; i < alla.length; i++) {
if(alla[i].innerHTML.length>8){
alla[i].innerHTML=alla[i].innerHTML.substr(0,7);
}
};
*/
//设置背景颜色
var allcolor=allColor;
usedColor=null; //上次用到的颜色
nowColor=null;//当前随机到的颜色
allaBgIndex=0;//给a标签设置背景颜色时，a的索引数字
bgindex = Math.floor((Math.random()*allcolor.length));
usedColor=allcolor[bgindex]; //先随机一个颜色设置为用过的颜色
for (var i = 0; i < 999; i++) {
bgindex = Math.floor((Math.random()*allcolor.length));
nowColor=allcolor[bgindex]; //随机一个颜色
if (usedColor!=nowColor) { //如果当前颜色和上一个用过的颜色不同，则设置背景色
alla[allaBgIndex].style.backgroundColor=nowColor;
usedColor=nowColor;//把这次用的颜色设置为上次用到的
allaBgIndex++;
if (allaBgIndex==alla.length) {//如果a标签已经全部设置了背景颜色
break;
};
};
};
};
setbg ("wrap",["#448EEF","#E95555","#1369C0","#1AB4C1","#F49129","#2C9F42"]);
</script>
主要的功能就是设置相邻的a标签的背景色不重复了，样式上没有什么难度。
注释里有个蛋疼的截取字数的功能，那是昨天在做网站时弄的。当时的展示区域非常小，宽度只有270多px，但是调取的还是文章标题，都不算短。要求一行最少有两个a标签，只好截取了。截取的缺点就是肯定有一些标签宽度是一样的，这显得很死板，展示区域越窄越明显。
display: inline-block;如果相邻的两个元素不对齐，可以使用vertical-align: top;
制作色彩不同的tag标签
12/31
2014
在主题的header.php中把keywords和description部分的代码改成下面这样：
<?php
if ( is_single ()) //文章页面
{
if ( $post->post_excerpt)
{
$description = $post->post_excerpt;
} else {
$description = mb_strimwidth(strip_tags(apply_filters('the_content',$post->post_content)),0,220);
}
$keywords = "";
$tags = wp_get_post_tags($post->ID);
foreach ($tags as $tag ) {
$keywords = $keywords.$tag->name.","; }
}else if ( is_home ()) //主页
{
$description = "saber酱的抱枕是一个以saber的主题的博客网站，分享一些ACG资源和福利，也会记录生活和学习中的一些事情。";
$keywords = "saber,saber酱,福利,WordPress, dedecms";
}else{ //其他页面，如分类目录、单页面等
$description = "saber酱的抱枕是一个以saber的主题的博客网站，分享一些ACG资源和福利，也会记录生活和学习中的一些事情。";
$keywords = "saber,saber酱,福利,WordPress, dedecms";
}
?>
<meta name = "keywords" content="<?php echo $keywords; ?>" />
<meta name= "description" content="<?php echo $description; ?> "/ >
这样，在首页就会显示自己设置的关键词和简介了。在文章页则会把文章的tag作为关键词，摘取文章开头作为页面简介。
在分类目录里和单页面里我设置的同主页，你也可以设置成别的，或考虑再改进。
参考：
is_home() 是否为主页 is_single() 是否为内容页(Post) is_page() 是否为页面页(Page) is_category() 是否为分类页(Category/Archive) is_author() 是否是作者页面
wordpress自动设置keywords和description
07/14
2014
