WordPress:Designing Headings

一个标题不是一个页眉

The heading isn't your header, but a heading can be in your header. Confused yet? Ah, but you are here to learn. 标题不是你的页眉，但是标题可以包含在你的页眉当中。感到困惑是吗？啊，你可以在这儿学学。

The heading is simply like a title. In HTML, it is structured by using heading tags such as H1, H2, H3, and H4. Normally, as the heading number gets bigger, the font gets smaller.

标题仅仅像一个文章标题。在HTML中，它的结构是使用标题标签例如H1, H2, H3, 和H4。一般来说，标题的数字越大，字体越小。

In WordPress, the H1 heading is typically reserved for the Blog title found in the header or masthead of a page. The H2 heading is generally found in the post title, the comment title, and the sidebar. Each of these can be styled differently, dependent upon their division ID. The H3 heading is usually found in the comments, though it may be replaced by the H2 heading, dependent upon the Theme.

在WordPress中，H1标题一般是专给页眉中或者网页顶部发现的博客标题使用的。H2标题通常出现在文章标题，评论标题或者工具条中。这些中的每一个都可以设计地不同，取决于它们的层ID。H3标题通常评论中出现，虽然它可能被H2 标题代替，这取决于主题。

The H1 标题

By default, the H1 heading sits inside the header, commonly known as the masthead, of your web page theme. It often features the bloginfo() template tag:

默认情况下，H1标题在页眉旁边，一般认为是你的网页主题的报头。它通常有bloginfo()模板标签。

<h1><?php bloginfo('name'); ?></h1>

<h1><?php bloginfo('name'); ?></h1>

You will find its style information in the style.css file in your Theme folder. It is usually listed as: 在你的主题文件夹的style.css文件中，你会找到它的样式的信息。它通常被列为：

h1 {attributes}

or

#header h1 {attributes}

h1 {attributes}

或者

#header h1 {attributes}

Here you could change the look of the heading inside the #header of your web page. 你可以在你的网页的#header内部改变标题的外观。

Many people want to replace their header with an image, but still leave the text there to meet accessibility standards and for search engines. You can leave the h1 and description in place by adding the following to your style.css header references or in the header.php template file style listed in the head section:

许多人想用一个图像来替换他们的页眉，但是仍然将文件留在那儿，使其符合权限标准，也能提供给搜索引擎。通过将下面的添加到你的style.css标题参考或者列在head部分的header.php模板文件style中，你可以将h1 和 description放在合适的位置上：

h1 {display: none; font-size: 150%; color: white....}

h1 {display: none; font-size: 150%; color: white....}

The display:none instructs the browser not to display the content within the h1 tag.

display:none指示浏览器不要在h1标签内部显示内容。

The H2 标题

The H2 headings are found throughout the various WordPress Themes. It can be found most commonly in the post title, in the comment title, and in the sidebar or menu. Styling these many H2 headings can get a little complicated.

在不同的WordPress 主题中都可以发现H2标题。它通常可以在文章标题，常见标题，工具条或者菜单中发现。设计这些，许多H2标题可以变得稍微复杂。

Let's look at what might be the styles in your style.css for the different H2 headings: 让我们来看看，哪个可能是你的style.css中不同的H2标签的形式。

h2 {font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 110%; color: green; font-weight: bold; }

#comments h2 {font-size: 90%; color: yellow; font-weight: bold;
       padding: 2px; background: green; border: solid 1px navy; } 

#sidebar h2 {font-size: 85%; color: navy; background: transparent;
       font-weight: bold; border-bottom: dashed 2px yellow; }

h2 {font-family: Verdana, Arial, Helvetica, sans-serif;
       font-size: 110%; color: green; font-weight: bold; }

#评论 h2 {font-size: 90%; color: yellow; font-weight: bold;
       padding: 2px; background: green; border: solid 1px navy; } 

#工具条 h2 {font-size: 85%; color: navy; background: transparent;
       font-weight: bold; border-bottom: dashed 2px yellow; }

Each of these sections features an H2 heading in WordPress, but each one is styled completely differently. 在WordPress中，这些部分中的每一个都有一个H2标题，但是每一个的设计都不同。

By default, using the first example, any time the H2 is listed, it would look that way. By putting an ID or Class selector in front of the H2 tag, you can modify the look. But, and there is always a but with CSS styles, outside of an identifying ID or Class selector, it acts like a parent, influencing the other H2 headings.

