站点架构（v1.5）-WordPress高级管理手册-果果开发

以下是 WordPress 1.5 通用站点架构的描述。鼓励但不强制要求 WordPress 主题开发者保留大部分 XHTML 标签和 CSS 选择器的核心站点架构。因此，您可以将其视为一般性概述，因为您的主题可能有所不同。

基于模板的页面

在了解 WordPress 页面架构的核心结构之前，您需要了解 WordPress 使用模板文件来生成最终页面的“外观”和内容。例如，当查看 WordPress 站点的主页时，您实际上正在查看多个模板文件：

index.php
header.php
sidebar.php
footer.php

当查看单个帖子页面时，您可能会查看以下模板文件：

single.php
header.php
sidebar.php
footer.php
comments.php

在像分类、归档和搜索这样的多帖子页面上，您可能会查看以下模板文件的任意组合：

index.php
category.php
404.php
search.php
header.php
sidebar.php
footer.php

在下文的架构规范中，我们尽可能指定了哪些 CSS 选择器属于哪些模板文件。

核心结构

WordPress 站点的核心结构代表了容纳页面内容的主要容器。WordPress 站点的核心结构至少包括：

头部（Header）
侧边栏/菜单（Sidebar/Menu）
内容（Content）
底部（Footer）

这些是包含页面最重要部分的主要容器。请记住，核心结构就像一组积木，每个单元都依赖于其他单元。如果您更改其中一个，就必须更改其他单元。

经典主题（Classic Theme）

<body>
  <div id="rap">
    <h1 id="header"></h1>
    <div id="content"></div>
    <div id="menu"></div>
    <p class="credit"></p>
  </div>
</body>

默认主题（Default Theme）

<body>
  <div id="page">
    <div id="header"></div>
    <div id="content" class="narrowcolumn"></div>
    <div id="sidebar"></div>
    <div id="footer"></div>
  </div><!-- end page -->
</body>

请注意，虽然这两个主题都使用了侧边栏，但第一个主题将其称为菜单，而另一个主题将其称为侧边栏。

这两个主题核心结构之间主要的区别在于头部和底部的使用方式。对于经典主题，头部位于 h1 标签内，底部被包裹在段落标签中。而在默认主题中，头部被放置在名为 header 的 div 中，底部则被放置在 footer div 中。

这两个主题都包含一个包围或“包裹”整个页面的容器。该容器（通常与 body HTML 标签结合使用）允许对整个结构进行更明确的控制。根据所使用的 WordPress 主题，此容器也可能被称为：

page
wrap
rap

某些主题可能会添加第二个、第三个甚至第四个侧边栏，从而产生列的效果。它们还可能在整个页面周围或特定容器周围包含额外的包装器。然而，在所有情况下，基本核心结构本质上保持不变。

模块化模板文件

基于积木的前提，WordPress 主题将核心结构划分为称为模板文件的各个块。这些模板文件包括：

头部 – header.php
侧边栏/菜单 – sidebar.php
内容 – index.php, single.php, page.php, category.php, author.php, search.php 等
底部 – footer.php

在这些模板文件中的每一个中，都可以使用 body div 作为内容的包容性容器。

当查看使用特定 WordPress 主题的网页时，生成的具体模板文件取决于用户的请求。如果用户点击分类标签，将使用分类模板。如果用户查看页面，则将使用页面模板。

当这些核心模板文件与 WordPress Loop 和查询结合加载时，可以生成各种模板。这允许网页开发人员为每个特定模板创建独特且个性化的样式。

内部结构

在这些核心结构容器内，有更小的积木块，用于在父容器中容纳具体内容。WordPress 主题可以包含各种此类结构，但我们专注于随 WordPress 提供的两个主题。（大多数 WordPress 主题模板都基于这两个主题。）

头部

头部是传统上位于网页顶部的结构。它包含网站的标题。它也可能被称为报头（masthead）、头部（head）、标题（title）或横幅（banner）。在所有 WordPress 主题中，头部都位于 header.php 模板文件中。

经典主题具有最简单的头部代码：

<h1 id="header"></h1>

默认主题具有更复杂的头部代码：

<div id="header">
  <div id="headerimg">
    <h1></h1>
    <div class="description"></div>
  </div>
</div>

虽然经典主题的样式位于主题的 style.css 文件中，但默认主题的样式既存在于 style.css 文件中，也存在于 header.php 模板文件中。有关处理这些样式的详细说明，请参阅文章设计头部。

内容

WordPress 中的内容容器起着关键作用，因为它容纳了 WordPress Loop。WordPress Loop 处理当前页面上将要显示的每个帖子。然后根据这些帖子如何在 Loop 标签内的特定标准中进行匹配对其进行格式化。

经典主题具有最简单的内容结构：

<div id="content">
  <h2>Date</h2> 
  <div class="post" id="post-1">
    <h3 class="storytitle">Post Title</h3>
    <div class="meta">Post Meta Data</div>
    <div class="storycontent">
      <p>Welcome to WordPress.</p>
    </div>
    <div class="feedback">Comments (2)</div>
  </div>
</div>

经典主题托管了日期、标题、帖子元数据、帖子内容和反馈（评论数量）的容器。它还展示了一个强大的功能：能够单独设置单个帖子的外观样式。

<div class="post" id="post-1">

post CSS 类选择器将帖子样式应用于此容器。值得注意的是，post 类选择器还有一个由 WordPress 自动生成的 ID。以下是可用于显示类选择器 ID 的代码示例：

<div class="post" id="post-<?php the_ID(); ?>">

模板标签 the_ID() 的使用会显示帖子的 ID 号。这个唯一标识符可用于内部页面链接以及样式。例如，单个帖子可以拥有 post-1 的样式，也可以拥有 post-2 的样式。虽然为每个帖子都设置样式有点多余，但您可能需要让一两个帖子看起来略有不同。一些插件也可能使用此标识符来自动更改不同帖子的外观。

默认主题的内容容器同时提供多帖子视图（例如主页、分类、归档和搜索结果）以及用于单个帖子的单帖子视图。多帖子视图如下所示：

<div id="content" class="narrowcolumn">
  <div class="post" id="post-1">
    <h2>Post Title</h2>
    <small>Date</small>
    <div class="entry">
      <p>Post Content.</p>
    </div>
    <p class="postmetadata">Post Meta Data Section</p>
  </div>
  <div class="navigation">
    <div class="alignleft">Previous Post</div>
    <div class="alignright">Next Post</div>
  </div>
</div>

这里有很多内容。让我们分解一下。

内容示例分解

<div id="content" class="narrowcolumn">

多帖子视图包含一个带有 narrowcolumn 类的容器，而单帖子视图则包含 widecolumn 类。单帖子视图的侧边栏不会在该页面上生成，从而使帖子能够横跨整个内容区域的宽度进行查看。

<div class="post" id="post-1">

与经典主题一样，此划分设置了 post 的样式以及 post-X 的标识符，其中 X 代表帖子的唯一 ID 号。这允许用户自定义特定帖子的外观。

<h2>Post Title</h2>

这涵盖了由 <h2> 标签样式的文章标题代码。

<small>Date</small>

日期代码被 small 标签包围并样式化。

<div class="entry">

文章内容通过 entry CSS 选择器内的样式组合以及 paragraph 标签进行样式化。

<p class="postmetadata">Post Meta Data Section</p>

Post Meta Data Section 包含有关文章的详细信息，例如日期、时间和文章所属的分类。

<div class="navigation">

Next and Previous Links 在 navigation div 中进行样式化。它们还包含 alignleft（用于“上一篇文章”）和 alignright（按时间顺序用于“下一篇文章”）的类。

这些元素在单篇文章视图的内容结构中发生了移位：

<div id="content" class="widecolumn">
  <div class="navigation">
    <div class="alignleft"></div>
    <div class="alignright"></div>
  </div>
  <div class="post" id="post-1">
    <h2>Post Title</h2>
    <div class="entrytext">
      <p>Post content.</p>
      <p class="postmetadata alt">
        <small>Post Meta Data</small>
      </p>
    </div>
  </div>
</div>

在没有侧边栏的情况下，widecolumn 类已被格式化以横跨页面拉伸内容。navigation div 已移至顶部。并且 Post Meta Data 现在已整合到 entrytext 父容器中，并采用了不同的样式，添加了 alt 类选择器。

这两个来自 Default Theme 的示例仅让您一瞥您的 WordPress 站点可以被自定义的无数种方式。

Comments

评论可以出现在单篇文章视图中（使用 comments.php 模板文件），也可以出现在弹出窗口中（使用 comments-popup.php 模板文件）。这两种类型评论的整体样式基本相同。

Classic Theme Comments

<h2 id="comments">1 Comment
  <a href="#postcomment" title="Leave a comment">»</a></h2>
  <ol id="commentlist">
    <li id="comment-1">
      <p>Hi, this is a comment.</p>
      <p><cite>Comment by Person</cite> </p>
    </li>
  </ol>
  <p>
    <a href='https://example.com/archives/name-of-post/feed/'><abbr title="Really Simple Syndication">RSS</abbr> feed for comments on this post.</a>
    <a href="https://example.com/name-of-post/trackback/" rel="trackback">TrackBack <abbr title="Uniform Resource Identifier">URI</abbr></a>
  </p>
  <h2 id="postcomment">Leave a comment</h2>
  <form action="https://example.com/blog/wp-comments-post.php" method="post" id="commentform">
    <p>
      <input type="text" name="author" id="author" value="" size="22" tabindex="1">
      <label for="author"><small>Name (required)</small></label>
    </p>
    <p>
      <input type="text" name="email" id="email" value="" size="22" tabindex="2">
      <label for="email"><small>Mail (will not be published) required)</small></label>
    </p>
    <p>
      <input type="text" name="url" id="url" value="" size="22" tabindex="3">
      <label for="url"><small>Website</small></label>
    </p>
    <p>
      <small><strong>XHTML:</strong> List of Tags you can use in comments</small>
    </p>
    <p>
      <textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>
    </p>
    <p>
      <input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment">
      <input type="hidden" name="comment_post_ID" value="1">
    </p>
  </form>
</div>

虽然评论功能的各个部分都有样式参考，但 Classic Theme 没有通用的评论分区或分组样式参考，可以轻松添加一个。

#comments h2

对评论列表顶部的标题进行样式化，该标题显示“Comments 4 Leave a Comment”，其中句子的后半部分是一个链接，跳转到 <h2 id="postcomment">Leave a comment</h2>。

#comment-n

每个评论都被赋予一个唯一的 ID 编号，此处用字母 n 表示。这允许它们单独进行样式化。

#comments ol

这开始了对评论的有序列表，从 1 开始计数，并设置评论列表的整体样式。

#comments li

列表中每个评论的样式参考。

#comments p

此 paragraph 标签用于样式化评论列表中的实际评论。

#comment cite

此处的 cite 用法控制评论者姓名的外观。它通常在评论列表中显示为“姓名说：”。

#comments h2 或 #postcomment

h2 标题可以通过两种方式样式化，即 #comments h2 或 #postcomment。后者也被评论区域顶部的"Leave a Comment"链接使用。

#commentform

用于输入评论的整个“表单”的样式参考。每个输入区域都有其自己的 ID。

#author

评论作者输入区域的 ID 引用。

#comments small

<small> 标签在 Classic Theme 的多个地方使用。此用法将评论提交表单中的文本以及可用于评论的标签列表的文本包围起来。

#email

评论作者电子邮件的 ID 引用。

#url

评论作者 URL 的 ID 引用。

#comment

评论输入文本域的 ID 引用。它不对最终生成的评论进行样式化，仅对输入框进行样式化。

#comment #submit

Classic Theme 中有两个提交按钮，分别用于搜索和评论提交。这是提交评论的按钮。

Default Theme Comments

Default Theme 的评论功能在 comments.php 和 comments-popup.php 中包含一个循环查询，根据评论是否开放、关闭以及是否存在评论来更改某些信息。如果评论开放或关闭且没有评论，此信息将显示在 <h3 id="comments"> 标签内。

<h3 id="comments">One Response to "Hello world!"</h3> 
<ol class="commentlist">
  <li class="alt" id="comment-1">
    <cite>
      <a href="https://example.org/" rel="external nofollow">Mr WordPress</a>
    </cite> Says:<br>
    <small class="commentmetadata">
      <a href="#comment-1" title="">Date and Time</a>
    </small>
    <p>Hi, this is a comment.</p>
  </li>
</ol>
<h3 id="respond">Leave a Reply</h3>
<form action="https://example.com/blog/wp-comments-post.php" method="post" id="commentform">
  <p>
    <input name="author" id="author" value="" size="22" tabindex="1" type="text">
    <label for="author">
      <small>Name (required)</small>
    </label>
  </p>
  <p>
    <input name="email" id="email" value="" size="22" tabindex="2" type="text">
    <label for="email">
      <small>Mail (will not be published) required)</small>
    </label>
  </p>
  <p>
    <input name="url" id="url" value="" size="22" tabindex="3" type="text">
    <label for="url">
      <small>Website</small>
    </label>
  </p>
  <p>
    <small><strong>XHTML:</strong> You can use these tags:....</small>
  </p>
  <p>
    <textarea name="comment" id="comment" cols="100" rows="10" tabindex="4">
    </textarea>
  </p>
  <p>
    <input name="submit" id="submit" tabindex="5" value="Submit Comment" type="submit">
    <input name="comment_post_ID" value="1" type="hidden">
  </p>
</form>
</div>

虽然评论功能的各个部分都有样式参考，但 Default Theme 没有通用的评论分区或分组样式参考，不过可以轻松添加一个。

h3 #comments

对“帖子回复数量”标题的 <h3> 标签进行样式化。

#commentlist ol

对评论列表的“有序列表”进行样式化。

.alt li 和 #comment-n

评论列表项有两个样式参考。第一个是 alt 类，第二个是评论 ID 编号，此处用字母 n 表示。这允许它们单独进行样式化。

cite

cite 标签用于框定“姓名说：”并链接到评论作者的 URL。

.commentmetadata small

<small> 标签具有 commentmetadata 类，允许对帖子的日期和时间进行样式化。

ol #commentlist p

对评论有序列表中的段落进行样式化。

#respond h3

对"Leave a Reply"的标题进行样式化。

#commentform

用于输入评论的整体“表单”样式参考。每个输入区域都有其自己的 ID。

#author

评论作者输入区域的 ID 参考。

#comments small

<small>标签在 Classic Theme（经典主题）的多个地方使用。此用法将评论提交表单中的文本以及可用于评论的标签列表的文本包围起来。

#email

评论作者邮箱的 ID 参考。

#url

评论作者 URL 的 ID 参考。

#comment

评论输入文本域的 ID 参考。它不样式化最终生成的评论，仅样式化输入框。

#comment #submit

Classic Theme（经典主题）中有两个提交按钮，分别用于搜索和评论提交。这是评论提交的按钮。

弹出式评论

Classic Theme（经典主题）和 Default Theme（默认主题）的comments-popup.php模板文件本质上是一样的。它们都使用Classic Theme 评论结构的布局。虽然 Classic Theme 在其评论中使用<h2>标题，而 Default Theme 使用<h3>标题作为标题，但在 comments-popup.php 模板文件中，两者都使用<h2>标题标签。

<body id="commentspopup">
  <h1 id="header"></h1>
  <h2 id="comments">Comments</h2>
  ....Classic Theme comment section.....
  ...Classic Theme footer....

body 标签使用#commentspopup设置整个页面的样式。<h2>标题开始评论部分。

如果您修改了整体主题头部和尾部中标签的结构，请确保将这些结构更改应用到评论弹出模板中，特别是如果您打算将主题公开发布。

侧边栏

正如您在 Default Theme（默认主题）中所见，侧边栏是否可见取决于所使用的模板文件。侧边栏通常可以是简单的或复杂的。WordPress 主题经常在侧边栏中以嵌套列表的形式展示信息。关于侧边栏的分步指南位于自定义您的侧边栏，有关使用 CSS 样式化列表的更多信息也可查阅。

一般来说，WordPress 侧边栏在列表中展示各个部分的标题，而部分项则在标题下方的嵌套列表中。

Classic Theme（经典主题）的侧边栏如下所示，为简化起见已移除链接：

<div id="menu">
  <ul>
    <li class="pagenav">Pages
      <ul>
        <li class="page_item">Contact</li>
        <li class="page_item">About</li>
      </ul>
    </li>
    <li id="linkcat-1"><h2>Blogroll</h2>
      <ul>
        <li>Blogroll Link 1</li>
        <li>Blogroll Link 1</li>
        <li>Blogroll Link 1</li>
      </ul>
    </li>
    <li id="categories">Categories:
      <ul>
        <li>Category Link 1</li>
        <li>Category Link 2</li>
      </ul>
    </li>
    <li id="search">
      <label for="s">Search:</label>   
      <form id="searchform" method="get" action="/index.php">
        <div>
          <input type="text" name="s" id="s" size="15"><br>
          <input type="submit" id="searchsubmit" value="Search">
        </div>
      </form>
    </li>
    <li id="archives">Archives: 
      <ul>
        <li>Archives Month Link 1</li>
        <li>Archives Month Link 2</li>
      </ul>
    </li>
    <li id="meta">Meta:
      <ul>
        <li>RSS Feed Link</li>
        <li>RSS Comments Feed Link</li>
        <li>XHTML Validator</li>
        <li>XFN Link</li>
        <li>WordPress Link</li>
      </ul>
    </li>
  </ul>
</div>

其中大部分是显而易见的。每组链接都有其自己的 CSS 选择器：Pages（页面）、categories（分类）、archives（归档）、search（搜索）和 meta（元数据）。

Pages 和 Link Categories

Pages（页面）和Links（链接）类别（标记为"Blogroll"）使用和模板标签，这些标签会自动生成标题。

对于Links（链接）类别，它会为该组链接生成一个 h2 标题。这意味着您可以将菜单 h2 标题样式化为与其他标题不同，或者，如果您希望它们看起来都一样，请确保菜单 h2 样式与那些未自动生成的其他类别样式相匹配。

Pages（页面）模板标签将 pagenav 作为标题，然后以新方式标识页面。作为在多文章和单文章视图中查看的普通列表，Page list items（页面列表项）具有 class="page_item"类以样式化这些链接。当查看单个 Page（页面）时，该页面的链接将变为 class="current_page_item"，随后可将其样式化为与其他 Page 链接不同。

Categories, Archives, and Meta

其他侧边栏部分标题，即categories（分类）、archives（归档）、meta（元数据）等，不使用自动生成其标题的模板标签。这些是在 PHP 语句内部设置的，用于在页面上“打印”文本。虽然这些可以放在标题标签内，但 WordPress 使用_e()函数来显示或使用echo输出文本标题，同时将文本标记为可能的翻译目标。如果您将开发您的主题以便公开发布，强烈建议使用 echo 函数。

您可以单独样式化这些，也可以全部设为相同。一些主题，如 Default Theme（默认主题），将所有这些放在<h2>标题中，以便列表标题看起来都一样。因此，它们可能会也可能不会为每个部分使用样式参考。如果您需要更改每个链接部分的外观，可以添加它们。

搜索表单

搜索表单位于 searchform.php 中。它可能位于侧边栏的不同位置。要样式化整个搜索表单，请使用搜索 ID。以下是搜索表单的各个区域列表，这些区域默认可以进行样式化。您可以添加样式类以更好地控制搜索表单的外观。

<li id="search">
  <label for="s">Search:</label>   
  <form id="searchform" method="get" action="/index.php">
    <div>
      <input type="text" name="s" id="s" size="15"><br>
      <input type="submit" id="searchsubmit" value="Search">
    </div>
  </form>
</li>

#search

搜索表单的整体样式。

#search label

用于样式化 label 标签（如有必要）。

#searchform

用于样式化表单本身。

#search div

这个未标记的 div 是父容器 search 的子容器，可以从该选择器内进行样式化。

#searchform input

要样式化搜索的输入区域，此选择器组合将有效。

#searchsubmit

由 Default Theme（默认主题）使用，此选择器可用于样式化search（搜索）或submit（提交）按钮。

搜索表单区域、输入框和按钮可以有多种样式化方式，也可以保留默认的输入和“按钮”外观。

Meta Feed Links

Meta 链接可以显示为文本或代表各种链接的图标。XHTML 和 CSS 验证链接可以使用 W3 图标。各种 Feeds（订阅源）也可以表示为图标，或者保留为文本。这取决于您。在侧边栏中使用文本或图标包含订阅源的文章由WordPress Feeds（WordPress 订阅源）一文涵盖。

页脚

页脚位于 footer.php 模板文件中。在 Default Theme（默认主题）和 Classic Theme（经典主题）中，页脚包含的信息很少。

Classic Theme（经典主题）

<p class="credit">
  <!--15 queries. 0.152 seconds. -->
  <cite>Powered by <a href='https://wordpress.org' title='Powered by WordPress, state-of-the-art semantic personal publishing platform.'> <strong>WordPress</strong></a></cite>
</p>
</div>

页脚的内容使用 credit 类以及 paragraph（段落）和 cite（引用）标签进行样式化。

该标签以 HTML 注释代码的形式显示页面上使用的 MySQL 查询次数以及页面加载所花费的时间。它是为管理员的便利和使用而存在的。它仅在页面的源代码中可见。如果您希望将其显示在页面上，请移除注释。它的样式将受段落标签的 credit class 样式影响。在模板文件中，其外观如下：

<!--<?php echo $wpdb->num_queries; ?> queries. 
<?php timer_stop(1); ?> seconds. -->

默认主题

<div id="footer">
  <p>Blogging in the WordPress World is proudly powered by <a href="https://wordpress.org/">WordPress</a><br>
    <a href="feed:http://example.com/feed/">Entries (RSS)</a> and <a href="feed:https://example.com/comments/feed/"> Comments (RSS)</a>.
    <!-- 18 queries. 0.186 seconds. -->
  </p>
</div>

默认主题的页脚由 footer ID 和段落标签进行样式设置。虽然页脚区域本身可能由 footer 进行样式设置，但段落标签控制其中的文本。若要使页脚内的段落标签样式与页面其余部分不同：

#footer p {styles}

站点架构（v1.5）