数字化技能提升教程，数字化时代生存宝典

数字化百科 / 产品文档 / WordPress:Designing Headers

WordPress:Designing Headers

查看全部产品文档命名空间：WordPress

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

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

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

WordPress 页眉

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

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

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

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


获奖主题

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


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

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

使用第一个经典主题的例子，图片仍然可以在背景中使用，可以在样式表的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;

}

背景颜色设置成绿荫色从而使环绕页眉所有方向的边框改变颜色，创建一种绿荫效果，字体的宽度设置成正常字体间距的230%。在左边的padding
从左边缩进文本。

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

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

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

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

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

[[WordPress:Image:connectionsthemeheader.jpg|center|400px|联系主题页眉]]

改变页眉图片

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

#header {

  background: url("/images/wc_header.jpg") 

  no-repeat bottom center; }

#headerimg  {

  margin: 7px 9px 0; 

  height: 192px; 

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

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

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

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

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

  • h1
  • header
  • headerimg
  • description

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

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

[[WordPress:Image:redtrainthemeheader.jpg|center|400px|Red Train 主题页眉]]

页眉图片详细说明

适合默认WordPress主题的页眉图片的尺寸大约是192 x 740 象素。如果你正打算替换WordPress主题的页眉，需要检查页眉图片的尺寸，然后找到一个适合这个尺寸的替换图片。如果你选择一个小于或者宽于或者高于页眉图片的替换图片，你可能必须要更改网页上的其他结构元素，以适应页眉的修改。 如果你正修改整个站点的主题，全部页面的宽度或者内容区域都需要考虑到。两个最普通的屏幕尺寸是1024x768 和 800x600 象素。然而，宽屏显示器正逐渐增多，网页设计者现在需要为1280x1024 和 1600x1200象素做准备了。

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

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

#header { 

background: url("/images/kubrickheader.jpg") 

repeat-x top left; }

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

页眉艺术

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

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

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

页眉艺术版权

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

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

设计你自己的页眉艺术

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

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

隐藏页眉文本

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

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

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

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

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

h1 {

   font-size: 0;

   text-indent: -1000px; }

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

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

让整个页眉可以点击

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

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

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

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