一起CSS

当前位置:一起CSS

wordpress中文工具箱使用方法

日期:2008-11-2 分类:WordPress

wordpress 中文工具箱是用来解决官方 WordPress 没有照顾到的中文相关问题。使用这个插件,你可以显示随机文章,最新留言,留言最多文章,发表评论最多的网友,以及真正的文章摘要(如果你的模板里使用的是the_excerpt()来调用内容的话)等等,真正截断,没有乱码。

这个插件由 WordPress 随机文章和 WordPress 评论插件合并增强而来。在激活这个插件之前,请务必先停用这两个插件,不然的话会有冲突。

下载:mulberrykit.zip

安装:

解压缩,把 mulberrykit.php 上传至 /wp-content/plugins/
在管理界面里激活 中文 WordPress 工具箱插件(如果你在使用 WordPress 随机文章和 WordPress 评论插件,务必先停用这两个插件。)

使用说明:

1、最新回响

<?php get_recent_comments(); ?>

调用方式:get_recent_comments($no_comments = 5, $before = '<li> ', $after = '</li>', $show_pass_post = false)

  • $no_comments:显示回响数,缺省为5条
  • $before:每条记录前显示的文字,缺省<li>
  • $after:每条记录后显示的文字,缺省</li>
  • $show_pass_post:是(true)/否(false)显示保护了的文章,缺省否(false)

补充:

kdolphin 在回应里提出,希望在最新回响里不显示自己的回应。这很容易做到。在get_recentcomments() 这个函数里找到这一句:

post_status = 'publish'

在后面加上

AND comment_author != '你的名字或你的帐号'

注意:最好在wp的插件编辑窗口下改,以免乱码的问题。

根据网友的建议加上了两个相关的函数:

  • 仅显示留言,不包括引用 <?php get_recent_comments_only (); ?>
  • 仅显示引用(包括trackback和pingback)<?php get_recent_trackbacks(); ?>

调用方式与<?php get_recent_comments(); ?>相同。

2、最新文章

<?php get_recent_posts(); ?>

调用方式:get_recent_posts($no_posts = 5, $before = '<li>+ ', $after = '</li>', $show_pass_post = false, $skip_posts = 0)

  • $no_posts:显示文章数,缺省为5条
  • $before:每条记录前显示的文字,缺省<li>
  • $after:每条记录后显示的文字,缺省</li>
  • $show_pass_post:是(true)/否(false)显示保护了的文章,缺省否(false)
  • $skip_posts:跳过多少篇文章,缺省为0

3、评论最多的帖子

<?php get_mostcommented(); ?>

调用方式:get_mostcommented($limit = 5)

4、发表评论最多的网友

<?php get_commentmembersstats(); ?>

把代码里面的blogmaster改成你自己的名字,可以滤掉你自己的名字。

调用方式:get_commentmembersstats($threshhold = 5)

5、随机文章

<?php random_posts(); ?>

调用方式: random_posts ($limit = 5, $length = 400, $before = '<li>', $after = '</li>', $show_pass_post = false, $show_excerpt_in_title = true)

  • $limit:显示文章数,缺省5篇
  • $length:摘要长度,缺省400
  • $before:每条记录前显示的文字,缺省<li>
  • $after:每条记录后显示的文字,缺省</li>
  • $show_pass_post:是(true)/否(false)显示保护了的文章,缺省否(false)
  • $show_excerpt_in_title:是(true),摘要显示于文章链接的title;否(false),直接显示于页面;缺省是(true)

6、显示摘要

某些情况下需要输出摘要,比如搜索结果、档案,还有 rss 输出,这样可以节省流量资源。但是,如果你的文章是中文的话,官方 WordPress 输出的其实并不是摘要,它只是把文章里的 html 代码过滤掉了,但所有文字都还是原样输出了。激活这个插件后,输出的就是真正截断的摘要了。

文章转摘自:http://yan.me/dia/wordpress/kit/

查看:1,049 评论:8 标签:,

css2高级选择器

日期:2008-11-1 分类:CSS

用 css 控制页面,必须用好选择器,否则可能会因为 css 的继承及权重等特性而得不到想要的效果。常用的 css 选择器有:标签选择器、类选择器、ID选择器。我们所见到的选择器几乎都是这三种。然而 css2 还有其他选择器,如:子选择器、相邻选择器、属性选择器,用好这些选择器,能少定义 class 或 id。那么这些 css 高级选择器怎么使用呢?

1、子选择器

子选择器,顾名思义就是选择一个元素的子元素,不包括子元素的子元素。它的符号是大于号“>”。如:

XHTML代码:

<p><a href="#">链接1</a><span><a href="#">链接2</a></span></p>

CSS代码:

p>a{
color:#ff0000;
}

你可以点击这里查看效果。

显示效果为“链接1”是红色,而“链接2”则不受影响。如果把“>”换成空格的话,那么css的继承特性会使两个 a 应用样式;如果不用子选择器的话,那就不得不给第一个 a 定义 class 或 id。

