<?php if ( get_post_meta($post->ID, ‘thumbnail’, true) ) : ?>
<?php $image = get_post_meta($post->ID, ‘thumbnail’, true); ?>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php echo $image; ?>” alt=”<?php the_title(); ?>”/></a>
<?php else: ?>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php bloginfo(‘template_directory’); ?>/images/img.jpg” alt=”<?php the_title(); ?>” /></a>
<?php endif; ?>

只需在默认占位图链接位置添加一句rand()函数就可随机调用特定目录下的多个图片，下面是修改后的：

<?php if ( get_post_meta($post->ID, ‘thumbnail’, true) ) : ?>
<?php $image = get_post_meta($post->ID, ‘thumbnail’, true); ?>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php echo $image; ?>” alt=”<?php the_title(); ?>”/></a>
<?php else: ?>
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”<?php the_title(); ?>”><img src=”<?php bloginfo(‘template_directory’); ?>/images/random/img<?php echo rand(1,5)?>.jpg” alt=”<?php the_title(); ?>” /></a>
<?php endif; ?>

修改后的代码说明：

/images/random/img<?php echo rand(1,5)?>.jpg

前面的img是图片的名称，我们可以新建几个名称为：img1.jpg, img2.jpg,img3.jpg,img4.jpg,img5.jpg的图片，放到/images/random/（图片所在的位置，可根据实际修改。）目录中，也可以是其它格式的图片。将上面的代码添加到模板适当位置，刷新一下页面看看效果如何。
大家可以刷新一下我博客的首页zmingcx.com，看看随机缩略图的实际效果，还是很不错，不过大家要手下留情，刷几下也就算了，呵呵…

http://myblog.com/?themedemo=the-theme-folder-name

可以到All Themes & Stats选项中复制需要演示的主题链接到你的主题发布页面上，浏览者直接点击就可以了。

可以点此查看效果：http://demo.zmingcx.com/?themedemo=HotNews

Examples of Post Thumbnails

A very Unique Solution on Tutorial9

Introducing, a true master at making an interesting post thumbnails, Mr David Leggett. In this case a very bold & unique use of the content (icons) to create a memorable thumbnail.

Clean and crisp thumbnail on AppStorm

A very clean lighting effect in the background with a modern font & great colors to catch attention. Notice the 1pixel white drop shadow on the word “interview” – a simple & effective approach.

Keeping your Photographs Relevant (UX Booth)

Another fantastic example from David Leggett. This time he’s not relied on his skill in Photoshop, he’s simply relied on that old favorite the photograph. A good looking, and relevant photo perfects your content perfectly.

Clever use of Screenshots on Obox

This example by Obox shows how placement of the elements on the thumbnail can generate interest. You get a sneak peak at the content with some cleverly placed screenshots with a good background lighting effect and the all important text which looks fantastic and the contrast is perfect.

Picking the Perfect Image, Courtesy of DesignShard

Again, Keeping your image relevant is a must. And in this example another photo, but it has 3 things: simplicity, visual impact and relevance.

OutlawDesign Makes the Thumbnails Part of the Design

Two great examples on Outlaw Design Blog. We see a stunning Photograph on one, and on the other one of the logo’s from inside the post has been chosen for the thumbnail, a great visual impact.

You can also start to see how the blog design benefits from showcasing multiple good looking thumbnails. The post thumbnails really become part of the design in this case.

UxBooth again with Text Over Photographs

Using fantastic looking text on top of some really appealing images can be a real hit. This is a great example of strong typographic elements on top of a crisp & relevant photograph.

WebDesignLedger Improve Exploration

Apart from looking great, a relevant & good looking thumbnail can help visitors navigate through your posts. This is particularly important if you have a lot of posts on your blog or site.

继续阅读下页

?

Apple 无疑是在数码产品与 IT 行业中最成功的设计公司，Apple 的设计思路影响了这一代的竞争对手、设计师以及消费者，一些设计元素（如前述）几乎成为 Apple 的第二标志。本文从一个普通消费者的角度来谈论这些帮助建立 Apple 企业形象的辅助设计元素，看看 Apple 是如何运用这些不起眼的细节吸引消费者的。

网站设计
大即是美

