WordPress学习笔记

wordpress学习一:网站开发须知  


2010-11-18 17:30:26|  分类: PHP学习与资讯 |  标签:标签  简码  文章  php  wordpress   |字号 订阅
一、从HTML 到XHTML
XHTML是什么
编写WordPress系统时主要使用的是XHTML脚本语言。XHTML 1.0(目前使用最广泛的版本)在2000年已经成为W3C推荐标准,在XHTML 2.0 发布前,XHTML 1.0仍然可作为过渡工具。八年后,XHTML 2.0仍未现身。因此本文档中的XHTML仅针对XHTML 1.0。


XHTML与HTML非常相似,两者都源于一种名为SGML的语言。尽管如此,XHTML还来自于XML,XML是一种比HTML语法规则更严谨的 脚本语言,而XHTML继承了XML的这一特征。XHTML与HTML的主要区别在于,XHTML使用了新的MIME类型,并添加了一些新的句法规则,这 些规则将在下文中提到。


为什么要使用XHTML
WordPress从所有内部函数中输出XHTML,因此所有主题以及大多数插件使用的都是XHTML脚本。因此如果要使用WordPress平台,就应该多学习一些XHTML相关知识。


XHTML与HTML的区别
HTML仍然与XHTML有很大相关性,熟悉HTML的人了解到这一点都会很高兴。HTML与XHTML的主要差别在于,XHTML更加强调网页制 作人员编程时的一致性与所编代码的可读性。两者也存在若干句法与语法上的差别,此外,XHTML还废除了一些HTML标签。如果用户熟悉掌握HTML,会 发现从HTML转换到XHTML其实很容易,而且新的XHTML规则会让使用者成为更优秀的开发人员。


如何编写XHTML代码
以下是一份XHTML主要要求速查表,其中也列出XHTML与HTML的不同之处。注意:这不是完整XHTML语言参照。


考虑到清晰度问题,以下示例省略了若干代码。


所有标签、属性以及值都必须使用小写字母


正确用法:


<a href="http://cys200302010101.blog.163.com/blog/www.kilroyjames.co.uk" >  
错误用法:


<A HREF="http://cys200302010101.blog.163.com/blog/www.kilroyjames.co.uk" >  
所有属性值都必须放在引号内


正确用法:


<a href="http://cys200302010101.blog.163.com/blog/www.kilroyjames.co.uk" >  
错误用法:


<a href=www.kilroyjames.co.uk >  
所有标签都必须进行适当嵌套
正确用法:


<em>this emphasis just keeps getting <strong>stronger and stronger</strong></em>  
错误用法:


<em>this emphasis just keeps getting <strong>stronger and stronger</em></strong>  
所有XHTML文件都必须带有DOCTYPE定义


DOCTYPE是一个必须显示在每个XHTML文件起始处的强制代码段,DOCTYPE通知浏览器如何翻译文档。


DOCTYPE标签的规则:


DOCTYPE标签必须是文档中的第一个标签
DOCTYPE标签不是XHTML文件的一部分,不必为该标签添加结束斜线
DOCTYPE应指向一个名为DTD、具有有效定义的文件,该文件可通知浏览器如何读取文档
正确写入DOCTYPE标签,否则文档将被引爆*(文档被分裂成一小块一小块被叫做“tag soup”的HTML代码)并失效。
*这不是开玩笑


有效的XHTML文件包括三种:Strict(严格类型), Transitional(过渡类型), Frameset(框架类型)。文件可以被验证为“strict”,但“strict”类型中不允许出现一些老式标签和属性,这时可以使用 “Transitional”类型。


注意:用WordPress验证"Strict"类型时可能会出错,因为从2.6.2版本起,一些内部生成的<form>元素仍然使 用"name"属性,如<input name="my_button" /> ,而在Strict DTD中这是不被允许的。


还有一点需要注意,Transitional DTD会让大多数浏览器脱离“标准”模式。浏览器不在标准模式下时,需要花费更多精力来使网站在不同浏览器上保持一致显示。由于DOCTYPE标签的细节 知识更为复杂深奥,这里不做多余解释,你只需要记住,应该用下面任一种代码,最好是前一种(Strict类型)来达到最佳效果:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 


HTML标签必须包含XMLNS属性


用户无需了解"XML namespace"属性,只需要知道在所有XHTML文件中该属性都必须出现。如何编写该属性:


<html xmlns="http://www.w3.org/1999/xhtml">  
 


文件应由HTML,HEAD, TITLE与BODY标签以适当方式组成


在HTML中即使不用以上标签也可以编写网页,但在XHTML中则无法实现。XHTML必须包含以上标签,并且标签应以适当方式嵌套排列,如下所示(忽略DOCTYPE):


<html xmlns="http://www.w3.org/1999/xhtml">   
 <head>    
  <title></title>   
</head>      


<body>    
 <p>         
   See how the TITLE must be placed in the document HEAD – the TITLE is considered 
to be a "required child" element of the HEAD.
 Notice that the HEAD must also appear before the document BODY. 
Notice also how both the HEAD and the BODY must be contained
 within the HTML tag. Again, HEAD and BODY are "required child"
 elements of the HTML tag. Finally, notice that this text is 
written within a <p>paragraph</p> tag; in XHTML you may 
not write text directly in the BODY tag without using a suitable 
container tag, such as <p> or <div>.    
  </p>   
 </body>  
</html>  
所有标签都应闭合,包括单个标签


<p>Mary had a little lamb  
<p>It's fleece was white as snow  
以上代码省略了结尾的</p>标签,是无效XHTML代码。以下是正确代码形式:


<p>Mary had a little lamb</p>  
<p>It's fleece was white as snow</p>  
在XHTML中即使单个标签也应闭合——任何标签都不例外。


<p>   
 Mary had a little lamb <br>   
 It's fleece was white as snow  
</p>  
<br>标签未闭合,因此以上代码也是错误的。要闭合类似<br> 以及<hr>等单个标签,只需要在后括号前添加一条左斜线,如:<br />以及<hr />(可空格)。更正以上代码:


<p>   
 Mary had a little lamb <br/>   
 It's fleece was white as snow  
</p>  
这样就是正确的XHTML代码了。


不允许属性简写


在HTML中属性可以连串表示,如<dl compact>,感觉像是关键字,这被称为属性简写(attribute minimisation)。在XHTML中这是不被允许的,必须明确表示属性和值,如:


<dl compact="compact">  
ID与NAME属性
HTML中允许交替使用ID和NAME属性。XHTML废除了NAME属性。因此任何情况下需要使用NAME属性时都要用ID属性来替代,如:


正确的HTML代码形式:


<input type="submit" name="s" value=" Search " >  
正确的XHTML代码形式:


<input type="submit" id="s" value=" Search " />  
在HEAD中声明STYLE


XHTML不允许在文件正文中声明STYLE,所有STYLE声明都应该在文件的HEAD中完成。


实体引用


将所有&的文字标记写为&amp,否则XHTML会将其视为实体引用的一部分,如 &reg; 是符号?的实体引用。因此M&S是无效的XHTML代码,因为&S不是实体引用,必须写成:M&amp;S。


总结


上文中提到过,这不是详细参照,但足够让用户了解XHTML并迅速上手了。祝你好运!


XHTML的不足
大多数人没有意识到要能够熟练操作XHTML还需要使用新的MIME 类型 "application/xhtml+xml"。通过MIME类型的描述,服务器会将它们发送的多媒体数据的类型告诉浏览器。例如,发送JPG图像时会 带有一个"image/jpeg"MIME类型,而发送HTML文件时MIME类型为"text/html"。发送XHTML文件时若MIME类型 为"text/html",会导致文件按HTML格式被解析并验证,而不是想象中的XHTML格式。因此使用XHTML时必须标注正确的MIME类型,否 则就相当于使用不标准的HTML。为避免这一问题出现并输出标准代码,可以使用 XHTML to HTML wordpress 插件 。


HTML 5
为了解决XHTML发展中看似棘手的问题(主要是XHTML2无法兼容XHTML、HTML之前的版本以及MIME类型),HTML5,这个由 Mozilla (Firefox), Apple (Safari), Opera, Microsoft (Internet Explorer) 以及一些其它互联网核心公司共同支持的、XHTML强大的竞争对手,传承了HTML 4.01的成功并成为非常受欢迎的脚本语言。


2008年1月,HTML5被批准为W3C拟定推荐标准,几年后它将成为真正的W3C推荐标准。




二、CSS


WordPress非常依赖于CSS的表现样式。对WordPress 1.5版本的主题介绍完毕后,用户的页面布局选项激增。如今在WordPress中改变网站外观比以往任何时候都容易,用字段可以更大程度地帮助用户创建自己的主题以及页面布局。


CSS即层叠样式表单。CSS允许用户将样式表现信息(如颜色与布局)与HTML结果分别存放。这样就可以精确控制网站布局,网页加载和更新也更为方便。


本文简要描述了CSS在WordPress中的用法,并列出一些可能用到的引用。CSS自身信息参见 Know Your Sources#CSS。


WordPress与CSS
WordPress主题混合使用模板文件、模板标签以及CSS共同生成WordPress网站外观版式。


模板文件


模板文件是可共同集合创建网站的构造块。在WordPress主题结构中,页眉、侧边条、内容以及页脚都包含在个人信息中。这些版块联合起来打造网 页版式。这样用户就可以自定义构造块。例如,在WordPress默认主题下,首页为多文章浏览模式,页面侧边栏上还显示了文章分类、存档、以及搜索栏。点击任何一篇文章都可以进入该文章的全文浏览模式,侧边栏也相应消失。用户可以自行设置在首页上所显示的文章片段,还可以在某一特定分类内的所有页面中显示不同的页眉或侧边栏。除此还有很多其他功能。更多关于模板的介绍请参阅初识WordPress模板。


模板标签


模板标签是这样一群代码,它们可以为存储在WordPress数据库内的信息提供指令和要求。一些模板标签非常容易配置,用户可以通过这些模板标签自定义日期、时间、列表以及其他显示在网页上的元素。要了解更多关于模板标签的信息,请参阅初识WordPress模板标签。


CSS样式表单


CSS样式表单聚合了所有元素。在WordPress网站的的每个模板文件中,模板标签和文本都被XHTML标签和CSS引用所 围绕。每个主题的样式表单中都含有该页面结构的命令。如果没有这些指令,网页看上去会非常枯燥。用户可通过指令移动构造块结构,使页眉长度有所扩展,并在 其中填充图片或照片,也可以简化并缩短页眉。可以在左右添加空格键,这样网页就像“漂浮”在访问者的屏幕中间一样,同样也可以将网页设置填充整个屏幕。页 面上的侧边栏可以在左也可以在右,甚至可以放在页面的正下方。总之,页面版块操作权完全在用户手中。但每个版式的指令都会存放在相应主题文件夹的 style.css文件中。