2、相邻选择器

相邻选择器就是选择相邻的标签,它的符号是“+”。这里会出现两中情况:

1)如果相邻的两个标签不同,则应用到后一个标签的第一个的标签;

2)如果相邻的两个标签相同,则应用到该标签的除第一个以外的标签(语句有点拗口,看实例能更好的理解)。

以下面的XHTML为例子:

<h2>这是标题</h2>
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<p>这是第三个段落</p>

针对第一种情况:

h2+p{
color:#ff0000;
}

查看效果。效果是第一个p为红色。

针对第二种情况:

p+p{
color:#ff0000;
}

查看效果。效果是除第一个p外的p为红色。

3、属性选择器

属性选择器是针对HTML标签中的属性进行选择的。例:

XHTML代码:

<ul>
<li><a href="http://17css.com" title="home">网站首页</a></li>
<li><a href="#" title="about">关于本站</a></li>
<li><a href="#" title="links">友情链接</a></li>
</ul>

CSS代码:

a[title]{
text-decoration:none;
}
a[title="home"]{
color:#ff0000;
}

查看效果

a[title] 是选择定义了 title 属性的 a 标签,a[title="home"] 是选择定义了 title="home" 的a标签。另:属性可以不加双引号,也可以是单引号,如 a[title="home"] 也可以写成 a[title=home] 或 a[title='home'] 。

从例子中可以看到这三个选择器确实能减少网页中的class或id,但遗憾的是 IE6 均不支持。万恶的 IE6 。不过 IE6 的使用者正在减少,虽然速度比较慢,但这个趋势是不可避免的。

查看:869 评论:4 标签:,

仿淘宝UED主题imitate tb-ued发布

日期:2008-10-30 分类:WordPress

淘宝UED的主题我觉得很不错,想用他的主题,但不好意思问人家要。所以我就“拿”了他的图片,仿着做了这么一个主题。

主题缩略图

本主题已经通过CSS2.1标准的验证,在 IE6 、IE7、FF2 中测试通过(其他浏览器未测试)。

为了增强SEO,头部加了meta(虽然效果已不如从前,但比没有好),即网页关键字和描述。你可以添上相应的内容,不添加也没影响。如果觉得不需要也可以删掉。

由于第一次做主题,技术不够成熟,没有把插件集成到主题里,所以为了显示正常,请安装分页插件WP-PageNavi和wordpress中文工具箱。另:如有其他bug或问题,请留言。

主题下载

查看:983 评论:2 标签:,

再谈overflow清除浮动

日期:2008-10-21 分类:CSS,前端技术

overflow是一种很好的清除浮动的方法(至少我这么认为),先前发表的《三种有效的清除浮动的方法》里介绍了这种方法,从发表到现在也有一段时间了,这期间在其他地方也看到介绍overflow清除浮动文章,但和《三种有效的清除浮动的方法》里面的不太一样,下面就再说说overflow清除浮动。

以下面的XHTML代码为例:

<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>

我以前用的方法是(CSS代码):

#container{
width:1000px;
overflow:hidden;
background:#999999;
}
#left{
width:70%;
height:500px;
float:left;
background:#ff0000;
}
#right{
width:28%;
height:500px;
float:right:
background:#0000ff;
}

这种方法有效的清除了浮动,但 IE6 里没有效果,所以为了兼容 IE6 ,需要为父元素设了一个宽度,并且是一个合适的宽度。

再一种方法是把 overflow:hidden 换成 overflow:auto ,但 IE6 仍然没有效果,为了兼容 IE6 ,还是要做“手脚”,可以为父元素加上 height:1% 或 zoom:1 ,有人说 height:1% 应该写成 _height:1% ,但我并没有发现不加_符号有什么影响。而 zoom:1 则不能通过W3C验证。

总结一下:清除浮动可以用 overflow:hidden 或 overflow:auto ,在比较标准的浏览器里没有问题,但 IE6 没有效果,为了兼容 IE6 ,可以为父元素:

1、设置一个合适的宽度,但“合适的宽度”有的时候不好掌握;

2、加上 height:1% ,什么都不用管,加上就有效,我还没有发现缺点;

3、加上 zoom:1 ,不能通过W3C验证。

为了兼容 IE6 的这三种方法根据自己的实际情况和个人喜好选择吧。

查看:1,051 评论:7 标签:

:hover伪类在IE6中的BUG

日期:2008-10-20 分类:CSS

:hover 是我们在 CSS 设计中最常运用的伪类之一,许多绚丽效果的实现离不开伪类 :hover,比如我们常见的纯 CSS 菜单、相册效果等等。

或许用了这么久的伪类 :hover,还有部分朋友还不完全了解 :hover 的规则:

CSS1 中此伪类仅可用于 a 对象。且对于无 href 属性(特性)的 a 对象,此伪类不发生作用。

