WordPress:Designing Headers

都说你无法根据一本书的封面来判断它，但是人们天天都在这样做。他们拿起一本书，看看封面，要么翻转过来把书放下，要么打开，只是根据封面看起来如何。网页如何也同样通过它们的封面来判断。第一印象通常来自页眉。

你的站点的页眉是人们看见的代表性的第一个东西。通过这个贯穿整个页面上部的题头或者[[WordPress:#Header Art|页眉艺术]]，人们对他们将要看到和阅读的东西就做出了一个整体的判断。那些说出你不能通过封面判断一本书的人，同样会说出你只有30秒来获得一个好印象的话。在Internet世界，下一页只是点一下而已，你拥有的时间将比看书更少。

我们准备把你带入WordPress的页眉的内部结构中去，提供一些如何定义它使它成为你自己的书的封面并吸引人们进入你的站点给他们一个好印象的方法。然后我们提供一些从专家那里得来的有关制作好页眉的技巧。

WordPress 页眉

默认情况下，WordPress 页眉是一段简单的代码。不论你使用的是哪种WordPress主题，你不用进入代码改变页眉。你在管理 > 操作面板中设置blog或者站点标题和描述，WordPress就会自动完成剩下的东西。

用最简单的形式，经典的WordPress主题在header.php模板文件中的页眉代码是这样的：

<h1 id="header">
<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</h1>

页眉是设置在h1HTML标签中的，有一个带有两个不同的选项或者参数 的模板标签，你可以在文档bloginfo()找到更多的有关这些参数的信息。基本上，第一个用连接的方式显示了站点的URL，第二个显示了blog或者是站点的名字，这和Admin > Options设置面板中的是一样的。当使用者把鼠标滑过页眉标题的时候，页眉可以被点击并回到选项面板中设置的站点的主页或者首页。

默认的WordPress主题背景中带有一个图片并按如下的代码显示页眉：

<div id="header">
 <div id="headerimg">
   <h1>
    <a href="<?php echo get_settings('home'); ?>">
       <?php bloginfo('name'); ?></a>
   </h1>
     <div class="description">
       <?php bloginfo('description'); ?>
     </div>
  </div>
</div>

获奖主题

本文显示出的主题页眉是一些由Alex King主办的2005 WordPress 主题竞赛获奖作品.

thumb|left|默认主题/Kubrick 主题带有blog或者站点名字的模板标签是一个连接，但这表现出了它另外一个类似URL的请求的功能。它获得相同的信息，只是方法不一样。它同样也从选项面板加入网站的说明。

基本说来，这两个页眉的例子功能都是一样的，只是实现方法不同。它们在页眉上提供了信息，可以添加图片，还有[[WordPress:#Making_the_Whole_Header_Clickable|可点击的页眉标题]]提供了关于网站的导航功能。唯一的问题就是你想在页眉上加入多少信息，和这些信息如何显示。

使用第一个经典主题的例子，图片仍然可以在背景中使用，可以在样式表的h1选择器中设置，但是通过给出它自己的层，第二个为页眉图片的使用添加了更多的控制选项。这些都由样式表全权控制。

设计页眉样式

如上边两个例子中列出的，页眉的样式是包含在h1header, headerimg, and description几种CSS选择器中的。这些都可以在style.css文件中找到，尽管很多可以在你使用的主题中的header.php文件里找到。你需要同时检查这两个部分。

在经典主题里，页眉的CSS样式可以在一个选择器中找到，#header

#header {
	background: #90a090;
	border-bottom: double 3px #aba;
	border-left: solid 1px #9a9;
	border-right: solid 1px #565;
	border-top: solid 1px #9a9;
	font: italic normal 230% 'Times New Roman', Times, serif;
	letter-spacing: 0.2em;
	margin: 0;
	padding: 15px 10px 15px 60px;
}

The background color is set to a green shade and there is a border all the way around the header which changes colors creating a recessed, shadow effect. The Times font is set with a size of 230% with a wider than normal letter spacing. The padding on the left side indents the text in from the left.

All of these can be easily changed, giving the border a thicker width and making it all the same color, changing the background color, the font size and style, the letter spacing, and more by modifying the information in each style attribute.

所有这些都很容易改变，给边线一个大一点的宽度，给它们一样的颜色，改变背景颜色，字体大小和类型，字母间距，还有通过样式属性可以更改的更多信息。

The same is true of the Default WordPress Theme header, except there are more styles to think about and they are found within the header.php's "head" tag and the style.css, though once you have your styles set, you can move the information into your style sheet.

相同点是对于适合的默认WordPress主题页眉，除了有更多的样式考虑和它们可以在header.php的 "head" 标签和 and ，style.css中找到以外，你一旦有了你自己的样式设置，你可以把这些信息移到你的样式表中。

The styles that control the header's look are found within the h1, header, headerimg, and description CSS selectors. Just like the Classic Theme, find these references and make your modifications there to change the look.

控制页眉的外观的样式可以在h1, header, headerimg, 和 descriptionCSS选择器中找到。就象经典主题，找到这些参数并修改来改变外观。

Changing the header image of the Default WordPress Theme has been simplified with the introduction of a utility called Kubrickr. It simply asks you to supply a new image file name for the header and then switches it for you, so you do not have to dig into the code. If all you want to change is the header image, this is an extremely useful and easy tool.

改变页眉的默认WordPress主题图片。主题与叫做Kubrickr的用法介绍相比，简单化了。它只是简单的要求你为页眉提供一个新的图片文件名，然后为你更换图片，这样你不用再去更改代码了。如果你所要的只是更换页眉的图片，这是最直接最有用最容易的工具了。

If you do want to get your hands into the code, dig into your header styles and make the changes. Below is a simple tutorial on changing just the header image manually.

center|400px|Connections Theme Header

如果你想要看看代码，进入代码的页眉样式来做更改的话，以下内容是有关手动的，只改变页眉图片的简单操作指导。

center|400px|联系主题页眉

Changing the Header Image

There are many different [[WordPress:#Header_Resources_and_Information|header images and header art]] available for you to use to change the image in the header. The styles for the header image for the Default or Kubrick WordPress Theme, and any Theme based upon that Theme, are more complicated to change than those for the Classic Theme. The styles are found within the styles in the header.php "head" section, as well as in the styles.css. To change only the header image reference, open the header.php template file and look for the styles like this:

#header {
  background: url("<?php bloginfo('stylesheet_directory'); ?>/images/wc_header.jpg") 
  no-repeat bottom center; }
#headerimg  {
  margin: 7px 9px 0; 
  height: 192px; 
  width: 740px; }

NOTE: The use of the bloginfo tag only works when the style is used within the head of the template file. WordPress template tags will not work in the style sheet (style.css). To move this style to the style sheet, change the template tag to the actual address (URL) of the header image graphic.

改变页眉图片

有很多种不同的[[WordPress:#Header_Resources_and_Information|页眉图片和页眉艺术]]可以用来改变页眉的图片。默认或者Kubrick WordPress主题的页眉图片，还有其他基于那些主题的主题，比经典主题修改起来更复杂。样式可以在header.php的"head"部分找到，也可以在styles.css中找到。要是只想改变页眉的图片参数，打开header.php模板文件，找到如下样式：

#header {
  background: url("<?php bloginfo('stylesheet_directory'); ?>/images/wc_header.jpg") 
  no-repeat bottom center; }
#headerimg  {
  margin: 7px 9px 0; 
  height: 192px; 
  width: 740px; }

注意: bloginfo标签的使用只在样式在head模板文件中时起作用。WordPress 模板标签 在样式表中是没有作用的(style.css). 要把这个样式移动到样式表中，改变模板标签为页眉图片的有效地址(URL).

To change the image file, replace the "kubrickheader.jpg" with the name of the new graphic image you have uploaded to your site to replace it. If it is in a different directory, change that by replacing the bloginfo() tag with the specific address of the graphic's location.

要改变图片文件，就使用一个新的你上传到站点上的文件替换"kubrickheader.jpg"文件。如果在不同的目录中，通过使用图片位置的专用地址替换bloginfo()标签来更改。

If you are using an image that is the same size, then simply replace the image. If it is a different size, fill in the height and width of the image in the next section called #headerimg. If you do not know, and are using Windows, view the folder in which the image resides on your computer in Thumbnail view mode. Click View > Thumbnail from the Windows Explorer menu. In Thumbnail view mode, find your image and hold the mouse over it. A small balloon tip will pop up listing the dimensions. Use that information in the styles. Otherwise, just right click on the image file and choose Properties and it should give you the file size and dimensions.

如果你在使用大小相同的图片，只需简单的替换图片即可。如果大小不同，在#headerimg部分填入图片的高度和宽度。如果你不知道，如果你现在使用的是windows系统，用Thumbnail模式查看图片所在的文件夹。从Windows Explorer菜单中点击View > Thumbnail。在Thumbnail查看模式下，找到你的图片并把鼠标放在上边，一个气球就会弹出来列出尺寸大小。在样式中使用这些信息。或者，右击图片文件选择Properties，它就会显示出问家大小和尺寸大小了。

Save the template file and upload it and the image to your website and take a look. Some changes may need to be made to fine-tune the placement and look.

保存模板文件，把它和图片一起上传到你的站点并查看。可能还需要一些小的修改来调整整个外观。

With the header image in place, it is time to tackle the rest of the header. Open your style.css style sheet file and look for the following:

• h1
• header
• headerimg
• description

改动好页眉图片文件后，该解决页眉其他部分了。打开你的style.css样式表文件，查看如下代码：

• h1
• header
• headerimg
• description

Your Theme may or may not have all of these, but the Default Theme has all of them in different places within the style sheet. All or some of these may need to have the attributes changed to change the look of your header.

你的主题可能有或者可能没有所有这些，但是默认主题中在样式表的不同的地方有上述全部内容。在需要更改你的页眉的外观时会用到它们中所有或者部分的内容。

If you change the size of the header image or header art, be sure and change the other structural CSS selectors like content and sidebar to accommodate the change in the header size.

center|400px|Red Train Theme Header

如果你改变的页眉图片或者页眉艺术的尺寸，记住改变别的CSS选择器的结构如内容和边栏以适应页眉的改动。

center|400px|Red Train 主题页眉

Header Image Specifications

A header image that fits within the Default WordPress Theme is about 192 x 740 pixels. If you are replacing the header within any WordPress Theme, check the size of the header image and then find a replacement that matches that size. If you choose a header image that is smaller or wider or taller than the replacement, you may have to modify the other structural elements of the web page to allow for the change in size of the header.

页眉图片详细说明

适合默认WordPress主题的页眉图片的尺寸大约是192 x 740 象素。如果你正打算替换WordPress主题的页眉，需要检查页眉图片的尺寸，然后找到一个适合这个尺寸的替换图片。如果你选择一个小于或者宽于或者高于页眉图片的替换图片，你可能必须要更改其他网页上的结构元素，以适应页眉的修改。

If you are modifying the entire site's Theme, the width of the overall page or content area needs to be taken into consideration for the header image's size. The two most common screen sizes are 1024x768 and 800x600 pixels. Yet, wide screen monitors are gaining ground and web designers now need to prepare for screen widths of 1280x1024 and 1600x1200.

如果你正修改整个站点的主题，全部页面的宽度或者内容区域都需要考虑到。两个最普通的屏幕尺寸是1024x768 和 800x600 象素。然而，宽屏显示器正逐渐增多，网页设计着现在需要为1280x1024 和 1600x1200象素做准备了。

If you set your website to "float," positioned in the middle of the browser window with space on either side, then you can set your header width to whatever you want. If you are designing a Theme with a flexible or "elastic" screen width, then the width of your header becomes important.

如果你把你的页面设置为"漂浮,"定位在浏览器窗口中间，两边留有空间，那么你可以设置你的页眉宽度为任意值。如果你想设计一个带有固定或者"弹性"的宽度的主题，你的页眉宽度就变的重要起来了。

If you are using a header image that can be repeated, and you are using elastic widths, you can set the styles within the header to repeat to fill the space:

#header { 
background: url("/images/kubrickheader.jpg") 
repeat-x top left; }

This sets the header image to repeat horizontally beginning from the top left corner and going across. You can adjust these to whatever background position your header design and layout needs.

如果你正使用可重复的页眉图片，你同时在使用弹性宽度，你可以在页眉中设置样式来重复图片填充剩余空间：

#header { 
background: url("/images/kubrickheader.jpg") 
repeat-x top left; }

这样，设置页眉从左上角开始水平重复穿过整个页面。你可以调整这些背景位置以适应任何你的页眉和版面的需要。

Header Art

A new term growing in the web design field is header art. These are header images that are usually handmade using combinations of color, shapes, symbols, images, and text. They can take some time and labor to create. While there are some [[WordPress:#Resources for Header Images|free header art sites]], some sites sell their handmade header art. Although a photograph may be unique in its own way and convey the needed visual style, handmade header artwork is easier to match to other web page colors and is usually more aesthetically pleasing because of its distinctive nature.

Choosing pre-made header art has some benefits. The artists have already done the work and all you have to do is choose the design that best matches your website. And the graphic is ready to use, already sized and saved as a small file size.

Digital Westex's WordPress Header Art features a wide range of header art sized and ready for free download specifically for WordPress.

页眉艺术

新兴的网页设计领域的一个新术语正在发展，叫做页眉艺术.这些页眉图片经常是颜色、图形、符号、图片和文本的手工混合。有些[[WordPress:#Resources for Header Images|免费页眉艺术网站]]出现的同时，一些网站也在卖他们的手工制作页眉艺术。尽管一个照片可以是独一无二的，达到了视觉上的效果，手工制作的的页眉艺术更容易的达到了网页颜色的匹配和审美上的愉悦感，因为它们有育种不同的本质。

选择预先做好的页眉艺术有几点好处。艺术家已经做完了这些工作，你所需要做的只是选择最匹配你的网页的设计。图片已经准备好。已经有了大小并作为一个小文件保存起来以供使用了。

Digital Westex's WordPress 页眉艺术 包含了面向WordPress广泛的页眉艺术并免费提供下载使用。

Header Art Copyrights

The best header art to use, if you do not want to generate your own, is any that bear the Creative Commons License that specifically allows its public use. Read the individual license for the image's use to make sure that you have permission to use the header art on your site. Usually you must attribute the author, share alike and not use it for commercial purposes. If in doubt, always ask permission from the author before use.

页眉艺术版权

如果你不想做你自己的页眉艺术，那么最好的页眉艺术，是那些具有创造性使用许可的，明确允许公共使用的页眉艺术。阅读单独的图片使用许可，确定你有在你的页面上使用这个页眉艺术的允许。通常你必须加上作者的名字，共享，并且不能做商业用途。如果有疑问，一定要在使用前获得作者的允许。

As header art is made and licensed "as is" by the designer/artist, some header art cannot be modified without the artist's permission. Check the website copyrights and licenses and ask if you are in doubt and wish to modify the artwork.

如同页眉艺术通过设计者/艺术家的"照原来的样子"的创作和许可，有些页眉艺术在没有作者允许的情况下不能修改。如果你有疑问并且想修改页眉艺术的话，检查网页版权和许可并且咨询。

Designing Your Own Header Art

You can also design your own header art. Any graphic design software program will work. Popular ones include Adobe Photoshop, Adobe Elements, JASC PaintShop Pro, The Gimp and Macromedia Fireworks. The graphic design software should have the ability to resize and control the resolution and type of the image when saved. The size of your header art should be the size of the header container you're going to put it in.

设计你自己的页眉艺术

你也可以设计你自己的页眉艺术。任何图形设计软件都可以。比较流行的包括Adobe Photoshop, Adobe Elements, JASC PaintShop Pro, The Gimp 和 Macromedia Fireworks.图形设计软件应该具有调整大小和控制分辨率的能力，并且能够在保存后打印图片。页眉艺术的大小应该适合你即将使用的页眉的尺寸。

You can use your own photographs, artwork, fonts, and any combination of images to create your header art. When done, save it "for the web" as a jpg, gif, or .png file. For an explanation on which to use read Sitepoint's GIF-JPG-PNG What's the Difference article. These file types will compress the image's resolution, reducing the file's size. In general, avoid file sizes larger than 50K as larger sizes tend to slow a site access times. center|400px|Fast Track Theme Header

你可以使用你自己的照片，艺术作品，字体和任何图片的集合来建立你的页眉艺术。做好之后，保存成"基于网页"的jpg, gif, 或者 .png格式的文件。至于使用哪个可以阅读Sitepoint's GIF-JPG-PNG 有什么不同点这篇文章。这些文件格式将压缩图片的分辨率，减小文件尺寸。总体来说，避免文件尺寸大于50K，因为过大的文件尺寸将减慢访问进入的时间。 center|400px|快速搜索主题页眉

Hiding the Header Text

Many Themes and Theme designers want to feature their header with a picture only, no text. Some will put the text in the graphic image, therefore not requiring the actual use of the text. One option is to remove the template tags that generate the title and description. The other option is to leave it in, but hide it.

隐藏页眉文本

很多主题和主题设计者希望页眉只有图片而没有文本。有的人会加入一些文本到图形中，因此不要求文本的实际应用。一种做法就是删除模板标签中的生成标题和描述的部分，另一种做法就是保留，但是隐藏它。

To hide the header text while leaving it in the code, do not change anything in your template files. Only change the CSS. Add display:none to the CSS selectors you do not want to appear. For example, to hide the text within the h1 selector:

h1 {display:none; font-size: 230%; color: blue;.......

It is still there, but the browser has been commanded to not show it in any way. The container literally is "not there."

要想隐藏代码中留下的页眉文本，不需要改动模板文件中的任何东西，只需要改变CSS。加入display:none到你不希望显示的CSS选择器，举例来说，要想隐藏h1选择器中的文本：

h1 {display:none; font-size: 230%; color: blue;.......

文本仍然在，只是浏览器被命令不以任何方式显示它。我们可以认为它"不存在."

It might be hidden, but some web page screen readers and search engines will still find the information. If you are serious about making your site be accessible, some newer text readers access the style sheet and do not read the elements marked display:none. There are two popular methods for working around this. One is to use the display:none as outlined above, but also include an aural style sheet that changes that selector to display:block, "turning the visibility" back on. The other method is to position the content literally "off the page" by a negative indent. Here is an example:

h1 {
   font-size: 0;
   text-indent: -1000px; }

可能它已经隐藏了，但是有的网页阅读器或者搜索引擎仍然可以找到它。如果你对你的网页的可用性很严格的话，可以让一些新的文本阅读器进入了样式表而且不读取标记为display:none的内容。目前有两种流行的方法，一是使用display:none，如上所述，但是同样也包含了一个 听觉样式表，更改选择器为display:block，"把改变可见度"关上。另一种方法是使用负缩进把内容逐字的"放到页面外"。如

h1 {
   font-size: 0;
   text-indent: -1000px; }

This technique moves the entire h1 tag and its contents physically off the web page. The screen reader will still "read" the text because it is there, but it will not display on the page. Extensive testing has proven so far that this technique works across most browsers and with all screen readers.

这个技巧把整个h1标签和内容移动到网页之外去了，屏幕阅读器仍然可以"读"到文本，但是不能在页面上显示出来了。广泛的测试表情，目前为止这种技巧对于大多数浏览器和所有的屏幕阅读器都是起作用的。

For more information on either technique and aural style sheets:

• What do Screen Readers really say? (Accessibility and display:none)
• Testing Screen Readers and display:none
• Facts and Opinion About Fahrner Image Replacement
• Hiding Text But Not From Screen Readers
• W3's Aural Style Sheets
• About Web Design's Aural Style Sheets
• ACSS: Aural Style Sheets
• Richinstyles Guide to Aural Style Sheets

有关技巧和aural style sheets的更多信息：

• 屏幕阅读器真正都阅读了什么? (Accessibility and display:none)
• 屏幕阅读器和display:none的测试
• 关于Fahrner图片替换的事实与观点
• 隐藏文本，除了屏幕阅读器
• W3的 听觉样式表
• 关于网页设计的听觉样式表
• ACSS: 听觉样式表
• [1]

Making the Whole Header Clickable

To make the entire header, graphic and all, clickable, you have two choices. You can either change the position of the link to surround the entire area, or add links to the specific areas to encompass them all.

让整个页眉可以点击

要想让这个页眉，图形，可以点击，你有两种方法。你可以把连接的位置改为环绕整个区域，或者把连接加入到特定区域把它们环绕起来。

To make the entire header of the WordPress Classic Theme into a clickable header:

<a href="<?php bloginfo('url'); ?>">
  <h1 id="header">
    <?php bloginfo('name'); ?>
  </h1>
</a>

把整个页眉的WordPress经典主题变为一个可以点击的页眉：

<a href="<?php bloginfo('url'); ?>">
  <h1 id="header">
    <?php bloginfo('name'); ?>
  </h1>
</a>

You can use the method offered by the Theme's author to make the entire WordPress Default/Kubrick Theme header clickable:

• Open header.php template file.
• Change from <div id="header"> to:

<div id="header" onclick="location.href='http://siteaddress/';" style="cursor: pointer;">

你可以使用主题作者提供的方法，让整个WordPress默认/ Kubrick主题页眉可点击：

• Open header.php template file.
• Change from <div id="header"> to:

<div id="header" onclick="location.href='http://siteaddress/';" style="cursor: pointer;">

What if you want only the text areas of the header to be clickable and not the entire header image? Add links only to the title and description:

<div id="header">
 <div id="headerimg">
   <h1>
     <a href="<?php echo get_settings('home'); ?>">
       <?php bloginfo('name'); ?>
     </a>
   </h1>
 <div class="description">
   <a href="<?php echo get_settings('home'); ?>">
     <?php bloginfo('description'); ?>
   </a>
  </div>
 </div>
</div>

如果你只是想把文本区域变为可点击而不是整个页眉呢？按照以下代码把连接加到标题和描述：

<div id="header">
 <div id="headerimg">
   <h1>
     <a href="<?php echo get_settings('home'); ?>">
       <?php bloginfo('name'); ?>
     </a>
   </h1>
 <div class="description">
   <a href="<?php echo get_settings('home'); ?>">
     <?php bloginfo('description'); ?>
   </a>
  </div>
 </div>
</div>

And if you want to have different links to the two lines of text in your header, then change one of them to the link you want:

<div id="header">
 <div id="headerimg">
   <h1>
     <a href="<?php echo get_settings('home'); ?>">
       <?php bloginfo('name'); ?>
     </a>
   </h1>
 <div class="description">
   <a title="Home Page" href="home.php">
   </a>
  </div>
 </div>
</div>

而如果你想两行不同的文本有不同的连接，就改变其中的一个到另外一个连接：

<div id="header">
 <div id="headerimg">
   <h1>
     <a href="<?php echo get_settings('home'); ?>">
       <?php bloginfo('name'); ?>
     </a>
   </h1>
 <div class="description">
   <a title="Home Page" href="home.php">
   </a>
  </div>
 </div>
</div>

center|400px|Head Theme Header

center|400px|顶部主题页眉

Rotating Header Images

There are several scripts available that will allow you to rotate images within the header, sidebar, or on any template file. We will examine the use of one of these, the Random Image Rotator.

旋转页眉图片

有几种脚本可以用来让你在页眉、边栏或者其他任何模板文件里旋转图片。我们来看这其中的一种，随机图片旋转器.

Save the script to a separate folder in which you have the header images you wish to rotate in your header. For this example, call it rotate.php. To use this as a background image that changes or rotates with every load of the web page:

#header { 
background: url("/images/headerimgs/rotate.php") 
no-repeat bottom center; }

保存这脚本到另外一个文件夹，文件夹中有你要旋转的页眉图片文件。这个例子我们叫它rotate.php。要使用它作为一个每次网页加载后改变或者旋转的背景图片：

#header { 
background: url("/images/headerimgs/rotate.php") 
no-repeat bottom center; }

To actually put this in your header, or elsewhere on your site, add an image link like this within the header division:

<img src="/images/headerimgs/rotate.php" alt="A Random Header Image" />

要想把这加入到你的页眉中，或者站点上其它位置，把下面图片连接加入到header层：

<img src="/images/headerimgs/rotate.php" alt="A Random Header Image" />

Image rotating scripts include:

• Photomatt's Random Image Rotator
• Image Rotator PHP from Automatic Labs
• WordPress Randomize Plugin

center|400px|RDC Theme Header

图片旋转脚本包括：

• Photomatt的随机图片旋转器
• 来自Automatic Labs的PHP图片旋转器
• WordPress 随机插件

Adding Navigation to Your Header

Headers are another area where you can add navigation elements to your website. Typically these are horizontal menus at the top or bottom of your header. To add these, create a new division within the header to style your header navigation elements.

在页眉中加入导航

页眉是网页上可以加入导航元素的另一个部分。是在页眉顶或者底部的水平菜单。想加入导航，在header中建立一个新的层，来设计你的页眉导航元素。

This can be as simple as displaying your categories across the top of the header using one of the List Categories template tags. Let us look at one example using the list_cats() tag.

这可能就如同在页眉顶部显示使用了List Categories 模板标签的分类一样简单。让我们看看使用了list_cats()标签的例子吧

In this example, the list_cats() template tag is set to sort the list of categories by ID in an unordered list (<ul><li>) without dates or post counts, does not hide empty categories, uses category "description" for the title in the links, does not show the children of the parent categories, and excludes categories 1 and 33. It sits in its own "category" division. Notice that a link to the "home" page or front page has been included manually at the start of the list.

<div id="header">
<div id="categorylist">
<ul><li>
<a title="Home Page" href="index.php">HOME</a></li>
<?php list_cats(FALSE, '', 'ID', 'asc', '', TRUE, FALSE,
FALSE, FALSE, TRUE, FALSE, FALSE, '', FALSE,
'', '', '1,33', TRUE); ?>
</ul>
</div><!-- end of categorylist -->
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div><!-- end of header -->

在这个例子中，list_cats()模板标签在一个无序列表(<ul><li>)中被设置为按ID排列，没有日期和帖子计数，不隐藏空分类，在连接标题中使用分类"描述"，不显示父类的子类，不包括分类1和33。它存在于它自己的"分类"层中。注意"主页"或者首页的连接已经在列表开始的地方包括进去了。

<div id="header">
<div id="categorylist">
<ul><li>
<a title="Home Page" href="index.php">HOME</a></li>
<?php list_cats(FALSE, '', 'ID', 'asc', '', TRUE, FALSE,
FALSE, FALSE, TRUE, FALSE, FALSE, '', FALSE,
'', '', '1,33', TRUE); ?>
</ul>
</div><!-- end of categorylist -->
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
</div><!-- end of header -->

要设计这个列表, style.css中的#categorylist 可以是:

#categorylist {font-size:12px; font-style:normal;
        text-transform:uppercase; }
#categorylist ul {list-style-type: none; list-style-image:none; 
        margin:0; padding-bottom: 20px; }
#categorylist li { display: inline; padding: 0px 5px;}
#categorylist a:link, #category a:visited {color:blue}
#categorylist a:hover {color:red}

看起来可能是这样:

WORDPRESS   COMPUTERS   INTERNET NEWS

You can also add your Pages, archives, and other links within your header navigation. For more information on navigation menus:

• WordPress:Good Navigation Links
• WordPress:Dynamic Menu Highlighting
• WordPress:Creating Horizontal Menus
• WordPress:Styling Lists with CSS
• wp_list_cats()
• list_cats()

同样你也可以把你的Pages，文档和其他的页眉连接加入到页眉导航。有关导航菜单的更多信息请看：

• 好的导航连接
• 动态高亮菜单
• 创建水平菜单
• 使用CSS设计列表
• wp_list_cats()
• list_cats()

Header Tips

Here are some tips and information to help you choose and customize your WordPress site's header.

Pay attention to text placement and color.

The colors and placement of the text within a header can add or subtract to your presentation. Here are some tips.

• If you use white text, make sure there is a background color in the header and/or headerimg to showcase the white text again if for some reason the image does not appear on the screen or the user has "show images" turned off. This will allow your white text to still be visible.
• If the image has a main feature or element, position the text so it does not cover the main subject of the image.
• If the text is hard to read against a busy area of the graphic, position the text to a less busy area of the header image.
• Make sure the color of the text is easily seen by your visitors and does not clash with the header art colors. Fluorescent orange text on a lime green background is painful.
• Be aware that some color differences and patterns in your header art may make the text letters in your overlaid text "disappear." The same applies if you embed the text in your header art or header image.

Have a purpose and point.

A good header reflects the content of the site. The rest of the site has to meet expectations and live up to the header, so the header must reflect the content, purpose and intention of the site.

It should invite visitors to remain.

A good header is like the cover of a book or magazine. It should encourage people to stay and have a look around, read and look more, and find something of value. It is the teaser, the lead that grabs their attention and says "there is something worth exploring here."

It should blend in with the overall look.

Bold and dramatic headers lend themselves to boldly designed sites, whereas soft and pastel colored sites lend themselves to gentler graphic headers. A site dedicated to punk rock and grunge should have a header look punky and grungy. It is up to you, but think consistency.

Headers do not need to have pictures.

Not all headers must have pictures and graphics. Sometimes the words are more important, whether they are against a wash of color or a white background.

Cluttered headers are still cluttered.

Avoid cramming ads, navigation, text, scrolling news feeds, and the kitchen sink into your header. Simple is always better.

Maintain accessibility standards in your header.

We mentioned [[WordPress:#Hiding the Header Text|hiding the header text]], and there is more you can do to make sure your header meets accessibility standards. Use the h1 tag so screen readers will recognize it as a header. Use titles and alt descriptions in links and images used in the template file (not in the style sheet as background images).

Headers can be any height, but remember content sells.

The average header is less than 200 pixels high, but headers range in height from very thin to a half page. Remember that the main reason people visit your site is its content, and the more they have to scroll down past your header to get to the content, the less interested they tend to be. Help lead them to the content with your header.

Think "Site Identity."

A header is part of the site's identify or "brand" and people like to know they are on the same site when they click a link to another page within that site. Consider your header or header art as your site's "brand identity".

页眉小技巧

以下是一些小技巧和信息，以帮助你选择和定义你的WordPress 网站页眉。

注意文本布置和颜色.

页眉中的文本的颜色和布置可以从界面上添加或减去。下面是些小技巧

• 如果你使用白色的文本，要确定header或者headerimg中有背景色以显示出白色文本，这样如果因为某种原因图片不能显示或者使用者的"显示图片"关闭了，仍然可以显示出白色的文本。
• 如果图片有主要的颜色或者元素，把文本定位，这样不会覆盖到图片的主要内容。
• 如果文本在一个繁忙的图形区域而难以阅读，把文本定位到一个页眉上不那么繁忙的区域。
• 确认文本的颜色容易被访问者辨认，不会与页眉艺术颜色不协调。荧光橘红色在一个灰绿色背景上的话，会显得很难看。
• 注意一些颜色的差别和一些页眉艺术上的图形可能造成文本在你的覆盖区域"消失"了。如果你在页眉艺术或者图片中嵌入文本的话，也可能发生同样的事。

有目的和重点.

一个好的页眉反映出了站点的内容。站点其他的部分必须达到页眉的预期，与页眉共存。所以页眉必须反映内容、目的和站点的意图。

应该吸引访问者停留.

好的页眉就象书的封面一样。应该鼓励人们停留并且到处看看，阅读并且看更多的内容，找到一些有价值的东西。它是引起人们的好奇心，引导他们抓住他们的注意力，让他们说"这有些值得探索的东西."

应该掺入全面的看法.

设计大胆的站点使用粗体的生动的页眉，幽雅的图形页眉用于温和的彩色蜡笔的设计。punk rock和grunge站点应该使用看起来旁克的页眉。取决于你自己，但是要注意一致性。

页眉不需要图画.

不是所有的页眉都要图片和图形。不论它们是否与颜色或者白色背景互相冲突，有时候文字更加重要。

混乱的页眉越发混乱.

避免充满广告、导航、文字、滚动新闻feed，象厨房一样混乱。简单总比混乱好。

保持页眉的可用性标准.

提到[[WordPress:#Hiding the Header Text|隐藏页眉文本]], 有更多你可以兆微度的来确认你的页眉是否达到了可用性的标准。使用h1标签，这样屏幕阅读器将识别为页眉. 在连接中使用标题和alt 描述，在模板文件中使用图片(不在样式表中使用背景图片).

页眉可以是任何高度，但是记住内容有多少.

平均页眉高度小于200象素,但是页眉高度范围可以从很小到半个页面。记住主要人们访问你的页面的的原因是它的内容，越需要拖动页眉向下来看内容，他们对页面的兴趣越小。使用页眉帮助他们引导他们到主要内容上去。

考虑"网站身份证."

页眉是站点身份的一部分，或者说是"商标"，当人们点了某个连接后，他们需要知道他们还在同一个网站内，把你的页眉或者页眉当作网站的"商标身份"来考虑。

Header Resources and Information

Header Images

Many WordPress Themes come with header image graphics you can use because they are released for free use under the GPL - General Public License. Or you can use one of the many resources available for free on the Internet, or design your own.

页眉资源和信息

页眉图片

很多WordPress主题带有页眉图片可以自由使用，因为他们是在GPL - General Public License下免费发布的。你也可以使用网络上的任何一个免费资源，或者自己设计。

Here are a few resources for header images:

• Digital Westex Image Gallery WordPress 1.5 Header Art Replacements
• Image * After - Free Stock Image Library
• Stock.xchng - Free Stock Image Library
• About.com's Webclipart Welcome, Headers, and Logos
• Free Header Images by MrDoubts
• Free Header Images by 100pixel

这里是一些页眉图片资源：

• Digital Westex Image Gallery WordPress 1.5 Header Art Replacements
• Image * After - Free Stock Image Library
• Stock.xchng - Free Stock Image Library
• About.com's Webclipart Welcome, Headers, and Logos
• Free Header Images by MrDoubts
• Free Header Images by 100pixel

页眉信息

• WordPress:Designing Headings
• Kubrickr - Changes Default Theme Header Images
• Experiments with CSS headings, background images, and more
• Using Real Headers
• Yale Manual: Headers and Footers - The best measure of home page efficiency