WordPress生成的类
WordPress 2.5引进了一些用以对齐图片和区块元素(DIV, P, TABLE等)的类:aligncenter, alignleft and alignright。此外在没有对其的图片中也添加了alignnone类,以便在必要情况下区别对待。


同样的类用于对齐具有标题的图片(自WordPress 2.6起)。标题必需的三个附加CSS类,以及对齐类、标题类有:


.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}


.alignleft {
   float: left;
}


.alignright {
   float: right;
}


.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}


.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}


.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}
每个主题的style.css文件中都应包含以上类似样式,以便正确显示图片和标题。


此外还有一些默认生成的WordPress类标签也可以用作设计样式:


.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}


三、WordPress主循环


WordPress用主循环(The Loop)显示用户的文章。通过The Loop,WordPress可以将每篇文章显示在当前页面,并将这些文章按The Loop标签中的指定标准进行排版。The Loop中的任何HTML或PHP代码重复出现在每篇文章上。若WordPress文档宣布“该标签必须出现在The Loop中”,于是指定的模板标签或插件就会重复出现在每篇文章中。


例如,WordPress 1.5中The Loop默认显示的信息包括:每篇文章的标题((the_title()),时间(the_time())以及类别(the_category())。关于文章的其它信息则由相应的模板标签或(仅供高级用户)通过访问$post变量显示,运行The Loop时已经在当前文章信息中设置了该变量。


The Loop基本知识参见运行中的The Loop(主循环)。


使用The Loop
The Loop应该存储在index.php以及任何用以显示文章信息的模板中,存放位置取决于WordPress版本。所以请先“确定正在使用的WordPress版本”。


WordPress 1.5 - 2.7


在主题模板的顶端应该包含对页眉模板的调用。如果用户在自己的版块设计(设计的不是模板)中使用The Loop,需要将WP_USE_THEMES设为false。


<?php define('WP_USE_THEMES', false); get_header(); ?>
The Loop开始于:


<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>  
结束于:


<?php endwhile; else: ?>  
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>  
<?php endif; ?>  
WordPress 1.2


在索引页面顶端应该包含对wp-blog-header.php的调用。记住,一定要将wp-blog-header.php的路径设为wp-blog-header.php文件存放的位置:


<?php /* Don't remove this line. */ require('./wp-blog-header.php'); ?>  
The Loop开始于:


<?php if ( $posts ) : foreach ( $posts as $post ) : start_wp(); ?>  
结束于:


<?php endforeach; else: ?>  
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>   
<?php endif; ?>  
Loop示例
为某一类别的文章作特别样式设计


仅供WordPress 1.5版本


本示例使用WordPress 1.5版的语句规则,显示文章的标题(标题将被用作文章的固定链接)、类别和内容。这是一个仅有框架的简单实例;通过用CSS进行样式设计,用户的模板中可以轻松显示更多信息。


为了更具有说明性,这个例子还为编号为3的类别中的文章做了特殊设计。需要用 in_category() 模板标签来完成这一设计。


<!-- -->标签是HTML评论标签;使用这个示例时这些标签都不会显示在web浏览器中。它们的存在目的就是解释以下代码。


 <!-- Start the Loop. -->
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>


 <!-- The following tests if the current post is in category 3. -->
 <!-- If it is, the div box is given the CSS class "post-cat-three". -->
 <!-- Otherwise, the div box will be given the CSS class "post". -->
 <?php if ( in_category('3') ) { ?>
           <div class="post-cat-three">
 <?php } else { ?>
           <div class="post">
 <?php } ?>


 <!-- Display the Title as a link to the Post's permalink. -->
 <h2><a href="http://cys200302010101.blog.163.com/blog/<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>


 <!-- Display the Time. -->
 <small><?php the_time('F jS, Y'); ?></small>


 <!-- Display the Post's Content in a div box. -->
 <div class="entry">
   <?php the_content(); ?>
 </div>


 <!-- Display a comma separated list of the Post's Categories. -->
 <p class="postmetadata">Posted in <?php the_category(', '); ?></p>
 </div> <!-- closes the first div box -->


 <!-- Stop The Loop (but note the "else:" - see next line). -->
 <?php endwhile; else: ?>


 <!-- The very first "if" tested to see if there were any Posts to -->
 <!-- display.  This "else" part tells what do if there weren't any. -->
 <p>Sorry, no posts matched your criteria.</p>


 <!-- REALLY stop The Loop. -->
 <?php endif; ?>
注意:使用HTML代码时一定要在<?php  ?>标签外使用。PHP代码(即使是大括号)都必须放在 <?php  ?>标签内。即使在if和else语句中,用户也可以启动或停止PHP代码以点缀HTML代码。如上例所示。


删除某一分类的文章


供WordPress 1.5或更高版本


本示例可使特定分类不显示在页面上。基本用法基于上个示例。


 <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>


 <!-- If the post is in the category we want to exclude, we simply pass to the next post. -->
 <?php if (in_category('3')) continue; ?>
 
 <div class="post">
 
  <h2><a href="http://cys200302010101.blog.163.com/blog/<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
 
  <small><?php the_time('F jS, Y'); ?></small>
 
  <div class="entry">
    <?php the_content(); ?>
  </div>


  <p class="postmetadata">Posted in <?php the_category(', '); ?></p>
 </div> <!-- closes the first div box -->


 <?php endwhile; else: ?>
 <p>Sorry, no posts matched your criteria.</p>
 <?php endif; ?>
注意:在主页中使用该示例时,需要为分类存档使用不同模板。否则仅仅在查看分类存档时,WordPress也会删除分类3中所有文章。


如果想使用同样的模板也可以通过 is_home()标签解决上述问题:


...  
<?php if (in_category('3') && is_home() ) continue; ?>  
...  
这样分类3中的文章就只会在主页上被删除。根据指定页面的特定条件是否为真,其他条件标签也可以控制输出结果。


请注意,即使文章不显示在主页上,但WordPress在统计所显示的文章总数时仍然将它计算在内——这就是说,如果设置在WordPress主页上显示7篇文章,其中2篇属于分类3,这样在主页上就只会显示5篇文章。在布局和设计FAQ上可以找到更详细的说明,如果只是希望在the loop中删除一个类别,也可以使用 query_posts。


多循环
本段内容针对The Loop的高级用户,因此有一定技术难度——但也无需担心。文章会从简单的地方切入。只要有点常识,有点耐心,有点热情,同样可以操作多循环。


首先,“为什么要使用多循环?”总的来说,原因就是,用户可能希望对一组文章进行一种操作,对另一组文章进行另一种操作,但希望两组文章最终出现在同一网页中。这里的操作可以使任一种操作;只要PHP技术过硬,想象力够丰富,任何操作都不是难题。


分析下面的示例前需要了解一些基本循环的知识,基本循环由以下部分组成:


     <?php if (have_posts()) : ?>
               <?php while (have_posts()) : the_post(); ?>    
     <!-- do stuff ... -->
     <?php endwhile; ?>
将以上代码译成英文就是(了解PHP和代码语言的人可以忽略本段内容):如果要显示文章,请逐篇选择。根据<!-- do stuff ... -->显示列表中的文章。点击最后一篇文章时终止运行。do stuff命令行与模板相关。


Do suff旁:这是一个简单示例,代码段的占位符可决定如何在网页上显示文章并进行排版。根据用户对WordPress外观的希望,下列代码可以有所改变。查看Kubrick主题的index.php文件时,会发现do stuff区域显示如下:


<?php while (have_posts()) : the_post(); ?>  
对上述代码来说:


<?php comments_popup_link('No Comments ?', '1 Comment ?', '% Comments ?'); ?>  
这 里是编码人员的说明:have_posts()和the_post()都是围绕全局变量$wp_query对象的便捷包装器,在$wp_query对象中 操作所有动作。在博客的页眉以及GET 和 PATH_INFO的变量中调用$wp_query。$wp_query获取这些变量,然后创建并执行数据库查询,从而返回文章数组。该数组被存放在对象 中并返回到博客页眉,在页眉处数组被放入全局数组$posts(兼容原有文章loop)。


WordPress将博客页眉加载完毕后,会回到模板中,这样就完成了文章loop。have_posts()调用 $wp_query->have_posts(),后者检查循环计数器,确认是否有文章遗留在文章数组中。 the_post()调用$wp_query->the_post(),后者加速循环计数器并设置全局变量$post以及所有全局文章数据。循环负 载过多会导致have_posts()返回false。


循环示例


以下是两个使用多循环的示例,使用关键在于$wp_query只能调用一次。调用rewind_posts()或创建一个新查询对象,可增加调 用$wp_query的调用次数。示例1显示了这种用法。示例2则用变量来存储查询结果。示例3记录update_post_caches()的用法;避 免产生常见插件问题。最后,“活动的多循环”中介绍了很多方法,多循环通过这些方法可以推广博客主页上特定类别的文章。


多循环示例1


调用rewind_posts()使相同查询进行再次循环。该动作将重置循环计数器,而后进行再次循环。


  <?php rewind_posts(); ?>
 
  <?php while (have_posts()) : the_post(); ?>
    <!-- Do stuff... -->
  <?php endwhile; ?>
完成初始查询中的文章后,可以使用另一个查询。通过调用query_posts()可循环使用$wp_query对象, 而后重复循环。query_posts将执行新查询,创建新文章数组并重置循环计数器。


  // Get the last 10 posts in the special_cat category.
  <?php query_posts('category_name=special_cat&showposts=10'); ?>


  <?php while (have_posts()) : the_post(); ?>
    <!-- Do special_cat stuff... -->
  <?php endwhile;?>
如果希望保持初始查询,可以创建新的查询对象。


<?php $my_query = new WP_Query('category_name=special_cat&showposts=10'); ?>


<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
  <!-- Do special_cat stuff... -->
<?php endwhile; ?>
全局变量 have_posts() and the_post()都使用$wp_query,因此这里不使用这两个全局变量而使用查询对象my_query,然后调用新$my_query对象。


多循环示例2


另一种多循环使用方法解决了have_posts() and the_post()不能使用的情况。首先将初始查询存入变量,然后用另一个循环为变量重新赋值。完成以上操作后就可以使用所有依靠变量的标准函数了。


例如:


// going off on my own here
<?php $temp_query = $wp_query; ?>
<!-- Do stuff... -->


<?php query_posts('category_name=special_cat&showposts=10'); ?>


<?php while (have_posts()) : the_post(); ?>
  <!-- Do special_cat stuff... -->
<?php endwhile; ?>


// now back to our regularly scheduled programming
<?php $wp_query = $temp_query; ?>
注意: PHP5中,引用对象时使用“=”操作符,而不像php4中使用复制的链接。用下列代码以使示例2能在PHP5 中运行:


 // going off on my own here
 <?php $temp_query = clone $wp_query; ?>
 <!-- Do stuff... -->
 
 <?php query_posts('category_name=special_cat&showposts=10'); ?>
 
 <?php while (have_posts()) : the_post(); ?>
   <!-- Do special_cat stuff... -->
 <?php endwhile; ?>
 
 // now back to our regularly scheduled programming
 <?php $wp_query = clone $temp_query; ?>
示例2在WordPress 2.1中无法运行。


多循环示例3——插件


事实证明,某些插件与多循环无法保持良好运行状态。人们发现在这样的情况下,那些处理关键字和文章标签的插件只能在页面的首例循环中运行,页面中的 循环由所有文章的子集组成。如果上述情况属实,可以尝试执行基本循环,该循环添加了 update_post_caches($posts)函数。该函数重置文章缓存且未被记录。仅在页面的第一次循环检索到文章子集时,第二次循环可执行基 本循环。


将:


   <?php if (have_posts()) : ?>
               <?php while (have_posts()) : the_post(); ?>    
     <!-- Do stuff... -->
   <?php endwhile; ?>
修改为:


   <?php if (have_posts()) : ?>
               <?php while (have_posts()) : the_post(); update_post_caches($posts); ?>
     <!-- Do stuff... -->
   <?php endwhile; ?>
活动的多循环


了解多循环用法的最佳方式是给出用法的实例。多循环的最普遍用法可能就是在一个页面上显示两个(或更多)文章列表。当网站管理员需要计算最新文章以及特定类别文章时,可使用多循环的这一用法。


若将格式和CSS问题忽略不计,假定需要两个文章列表。要求其中一列列出最新文章(最近添加的10篇标准文章),另一列中则只列出“featured”类别中的一篇文章。这样就首先显示出该类别中所有文章,而后显示第二列文章(标准文章)。难处在于,一篇文章不能同时在两个类别中显示。


第一步,从“featured”类别中获取一篇文章。


  <?php $my_query = new WP_Query('category_name=featured&showposts=1');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate = $post->ID; ?>
    <!-- Do stuff... -->
  <?php endwhile; ?>
将以上代码译成英文:


将$wp_query值设置与“featured”类别中的所有文章的查询结果相等,然后得到一篇文章。将变量$do_not_duplicate的值设置为返回的的单篇文章编号。Do stuff命令行表示与检索到的文章相关的所有选项。


注意:下一步要用$do_not_duplicate的值来确定同一篇文章不同时出现在这两个列表中。


第二步,进行再次循环以获取最近X篇文章(X不为1)。


以下代码从X篇最新文章(X由WordPress首选项决定)中扣留已经在初始循环中显示的文章,然后根据Do stuff显示剩余文章:


  <?php if (have_posts()) : while (have_posts()) : the_post(); 
  if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
   <!-- Do stuff... -->
  <?php endwhile; endif; ?>
将以上代码译成英文:


获取所有文章,如果有文章等于$do_not_duplicate,继续下一步操作,如果没有文章等于 $do_not_duplicate,则根据Do stuff显示所有文章。更新缓存以优化标签和关键字插件的运行。记住, $do_not_duplicate变量中包含已经显示的文章的编号。


最终结果


如果没有格式排版,代码最终显示结果如下:


  <?php $my_query = new WP_Query('category_name=featured&showposts=1');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate = $post->ID;?>
    <!-- Do stuff... -->
  <?php endwhile; ?>
    <!-- Do other stuff... -->
  <?php if (have_posts()) : while (have_posts()) : the_post(); 
  if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
   <!-- Do stuff... -->
  <?php endwhile; endif; ?>
最终显示结果是一个具有两个列表的页面。第一个列表中仅有一篇文 章——“feature”类别中的最新文章。第二个列表中包含X篇最新文章(X由WordPress首选项决定),这其中不包括第一个列表中所显示的文 章。因此,如果“feature”类别中的原有文章被新文章取代,则原有文章被加入标准文章列表区(取决于用户设置的文章显示数量以及文章频率)。这一技 术与模板层级联合生成不同外观的home.php和index.php。参见本页最下方的相关资源。


第一类别中多篇文章注意事项


若showposts大于等于2,这就需要稍微修改一下代码。变量$do_not_duplicate应被转换成一个数组,而非单个值。否则初始循环将终止,$do_not_duplicate值等于最新文章编号。最终导致再次循环中出现重复文章。要解决该问题,请将


<?php $my_query = new WP_Query('category_name=featured&showposts=1');
 while ($my_query->have_posts()) : $my_query->the_post();
 $do_not_duplicate = $post->ID;?>
替换为


<?php $my_query = new WP_Query('category_name=featured&showposts=2');
  while ($my_query->have_posts()) : $my_query->the_post();
  $do_not_duplicate[] = $post->ID ?>
注意,“showposts”可以设为任何数字。这将$do_not_duplicate 转换为数组。 然后将


<?php if (have_posts()) : while (have_posts()) : the_post(); if( $post->ID ==    
  $do_not_duplicate ) continue; update_post_caches($posts); ?>  
替换为


<?php if (have_posts()) : while (have_posts()) : the_post(); 
 if (in_array($post->ID, $do_not_duplicate)) continue;
 update_post_caches($posts); ?>
在这里用户可以保留showposts设置等值的样式(本例中值为2)。


四、运行中的The Loop(主循环)


简介
“The Loop”是一个涉及WordPress主要进程的术语。用户可以在模板文件中使用The Loop为访问者显示文章。不使用The Loop也可以制作模板,但只能显示一篇文章的信息。


首先,WordPress检查所需文件是否都存在,然后搜集数据库博客管理者中定义的默认设置,包括每页显示的文章数量,是否准许评论,等等。默认设置成立后,WordPress将查看用户需求,并根据用户要求从数据库中调出相应文章。


若用户没有指定任何文章、类别、页面或时间,WordPress会根据之前搜集的默认值来决定为用户显示某篇文章。例如,若博客管理者在 管理面板>设置>阅读中设置每页显示五篇文章,然后WordPress将从数据库中获取五篇最新文章。若用户指定阅读某文章、类别、页面或时间,WordPress会根据用户要求从数据库中返回指定内容。


完成以上操作后,WordPress连接到数据库,检索指定信息并将结果存放在变量中。The Loop访问这个变量,利用变量值在模板中显示信息。


默认情况下,若访问者未指定文章、页面、类别或日期,WordPress用index.php显示所有信息。本文对The Loop的研究,首先放在index.php和用户博客的默认显示上。用户了解运行流程后,文章会对其他模板文件中的The Loop做进一步研究。


 


世界上最简单的索引页
以下是一个完整的函数索引,该函数索引根据The Loop的准备条件来显示每篇文章的内容(仅内容)。在这里显示函数索引的目的是让大家明白,函数在The Loop中的必要性微乎其微。在index.php中能充分发挥作用、保持The Loop良好运行状态的是CSS,HTML,以及PHP声明。


<?php
get_header();
if (have_posts()) :
   while (have_posts()) :
      the_post();
      the_content();
   endwhile;
endif;
get_sidebar();
get_footer(); 
?>
下面就来介绍这些保持The Loop良好运行状态的重要因素。


 


Loop默认用法
本段内容以WordPress 1.5标准安装程序下的“default”和“classic”主题为背景,循序渐进地介绍了The Loop的默认用法。


启动The Loop


默认index.php模板文件最上方就是WordPress主循环的起始代码。


<?php if (have_posts()) : ?><br />
<?php while (have_posts()) : the_post(); ?>
1. 代码首先判断是否有文章被have_posts()函数搜集。


2. 如果有文章被搜集,启用PHP while 循环。只要圆括号中的条件没有逻辑错误,while循环会一直运行。因此只要have_posts()函数返回的值为真,The Loop就会一直运行下去。


3. have_posts()函数检查是否还有搜集到的文章:有就返回true;没有则返回false。


生成文章


the_post()函数获取文章集合中的当前文章,激活该文章以便在The Loop循环中使用。如果没有the_post()函数,主题中很多模板标签都无法运行。


文章数据被激活后,模板就可以为访问者显示文章数据了。


标题,日期以及作者


用下面的模板标签获取文章的标题,发表时间和作者。


<h2 id="post-<?php the_ID(); ?>">
<a href="http://cys200302010101.blog.163.com/blog/<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
文章内容


用模板标签the_content() 显示文章内容。这是文章穿过The Loop的重要环节:


<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
如果在文章正文中添加一个名称为“more”的快速标签按钮,显示为<!--more-->,那么访问者只能看到带有下划线的正文部分。如果只希望在首页显示文章的前一两句话,将<!--more--> 插入文章第一行就能达到效果。


浏览单独一篇文章时,<!--more-->分隔符将被忽略。因此请在所有文章中插入<!--more-->分隔符,这样访问者要阅读全文时就不得不点击进入单篇文章。


其他内容


在index.php模板文件中,每篇文章正文下方都留有空间显示文章相关信息,例如文章类别,时间以及评论内容。若访问者具有足够的用户权限(或文章作者),在文章meta数据版块中还会显示 “Edit This(编辑该文章)”链接,链接由edit_post_link()模板文件支持。


<p class="postmetadata">
Posted in <?php the_category(', ') ?> 
<strong>|</strong>
<?php edit_post_link('Edit','','<strong>|</strong>'); ?>  
<?php comments_popup_link('No Comments ?', '1 Comment ?', '% Comments ?'); ?></p>
文章允许评论或已经有评论时,模板标签comments_popup_link()显示评论链接。使用评论弹出窗口时,链接会打开评论窗口;否则链接直接跳转到文章的评论内容。


访问者浏览文章索引时(若The Loop中有不止一篇文章),comments_popup_link()链接会将访问者导向文章具体页面。


自动发现trackback


模板标签trackback_rdf()为自动显示trackback输出计算机可读代码。


<!--
<?php trackback_rdf(); ?>
-->
注意: trackback_rdf()标签应与注释码共同使用。


关闭The Loop


以下代码关闭The Loop。文章相关模板标签在The Loop关闭后不能正常运行(如果可以运行则使用The Loop最后一篇文章的相关信息)。这意味着,如果希望在The Loop中使用模板标签,需要预先将标签放入The Loop。


<?php endwhile; ?>  
在The Loop被关闭后,下列代码展示了切换网页的导航控制。


<div class="navigation">
<div class="alignleft"><?php posts_nav_link('','','&laquo; Previous Entries') ?></div>
<div class="alignright"><?php posts_nav_link('','Next Entries &raquo;','') ?></div>
</div>
若博客设置每页显示10篇文章,The Loop根据条件选择了25篇,那么就需要为三个网页做导航链接:前两个网页每页显示10篇文章,第三个网页显示5篇文章。访问者可以通过导航链接在这三个页面内任意切换。


导航控制存在于The Loop范围外if条件内,因此只在有文章时才能显示导航链接。导航函数本身也会根据当前循环查看是否有文章可供链接,然后根据文章显示导航链接。


<?php else : ?>
 <h2 class="center">Not Found</h2>
 <p class="center">
<?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
另: have_posts()(从顶端起)为false时,从句决定下一步动作。也就是说,只有在The Loop中没有文章 时才能执行else后的语句。例如,若访问者查找某一时间但该时间范围内没有文章发表时,或搜索不返回任何结果时,页面上不显示文章。


  <?php endif; ?>  
这样就结束了“有文章时进行一种操作,没有文章则进行另一种操作”的条件检验。条件检验结束后,默认index.php模板中会包含侧边栏,最后将页脚也包括进去。


 


其他模板中的The Loop
WordPress可用不同模板文件将博客以不同方式展示给访问者。在WordPress默认主题中有索引视图的模板文件,类别视图的模板文件,还有一个可浏览具体文章的模板。每个模板都使用WordPress主循环,但在格式和模板标签的使用上又有一些差别。


WordPress对没有单独模板文件的视图默认使用index.php。如果访问者请求单独文章,WordPress首先寻找 single.php文件。如果文件存在,则用文件向访问者显示文章,如果不存在,WordPress用index.php为访问者显示文章。这被称为模板层级。


制作自己的主题时,可以参考默认主题中的模板文件。将主题中的index.php作为其他模板文件的模板也有一定帮助效果。用户对相关内容和工作页面有所了解之后就可以创造出更多模板文件。


不同存档格式


存档中保存了所有历史文章。在默认用法中,显示在主索引上的文章都是时间上排在最近的文章。访问者点击存档链接或手动选择某一时间的存档文章 (http://www.example.com/blog/index.php?m=200504 或http://www.example.com/blog/2005/04,选择2005年4月所有文章)后,WordPress显示存档视图。默认情 况下,存档使用index.php文件,与主页版式相同,但只显示2005年4月的文章。


WordPress为访问者准备存档索引时,会在当前主题目录中仔细查找是否有一个名为archive.php的文件。如果不希望存档页面与主页版式相同,将index.php复制到archive.php并在必要时对archive.php进行编辑即可。


例如,如果用户希望只显示文章标题而不显示内容,可以再存档列表中使用如下代码:


<?php get_header(); ?>
 <div id="content" class="narrowcolumn">


  <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>
     <div class="post">
     <h2 id="post-<?php the_ID(); ?>">
<a href="http://cys200302010101.blog.163.com/blog/<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
     <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
      </div>
    <?php endwhile; ?>
<div class="navigation">
<div class="alignleft">
<?php posts_nav_link('','','&laquo; Previous Entries') ?>
</div>
<div class="alignright">
<?php posts_nav_link('','Next Entries &raquo;','') ?>
</div>
  </div>
<?php else : ?>
  <h2 class="center">Not Found</h2>
 <p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
  <?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
不同类别


与准备存档索引相似,WordPress也会为分类索引查找一个单独模板文件。访问者点击博客中的类别链接时就会被导向到类别视图。WordPress为The Loop准备被选中类别中的文章,并将文章数量限制在博客默认的最大数量之内。


如果不希望类别视图与索引视图版式相同,可复制index.php并重命名为category.php。在类别视图中不必列出某篇文章所属的所有类别,因此可以将这部分内容删除,然后在页面上方声明类别。


<?php get_header(); ?>
 <div id="content" class="narrowcolumn">
 <p>
 <strong>
  <?php single_cat_title('Currently browsing '); ?>
  </strong><br />
 <?php echo category_description(); ?>
 </p>
 <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>
     <div class="post">
      <h2 id="post-<?php the_ID(); ?>">
<a href="http://cys200302010101.blog.163.com/blog/<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?></a></h2>
   <small>
     <?php the_time('F jS, Y') ?> 
        <!-- by <?php the_author() ?> -->
   </small>
 </div>
<?php endwhile; ?>
 <div class="navigation">
   <div class="alignleft">
    <?php posts_nav_link('','','&laquo; Previous Entries') ?>
   </div>
   <div class="alignright">
    <?php posts_nav_link('','Next Entries &raquo;','') ?>
   </div>
 </div>
<?php else : ?>
  <h2 class="center">Not Found</h2>
<p class="center"><?php _e("Sorry, but you are looking for something that isn't here."); ?></p>
 <?php endif; ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
不同类别的不同格式


模板层级中描述到,为每个类别都创建一个单独的模板文件已经成为可能。将模板文件命名为 category-X.php,其中 X 是类别的数字编号。创建模板前请慎重考虑类别是否的确需要全新模板。


假设类别“Plants”和“Flowers”的编号分别是3和4。如果用户希望在文章标题旁显示文章所属类别的图片标记(植物或花朵),可以使用以下方法:


为文章标题分别使用文件category-3.php 和category-4.php,两个文件含有不同img标签
在默认category.php文件中使用条件检验,判断当前类别是“Plants”或“Flowers”(也可能不属于两种类别中任一种),然后显示相关图片:
<?php if (is_category('3') ):
 // we're in the Plants category, so show a plant ?>
 <img src='/images/plant.png' alt='a plant' />
<?php } elseif (is_category('4') ):
 // we're in the Flowers category, so show a flower ?>
 <img src='/images/flower.png' alt='a pretty flower' />
<?php endif; // end the if, no images for other other categories ?>
如果希望再添加一个类别“Cars”并以完全不同的方式显示该类别图片,这时创建一个单独category-X.php文件较为合适。


不同类别的不同CSS样式


很多用户都希望为特定类别单独制作CSS文件,事实上这很容易解决。HTML文件的<head>部分负责定义并加载样式表单,在WordPress中则使用 header.php文件。在默认header.php文件中寻找以下命令行:


<link rel="stylesheet" href="http://cys200302010101.blog.163.com/blog/<?php bloginfo('stylesheet_url'); ?>" type="text/css" 
media="screen" />  
将命令行修改为:


<?php if ( is_category('5') ) { // Load special CSS for "Cars" category ?>
  <link rel="stylesheet" href="http://cys200302010101.blog.163.com/blog/<?php bloginfo('template_url'); ?>/category-5.css" type="text/css" media="screen" />;
<?php } else { ?>
   <link rel="stylesheet" href="http://cys200302010101.blog.163.com/blog/<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php } ?>
注意: Cars模板用category-5.css文件改写默认版式。本例中以所应用的类别模板文件而不是类别的实际名称为CSS文件命名。这样就可以推断出 category-5.css 与category-5.php相匹配。


单篇文章的不同格式


WordPress使用single.php文件帮助访问者浏览单篇文章(或固定链接)。


WordPress默认single.php文件中的以下部分显示了当前文章的文章meta数据信息:


<p class="postmetadata alt">
<small>
This entry was posted on <?php the_time('l, F jS, Y') ?> at <?php the_time() ?> 
and is filed under <?php the_category(', ') ?>.
You can follow any responses to this entry through 
the <?php comments_rss_link('RSS 2.0'); ?> feed.
<?php
if (('open' == $post->comment_status) && ('open' == $post->ping_status)) {
// Both Comments and Pings are open
?>
  You can <a href="http://cys200302010101.blog.163.com/blog/#respond">leave a response</a>, or 
  <a href="http://cys200302010101.blog.163.com/blog/<?php trackback_url(display); ?>">trackback</a> 
from your own site.
<?php 
} elseif (!('open' == $post->comment_status) && ('open' == $post->ping_status)) {
// Only Pings are Open 
?>
  Responses are currently closed, but you can 
  <a href="http://cys200302010101.blog.163.com/blog/<?php trackback_url(display); ?> ">trackback</a> 
from your own site.
<?php
} elseif (('open' == $post->comment_status) && !('open' == $post->ping_status)) { 
// Comments are open, Pings are not 
?>
  You can skip to the end and leave a response. Pinging is currently not allowed.
<?php
} elseif (!('open' == $post->comment_status) && !('open' == $post->ping_status)) { 
// Neither Comments, nor Pings are open 
?>
  Both comments and pings are currently closed.
<?php 

edit_post_link('Edit this entry.','',''); ?>
</small>
</p>
无论评论是否关闭,这些信息都不宜在索引、存档或类别视图中出现;因此类似信息都被存入single.php模板文件。


 


The Loop使用技巧
学习完WordPress Loop(循环)的基本用法后,下面就来看看循环的其他效果和使用诀窍。


静态首页


怎样才能只在博客首页上显示一些特别内容呢?也就是说除了首页,博客其他地方都不显示这些内容。其实很简单。这种方法被称为首页静态化。博客站点的首页并不是静态的,只是the Loop会将首页显示得如同静态页面。


用条件模板标签函数 is_home()帮助完成这次loop效果。


在Index.php中用if()检验选择性输出附加内容:


<?php get_header(); ?>
<?php if (is_home()) {
 // we're on the home page, so let's show a picture of our new kitten!
 echo "<img src='/images/new_kitty.jpg' alt='Our new cat, Rufus!' />";
 // and now back to our regularly scheduled home page
} ?> 
若访问者未请求具体文章、页面、类别或时间,is_home()函数将返回true,最终显示结果即博客主页。


了解更多信息请查看制作WordPress静态首页。


显示文章摘要


如果希望只显示文章摘要而不是全文,最简单的方法是将所有the_content()实例替换为the_excerpt()。若用户没有为文章编辑摘要,函数自动显示文章内容的前55个单词。


<div class="entry">
<?php the_excerpt(); ?>
</div>
根据页面文章数量自动显示摘要或全文


在存档页面或其它一些情况下,网页中可能只有一篇文章,这时用户希望显示文章的全文,也可能有很多篇文章,这时用户又希望显示文章摘要。通过自定义the Loop就可以达到这种效果。


<?php if (have_posts()) : ?>


  <?php if (($wp_query->post_count) > 1) : ?>
     <?php while (have_posts()) : the_post(); ?>
       <!-- Do your post header stuff here for excerpts-->
          <?php the_excerpt() ?>
       <!-- Do your post footer stuff here for excerpts-->
     <?php endwhile; ?>


  <?php else : ?>


     <?php while (have_posts()) : the_post(); ?>
       <!-- Do your post header stuff here for single post-->
          <?php the_content() ?>
       <!-- Do your post footer stuff here for single post-->
     <?php endwhile; ?>


  <?php endif; ?>


<?php else : ?>
     <!-- Stuff to do if there are no posts-->


<?php endif; ?>


不同页眉/侧边栏/页脚


WordPress的模板文件中有get_header(), get_sidebar(), 以及get_footer()等Include标签以供使用。通过这些函数用户可轻松定义易于编辑的标准页眉/侧边栏/页脚。无需其他操作,对这些文件的更改就能立即反映在访问者所浏览的页面上。


有时用户不需要显示侧边栏,这时可以从模板中删除对get_sidebar() 函数的调用。例如WordPress默认主题的single.php模板中没有侧边栏。


为自己创建侧边栏时有两种方法可供选择:


1. 将侧边栏内容直接插入目前正在运作的模板文件。如果希望类别3的侧边栏与众不同,可以编辑category-3.php,在其中添加必要的HTML和PHP文件,制作一份独一无二的侧边栏。


2. 在PHP函数 include 中加入另一个文件。WordPress中的get_sidebar()函数只加载sidebar.php文件。若用户希望创建一份名为sideleft.php的文件,使用以下代码:


<?php include(TEMPLATEPATH . '/sideleft.php'); ?>  
在WordPress 2.5 及以后版本中,也可以用以下方法调用侧边栏:


<?php get_sidebar('right'); ?>  
这会生成模板的模板路径。 'sidebar-right.php'应包含在代码中。


可以利用WordPress默认模板层级在多个模板上使用相同要素,最好将要素分别放置在独立模板文件中并使用PHP函数include()。若添加的要素是某模板文件独有的,可将该要素直接添加到相应的模板文件中。


五、WordPress中的meta标签


搜索引擎浏览博客时会搜集博客名称、文章标题、内容以及meta标签(如说明或关键字等)等信息。搜索引擎比较各个版块内的信息,然后根据信息的匹配程度为博客站点排名。下面将详细介绍如何最大程度地利用meta标签引用。


网站开发人员需要注意,WordPress默认安装程序中并不包含说明和关键字meta标签数据。可通过更改主题模板文件或使用WordPress插件手动添加meta标签。


Meta标签是什么?
单词meta的意思是“关于...的信息”。Meta标签最早用来为网站提供准确信息。Meta标签列出作者、关键字、说明、文件类型、版权等重要的网页相关信息。


这是meta标签中“说明”信息的示例:


<meta name="description" content="This is the 
description sentence or short paragraph about 
the article or post." />
最常见的meta标签示例包括:


<meta name="resource-type" content="document" />
<meta http-equiv="content-type" content="text/html; charset=US-ASCII" />
<meta http-equiv="content-language" content="en-us" />
<meta http-equiv="author" content="Harriet Smith" />
<meta http-equiv="contact" content="harrietsmith@harrietsmith.us" />
<meta name="copyright" content="Copyright (c)1997-2004 
Harriet Smith. All Rights Reserved." />
<meta name="description" content="Story about my dog 
giving birth to puppies." />
<meta name="keywords" content="stories, tales, harriet, smith, 
harriet smith, storytelling, day, life, dog, birth, puppies, happy" />
Meta标签为什么不见了?


WordPress默认安装程序中不包含说明和关键字等meta标签。原因是什么?下面我们就来看看这些标签。


第二第三个标签设置页面的语言和字符集。这里用ASCII字符集将字符集设为美国英语形式,这就意味着用“center”代替页面中的“centre”,用“humor”代替“humour”。这样也告诉了浏览器所用的不是汉字字符。


作者和联系信息是对某个人的具体描述。文章的“说明”(description)标签说明了该文章与其他文章的不同之处。关键词标签列出文章中的关键用词。


这些标签信息都具有唯一性。WordPress的确功能强大,但它不可能完全了解用户的想法。用户如果希望能向搜索引擎提供更详细的网站信息,应该自己手动添加meta标签数据。


Meta标签是必需的么?


是否所有meta标签都是必需的?Meta标签一度非常实用,它们曾经为互联网浏览器提供过重要信息。但随着技术的进步,现在即使不需要外界帮助,浏览器也能够自行判断网站是英文还是中文了。


由于很多用户已经弃用了meta标签,一些搜索引擎也不再使用meta标签信息。事实上,有时meta标签并不能表示网站内容。但使用这些标签并不会给搜索引擎排名造成不良影响。


文章内容毫无疑问是搜索引擎页面排名的最主要因素,因此如果希望提升排名,发表优质文章是上上之选。


另一方面,仍然有些搜索引擎用关键字meta标签来为网站进行归类、排名。这些搜索引擎比较文章关键字和内容的匹配程度并评分。关键字是用户可以添加到WordPress网站的最重要meta标签之一。


关于meta标签对搜索引擎重要程度的探讨并不在本文研究范围内。下文中的相关资源部分列出了一些关于meta标签以及他们对搜索引擎的影响的文章。


创建Meta标签
只要将meta标签加入WordPress主题的header.php模板文件中,也就是样式表单链接附近的<head>部 分,meta标签就会出现在网站上了。在<head>部分的上方用户可以看到DOCTYPE标签,在下方则会看 到<titile>标签以及一些其他标签,如下:


<title><?php bloginfo('name'); ?><?php wp_title(); ?></title />  
用户可以在以上代码行下添加自己的meta标签,例如文章内容、语言、作者、联系方式、版权等, 因为这些标签在网站所有页面上内容基本相同。


说明和关键字这些“动态”信息标签又该如何表现?对网站上的任何一个页面来说,这些标签都是与众不同的,将他们放置在header.php就意味着网站信息不会再改变。


用户希望系统能自动为每篇文章添加关键字和说明。有两种方法可以为每篇文章或页面添加特有的说明、关键字和其他meta标签:以通用参考形式添加标签或使用插件


通用meta标签


如果对自己的博客目标明确,可以自己创建通用meta标签并在页眉中替代原有meta标签。假设Harriet Smith是一名兽医,她喜欢在WordPress博客上发表关于她所医治的小动物的故事。


能够描述Harriet Smith所有文章的说明meta标签应该是这样的:


<meta name="description" content="Special stories and 
tales about dogs, cats, birds, ferrets, and other 
domestic animals as told by Harriet Smith, 
veterinarian. Stories include tales of animal 
bravery and courage, life and death, companionship, 
and the wonderful joy animals and pets bring to 
their human partners." />
如果Harriet讲的是一只小狗的故事,小狗在龙卷风中生了小小狗,在分 娩过程中有两个人冒着生命危险陪着小狗,这样就可以用上描述性词语“勇敢”和“勇气”,“生命”和“死亡”,“宠物”和“人类”等等。另一个关于走失5年 的小动物回到自己主人身边的故事也可以用勇敢、勇气、生命、死亡、友谊等词来描述。


通过这两个故事,Harriet能制作一个通用关键字集:


<meta name="keywords" content="stories, tales, 
harriet, smith, harriet smith, storytelling, veterinarian, 
vets, animal doctor, bravery, brave, courage, life, lives, 
death, dying, pets, human, companionship, dog, cat, birds, 
ferrets, pets, pet, birth, puppies" />
这些通用说明和关键字meta标签为Harriet的网站做了准确描述,适用于任何一个搜索引擎。


这是添加说明的手动形式,WordPress为用户提供了一种更便捷的方法,可以在 Admin > Options > General栏中添加说明信息。说明信息按照tagline形式被插入代码行,然后将以下代码复制到页眉部分:


<meta name="description" content="<?php bloginfo('description'); ?>" />  
WordPress会自动生成说明信息。注意:有些主题会在博客标题正下方的页眉处使用说明标签,用户可以在标题部分删除或标注这些说明标签。


也可以添加一个内容为“如果是单篇文章浏览模式,显示文章标题;如果是多篇文章浏览模式,显示博客名称和说明”的条件标签查询。条件标签查询如下:


<meta name="description" content="<?php if ( is_single() ) {
        single_post_title('', true); 
    } else {
        bloginfo('name'); echo " - "; bloginfo('description');
    }
    ?>" />
使用meta标签插件


博客管理员可以通过插件来为不同文章设置不同的关键字、说明以及其他meta标签。这些插件利用WordPress管理面板下编辑文章菜单中的自定义域。用户可以在WordPress官方插件目录中找到meta标签插件。


用户可通过meta 标签插件为每篇文章自定义meta标签,并进行添加或删除。这样meta信息就能够更完美地显示在每个页面上。


六、可访问性


可访问性针对包括WordPress用户在内的所有人,但可访问性究竟是什么?


网页设计中的可访问性,即用户所创建的网页设计能够让任何人使用。任何人中包括视觉受损者,残疾者,以及因为其它原因不方便上网的人群,这包括俄罗 斯和南非地区使用落后计算机的人群,他们依靠每天只能运行两个小时的信号发生器、老式浏览器和拨号网络连接互联网;还包括来自不同国家使用不同语言的人 群。


任何人还包括使用手机和掌上电脑访问用户网站的人。所有这些人都需要访问互联网,因此网页设计人员有必要了解可访问性。


说明图片和链接
在最简单的例子中,视力或身体受损的网络用户需要通过帮助来“看”或者“听”网页内容。因此我们在内容中插入图像时,请在<img>标签的alt部分对图像进行说明。


...and the ball bounced higher and higher 
as <img scr="ball.jpg" alt="graphic of a red and blue ball" /> 
the child bounced it....
依靠屏幕阅读器上网的用户会听见“然后小球弹得越来越高——图片——一个红蓝相间的小球图片——是孩子在弹球”。


使用alt属性还有其他好处。在IE等浏览器中,鼠标经过图片时,alt说明将会以提示条形式出现。而在火狐等另一些浏览器中,由于各种原因无法加载图片时会出现alt说明。


很多人用属性来“说明”或“评论”图片以及链接,这背离了使用属性的初衷。属性实际上是用来“取代”图片或链接的。对图片和链接的说明性语言必须能 够使见不到图片的人了解屏幕上所展示的真实状态。如果说明性语言字数较多,可以用longdesc链接到图片的详细说明文件(ball.html)。


...and the ball bounced higher and higher as 
<img scr="ball.jpg" alt="graphic of a red and blue ball" 
longdesc="ball.html" /> 
the child bounced it....
有些依靠屏幕阅读器上网的用户可能同时使用alt和title属性,因此最好将这两个属性都加入代码:


...and the ball bounced higher and higher as 
<img scr="ball.jpg" alt="graphic of a red and blue ball" 
title="red and blue ball" /> 
the child bounced it....
但有时为图片添加说明却可能造成混乱。因此如果图片与主题相关性不大,可以不为图片添加说明。将图片中的alt和title属性列为空,仍然能够保持可访问性标准。图片没有被添加到内容中,阅读时就会被略过。


<img scr="flower.jpg" alt="" title="" />  
也可以在链接中使用相同方法:


If you are 
<a href="http://example.com/talent-shopping/" 
title="Article about shopping for photographic models">
shopping for models</a> 
for your portrait photography....
图片和连接的说明性语言不仅能够帮助网站的访问者,而且能使网站更容易被搜索到。Google,Yahoo等搜索引擎都使用alt和title属性显示搜索结果,并以此影响网站排名。


WordPress的可访问性
WordPress实时帮助用户保持网站的可访问性。但不是所有WordPress主题制作者都有时间和耐性来维护主题的可访问性标准。下面是一个在index.php的链接和WordPress Loop中使用titile的示例:


<h2>
<a href="http://cys200302010101.blog.163.com/blog/<?php the_permalink() ?>" rel="bookmark" 
   title="Permanent Link to <?php the_title(); ?>">
<?php the_title(); ?>
</a>
</h2>
下面我们来分析这个示例。<h2>标签中包含有文章标题的链接,该链接是对固定链接(文章的url地址)的调用。 链接后跟有一个rel,rel将relationship作为bookmark依附于链接。之后是title属性。这个示例先后定义了"Permanent Link to"和tthe_title() 模板标签自动生成的文章标题,在链接名后再次用到了title标签。


WordPress用这些模板标签自动从数据库中获取信息,然后填充链接信息,使链接更容易被访问。


可以将title改为其它内容:


<a href="http://cys200302010101.blog.163.com/blog/<?php the_permalink() ?>" rel="bookmark" 
   title="Article about <?php the_title(); ?>">
<?php the_title(); ?>
</a>
为链接生成title的技术同样可以用在WordPress博客的其它地方,包括类别、页面以及存档的侧边栏中的列表。title自动生成,无需人为帮助。有时用户还可以自定义title的生成方式。 详细情况参见 模板标签。


可访问性考虑因素
为自己设计WordPress主题或公共发布时,除了要能够帮助用户“听见”图片和链接的说明外,还有另外一些内容也应该纳入考虑范围。


创建可读页面


对网页设计者来说,有时他们能做的最简单的事情就是创建一个更方便阅读的页面。在一个页面上出现拥挤的内容和版式、混杂的字体样式和过多信息,不仅混乱,也不易于阅读。


开发WordPress主题时,需要额外注意网页不同元素之间的空白部分和伪空白部分。确保在大部分屏幕分辨率下辨认所设置的字体。位置导航元素应设置在常规位置上,便于人们点击进入网站其它部分。


如果希望测试网站主题的易读性,可以考虑请一位60岁的老人做测试者。这是一个好主意


不同前景/背景配色、字体类型和单词样式网站的可读性


颜色和可访问性


颜色同样影响着人们“查看”网页的能力。大约10%的互联网用户在辨色上存在问题,色盲甚至无法辨色。很多网站提供对网站用色选择的测试。当然可以忽略这个问题,但优秀的设计者应该面面俱到。


Can Color Blind Users See Your Web Page?
Q42 Color Blindness Simulator
Visibone's Color Blind Color Chart
Color Blind Web Filter - Testing Online
Blindness-Related Resources on the Web and Beyond
Accessible Web Page Design - Resources for the Visually Impaired
Design Considerations: Readers with Visual Impairments
Vischeck (simulates color blind vision)
GrayBit.com (grayscale page conversion to test visual contrast for the colorblind)
访问关键字


访问关键字可以帮助有视力或身体障碍的人进行网站导航。在键盘上按下不同按键组合时,这些标准化关键字会将光标移动到页面的不同区域。例如,如果页 面上有一个可供高级搜索的链接,在Windows系统中按下alt+s键或者在Mac系统中按下ctrl+s键,光标就会移动到搜索链接处。可将搜索页面 的链接中的关键字设置如下:


<a href="http://cys200302010101.blog.163.com/blog/search.php" accesskey="s">Search</a>  
下面是一个在侧边栏中使用访问关键字的例子,其中使用了页面模板标签:


<ul id="pageslist">
<li>
   <a href="http://cys200302010101.blog.163.com/blog/index.php" title="Home Page" accesskey="1">Home</a>
</li>
<li>
   <a href="http://cys200302010101.blog.163.com/blog/blog.php" title="Blog" accesskey="2>Blog</a>
</li>
<li>
   <a title="Site Map" href="http://cys200302010101.blog.163.com/blog/sitemap.php" accesskey="3">Site Map</a>
</li>
</ul>
用以列出页面的模板标签目前还不支持访问关键字,希望不久的将来能够实现这一功能。


英国政府为官方网站制定了一套使用访问关键字的标准,国际上很多网站管理员采用这一标准。但 Mozilla Firefox 浏览器却打破了这一标准,它使用组合键alt+1(或其他数字)来控制窗口的切换。希望以后所有浏览器和网站都能够使用统一的存取关键字标准。


同时用户也可以选择自己的存取关键字设置,但最好在网站的侧边栏和页脚部分开辟“可访问性规则”版块,方便访问者查找网站主人所使用的访问关键字。


Clagnut: Accesskey Standards
Using accesskey attribute in HTML forms and links
W3's Forms in HTML Documents - Using Accesskey
Accesskeys: Unlocking Hidden Navigation
浏览器的可访问性


在IE浏览器中进行网站设计相对顺利,但在Firebox或者Safari浏览器中进行设计会有所不同,甚至可以说是混乱。同一个网站在不同浏览器上的显示效果可能有所不同。考虑到可访问性的因素,从不同浏览器上访问就成了关键问题。


1. 验证:用验证测试 彻底检查网站的XHTML和CSS代码,确保没有代码错误。


2. 浏览器测试:在不同的浏览器上测试网站并根据测试结果做相应调整,使网站能被不同浏览器访问。


3. 操作系统测试:不同操作系统上的浏览器也可能对同一个网站产生不同显示效果。如果周围没有那么多装有不同操作系统的电脑,可以借助朋友和家人的电脑,也可以去机房或网吧,在安装了不同操作系统的电脑上测试网站的表现形式。


测试网站的可访问性并不局限于浏览器测试。不同的屏幕分辨率和颜色质量也能影响网站的可访问性。可以通过桌面属性设置或网站开发工具或以下某些工具来改变屏幕分辨率和颜色质量。


验证工具


HiSoftware's Online Content Accessibility and Quality Tester
Evaluation, Repair, and Transformation Tools for Web Content Accessibility
W3C Web Accessibility Initiative: Evaluating Websites for Accessibility
WAVE Online Accessibility Tool Checker
屏幕分辨率测试


Pcman's Web Page Screen Resolution Tester
Web Page Monitor (check for different sized monitors)
浏览器测试


AnyBrowser's Web Site Viewer - How does your site look to other browsers
Web Browsers Compatibility from Delorie
Viewing A Sample Page Under Various Conditions and Uses
NetMechanic's Browser Compatibility
Learnwebdesign's Browser References
Public Lynx Access Browsers
Checking with Multiple Browsers (the hard core way)
手机上网以及掌上电脑上网


台式电脑或笔记本电脑不再是唯一的网页浏览模式,目前通过手机和掌上电脑上网的人越来越多。那么网站在小屏幕上是如何显示的呢?


一些为小屏幕设置的浏览器抛弃网站的样式表单直接显示文字内容,就像在WordPress网站中打印页面一样。其它浏览器显示压缩后的整个屏幕内容。在样式列表中添加掌上多媒体样式后,用户可以设置自己的网站在小屏幕上的显示状态。


如果想为PocketIE, NetFront和Opera浏览器添加单独的掌上样式表单(见"handheldstyles.css"示例),需要在主题header.php文件的 屏幕样式表单后添加以下代码。为了能让PocketIE, NetFront,和Opera这三个浏览器都能正确显示内容,必须确保语句的准确性。


<style type="text/css">@import url(<?php bloginfo('stylesheet_directory'); ?>/handheldstyles.css) handheld;</style>


以下文章包含更多相关信息:


Code Style Media Monitor (projection, print, etc)
Guide to CSS2 Support in PDA/Handheld Browsers
W3C Mobile Access - Seamless Web Access From Mobile Devices
W3C Mobile Access Activity Statement
CSS Mobile Profile Test Suite
W3C CSS Mobile Profile 1.0
W3C HTML 4 Specs on Mobility - Handheld
Aural style sheets
The W3C CSS2 recommendation, Section 7: Media types
Web Design for Mobility - Handheld, PDA, etc.
开辟“可访问性规则”版块
网站具有自己的“可访问性规则”也已经成为一种趋势,网站专门开辟一个页面向访问者说明本网站的可访问性标准。在英国,根据《残疾歧视法案》,不能 访问的政府或企业网站将会被起诉,在美国这种规定也越来越普遍。遵守可访问性标准并不难,只要在网站中设置一些按键组合,让每个访问者都看到网站的大部分 内容。


Accessibility Policy Page - an example
Creating an Accessibility Statement
Review: International Compliant Style (IC-Style) Accessibility
Accessibility Statement and Resources
A Primer for Accessible Web Pages
Section 508 US Accessibility Law
Checkpoints for Web Accessibility Guidelines
为网站做可访问性测试
有很多网站提供在线帮助测试网站可访问性的服务,下面介绍一些:


Testing your site for accessibility
An Introduction to Speech-Access Realities for Interested Sighted Internauts
EmacSpeak
Introduction to the Voice, Your Aural Font - CSS Tutorial
Accessible by Design
Viewable with Any Browser Campaign
Dive Into Accessibility
七、内容链接


在WordPress中有两种方法可以生成页面之间的内部链接,一种使用永久链接,另一种不使用永久链接,无论网站是否禁用永久链接,后一种方法都可以正常运行。


不使用永久链接
如果不用永久链接,那么应该用什么来链接到网站中的页面、文章和类别呢?


我们可以按照下面的方法,利用文章、类别和页面管理中ID栏中的数值来生成链接。


文章


要链接到某篇文章,首先在文章管理栏中找到目标文章的编号,然后将以下链接中的“123”更改为文章编号:


<a href="http://cys200302010101.blog.163.com/blog/index.php?p=123">Post Title</a>  
类别


要链接到某个类别,首先在类别管理栏中找到目标类别的编号,然后将以下链接中的“7”更改为类别编号:


<a href="http://cys200302010101.blog.163.com/blog/index.php?cat=7">Category Title</a>  
页面


要链接到某个页面,首先在页面管理栏中找到目标页面的编号,然后将以下链接中的“42”更改为页面编号:


<a href="http://cys200302010101.blog.163.com/blog/index.php?page_id=42">Page title</a>  
数据库中的存档


年:<a href="http://cys200302010101.blog.163.com/blog/index.php?m=2006">2006</a>
月:<a href="http://cys200302010101.blog.163.com/blog/index.php?m=200601">Jan 2006</a>
日:<a href="http://cys200302010101.blog.163.com/blog/index.php?m=20060101">Jan 1, 2006</a>
外部链接


如果想添加外部链接,请将完整URL指定到正确位置:


<a href="http://example.com/index.php?p=123">post title</a>
如果将WordPress安装在子文件夹中,别忘了将文件夹添加到链接URL中:


<a href="http://example.com/wordpress/index.php?p=123">post title</a>


使用永久链接
以上所有非永久链接方法都可以在使用永久链接时继续使用,永久链接是否被激活不影响非永久链接方法的使用。若用户的永久链接是激活的,就可以选择为访问者提供比加密数字更友好的链接。


URL的复杂性取决于永久链接配置的复杂性。如果永久链接配置(在 设置>固定链接 栏中进行设置)中包含很多结构标签,那么构造URL的难度会相对较高。


文章


将永久链接结构中的结构标签都替换为适当的文章相关数据,从而为文章创建相应的URL。例如,如果永久链接结构是:


/index.php/archives/%year%/%monthnum%/%day%/%postname%/  
将永久链接结构中的结构标签都替换为文章相关数据,生成链接如下所示:


<a href="/index.php/archives/2005/04/22/my-sample-post/">My Sample Post</a>  
在WordPress博客内定位到某篇文章,然后复制WordPress生成的博客链接中的一个,这样能够得到较为准确的URL。


想了解为文章生成URL的更详细情况,请参阅使用WordPress固定链接。


类别


若要用永久链接生成类别的链接,首先需要在设置>固定链接管理栏中获取分类基础(Category Base)的值,然后将类别名称附着在结尾处。


例如,如果类别名称为“测试”,类别基础为"/index.php/categories",可使用以下链接:


<a href="/index.php/categories/testing/">category link</a>  
页面


页面层级与类别相似,页面也可以拥有父级。如果一个页面在层级的根层,可以在永久链接结构的静态部分后指定该页面的“页面别名”:


<a href="/index.php/a-test-page">a test page</a>  
验证URL是否正确的最好方法是,在博客内定位到某篇文章,然后将URL与WordPress生成的众多链接中你所需要的那一个进行对比。


数据库中的存档


年:<a href="/index.php/archives/2006">2006</a>
月:<a href="/index.php/archives/2006/01/">Jan 2006</a>
日: <a href="/index.php/archives/2006/01/01/">Jan 1, 2006</a>
外部链接


永久链接结构应该以斜线开始,表示链接固定在网站URL的底部。用户可以将协议和服务器名称放在以斜线开始的任何链接前,这样可建立完整URL。


例如,以下类别链接


<a href="/index.php/categories/parent_category/sub_category/">subcategory link</a>  
成为使用完整URL的类别链接


<a href="http://example.com/index.php/categories/parent_category/sub_category/">subcategory link</a>


结合链接与模板标签
用户可以将页眉、页脚或侧边栏中的链接自定义组合成链接类型。以下示例将链接到两个类别、主索引页、一篇文章、一个静态页面,示例还使用了Pages模板标签。


注意wp_list_pages()模板标签生成属于自己的列表项(LI),因此该模板标签无需被LI标签包装。wp_list_pages()模板标签被设置为只列出父级页面而不显示子页面。


<ul id="linklist">
 <li>
  <?php _e('Check It Out'); ?>
  <ul id="pageslist">
   <li>
    <a title="Home Page" href="http://cys200302010101.blog.163.com/blog/index.php">Home</a>
   </li>
   <li>
    <a title="Blog" href="http://cys200302010101.blog.163.com/blog/index.php?cat=7">Blog</a>
   </li>
   <li>
    <a title="Life Story" href="http://cys200302010101.blog.163.com/blog/index.php?p=12">My Life Story</a>
   </li>
   <?php wp_list_pages('exclude=4&depth=1&sort_column=menu_order&title_li='); ?>
   <li>
    <a title="Links and Resources" href="http://cys200302010101.blog.163.com/blog/index.php?cat=33">Links</a>
   </li>
   <li>
    <a title="Site Map" href="http://cys200302010101.blog.163.com/blog/sitemap.php">Site Map</a>
   </li>
  </ul>
 </li>
</ul>
通过这样的自定义列表,用户可以加入CSS类来改变链接的外观, 还可以制作整个版块的样式。一切都取决于用户。


 


绝对链接VS.相对链接
绝对链接定义了链接目标的完整地址。


相对链接定义了与当前文件相关的另一个文件的地址。


绝对链接示例


表格的完整URLhttp://example.com/wordpress/index.php是绝对链接。


绝对链接也可以指向用户自己的服务器。当绝对链接指向用户服务器时,可以省略前缀 http://domain.com,然后用完整路径链接到目标:


/wordpress/index.php  
起始斜线表示“该域名顶端的目录名称为wordpress,目录内有一个名为index.php的文件”。





http://example.com/wordpress/index.php
中有一个文件,文件中含有表格的链接:


/wordpress/index.php  
点击以上链接,访问者将被导向到:


http://example.com/wordpress/index.php  
相对链接示例


相对链接不以斜线开始:


wordpress/index.php  
没有起始斜线,这表示“当前目录下有一个名为wordpress的子目录,子目录中有个文件,文件名称为index.php”。





http://example.com/wordpress/index.php  
中有一个文件,文件中含有表格的链接:


wordpress/index.php  
点击以上链接,访问者将被导向到:


http://example.com/wordpress/wordpress/index.php  
下面我们来观察以下示例中我们编辑的是博客的哪个版块:


http://example.org/blog/2009/01/04/nurds-on-the-loose  
我们可以生成以下链接:


<a href="http://cys200302010101.blog.163.com/blog/../01/happy-new-year">New Years Announcement</a>
<a href="http://cys200302010101.blog.163.com/blog/../../01/01/happy-new-year">New Years Announcement</a>
<a href="http://cys200302010101.blog.163.com/blog/../../../2009/01/01/happy-new-year">New Year's Announcement</a>
<a href="http://cys200302010101.blog.163.com/blog/../../../2008/12/25/merry-christmas">Christmas Announcement</a>
注意,点击1,2,3会进入同一个链接。而4没有快捷方式,只能逐步推移到前一年。


以上链接都是相对链接,因此不必绑定任何非必要信息,这样同时还有利于博客的可移植性,方便用户将博客导出到别的网站。(通过管理栏选择其他永久链接结构会造成怎样的后果,目前还无法预知)


尽管如此,以上示例均假定所浏览的是某一篇文章。但事实上如果是在存档中浏览这篇文章,所有假定地址都将是错误的!因此无论相对链接有多灵活,无法进行选择都是它的致命缺点。


关于绝对链接和相对链接的更多信息请查看WebReference Tutorial on Absolute and Relative Links。


模板中的动态链接
无论是否使用永久链接都可以在模板中动态链接到页面或文章,只需要将文章的数字编号(在管理界面的页面中可见)改为 <a href="http://cys200302010101.blog.163.com/blog/<?php echo get_permalink(ID); ?>">This is a link</a>。(如 模板标签-get_permalink()所示)


这是一种创建页面菜单的快捷方法,编号不会发生变化,这样用户就可以在不破坏链接的情况下改变页面的别名。不过可能会增加数据库查询次数。


也可以利用 wp_list_pages的child_of参数或其他可用插件来创建动态页面菜单。


RSS
似乎只有完全符合标准的链接才能在RSS阅读环境中运行。






八、WordPress如何处理文章内容


WordPress后台中编辑的内容最终显示在WordPress博客的网页之前,WordPress会对该内容进行多次处理。处理过程中将过滤多余代码,且会将内容转换成浏览器可翻译的格式。若用户不了解WordPress文章内容过滤的细节,会造成不必要的变化。


变化和过滤主要发生在 wp-includes/formatting.php文件中。详细代码功能和特征参见 the file source code。


用户在使用内容过滤函数和处理函数时遇到的典型问题包括:


1. 保存文本后,空白段落、关闭的span标签和换行符元素被删除


2. 类从元素中被删除


3. DIV元素被转换成P元素


4. Java脚本和代码被转换成可显示代码而非可执行代码。关于如何将Java脚本植入博客文章,请参阅 使用Javascript。


以下是对WordPress在最终发表前处理文章内容的逐步介绍。


TinyMCE
TinyMCE 是WordPress的富文本编辑器。不是所有WordPress博客都使用TinyMCE,但一旦使用,TinyMCE会帮助用户将保存的内容转换为可发表的代码。


WordPress函数wpautop()
wpautop()是一个重要的WordPress函数,可自动处理、校对并修改文章内容。


该函数保留换行符和段落标签,开启应开启但关闭了的标签,关闭应关闭但未关闭的标签,清除重复的HTML标签。


Texturize
Texturize (wptexturize()) 是一款文本过滤器,默认情况下Texturize会修改已发表的文章或评论,然后输出更方便阅读更具吸引力的内容。


Texturize生成具有美学效果的内容的同时,也为在编程语言中发表代码示例带来了不便。在这种情况下最好不要修改文章内容,否则可能会生成语句错误的代码。


有些示例包括:


"quoted text" becomes “quoted text”
'quoted text' becomes ’quoted text’
          --- becomes —
           -- becomes –
          ... becomes …
          (c) becomes ?
          (r) becomes ?
         (tm) becomes ?
           '' becomes ”
           `` becomes “
  president's becomes president’s
  presidents' becomes presidents’
          12' becomes 12′
          12" becomes 12″
          2x4 becomes 2×4
转换表情符号
convert_smilies()函数将文章、页面和评论内容中的字符组合图转换成相应的笑容或其它表情符号。例如,若激活笑容符号,WordPress就可以识别:D,并将之转换为笑脸。


激活笑容符号的关键在于:在字符组合图前后添加空格。单纯的文字不会被转换成笑容符号。


如果用户不希望转换表情符号,可以在Options > Writing中关闭该功能。


转换字符
formatting.php代码文件中包含大量函数,这些函数可以帮助将字符实体、重音符号以及非英文字符转换成浏览器可识别的格式。


一般情况下这些函数运行状态良好,但如果浏览器未激活某种语言,该语言字符就不能被浏览器所辨别。用户可查看浏览器文档以添加浏览器可识别的语言字符。


阻止WordPress处理文章内容
有很多插件可以改变WordPress默认状态下的过滤处理用法。建议用户不要改变核心程序设计,用户可以使用WordPress插件来改变某些或整个内容处理过程。相关插件请参考WordPress Plugins Directory。


九、简码API
简码API(应用程序接口)是WordPress 2.5的新功能。简码API是一个简单的函数集,这些函数创建宏代码以供在文章内容中使用。下面是一个普通简码:


[gallery]  
简码API简化了支持属性的简码的创建:


[gallery id="123" size="medium"]  
API进行所有解析,避免为每个简码编写自定义正则表达式。添加帮助函数以设置并获取默认属性。API同时支持封闭简码和自闭(自动封闭)简码。


下面是一个通过属性创建简码的PHP简单实例,为大家提供快速入门通道:


// [bartag foo="foo-value"]
function bartag_func($atts) {
 extract(shortcode_atts(array(
  'foo' => 'no foo',
  'bar' => 'default bar',
 ), $atts));


 return "foo = {$foo}";
}
add_shortcode('bartag', 'bartag_func');
以上实例生成一个"[bartag]"简码,该简码支持两个属性:[bartag foo="something" bar="something else"]。这是两个可选属性,若用户未选择,属性使用默认选项。


简码API概述


简码由处理函数编写。简码处理器与WordPress过滤器大致相同:两者都接收参数(属性)并返回结果(简码输出)。


add_shortcode()函数用于记录简码处理器。该函数使用两个参数:简码名称(文章正文中所用的字符串)以及处理函数名称。


简码处理函数可接收一到两个属性:属性数组$atts以及封闭文本$content(根据简码是否可用于封闭形式选择性使用该属性)。例如:


function my_shortcode_handler($atts, $content=null) {  
}  
调用API以记录简码处理器,操作如下:


add_shortcode('my-shortcode', 'my_shortcode_handler');  
显示 the_content时,简码API会对所有有记录的简码(如 "[my-shortcode]")进行解析。如果存在属性和内容,简码还会将这些属性和内容逐一分开并进行解析, 最后将相应的简码处理函数传递给这些属性和内容。简码处理器返回(非响应)的字符串被插入文章正文,取代简码。


以下简码属性:


[my-shortcode foo="bar" baz="bing"]  
将被转换为以下关联数组并传递给处理函数,即$atts参数:


array( 'foo' => 'bar', 'baz' => 'bing')  
数组关键字为属性名称,数组值即相应的属性值。


属性


原始$atts数组中可能包含用户所指定的任意自由属性。API中的shortcode_atts()函数可帮助丢失属性设置默认值,并消除简码不可识别的属性。


shortcode_atts()函数类似于wp_parse_args()函数,但与wp_parse_args()仍有一些主要差异。shortcode_atts()函数的参数为:


shortcode_atts( $defaults_array, $atts );  
两个参数都是必需的。 $defaults_array 是一个关联数组,它规定了所识别出属性的名称和默认值。$atts是传递到简码处理器时的原始属性。 shortcode_atts()将返回一个正规的、包括 $defaults_array中所有关键字的数组, 若$atts数组存在, $atts返回的值将被填入$defaults_array。例如:


$a = shortcode_atts( array(
   'title' => 'My Title'
   'foo' => 123,
   ), $atts );
如果$atts 中要包括数组( 'foo' => 456, 'bar' => 'something' ), 原有结果$a将会变为数组( 'title' => 'My Title', 'foo' => 456 )。$atts['foo']的值改写了默认值123。由于未设置$atts['title'],'My Title' 将被作为默认值。默认数组中没有“bar”选项,因此返回的结果中也没有这个选项。


将属性名称传递到处理函数前,需要将名称转换为小写字母。属性值无需改变。 [my-shortcode FOO="BAR"]生成$atts = array( 'foo' => 'BAR' )。


在简码处理器重声明默认值以及解析属性时,建议使用代码方式为:


function my_shortcode_handler( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'attr_1' => 'attribute 1 default',
      'attr_2' => 'attribute 2 default',
      // ...etc
      ), $atts ) );
}
这样既可以解析属性,设置默认值,又可以删除所有不支持的属性,将结果存储(使用extract()) 在以属性关键字 $attr_1, $attr_2命名的本地变量中,等等。 换言之, 默认值数组近似于本地变量声明列表。(在此情况下可安全使用extract()处理各种冲突而无须特别标识,这是因为shortcode_atts()将 清除默认数组外所有关键字。)