进入 Apple 官方网站首页，抛去网页各个模块加载速度不同不谈，一般人首先都会被中央的大幅宣传照片吸引。这一部分通常占据了整 个首页页面面积的 70% 以上，放置了热卖的某个产品图片、最新上市的某个软件宣传画。

与其他传统公司网站不同，Apple 只在首页推荐一款产品，而要查询其他产品则要通过上方的导航条或者下方稍小的介绍图片进入。并且，Apple 也不为单一产品建立网站，例如输入 www.ipod.com 会转入 Apple.com 的 iPod 系列页面中。Apple 也大量运用精致的产品图片配上少量的文字来解释产品的特性，通常是一张图片 + 一句话简介 + 寥寥几行稍详细介绍，力图用图片来吸引消费者而不是详尽的文字。

另外值得一提的是，Apple 在其网站上几乎不用几乎是网页标准的 Flash 来展示产品，而是“固执”地使用自家的 Quicktime，想要看更多内容？请先下载 Quicktime，Apple 又傲慢地完成了一次产品推销。

产品与包装

photo via NYDailyNews by Sullivan/Getty

photo via engadget

关于 Apple 的设计已经无需老生常谈，但是 Apple 爱使用彩虹般的配色则毋庸置疑。只要可能，Apple 可以将某个产品制作成很多种不同颜色的款式。从最开始 iMac 五彩显示器到现在 iPod nano 多达九种颜色，并且 Apple 总是将它们以非常漂亮的方式排列起来，让消费者看起来就像是彩虹一般的产品。

如上图，显示屏中唱片封面的颜色跟 iPod nano 颜色是一致的。

而在最近的一些手持设备中，Apple 也越来越喜欢运用大面积反光强烈的不锈钢材质，我自己有个女性朋友就戏称她买 iPod Classic 就是拿来当镜子用的。虽然不锈钢无法抵挡擦挂、指纹的破坏，但 Apple 也越来越喜欢强调金属质感与反光。如上 图，三台 iPod Touch 这样摆放，想不被那迷人的“背影”吸引都难。

photo via flickr by whiteXbread

Apple 产品的包装我相信每一位 Apple 用户都会赞不绝口。Apple 不用透明塑料袋，也没有绑线用的铁质扎丝，每一根线缆都很完美得弯曲在透明封套中，而产品、说明书也是非常整齐合理得“挤”在包装中。换作其他品牌，这几 乎是不可能的事。

平面、电视广告
简约

上图是著名的诋毁微软系列广告 Get a Mac 中的截图，画面中只有白色布景和两个分别代表 PC 和 Mac 的演员。实际上 Apple 一致是如此：大部分的广告与宣传画不需要背景衬托，通常是朴素背景（黑、白、灰）， 完全靠产品本身的设计，这样的做法使得产品更加素雅。就连大部分的电视广告、教学影片中，也只出现白色背景、产品和把玩产品的手，最多再加一个来自 Genius Bar 的工作人员。当然不仅是广告，前面讲到的 Apple 网站设计、包装设计都遵循这一规则：最小化的背景，最大化 的产品照片。

Apple 的推销邮件也是如此，每当有新产品上市时 Apple 都将发送新产品的推销邮件。虽然其他公司也是如此，并且也使用 HTML 让邮件更漂亮。但 Apple 的邮件看起来就像他们的官方网站一样美观：同样的留白、大字体、清晰的产品照片，并且 布局也力求与网站布局一致。

实际上 Apple 很喜欢这样的宣传方式，无论是 Apple 各种大会上的 Keynote、平面广告、电视广告还是邮件上：左 右交叉布置的产品照片，大字号的产品一句话简介或描述，几行稍小字号的详细介绍。

如果说这样的设计有什么问题的话，那就是 Apple 在将来是继续保持这种风格，还是突破自我打破陈规，抑或走中间路线的问题了。毕竟从设计美学上来讲，还没有如此庞大的公司与它抗衡。生于忧患而死于安乐， 缺少竞争从来就不是好事情。

原文：http://www.geedr.com/apple-assistant-design-elements.html

接下来我会给大家列一些要点，并附上相应的例子，与大家分享我在别人的网页设计中寻找“高品质”的过程。

1、留白

在好的网页设计中我最留意的是那些对设计元素之间留白的聪明运用。留心不同内容区块之间的间距和排列方式，能让你的设计的整体感官大不一样，从 而提升设计的品质。