默认情况下，使用第一个例子，任何时候列出了H2，它看起来都是那样的。通过在H2标签前，加上一个ID或者级别选择器，你就可以更改外观。但是,CSS样式通常有一个but，在一个确认的ID或者一个级别选择器的外边，它的作用就像一个面板,影响其它的H2标题。

For instance, if we hadn't designated the font color for the #comments H2, then the color would be that of the parent H2, which is green. Be careful to list all the different attributes you want changed, and remember that the parent H2 will fill in any blanks you leave out.

例如，如果我们没有为#comments H2设计字体color，那么颜色就是母亲的的 H2,是绿色的。注意要列出你可以更改的所有不同的属性，记住母亲的H2会填满你省去的任何空白。

You can learn more about the CSS parent/child relationship in the Codex article on WordPress:CSS Troubleshooting called The CSS Parent and Child Relationship

你可以在， 发现并修理故障中的名称为 CSS母子关系的Codex文章上学习更多的CSS母/子关系的知识。

H3 和H4 标题

If you tend to write long posts, using headings can separate the sections, announce a change in subject or just add a little artistic "space" or graphic element. Post section headings are created by you as you write your post. Generally, the h3 and h4 heading tags are used, though sometimes the h5 might also be included.

如果你有意向写长篇的文章，使用标题可以分开文章部分，表明主题的一个更改，或者仅仅加上一个小的有美感的"空格"或者图表的元素。当你写文章的时候，你创建了文章部分标题。一般来说，使用的是h3 和 h4标题标签，虽然有时候也可能包含h5。

Your Theme may or may not include h3 and h4 headings. In some Themes, h3 tags are used within the comments. You can easily check in your style.css with a search for h3. If it isn't used, you can create your own, or if it is, use the h4 tags.

你的主题有可能包括或者不包括h3 和h4。在有些主题中，h3标签是在评论内部使用的。通过搜索h3，你可以轻易地在你的style.css中查看。如果它没有被使用，你可以创建你自己的，如果它得到了使用，就使用h4标签。

To use them, you manually type in the tags around the section titles with double spaces before and after, if you are not using HTML in your posts. This way, WordPress will know to automatically add the paragraph tags when generating the post. It might look like this in your Write Post screen: 如果你在文章中没有使用HTML，使用它们，你手工将它们输进部分标签周围的标签，在它们之前和之后留有两个空格。这样WordPress在产生文章的时候，就知道自动地添加段落标签。在你的写文章 界面上，它可能看起来像：

...uses with WordPress that I enjoy using.

<h4>More Talk About WordPress Features</h4>

<pre>...我喜欢使用的 WordPress 用法。.

<h4>谈论更多的 WordPress 功能</h4>



We enjoy talking more about the many 
features WordPress has to offer the blogger....

. 我们喜欢谈论更多的WordPress提供给写博客的人的一些功能…. 。

Web standards features the h3 tag with type that is by default slightly smaller than the h2 tag but larger than the h4 tag font. You can control the size differences within the style.css style sheet. But you are not limited there.

环球网标准显示的h3标签所拥有的类型，默认情况下，比h2标签稍微小一点，但是比h4标签字体大。你可以在style.css样式表内部控制大小的不同。但是你并没有局限在那儿。

Dividing up your content within a post can feature more than colorful and larger fonts. You can add graphics and styles to these section dividers to enhance the look of your site. Let's look at two examples. 在一篇文章中分割你的内容，不仅仅可以显示丰富多彩的和较大的字体。你可以在文章的这些分割部分添加图形和样式，以提高你站点的外观。让我们来看看两个例子。

In the first example, we are using a graphic of a leaf set in the background of the heading to the left of the text. The padding is adjusted so that the heading's text will move over 45px to make room for the background graphic. Note that we've also set the background graphic to no-repeat so only one leaf with appear. Otherwise we'd have a whole heading filled with leaves.

在第一个例子中，我们使用了一个叶子的图像，放在文本左边的标题的背景上。Padding得到了调整，这样标题的文本会移动45px来为背景图形挪出空间。注意，我们也将背景图形设置成了no-repeat，因此只会出现一个叶子。否则的话，整个的标题都会充满着叶子。

left
More Talk About WordPress Features

We enjoy talking more about the many features WordPress has to offer the blogger....

left
More Talk About WordPress Features

我们喜欢谈论更多的WordPress提供给写博客的人的功能….

The CSS in the style.css for this might look like this:

style.css中关于这个的CSS可能看起来像：

h3 {font-size:130%; color:#A30000; font-weight:bold; 
background:url(leaf.gif) left no-repeat; 
padding: 10px 10px 10px 45px}