输出


简码处理函数的返回值将被插入文章内容,代替原有简码宏的位置。记住使用“返回”,而非“响应”——所有“响应”内容都会输出到浏览器而不会出现在页面的相应位置上。


应用 wpautop与wptexturize 文 章格式(关于2.5.0与2.5.1版本的不同之处,请留意下文中的“注意”)后,简码会被解析。这就意味着,简码HTML输出不能自动使用引用,也不能 自动添加p标签以及br标签。如果用户希望预先设定简码输出格式,可以在从简码处理器返回输出结果时直接调用wpautop() 或 wptexturize()。


wpautop辨别简码语句并试图不包装独立成行的p标签以及br标签。若以这种方式使用简码,应确保用相应的block标签包装输出结果,如<p>或 <div>。


注意:在WordPress 2.5.0中,应用文章格式前就会解析简码,因此简码HTML输出有时会被p标签或br标签包裹。WordPress 2.5.1修正了这一缺陷。


封闭简码VS自动封闭简码


以上示例显示的都是自动封闭的代码宏,如 [my-shortcode]。API也支持 [my-shortcode]content[/my-shortcode]等封闭简码。


用简码宏关闭内容时,处理函数会接收另一个包含内容的参数。用户可能会用另一种方式来编写简码,因此程序需要能够同时允许大小写字母,通过设置处理函数的第二个参数默认值,可以实现这一功能:


function my_shortcode_handler( $atts, $content = null )  
is_null($content)可分辨自动封闭标签和封闭标签。


文章内容关闭后,函数输出结果将取代含有内容的完整简码宏。处理函数需要提供原始内容字符串的缺失情况以及加密情况,并在结果中加入缺失或加密的字符串。


以下是加密简码的简单示例:


function caption_shortcode( $atts, $content = null ) {
   return '<span class="caption">' . $content . '</span>';
}
add_shortcode('caption', 'caption_shortcode');  
使用以下方式时:


[caption]My Caption[/caption]  
输出结果则是:


<span class="caption">My Caption</span>  
$content没有缺失也没有加密,因此用户可以加入原始HTML:


[caption]<a href="http://cys200302010101.blog.163.com/blog/http://example.com/">My Caption</a>[/caption]  
这将生成:


<span class="caption"><a href="http://cys200302010101.blog.163.com/blog/http://example.com/">My Caption</a></span>  
这可能是有意识行为,也可能不是——若简码不允许在结果中输出原始HTML,可在返回结果前用缺失或过滤函数进行处理。


简码解析器不支持嵌套简码。这表示,如果简码处理器的$content参数含有其他简码,将不解析简码:


[caption]Caption: [my-shortcode][/caption]  
这会生成:


<span class="caption">Caption: [my-shortcode]</span>  
若封闭简码希望允许输出结果出现其他简码,处理函数可递归调用do_shortcode():


function caption_shortcode( $atts, $content = null ) {
   return '<span class="caption">' . do_shortcode($content) . '</span>';
}
以上代码可保证封闭内容中的 "[my-shortcode]"宏被解析,且输出结果被标题span关闭:


<span class="caption">Caption: The result of my-shortcode's handler function</span>  
封闭简码支持属性的方式与自动封闭简码相同。以下是可支持“class”属性的caption_shortcode()示例:


function caption_shortcode( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'class' => 'caption',
      ), $atts ) );
 
   return '<span class="' . attribtue_escape($caption) . '">' . $content . '</span>';
}
[caption class="headline"]My Caption[/caption]  
<span class="headline">My Caption</span>  
其他功能简介


解析器支持xhtml样式的封闭简码,如"[my-shortcode /]"等,该功能可选
简码宏可能为属性值使用单个或双个引用,若属性值中没有空格,可以完全不使用引用。 [my-shortcode foo='123' bar=456] 等于 [my-shortcode foo="123" bar="456"]。
考虑到原有简码的兼容性,属性名称会被忽略。若某属性没有名称,系统会将$atts数组中的一个位置数值型关键字作为属性名称。例如,[my- shortcode 123]会生成$atts = array( 0 => 123 )。位置属性与有名称的属性可能混杂在一起,若属性值中含有空格或其它明显字符,可以使用引用。
简码API有测试实例。测试中包括错误情况示例和异常语句,可在http://svn.automattic.com/wordpress-tests/wp-testcase/test_shortcode.php试用测试实例。
函数引用


