wordpress彩色标签云

从wordpress 2.3版本开始,使用wp_tag_cloud函数来调用文章标签显示列表,WP博主可以轻易地通过设置wp_tag_cloud函数的标签参数属性,使标签实现多样化显示。
用法:

<?php wp_tag_cloud( $args ); ?>

具体的参数说明请参考官方说明;例如本站在侧边栏生成标签云

<aside class="tags">
<h2>标签云</h2>
<?php wp_tag_cloud('smallest=12&largest=12&number=45&order=DESC'); ?>
</aside>

添加以下css,具体在每个主题下请自行修改下

.tags{padding: 12px 13px 10px 15px;}
.tags a:nth-child(9n){background-color: #4A4A4A;}
.tags a:nth-child(9n+1){background-color: #428BCA;}
.tags a:nth-child(9n+2){background-color: #5CB85C;}
.tags a:nth-child(9n+3){background-color: #D9534F;}
.tags a:nth-child(9n+4){background-color: #567E95;}
.tags a:nth-child(9n+5){background-color: #B433FF;}
.tags a:nth-child(9n+6){background-color: #00ABA9;}
.tags a:nth-child(9n+7){background-color: #B37333;}
.tags a:nth-child(9n+8){background-color: #FF6600;}
.tags a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 21px}
.tags a:hover{opacity: 1;filter:alpha(opacity=100);}

具体实例看这个图就可以,本站测试后已删除
tag-cloud
现在网上大部分彩色标签云只是改变文字的颜色,而这个是改变标签背景色,看到顺手就扒过来,请不要见怪啊
咳咳,代码肯定不是自己写的啊,但为什么会提到呢,主要是这个nth-child

CSS伪类选择器 nth-child(an+b)

第一种:简单数字序号写法:nth-child(number)直接匹配第number个元素。参数number必须为大于0的整数。
li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/

第二种:倍数写法:nth-child(an)匹配所有倍数为a的元素。其中参数an中的字母n不可缺省,它是倍数写法的标志,如3n、5n。
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/

第三种:倍数分组匹配:nth-child(an+b) 与 :nth-child(an-b)
先对元素进行分组,每组有a个,b为组内成员的序号,其中字母n和加号+不可缺省,位置不可调换,这是该写法的标志,其中a,b均为正整数或0。如3n+1、5n+1。但加号可以变为负号,此时匹配组内的第a-b个。(其实an前面也可以是负号,但留给下一部分讲。)
li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
li:nth-child(3n±0){background:orange;}/*相当于(3n)*/
li:nth-child(±0n+3){background:orange;}/*相当于(3)*/

第四种:反向倍数分组匹配:nth-child(-an+b)
此处一负一正,均不可缺省,否则无意义。这时与:nth-child(an+1)相似,都是匹配第1个,但不同的是它是倒着算的,从第b个开始往回算,所以它所匹配的最多也不会超过b个:
li:nth-child(-3n+8){background:orange;}/*匹配第8、第5和第2个LI*/
li:nth-child(-1n+8){background:orange;}/*或(-n+8),匹配前8个(包括第8个)LI,这个较为实用点,用来限定前面N个匹配常会用到*/

第五种:奇偶匹配:nth-child(odd) 与 :nth-child(even)
分别匹配序号为奇数与偶数的元素。奇数(odd)与(2n+1)结果一样;偶数(even)与(2n+0)及(2n)结果一样。

扯蛋

据说,很多人,这一周就一件事。。。等放假!
经常来的人都知道本博客主题使用是大发的,不过自己扒了一些功能到上面。下午无聊,就琢磨给主题在手机视图上加个菜单,于是就参照大发的优雅的wordpress菜单一步一步操作,一切操作完后,用手机访问,没有达到预期的效果;于是把修改过的地方全部改过来了,结果发现在缩放浏览器窗口时发现侧边栏不会消失(响应式布局),仔细检查修改过代码发现没有问题,于是看了下css

@media screen and (max-width:960px){
#wrapper{margin:0!important}
.fluid{margin-right:0!important}
.single-content{margin-right:0!important}
#wpsidebar{display:none}
.pojshow{width:436px!important}
}

试了下在#wpsidebar后面加上!important,居然有OK了

#wpsidebar{display:none!important}

好奇的是css没变啊,怎么突然会失效了,召唤大发
PS 1:关于!important假如我们定义一个这样的样式:

#box{background-color: #ffffff !important; background-color: #000000;}

那么在支持该语法的浏览器,如Firefox、Opera中,能够理解!important的优先级,背景显示#ffffff颜色,而在IE中则显示#000000.
PS 2:其实一直觉得这个主题有点过窄,于是在css中添加了一下代码

@media screen and (min-width:1280px){
#wrapper{max-width:1130px}
}

这样一改有觉得页面不好看,纠结….

一个字:累

最近真的是很忙了,有快半个月没更新了;虽然很忙,但还是会到处看下,不过留言到真少了。搞了个微博页面,是根据大发的PHP调用新浪微博API ,有兴趣的可以过去围观。
废话不说了,最近看到一个视频,是利用虚拟影像重建技术使邓丽君和周杰伦隔空对唱。
【与邓丽君隔空对唱】杰伦说;如果我能穿越时空,回到30年前,和她合唱一首歌,是多么荣幸的事情。演唱会运用来自好莱坞特效团队的高科技;虚拟影像重建技术;邀请邓丽君与杰伦合唱,邓丽君真实重现的程度令人啧啧称奇!与杰伦跨时空对唱《你怎么说》《红尘客栈》《千里之外》!
[youku]XNjA2NzA2MjA4[/youku]

温馨提示:此处内容需要评论本文后才能查看.

最近一二事

没事唠叨下,最近更新的比较勤快了,哈哈。

1、没事将wordpress更新到3.6版本了,说实话,没明白WP3.6的全新媒体播放器是什么,也懒的去研究了;

2、给主题增加了缩略图,本来是使用的大发主题里自带的,但是在使用七牛云镜像存储加速时缩略图显示不出来(这个会在第3条里在说),没办法就重新换了个,扒的D7主题里的;

3、使用七牛云镜像存储加速,具体可以参考我爱水煮鱼的文章:七牛镜像存储 WordPress 插件:一键实现 WordPress 博客静态文件 CDN 加速。但是如果你网站使用Ajax评论,那么开启加速后回失效,解决方法如下:
找到主题目录下的comments-ajax.js找到下面代码

var i = 0, got = -1, len = document.getElementsByTagName('script').length;
while ( i <= len && got == -1){
var js_url = document.getElementsByTagName('script')[i].src,
got = js_url.indexOf('comments-ajax.js'); i++ ;
}

在这段代码后面加上

js_url = js_url.replace('andy87.qiniudn.com','www.andy87.net');

其中,andy87.qiniudn.com改为你的七牛提供的二级域名,www.andy87.net 改成你的WordPress 站点域名。

基于CSS3 Media Queries的响应式设计

在网上看见的不错,虽然自己菜鸟一个,但还是转过来做篇文章记录下,以作备份。(原文地址见:http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
现在屏幕分辨率的变化范围很大,从 320px (iPhone) 到 2560px (大型显示器),甚至更大。用户也不只是使用台式电脑访问web站点了,也使用手机、笔记本电脑、平板电脑。传统的网站宽度为固定值,已经不能满足需求了。web设计需要适应这种新需求,页面布局需要能够根据访问设备的不同分辨率自动进行调整。本教程将会向你介绍,如何使用html5和CSS3 Media Queries完成跨浏览器的响应式设计。
demo预览地址:http://webdesignerwall.com/demo/adaptive-design/final.html
demo下载地址:http://www.webdesignerwall.com/file/adaptive-design-demo.zip
第一次运行
在开始之前,我们可以查看 最终demo 来查看最终效果。调整你浏览器的大小,我们可以看到页面会根据视窗的大小自动调整布局。
概述
默认情况下,页面容器的宽度是980px,这个尺寸优化了大于1024px的分辨率。Media query用来检查 viewport 宽度,如果小于980px他会变为窄屏显示模式,页面布局将会以流动的宽度代替固定宽度。如果 viewport 小于650px,他会变为mobile显示模式,内容、侧边栏等内容会变为单独列布局方式,他们的宽度占满屏幕宽度。
2012112217253149
HTML代码
在这里,我不会介绍下面html代码中的细节。下面是布局页面的主框架,我们有一个“pagewrap”的容器包装了”header”, “content”, “sidebar”, 和 “footer”。

<div id="pagewrap">
	<header id="header">
		<hgroup>
			<h1 id="site-logo">Demo</h1>
			<h2 id="site-description">Site Description</h2>
		</hgroup>
		<nav>
			<ul id="main-nav">
				<li><a href="#">Home</a></li>
			</ul>
		</nav>
		<form id="searchform">
			<input type="search">
		</form>
	</header>
	<div id="content">
		<article class="post">
			blog post
		</article>
	</div>	
	<aside id="sidebar">
		<section class="widget">
			 widget
		</section>						
	</aside>
	<footer id="footer">
		footer
	</footer>	
</div>

HTML5.js
请注意,我在demo中使用了html5标签,不过IE9之前IE浏览器不支持header,article,footer,figure等html5新标签。可以在html文档中添加 html5.js 文件将解决这一问题。

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

css主体结构   
在这里我也不会解释css文件的细节。页面主容器“pagewrap”的宽度被设置为980px。header被设置为固定高度160px。“content”的宽度为600px,靠左浮动。“sidebar”宽度设置为280px,靠右浮动。

#pagewrap {
    width: 980px;
    margin: 0 auto;
}
#header {
    height: 160px;
}
#content {
    width: 600px;
    float: left;
}
#sidebar {
    width: 280px;
    float: right;
}
#footer {
    clear: both;
}

Step 1 Demo  
 我们可以通过demo查看当前效果。这时我们还没有使用 media queries,调整浏览器宽度,页面布局也不会发生变化。

CSS3 Media Query  
 你可以通过《HTML5实践 — CSS3 Media Queries》了解更多信息。
包含 Media Queries Javascript文件   
IE8和之前的浏览器不支持CSS3 media queries,你可以在页面中添加css3-mediaqueries.js来解决这个问题。

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

包含 Media Queries CSS
创建media query所需的css,然后在页面中添加引用。

	<link href="media-queries.css" rel="stylesheet" type="text/css" />

Viewport小于 980px(流动布局)
当viewport小于980px的时候,将会采用下面的规则:
pagewrap = 宽度设置为 95%
content = 宽度设置为 60%
sidebar = 宽度设置为 30%
tips:使用百分比(%)可以使容器变为不固定的。

@media screen and (max-width: 650px) {
    #header {
        height: auto;
    }
    #searchform {
        position: absolute;
        top: 5px;
        right: 0;
    }
    #main-nav {
        position: static;
    }
    #site-logo {
        margin: 15px 100px 5px 0;
        position: static;
    }
    #site-description {
        margin: 0 0 15px;
        position: static;
    }
    #content {
        width: auto;
        float: none;
        margin: 20px 0;
    }
    #sidebar {
        width: 100%;
        float: none;
        margin: 0;
    }
}