我觉得处理好留白的关键是从整体上感知设计元素。把设计稿缩小观看会是个好办法。

出色的留白处理的实例：Good.Is

页面整洁而有开放感，全都得益于设计师对文字和图像之间留白量的准确把握。

图1

Digital Mash

在大空白上展示的元素往往更具吸引力。Digital Mash的网站创造了极佳的亲和力。

图2

Creatica Daily的大量空白

优秀的留白运用又一次让网页内容成为焦点。每篇文章中都有大量内容，不过该站点的设计师们并不惮于给这么多内容之间填上大量留白。并不是说你的 文字不够多，就不能用很多留白。

图3

Postbox上也有很多空白

仔细观察Postbox的网站，你能看到边缘处的留白应该如何处理。它的方框边缘有60像素的边内留白。听起来似乎挺大的，实际看起来效果却好 极了。

图4

留白时的错误

大家在设计留白时的最常见问题就是各个区块的内容到边缘距离太小。不论你的设计多么有风格，如果你硬要把东西塞得紧紧的，这些风格连同设计的品 质，就都流失了。

留白不够的例子

我们已经看到PostBox的网站那些大留白创造了多么动人的效果，所以下面我们修改一下它的页面，看看减少留白会是什么效果。品质感明显下降 了。留白的影响就有这么大。

图5

高效控制留白的技巧

各种不同情况下，留白要求都不尽相同。你需要不断训练自己，做到对留白所能带来的改变时刻心中有数，从而有效地利用留白满足设计需求。这要靠个 人感觉的，不过都能从实践中锻炼出来。

·使用网格辅助设计：利用网格当然能帮助你理解元素之间的空白。

·不断尝试：不断尝试—失败—尝试，直到找到最佳方案。

·留白并不是浪费空间：空白并不总是等着你去填充的。

·没错，少就是多：与其用尽心思填满某个区域，不如就把它留空，只保留至关重要的信息就好。

　　目前我用的这个热点新闻主题由于有缩略图功能所以也试着加上看看效果如何。这里把这一功能应用到WordPress主题方法说一下，其实很简单，首先下载jquery.lazyloa.js，放到主题目录中，然后在header.php模板文件</head>标签前添加如下代码：

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’);?>/js/jquery.lazyload.js”></script>
<script type=”text/javascript”>
$(function() {
$(“img”).lazyload({
effect : “fadeIn”
});
});
</script>

其中img是延迟加载所有图片，也可以根据不同模板作相应改动，比如我这个主题，可以改成#post img，这样只延迟加载#post 容器内的图片，否则可能影响到侧边图片的加载，主要是留言者头像可能会最后加载；

fadeIn是图片显示效果

这样基本就可以了！

如果上面的功能可能没有达到你的要求，还有几个选项可供设置。

可以设置阀值来控制 灵敏度

$(“img”).lazyload({ threshold : 200 });

把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件

$(“img”).lazyload({
placeholder : “img/grey.gif”,
event : “click”
});

还可以通过定义effect 参数来定义一些图片显示效果

$(“img”).lazyload({
placeholder : “img/grey.gif”,
effect : “fadeIn”
});

事件触发加载，事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

$(“img”).lazyload({
placeholder : “img/grey.gif”,
event : “click”
});

延迟加载图片，Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载.

$(function() {
$(“img:below-the-fold”).lazyload({
placeholder : “img/grey.gif”,
event : “sporty”
});
});
$(window).bind(“load”, function() {
var timeout = setTimeout(function() {$(“img”).trigger(“sporty”)}, 5000);
});

图片在容器里面你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面.

CSS

#container {
height: 600px;
overflow: scroll;
}

JavaScript 代码:

$(“img”).lazyload({
placeholder : “img/grey.gif”,
container: $(“#container”)
});

当图片不顺序排列,滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.

$(“img”).lazyload({
failurelimit : 10
});

下载地址： source, minified or packed

看 一下演示 | 下 载 CSS sprites + 圆角

您还可以参考一下文章：

43个 PSD转XHTML, CSS教程

我们将怎样来处理?

我处理圆角的版本是由内置的绝对定位的四个div组成，每个div都有唯一的圆角图片作CSS Sprite操作。我们将会这样做:

是什么方式导致这项技术表现得这么了不起呢（What makes this technique cool）?

通过可变的宽度和高度处理毗邻的元素的能力。没有极限。（The ability to make rounded-bordered elements with fluid width and height. No limits whatsoever.） 这项技术，正如我之前提到的，是与 CSS Sprites 结合操作完成的。如果您不知道这是项怎样的技术或者说不知道怎么使用它，那么请先阅读我 之 前的文章。CSS sprites 都学会了吗? 那我们就开始吧!

第一步: 创建我们的 Sprite

1. 为矩形圆角图片处理选择一款编辑器 (在这个案例中我选择的是Firework).
2. 切割并且导出圆角到本地临时位置 (我们将会在之后用到).
3. 新创建一个文件，将圆角导入到这个新文件中，复制三次，然后旋转这三个新切片得到另外的三个圆角。
4. 合成四个圆角为一张图片, 并用 1px 的红线 来区分它们.
5. 导出合成图片，sprite 也就大功告成了。

第二步: HTML 代码

首先，我们会给容器 div 一个 .roundedBox类 :

<div class=”roundedBox”></div>

现在，我们必须再增加四个 div ，这会在将来创建圆角的时候用到。之后必须给每个加载一个类 .corner， 同时也标识一个类来指定它们格子的位置。

<div>
<strong>My content in roundedBox Type 1</strong>
<div class=”corner topLeft”></div>
<div class=”corner topRight”></div>

<div class=”corner bottomLeft”></div>
<div class=”corner bottomRight”></div>
</div>

一切搞定? 嗯，让我们把注意力再转移到 CSS 代码上来。

第三步: CSS 代码

如你所知, (或者您会在这里快速学习到) 绝对定位元素通常都依照相对定位的父元素进行定位。. If this element is not defined, they will take as their parent relatively-positioned element, the body tag.如果这个父元素无法界定，那么它会去最近作相对定位的那个父元素，直至 body 标签。 哈?! – 好了，如果到此为止您仍没有掌握，不用担心，我们将在第二部分了解它。（翻译得有点拗，附上原文：Ok, if you didn’t get this, don’t worry, you’ll catch it in an second.）

让我们先来定义下所有的圆角

所有的圆角都必须定义绝对定位，并且注明高度跟宽度。 我的圆角定义的宽度跟高度都是 17px.

.corner {
position:absolute;
width:17px;
height:17px;
}

如果您是第一次切割矩形圆角，那么宽度跟高度很可能会不一样 (咄!)。

现在开始定义 div 容器样式:

.roundedBox {position:relative;}

任何定义有类 .roundedBox 的元素内，绝对定位元素都会相对于这个元素进行定位，而不是标签 body。 我们也必须设置一些padding值，如果没有设置，圆角将会覆盖我们的文本，这肯定不是我们想要的效果。 重要提示: top 和 bottom padding 值必须 等价于圆角的 height。left 和 right padding 值必须等价于圆角的宽度。 正如您已经知道的，我的圆角宽度跟高度是相等的，因此，四个边角的padding 值也是相等的:

.roundedBox {position:relative; padding:17px; margin:10px 0;}

我也通过 margin 给我们的 div 流出了一定的空隙

最后，让我们对没有圆角作单独定义

我们会对每个圆角作绝对定位设置，并且定位背景图的位置 (根据我们的 sprite):

.roundedBox {position:relative; padding:17px; margin:10px 0;}

.corner {position:absolute; width:17px; height:17px;}

.topLeft {top:0; left:0; background-position:-1px -1px;}
.topRight {top:0; right:0; background-position:-19px -1px;}
.bottomLeft {bottom:0; left:0; background-position:-1px -19px;}
.bottomRight {bottom:0; right:0; background-position:-19px -19px;}

您可能已经注意到，我们的样式仍然还没有下载 sprite。我们一般不会去定义它们的原因是，我们会使用另外的方法。

圆形盒模型 1 (蓝色)

HTML 代码

<div id=”type1″>
<strong>My content in roundedBox Type 1</strong>

<div></div>
<div></div>
<div></div>
<div></div>
</div>

我们必须给容器 div 定义一个ID为 #type1，用来实施特殊背景。

CSS 代码

首先，我们得给 #type1 匹配一个背景色，使之融合于 sprite 中的圆角:

#type1 {background-color:#CCDEDE;}

之后，通过定义 .corner 类来协助圆形盒模型载入 Sprite 样式:

#type1 {background-color:#CCDEDE;}
    #type1 .corner {background-image:url(../images/corners-type1.gif);}
 好了，我们的第一个圆角矩形大功告成了！预 览圆角矩形模型1 (蓝色)

.
圆形盒模型 2 (绿色) / 圆形盒模型 3 (紫色)

模型1，模型2跟模型3的唯一差别就是它们的颜色，所以我们也仅仅只修改这些。
模型 2 (绿色)

HTML 代码


<div id="type2">
    <strong>My content in roundedBox Type 2</strong>

    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>


CSS 代码 (仅仅修改 sprites 的颜色及背景色)  


#type2 {background-color:#CDDFCA;}
    #type2 .corner {background-image:url(../images/corners-type2.gif);}


预 览圆角矩形模型2 (绿色)

.
模型 3 (紫色)

HTML 代码


<div id="type3">
    <strong>My content in roundedBox Type 3</strong>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
</div>


CSS 代码 (仅仅修改 sprites 的颜色及背景色)  


#type3 {background-color:#D3CADF;}
    #type3 .corner {background-image:url(../images/corners-type3.gif);}


预 览圆角矩形模型 3 (紫色).  都学会了吗？好，现在我们再进一步学习 
模型 4 (红色边框)

模型4 跟模型1、2、3又有什么区别呢？边框和颜色，让我们来解决这些因素吧。
HTML 代码


<div id="type4">
    <strong>My content in roundedBox Type 4</strong>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
</div>

CSS 代码 (在 sprite 中给您的边角的边框都添上边框，并使  .roundedBox 类的背景及边框融合 sprite。)




#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
    #type4 .corner {background-image:url(../images/corners-type4.gif);}


 好了，这个就是截图效果。我们的边角还不能正确地覆盖 #type4  边框。所以我们必须矫正它们的定位来覆盖早期的定位样式。
让我们做到这一点:


#type4 {background-color:#CCACAE; border:1px solid #AD9396;}
    #type4 .corner {background-image:url(../images/corners-type4.gif);}
        #type4 .topLeft {top:-1px;left:-1px;}
        #type4 .topRight {top:-1px; right:-1px;}
        #type4 .bottomLeft {bottom:-1px; left:-1px;}
        #type4 .bottomRight {bottom:-1px; right:-1px;}


好了，这就是我们完成的模型 4。预 览圆角矩形模型4 (红色边框).  We are almost there, don’t quit now :p
模型 5 (垂直渐变)

好了，模型5会需要更多的工作量，我们应该这样:

修改上下边角的高度 (由渐变度决定(depending on your gradient))。
修改上下边角的背景图定位 (由渐变度决定)。
通过重复平铺 1px 的背景图片来创建容器 div 的渐变效果。
值得注意的是，我们必须给内容设置一个大小，或者给容器设置一个最小高度(由渐变度决定)。


让我们开始吧。
HTML 代码 (跟之前的一样)


<div id="type5">
    <strong>My content in roundedBox Type 5</strong>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
</div>

CSS 代码

我的渐变是从上到下垂直的。所以我们必须增加上边角的高度，以及更改下边角的背景图位置。当您看到我的新的 sprite
就会明白为什么会这么处理。
就是下面这张:   我的div中的背景图片是这样的:  1px 的宽度，它的确是存在的。   我的下边角有一条实心颜色，刚好
可以匹配div的背景色。 少说话多行动。我们来继续定义容器 div :

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}