以下简码API函数可用:


function add_shortcode($tag, $func)  
记录新的简码处理函数。$tag是用户所编写的简码字符串(无括号),如"my-shortcode"。$func是处理函数的函数名称。


在一个已知简码中只能存在一个处理函数。用$tag名称再次调用add_shortcode()会改写原有处理函数。


function remove_shortcode($tag)  
删除已有简码的记录。$tag是用在add_shortcode()中的简码名称。


function remove_all_shortcodes()  
删除所有简码的记录:


function shortcode_atts($pairs, $atts)  
为了$pairs所指定的默认值,对属性原始数组$atts进行操作。 结果包括$pairs中每个关键字,并混合了$atts的返回值。任何存在于$atts但不存在于$pairs的关键字都将被忽略。


function do_shortcode($content)  
解析 $content字符串中所有已知简码宏。返回含有原始内容的字符串,并用处理函数的输出结果代替简码宏。


记录do_shortcode()时,将它作为 一个优先级为11的'the_content'默认过滤器。


局限


当简码处理函数递归调用do_shortcode()时,简码解析器才可正确处理嵌套简码宏:


[tag-a]
   [tab-b]
      [tag-c]
   [/tag-b]
[/tag-a]
递归调用的同时,如果使用简码宏来关闭另一个宏,解析器将不能成功解析:


[tag-a]
   [tag-a]
   [/tag-a]
[/tag-a]
这就是do_shortcode()所使用的上下文无关的正则表达式解析器的局限性——运行速度快,但不能计算嵌套级别,因此解析器不能正确匹配所有开放标签与相应的关闭标签。






十、注释码


你看过赛车引擎盖下面的摆设么?里面的各种附加功能数不胜数。还记得你第一次看到 PHP, CSS, 或HTML 代码时的感觉么?相信你一定也是一头雾水。所以一定要记住,公开发布你的主题和样式时,用户可能也只是“打开引擎盖随便看看”,然后无奈地离开。


注释代码是什么?
注释或注释码是代码的一部分,它们能够帮助设计人员和用户从杂乱的代码中解脱出来,找到自己需要的内容。


HTML或PHP页面(PHP代码范围外)的注释是这样的:


<!-- comment here about what is going on -->
CSS文件中的注释则是这样的:


/* comment here about a style */
PHP代码内的注释是这样的:


<?php the_excerpt(); // Show excerpt and not full post content ?>
也可能是这样的:


<?php /* This is my special hack.
         It's so special it requires a comment that spans multiple lines! */


my_special_hack();
?>
追踪模板文件
WordPress 1.5版本发布新的模块化模板系统后,CSS样式就可以进行跨文件交叉了。因此在代码跨模板文件时查找引用所在的版块,的确是件令人沮丧的事,尤其是对那 些不熟悉代码的人来说。在开放的div或class中(如下所示)添加注释不是必要条件,但会带来很多帮助:


<div id="sidebar"><!-- sidebar begins -->
大多数了解HTML和CSS的人都知道,id 表示代码块的开始,因此注释可能会显得多余,但如果在每个WordPress主题的每个WordPress主循环的代码开始部分都添加上注释,就会带来很多好处了:


<!-- WordPress Loop begins here -->
在每个div特别是跨模板
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值