Viewport小于 480px
下面得css是为了应对小于480px屏幕的情况,iphone横屏的时候就是这个宽度。
html = 禁用文字大小调整。 默认情况,iphone增大了字体大小,这样更便于阅读。你可以使用 -webkit-text-size-adjust: none; 来取消这种设置。
main-nav = 字体大小设置为 90%

@media screen and (max-width: 480px) {
    html {
        -webkit-text-size-adjust: none;
    }
    #main-nav a {
        font-size: 90%;
        padding: 10px 8px;
    }
}

弹性的图片
为了让图片尺寸变得更为弹性,可以简单的添加 max-width:100% 和 height:auto。这种方式在IE7中正常工作,不能在IE8中工作,需要使用 width:auto\9 来解决这个问题。

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

弹性的嵌入视频
为了使嵌入视频也变得更加弹性,也可以使用上面的方法。但是不知道什么原因,max-width:100% 在safari浏览器中不能正常的在嵌入资源中工作。我们需要使用width:100% 来代替他。

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

initial-scale Meta 标签 (iPhone)
默认情况下,iphone的safari浏览器会收缩页面,以适应他的屏幕。下面的语句告诉iphone的safari浏览器,使用设备宽度作为viewport的宽度,并且禁用initial-scale.

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

最终效果
查看最终的demo,调整浏览器的大小,查看media query 的行为。你也可以使用iPhone, iPad, 新版Blackberry, 和 Android 来查看modile版的效果。
——————分割线———————–
总结
可靠的Media Queries Javascript
可以使用css3-mediaqueries.js来解决浏览器不支持media queries的问题。

<!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

CSS Media Queries
这一技巧可以创建自适应的设计,可以根据 viewport 的宽度重写布局的css。

@media screen and (max-width: 560px) {
    #content {
        width: auto;
        float: none;
    }
    #sidebar {
        width: 100%;
        float: none;
    }
}

弹性的图片
为了让图片尺寸变得更为弹性,可以简单的添加 max-width:100% 和 height:auto。

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

弹性的内嵌视频
使用width:100% 和 height:auto,可以让内嵌视频变得更加弹性

.video embed,
.video object,
.video iframe {
    width: 100%;
    height: auto;
}

Webkit字体大小调整
使用-webkit-text-size-adjust:none,在iphone上禁用字体大小调整。

html {
    -webkit-text-size-adjust: none;
}

设置iPhone Viewport 和 Initial Scale
下面的语句实现了在iphone中,使用meta标签设置viewport 和 inital scale。

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

原文地址:http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries