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;
}

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

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

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

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

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

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

center|400px|联系主题页眉

改变页眉图片[ ]

有很多种不同的[[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).

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

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

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

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

  • h1
  • header
  • headerimg
  • description

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

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

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，因为过大的文件尺寸将减慢访问进入的时间。 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经典主题变为一个可以点击的页眉： 

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

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

  • Open header.php template file.
  • Change from <div id="header"> to:
<div id="header" onclick="location.href='http://siteaddress/';" style="cursor: pointer;">

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

<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 title="Home Page" href="home.php">
   </a>
  </div>
 </div>
</div>

center|400px|顶部主题页眉

旋转页眉图片[ ]

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

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

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

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

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

图片旋转脚本包括：

center|400px|RDC 页眉主题

在页眉中加入导航[ ]

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

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


在这个例子中，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

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

页眉小技巧[ ]

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

注意文本布置和颜色.
页眉中的文本的颜色和布置可以从界面上添加或减去。下面是些小技巧
  • 如果你使用白色的文本，要确定header或者headerimg中有背景色以显示出白色文本，这样如果因为某种原因图片不能显示或者使用者的"显示图片"关闭了，仍然可以显示出白色的文本。
  • 如果图片有主要的颜色或者元素，把文本定位，这样不会覆盖到图片的主要内容。
  • 如果文本在一个繁忙的图形区域而难以阅读，把文本定位到一个页眉上不那么繁忙的区域。
  • 确认文本的颜色容易被访问者辨认，不会与页眉艺术颜色不协调。荧光橘红色在一个灰绿色背景上的话，会显得很难看。
  • 注意一些颜色的差别和一些页眉艺术上的图形可能造成文本在你的覆盖区域"消失"了。如果你在页眉艺术或者图片中嵌入文本的话，也可能发生同样的事。
有目的和重点.
一个好的页眉反映出了站点的内容。站点其他的部分必须达到页眉的预期，与页眉共存。所以页眉必须反映内容、目的和站点的意图。
应该吸引访问者停留.
好的页眉就象书的封面一样。应该鼓励人们停留并且到处看看，阅读并且看更多的内容，找到一些有价值的东西。它是引起人们的好奇心，引导他们抓住他们的注意力，让他们说"这有些值得探索的东西."
应该掺入全面的看法.
设计大胆的站点使用粗体的生动的页眉，幽雅的图形页眉用于温和的彩色蜡笔的设计。punk rock和grunge站点应该使用看起来旁克的页眉。取决于你自己，但是要注意一致性。
页眉不需要图画.
不是所有的页眉都要图片和图形。不论它们是否与颜色或者白色背景互相冲突，有时候文字更加重要。
混乱的页眉越发混乱.
避免充满广告、导航、文字、滚动新闻feed，象厨房一样混乱。简单总比混乱好。
保持页眉的可用性标准.
提到隐藏页眉文本, 有更多你可以兆微度的来确认你的页眉是否达到了可用性的标准。使用h1标签，这样屏幕阅读器将识别为页眉. 在连接中使用标题和alt 描述，在模板文件中使用图片(不在样式表中使用背景图片).
页眉可以是任何高度，但是记住内容有多少.
平均页眉高度小于200象素,但是页眉高度范围可以从很小到半个页面。记住主要人们访问你的页面的的原因是它的内容，越需要拖动页眉向下来看内容，他们对页面的兴趣越小。使用页眉帮助他们引导他们到主要内容上去。
考虑"网站身份证."
页眉是站点身份的一部分，或者说是"商标"，当人们点了某个连接后，他们需要知道他们还在同一个网站内，把你的页眉或者页眉当作网站的"商标身份"来考虑。

页眉资源和信息[ ]

页眉图片[ ]

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

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

页眉信息[ ]

取自“https://www.zzbaike.com/wiki/index.php?title=WordPress:Designing_Headers&oldid=8598”