编辑“WordPress:Designing Headings”

=一个标题不是一个页眉=
标题不是你的页眉，但是标题可以包含在你的页眉当中。感到困惑是吗？啊，你可以在这儿学学。

标题仅仅像一个文章标题。在HTML中，它的结构是使用标题标签例如'''H1, H2, H3,''' 和'''H4'''。一般来说，标题的数字越大，字体越小。
在WordPress中，'''H1'''标题一般是专给页眉中或者网页顶部发现的博客标题使用的。'''H2'''标题通常出现在文章标题，评论标题或者工具条中。这些中的每一个都可以设计的不同，取决于它们的层ID。'''H3'''标题通常评论中出现，虽然它可能被'''H2''' 标题代替，这取决于主题。

==The H1 标题==

默认情况下，'''H1'''标题在页眉旁边，一般认为是你的网页[[WordPress:Using Themes|主题]]的''报头''。它通常有[[WordPress:Template_Tags/bloginfo|<tt>bloginfo()</tt>]]模板标签。

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

在你的主题文件夹的<tt>style.css</tt>文件中，你会找到它的样式的信息。它通常被列为：
<pre>h1 {attributes}

或者

#header h1 {attributes}</pre>
你可以在你的网页的<tt>#header</tt>内部改变标题的外观。

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

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

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

==The H2 标题==
在不同的[[WordPress:Using Themes|WordPress 主题]]中都可以发现'''H2'''标题。它通常可以在''文章标题''，''评论标题''，''工具条''或者''菜单''中发现。设计这些，许多'''H2'''标题可以变得稍微复杂。

让我们来看看，哪个可能是你的style.css中不同的H2标签的形式。

<pre>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; }</pre>
在WordPress中，这些部分中的每一个都有一个'''H2'''标题，但是每一个的设计都不同。

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

例如，如果我们没有为<tt>#comments</tt> '''H2'''设计字体<tt>color</tt>，那么颜色就是''母亲的的'' '''H2''',是绿色的。注意要列出你可以更改的所有不同的属性，记住母亲的'''H2'''会填满你省去的任何空白。
你可以在， [[WordPress:CSS Troubleshooting|发现并修理故障]]中的名称为[[WordPress:CSS_Troubleshooting#The_CSS_Parent_and_Child_Relationship| CSS母子关系]]的Codex文章上学习更多的CSS母/子关系的知识。
==H3 和H4 标题==

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

你的主题有可能包括或者不包括<tt>h3</tt> 和<tt>h4</tt>。在有些主题中，<tt>h3</tt>标签是在评论内部使用的。通过搜索<tt>h3</tt>，你可以轻易地在你的<tt>style.css</tt>中查看。如果它没有被使用，你可以创建你自己的，如果它得到了使用，就使用<tt>h4</tt>标签。
如果你在文章中没有使用HTML，使用它们，你手工将它们输进部分标签周围的标签，在它们之前和之后留有两个空格。这样WordPress在产生文章的时候，就知道自动地添加段落标签。在你的'''写文章''' 界面上，它可能看起来像：

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

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

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

在一篇文章中分割你的内容，不仅仅可以显示丰富多彩的和较大的字体。你可以在文章的这些分割部分添加图形和样式，以提高你站点的外观。让我们来看看两个例子。

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

<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">
[[WordPress:Image:leaf.gif|left]]<br /><span style="font-size:130%; color:#A30000; font-weight:bold">More Talk About WordPress Features</span><br />
我们喜欢谈论更多的WordPress提供给写博客的人的功能…. </div>

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

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

<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">
[[WordPress:Image:leaf.gif|中心]]<br /><br /><span style="font-size:130%; text-align:center; color:#A30000; font-weight:bold">关于WordPress功能的更多的讨论</span><br />
我们喜欢谈论WordPress提供给写博客的人的很多的功能....</div>

在第二个标题例子中，我们移动了叶子图像，这样它便出现在标题的上面，看起来叶子图像就像在文章段落之间漂浮。这个段落之间添加了更多的空格。在<tt>style.css</tt>中关于这个的CSS也许看起来像：
<pre>h3 {font-size:130%; color:#A30000; font-weight:bold; 
背景:url(leaf.gif) no-repeat top center; 
padding: 60px 10px 10px; text-align:center}</pre>

标题可以给你的站点的总体设计添加许多的精彩，因此运用你的想象力，愉快地设计你的标题。
=标题详细信息=
在WordPress中，许多文章标题只在文章的标题上添加信息。许多标题包括时间，日期，作者，以及文章所属的类别。你可以为你的标题选择包括或者不包括什么样的信息。

下面是一个完全载入的文章标题的例子。

<pre><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>
</pre>
它以一个<tt>h2</tt>标题标签开始，然后包含一个对于文章标题的链接。在下一个部分中，由<tt>&lt;small&gt;</tt>控制的是，关于时间，作者和类别的模板标签。它可能看起来像这样:
<div style="border:1px solid blue; width:90%; margin: 20px; padding:20px">
<span style="color:blue; font-weight:bold; font-size:120%">在WordPress中说故事</span><br />
Harriet Smith在2005年二月二十一日，星期一发表的 in <span style="color:blue"><u>WordPress</u>, <u>Tales</u></span>
</div>

你可以将作者标签改为<tt>[[WordPress:Template_Tags/the_author_posts_link|the_author_posts_link()]]</tt>，或者给文章标题添加更多的信息像[[WordPress:Formatting Date and Time|时间]]。或者移除这些标签。在[[WordPress:Post_Meta_Data_Section|自定义你的文章Meta 数据库部分]]中的文章中学习更多的关于文章meta数据库部分。

=设计标题=

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

* [http://www.pixy.cz/blogg/clanky/rubberheaders/ Rubber 标题]
* [http://www.stopdesign.com/articles/replace_text/ 使用背景图像来代替文本]
* [http://www.desilva.biz/css/inline.html Desilva的并排的标题]
* [http://www.webreference.com/authoring/style/sheets/headlines/ 用层叠式样式表来制作大字标题]
* [http://www.htmldog.com/guides/htmlbeginner/headings/ HTMLDog的标题]
* [http://webdesign.about.com/library/tags/bltags-headings.htm About.com的万维网设计: HTML和标题 (技术性的规定)]
* [http://www.cameraontheroad.com/index.php?p=153 CSS 设计试验]