saber 酱的抱枕

Fly me to the moon

10/8
2015
学习

修改WordPress标签云

刚才看到网站底部的标签云里,最后一行只有两个tag,感觉很不爽,想调整下显示数量,但是在后台没找到选项。于是又是一番百度,找到了方法。

在主题的functions.php中追加对标签云的设置:

//修改标签云
add_filter('widget_tag_cloud_args','style_tags');  
//修改标签云样式
function style_tags($args) {
$args = array(
  'largest'=> '22',
  'smallest'=> '8',
  'format'=> 'flat',
  'number' => '45',//显示数量
  'orderby' => 'count',
  'order' => 'ASC'
);
return $args;
}

你也可以打开wp-includes/category-template.php,修改wp_tag_cloud这个函数,里面也是这些参数,只不过比这更多些。一些参数的意义如下:

smallest – 定义标签的最小字号,默认为 8;
largest – 定义标签的最大字号,默认为 22;
unit – 设置字号类型,如 “pt” 或 “px” 等,默认为 “pt” 类型;
number – 设置标签云数量,默认显示 45 个标签;
orderby – 设置按 “name” 或 “count” 排序,默认为 “name” 方式;(注:orderby=count 表示按照标签使用次数排列)
order – 设置按 “DESC” 或 “ASC” 升降序排列,默认为 “ASC” 升序。

修改WordPress标签云

08/21
2015
学习

制作色彩不同的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
2014
学习

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