CSS2 中此伪类可以应用于任何对象。但目前 IE5.5、IE6 仅支持 CSS1 中的 :hover,不过新出的 IE7 是支持 CSS2 中的 :hover

当我们用伪类 :hover 做某些特殊效果时,依据 CSS2 很好完成,但为了现在占据主流浏览器的 IE6 ,我们又不得不做很多工作,比如给添加 a 元素等来模拟完成最终的效果。

或许这样讲太空洞,请看下面一个常见的触发显示的例子(仅选择 IE6 为例讲解)。

我们先用 CSS2 的写法来实现:

XHTML 部分:

<ul>
	<li>鼠标移过来触发我吧!<a href="#" title="">哈哈,终于被你发现了!</a></li>
</ul>

CSS 部分:

* { margin:0; padding:0;}
ul { list-style:none; margin:100px;}
li { height:100px; width:100px; background:#000; font-size:12px; color:#fff; position:relative;}
li a { display:none;}
li:hover a { display:block; text-decoration:none; width:100px; height:100px; background:#c00;
position:absolute; top:50px; left:50px; color:#fff;}

大家可以测试发现在 Firefox 等对 CSS2 支持很好的浏览器中,可以显示我们所要达到的效果,但在 IE6 中却无法实现。

下面让我们换一种思维,所用 CSS1 的写法来看看,这个时候由于无法支持 li 元素 :hover 的使用,我们只好把所有文字包含到 a 中,对 a 使用 :hover ,并且将要显示隐藏的部分放到 span 元素中,首先我们对 XHTML 进行部分调整,调整如下:

XHTML 部分:

<ul>
	<li><a href="#" title="">鼠标移过来触发我吧!<span>哈哈,终于被你发现</span></a></li>
</ul>

CSS 中我们将 a 的设置成块级元素,并使 a 的大小和宽度和 li 的相同,并设置 a 为相对位置,用 a 来模拟上例中的 li ;而用 span 来模拟上例中的 a ,设置 span 在默认情况下隐藏(display:none;),当 a 被触发时(:hover),则 span 显示(display:block;)

CSS 部分:

* { margin:0; padding:0;}
ul { list-style:none; margin:100px;}
li { height:100px; width:100px; background:#000; font-size:12px;}
li a { display:block; height:100px; width:100px; position:relative; color:#fff; text-decoration:none;}
li span { display:none;}
li a:hover span { display:block; width:100px; height:100px; background:#c00;
position:absolute; top:50px; left:50px; color:#fff;}

可我们发现上例中的效果,在 IE6 中依然无法显示,难道我们的代码写错了,可检查来检查去一点错误也没有(不信你找个高高手问问,他们依然会回答你,这代码完全正确),难道是标准中的说明是错的?还是 IE6 浏览器连 CSS1 也不支持?很多疑问从四面八方跑来了……

那到底是什么问题呢?

不是标准说明的错,也不是 IE 浏览器不支持 CSS1,而是 IE 浏览器自身解析的问题,是 IE5.5 和 IE6 中伪类 :hoverbug

那又该如何解决这个问题呢?

这个 bug 可以通过在链接的属性中增加某些特殊的 CSS 属性声明来消除。

下面我们对上面的第二个例子进行实验,究竟哪些属性可以帮我们来消除这些 bug

CSS 代码我们增加:

li a:hover {}

对其属性我们仅设定 width:100px; 发现在 IE6 中依旧没有变化,我们尝试着更改 width 的 value ,比如使其 width:99px,奇怪的事情发生了,在 IE6 中,隐藏的部分在触发的时候显示出来了。我们再对 li a:hover 的属性仅设定 color 来测试(初始值为 #fff),更改 color 值,发现在 IE6 下却也不能触发显示,奇怪,奇怪,真奇怪……是不是依旧是一头雾水……没关系,继续往下实验,或许归类了我们就能发现规律了!

我们再用其他属性进行设置:width,positon,background,text-decoration,font-size,font-weight,font-family,border,float,display,font-style,margin,padding,text-align,overflow,text-transform,text-indent,z-index,vertical-align。

我们发现除了 text-decoration,color,z-index 不能触发显示(对于不能触发显示的部分,可以还有某些遗漏的属性,欢迎朋友补充)外,其他属性均可以做为消除伪类 :hover bug 的特定属性。

说明:

  • 对于 dispaly 不可以用本例来测试,可另外写个更简单的例子(去除 ul/li,a 和 span 中的 position )。在实际应用中怿飞不建议改变 display 值来做为特定属性消除此 bug,而且在某些例子中此属性不一定能消除 bug
  • 对于做为特定属性的 border 和 background 中的颜色我们还可用全写和简写来改变,如 #fff 和 #ffffff 在消除 bug 中解析为 2 个不同的值。

文章转摘自:PlanABC - 怿飞’s Blog

原文地址:http://www.planabc.net/2007/02/15/ie_hover_bug/

查看:1,168 评论:3 标签:,,

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved