saber酱的抱枕

Fly me to the moon

08/21
16:35
学习

制作色彩不同的tag标签

单独查看demo

比较简单的一个小玩意,昨天做的网站里需要这个类似的功能,于是改了下单独发出来。 代码如下:

<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
15:30
学习

wordpress自动设置keywords和description

在主题的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