给容器设置的背景颜色是我从底部边角中吸取的。然后将背景图片按 x 方向进行重复。最后我给它设置一个最小高度，正如我之前所说的，渐变才不会泄露。最后来加上所有的边角 (我将文件的类型修改为 .png 格式的图片，为的是能得到更好的渐变质量):

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}

现在，我增加上边角的高度 (这是由渐变最后抵达的颜色位置决定的):

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}

最后，我纠正下下边角的背景图定位:

#type5 {background:#FECBCA url(../images/roundedbox-type5-bg.png) repeat-x 0 0; min-height:110px;}
#type5 .corner {background-image:url(../images/corners-type5.png);}
#type5 .topLeft,
#type5 .topRight {height:140px;}
#type5 .bottomLeft {background-position:-1px -142px;}
#type5 .bottomRight {background-position:-19px -142px;}

全部完成! – 预 览圆角矩形模型 5 (垂直渐变)

.

IE6 版本

这项技术在这一令人讨厌的浏览器中是有问题的。我们必须给容器 (.roundedBox, or #type1, #type2, 等等) 确定宽度跟高度。如果您没有定义它，那么它会泄露到盒模型之外。 使用 IE6 条件式注释法来定义它。

最后的想法

我希望这项技术对您会有帮组，并且不会显得太难。垂直渐变、透明的角落，只要多加练习，您的脑袋会变得更加好用，也会更加容易定义样式。

　　为此，在保持整体布局的前提下，重写了主题页面结构，在原主题基础上，增加了对各部分分类文章调用的控制，以及分类图标功能、广告位、统计代码添加、feed订阅、默认Gravatar头像等的后台控制，虽然还有部分功能没有完全控制，还需手动修改模板文件，但不修改也不会影响正常使用。新版主题基本具备了很多需要插件才能实现的功能，比如评论最多文章、最近评论、随机文章、相关文章等。并且对主题评论部分函数代码全部推翻重写，具备了隔行变色功能，模仿Apple网站标志性的导航部分图片，采用PNG透明图片，增加了投影效果，更加逼真、更加美观。感觉修改主题最让人挠头的就是评论部分，实在不容易控制。另外在此主题基础上准备制作一个通用版的，并取消用timthumb.php控制缩略图，因为这一函数无法使用外链图片，不是很实用。这个通用版可能更适合大众使用。

（一）

        WordPress是目前十分流行的独立博客程序，因傻瓜化安装和使用，其在网民中的应用已近乎普及。但也因为很多新入门的用户几乎对WordPress程序没有任何了解，造成使用中碰到问题无法解决，求助也十分不易。而且，根据 月夜 的经验，WordPress用户学习了解并掌握一些基本的WordPress知识尤其是WordPress中功能强大使用方便的函数会极大地方便自己的应用，从而定制一个自己心仪的独立博客。

        在这一系列文章中，月夜试着将自己在长期的WordPress生涯中摸索积累的WordPress函数以自己的语言与朋友们分享，希望这一系列文章能够为朋友们使用WordPress程序带来方便。

        在讲述下面的WordPress函数之前，我们需要明确这样一点，所有的WordPress函数都是已经定义好的PHP函数，它们都需要写在PHP 语句中（<?php ?>）才能执行；而且，所有这些函数在PHP语句中都应以分号”;”结尾。其实，为了用好这些函数，为你的WordPress服务，你最好具有 PHP语言的基础。

1.bloginfo()

顾名思义，该函数主要用来显示博客信息；而且根据参数的不同，可以用来显示博客信息中的不同部分。常用的有以下几种：

bloginfo(’name’) 显示博客题名，如“月夜”；默认（不写参数）输出该项；

bloginfo(’description’) 显示博客描述部分，如“分享网络知识·享受快乐生活”；

bloginfo(’url’) 输出博客URL地址，如http://www.yueye.org；

bloginfo(’rss2_url’) 显示博客的RSS2.0 feed地址，如http://www.yueye.org/feed；

bloginfo(’template_url’) 用来获取WordPress博客的模板地址；

bloginfo(’charset’) 显示博客的编码方式，如“UTF-8”；

一种常见的使用bloginfo()函数的组合如下：

<a href=”<?php bloginfo(’url’); ?>” title=”<?php bloginfo(’description’); ?>” ><?php bloginfo(’name’); ?>

在月夜博客中，如上信息输出形如月夜的样式。这种形式通常会用来添加博客的底部信息，如Copyright @ 月夜，经常在主题模板中使用。

需要注意的是bloginfo()函数只能输出显示这些参量，如果你想在PHP语句中使用得到的这些值，则需使用get_bloginfo()函数，该函数和bloginfo()使用相同的参数，获得相同的结果。

2.wp_title()

该函数用来显示页面的标题，如在文章页面，则显示文章标题；在分类页面，则显示分类名称；等等。

wp_title()函数可以跟三个参数，即wp_title(’separator’,echo,seplocation)，其中 separator是title和其余部分之间的分割符号，默认是>>；echo是个bool变量，取true显示标题，取false则将标 题作为一个PHP参量返回；seplocation定义分隔符的位置，取right定义分隔符在标题后面，取其他任何值，都表示将分隔符放在标题前面。

比如形如主题文件夹下header.php中的一段代码：

<title>
<?php wp_title(’ | ‘,true,’right’); ?>
<?php bloginfo(’name’); ?> – <?php bloginfo(’description’); ?>
</title>

在博客首页可以显示这样的效果“月夜 – 分享网络知识·享受快乐生活”；在文章页，可以显示这样的效果“用好WordPress不可不知的50个函数 | 月夜 – 分享网络知识·享受快乐生活”；而在分类页面，则可以显示这样的效果“网站相关 | 月夜 – 分享网络知识·享受快乐生活”；等等。

3.wp_get_archives()

该函数用来获取博客的文章存档，通过设置函数的参数，可以按各种方式获取，如按月，按年等等。

wp_get_archives()函数后面同样可以跟多种参数，只不过所有参数都需要使用&连接，并放在单引号(’)中以字符串方式传递 给函数，形如wp_get_archives(’type=monthly&format=html& show_post_count=1&limit=10′)。

如上的参数意义描述如下：

type=monthly表示按月显示文章存档，可以使用yearly、daily、weekly等代替monthly表示按年、日、以及周显示文章存档；

format=html表示使用通常的HTML中<li>格式化文章列表；

show_post_count=1表示在文章存档后面显示属于该类别（年、月等）的文章数量，该参量是个bool值；

limit=10表示显示的文章存档的最大数量为10，超过次数，则超出部分不显示；

尽管参数稍多，显得略为复杂，但其实只需注意type、show_post_count以及limit等三个参量即可。

4.wp_list_categories()

和wp_get_archives()函数类似，wp_list_categories()函数用来获取博客文章的分类信 息，并可以通过设置适当的函数参数，将其显示出来。该函数的参数和wp_get_archives()函数类似，都需要使用&连接，放在单引号 (’)中以字符串方式传递。形如wp_get_archives(’orderby=name&order=ASC& show_count=1&use_desc_for_title=1&feed=订阅&exclude=2,5& number=10′)。

如上示例中，函数各参数的意义如下：

orderby=name表示按照分类名称的字母先后顺序显示分类信息，可以将name换为ID等；

order=ASC表示按照分类名称的字母的升序显示分类信息，将ASC改为DESC表示按降序；

show_count=1在每个分类名称后面显示属于该分类的文章数；

use_desc_for_title=1使用该分类的描述信息为每个分类名称超链接添加一个title属性；

feed=订阅：在每个分类信息旁边添加一个名为“订阅”的超链接，提供该分类的RSS订阅；

exlude=2,5：在显示的分类中去除ID为2和5的分类；也可以用include=2,5表示只显示ID为2和5的分类；

number=10：表示只显示最先的10个分类。

5.get_the_category()

get_the_category()函数用来返回当前文章所属的类别的若干属性所组成的一个数组，该数组包括以下内容：

cat_ID：当前类别的ID(也可以写作’term_id’)；

cat_name：当前类别的名称(也被写作’name’)；

category_description：当前分类的描述(也可以写作’description’)；

category_count：属于当前分类的文章数量(也被写作’count’)。

具体的使用方法，我们通过下面的几个句子来说明：

形如get_the_category()->cat_ID的语句，返回当前文章所属分类的ID号；

形如get_the_category()->description的语句，返回当前文章所属分类的描述；等等。

6.the_category()

该函数返回当前文章所属的类别名称，而且是文章类别的超链接形式。

默认的无参数形式the_category()直接以超链接形式显示类别名称，显示为：精品推介；

可以在函数中跟上分隔符等参数来格式化输出，如the_category(’-’)，若当前文章属于两个以上分类，可以显示这样的形式：精品推介-经验知识；如只属于一个分类，则显示为这样的形式：精品推介。

7.category_description()

该函数以分类的ID为输入，得到该分类的描述。常和echo、get_the_category()配合使用，将当前分类描述输出：

echo category_description(get_the_category()->cat_ID);

如上语句，get_the_category()得到保存有当前分类信息的一个数组；cat_ID为该数组中该分类的ID；将该ID输入给category_description()函数，即可得到该分类的描述；然后使用echo将其输出。

但经月夜试验，使用如下的语句可以实现和上面语句相同的功能：

echo category_description();

这可能是因为该函数在默认无参数输入的情况下会输出当前分类描述的结果吧。

继续阅读下页