h3 {font-size:130%; color:#A30000; font-weight:bold; 
背景:url(leaf.gif) left no-repeat; 
padding: 10px 10px 10px 45px}

center

More Talk About WordPress Features

We enjoy talking more about the many features WordPress has to offer the blogger....

中心

关于WordPress功能的更多的讨论

我们喜欢谈论WordPress提供给写博客的人的很多的功能....

In the second heading example, we've moved the leaf graphic so it is above the heading, which makes it look like it is floating between the sections. This adds more space between the sections. The CSS in the style.css for this might look like this:

在第二个标题例子中，我们移动了叶子图像，这样它便出现在标题的上面，看起来叶子图像就像在文章段落之间漂浮。这个段落之间添加了更多的空格。在style.css中关于这个的CSS也许看起来像：

h3 {font-size:130%; color:#A30000; font-weight:bold; 
background:url(leaf.gif) no-repeat top center; 
padding: 60px 10px 10px; text-align:center}

h3 {font-size:130%; color:#A30000; font-weight:bold; 
背景:url(leaf.gif) no-repeat top center; 
padding: 60px 10px 10px; text-align:center}

Headings can add a lot to the overall design of your site, so use your imagination and have fun with these.

标题可以给你的站点的总体设计添加许多的精彩，因此运用你的想象力，愉快地设计你的标题。

标题详细信息

In WordPress, many post titles feature information in addition to just the title of the post. Many titles include the time, date, author, and categories that the post is in. You can choose what elements to include or exclude in your title headings.

在WordPress中，许多文章标题只在文章的标题上添加信息。许多标题包括时间，日期，作者，以及文章所属的类别。你可以为你的标题选择包括或者不包括什么样的信息。

Here is an example of a fully loaded post title. 下面是一个完全载入的文章标题的例子。

<h2>
<a href="<?php the_permalink() ?>" 
     rel="bookmark" title="Permanent Link to 
     <?php the_title(); ?>">
     <?php the_title(); ?></a>
</h2>
<small>
Posted <?php the_time('F jS, Y') ?> 
by <?php the_author() ?>
in <?php the_category(', ') ?></small>

<h2>
<a href="<?php the_permalink() ?>" 
     rel="bookmark" title="Permanent Link to 
     <?php the_title(); ?>">
     <?php the_title(); ?></a>
</h2>
<small>
Posted <?php the_time('F jS, Y') ?> 
by <?php the_author() ?>
in <?php the_category(', ') ?></small>

It begins with the h2 heading tag, and then includes a link to the title of the post. In the next section, controlled by the <small> tag, is the template tags for the time, author, and categories. It might look something like this:

它以一个h2标题标签开始，然后包含一个对于文章标题的链接。在下一个部分中，由<small>控制的是，关于时间，作者和类别的模板标签。它可能看起来像这样:

Telling Tales in WordPress
Posted Monday, 21 February 2005 by Harriet Smith in WordPress, Tales

在WordPress中说故事
Harriet Smith在2005年二月二十一日，星期一发表的 in WordPress, Tales

You can change the author tag to the_author_posts_link(), or add more information like the time to the post title information. Or remove these tags. You can learn more about the post meta data section in the article on Customizing Your Post Meta Data Section.

你可以将作者标签改为the_author_posts_link()，或者给文章标题添加更多的信息像时间。或者移除这些标签。在自定义你的文章Meta 数据库部分中的文章中学习更多的关于文章meta数据库部分。

设计标题

Now that you've learned where to find the basic headings in WordPress Themes, it's time to have some fun with them designing or modifying your own theme. There are many ways to the control the design of your headings. You can change font sizes, colors, font families, or add graphics and interesting backgrounds. Let your imagination take over!

既然你现在已经知道了在WordPress主题的哪个部分中找到基本的标题，现在是有些乐趣的时候了设计或者修改你自己的主题。有许多种方式可以控制你的标题设计。你可以改变字体大小，颜色，字体种类，或者添加图形和有趣的背景。让你的想象力来做这件事！

To help you design your headings, here are a few resources. 这儿有一些资源，帮助你设计你的标题。

• Rubber Headers
• Rubber 标题
• Using Background-Image to Replace Text
• 使用背景图像来代替文本
• Desilva's Headings Side by Side
• Desilva的并排的标题
• Making Headlines with Cascading Style Sheets
• 用层叠式样式表来制作大字标题
• HTMLDog's Headings
• HTMLDog的标题
• About.com's Web Design: HTML and Headings (Technical Specifications)
• About.com的万维网设计: HTML和标题 (技术性的规定)
• CSS Design Experiments
• CSS 设计试验