WordPress:Site Architecture 1.5

来自站长百科
跳转至： 导航、​ 搜索


The following is a description of the general site architecture for WordPress v1.5. WordPress Theme authors are encouraged to maintain much of the core site architecture of XHTML tags and CSS selectors, but they are not required to. Therefore, this is just a general outline and your Theme may be different.

下面是关于WordPress1.5版本的站点总体结构的描述。主题作者得到鼓励，维持XHML标签和CSS选择器，但是他们并不一定要这样做。因此，这只是概述，你的主题可能会有所不同。

Template Driven Pages[ ]

模板驱动网页[ ]

Before we get to the [[WordPress:#Core Structure|Core Structure]] of the WordPress page architecture, you need to understand that WordPress uses template files to generate the final page "look" and content. For example, when viewing the front page of your WordPress site, you are actually viewing several template files:

在我们进入WordPress网页[[WordPress:#Core Structure|核心结构]]之前，我们需要了解WordPress使用模板文件产生最后网页"外观"和内容。例如，当访问WordPress站点的首页的时候，你可以真正地浏览几个不同的模板文件：

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


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

When you view a single post page, you might be viewing the following template files: 你访问只有一篇文章的网页的时候，你可能看到下面的模板文件：

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


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

On a multi-post page like categories, archives, and search, you might be viewing any combination of the following template files:

在拥有多篇文章的网页，例如类别，归档，和搜索网页上，你可能看到下面几个模板文件的结合：

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


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

We've specified which CSS selectors belong in which template files as much as possible in the following architecture specifications.

在下面的机构说明中，我们尽量更多地指定哪个CSS选择器是属于哪个模板文件。

Core Structure[ ]

核心结构[ ]

The core structure of a WordPress site represents the main containers which hold the page's content. The core structure of a WordPress site features, at a minimum, are:

WordPress站点的核心结构相当于是承载网页内容的一个大容器。WordPress站点功能的核心结构，至少是：

  • Header
  • Sidebar/Menu
  • Content
  • Footer


  • 标题
  • 边框/菜单
  • 内容
  • 页底文字

These are the main containers in which the most important parts of the page are "contained". Remember, the core structure is like building blocks. They are dependent upon each other. If you change one, you have to change the others.

有一个主要的容易"包含"网页大多数重要的部分。记住，核心部分就像是积木。每个部分都是互相依赖的。如果你更改了这个部分，你就要更改那个部分。

Classic Theme

经典主题 

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


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


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

While one calls their sidebar sidebar and the other menu, the main difference between the two Theme's core structures is the use of the header and footer. For the Classic Theme, the header is in an h1 tag and the footer is in a paragraph tag. In the Default Theme, the header is in a div called header and the footer is in the footer div.

当一个人调用边框边框，而另一个人调用菜单的时候，这两个主题的核心结构的区别在于标头和页底文字的使用方面。对于经典主题而言，标头是个h1标签而页底文字是个段落标签。在默认主题中，标头是在div中，称为标头而页底文字是在页底文字 div中。

Both Themes feature a container that encompasses or "wraps" itself around the entire page. This wrapping container allows for more definitive control over the overall structure, often used in combination with the body tag. In different WordPress Themes, these are also found by these names:

两个主题都有一个容器（空间），用整个网页包围"包裹"着。这个包装用的容器，能够使你更能够控制整个结构，而且通常是与主体标签一起使用。在不同的WordPress主题中，通过这些名字，也能够找到：

  • container
  • page
  • wrap
  • rap
  • container
  • 网页
  • wrap
  • rap

Some Themes may add a second, third, or even fourth sidebar, creating a column effect. Or they may include additional wrappers around the entire page or specific containers, but this is the core structure.

有的主题可能添加了第二个，第三个，甚至第四个工具条，产生了栏状的效应。或者这些主题可能在整个网页或者某个containers的周围添加了额外的wappers，但是这是核心结构。

The Modular Template Files[ ]

模模板文件[ ]

Based upon the premise of building blocks, WordPress Themes divide up the core structure between blocks called template files. These are the template files:

以积木原理为基础，WordPress主题将核心结构分开成一些块，称为模板文件。下面是一些模板文件：

  • Header - header.php
  • Sidebar/Menu - sidebar.php
  • Content - index.php, single.php, page.php, category.php, author.php, search.php, etc.
  • Footer - footer.php


  • 标头- header.php
  • 工具条/菜单- sidebar.php
  • 内容 - index.php, single.php, page.php, category.php, author.php, search.php, etc.
  • 页底文字 - footer.php

As you can see, the content container can be found across many other template files. These are generated dependent upon the user's request. If they click on a category, the category template is displayed. If they choose a Page, the page template is used. And so on.

如你所见到的那样，可以在许多其它的模板文件中找到内容container。这些container是根据用户的需求而产生的。如果你点击类别，就会显示类别模板。如果他们选择了网页，就会用到网页。等等。

Combined with the WordPress Loop and queries, a variety of templates can be generated, and the web page designer can style all of these differently and independently from each other.

与WordPress Loop和查询相结合，能够产生许多模板，而且网页和设计人员可以将这些模板设计地不同，而且各自独立。

Interior Structures[ ]

内部结构[ ]

Within these core structural containers are smaller building blocks that hold the specific content within the parent container. WordPress Themes can feature a variety of these, but we are going to concentrate on the two Themes that come with WordPress. Most WordPress Themes are based on these two Themes.

在这些核心结构container内部是一些更小的积木（更小的container），可以承载母container内某个特别的内容。WordPress拥有许多这样的主题，但是我们将关注WordPress的两个主题。大多数WordPress主题是以这两个主题为基础的。

Header[ ]

标头[ ]

The header is the structure that traditionally sits at the top of a web page. It contains the title of the website. It may also be referred to as the masthead, head, title, and banner. In all WordPress Themes, the header is found within the header.php template file.

标头是一种结构，一般是位于网页的顶上方。标头结构包含了网站的标题，也可能指代报头，标头，标题， 和 标语。在所有的WordPress主题中，可以在header.php模板文件中找到标头。

The Classic Theme features the simplest header code: 经典的主题拥有最简答的标题代码： 

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

The Default Theme has a more complex header code: 默认主题拥有更复杂的标头代码： 

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



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

While the styles for the Classic Theme are found within the Theme's style.css style sheet file, styles for the Default Theme are found within the style.css and the <head> of the header.php template file. Working with these styles is extensively covered in WordPress:Designing Headers.

虽然可以在主题的style.css样式表文件中找到经典主题的样式，默认主题的样式是在header.php 模板文件的style.css and the <head>内部找到的。设计标头中包含有怎样处理这些样式。

Content[ ]

内容[ ]

The content container in WordPress plays the most important role. It holds the WordPress Loop which dictates the generation of content on the page depending upon the request by the user.

WordPress中的内容承载器起着重要的作用。内容承载器中承载有WordPress Loop，Loop根据用户的需求，规定网页上产生什么内容。

The Classic Theme has the simplest content structure: 经典主题拥有最简单的内容结构： 

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


The Classic Theme hosts containers for the Date, Title, Post Meta Data, Post Content, and Feedback (number of comments). It also showcases a powerful feature. The ability to individually style a single post's look.

经典主题承载了日期，标题，文章Meta日期，文章内容和反馈（评论）的container。经典主题同时显示了强大的功能，能够单个地设计只有一篇文章的网页的外观。 

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

The post CSS class selector applies the post styles to this container, but it also has an ID which is generated automatically by WordPress. The code looks like this:

post CSS class选择器对于这个container使用文章样式，但是也有一个WordPress自动产生的ID。代码看起来像: 

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

The use of the template tag the_ID() generates the ID number of the post. This provides a unique identifier for internal page links as well as for styles. This post could have a style for post-1, as could post-2. While it is a bit excessive to feature a style for every post, there may be a post or two you need to have look a little different. Some plugins may use this identifier to automatically change the look of different posts, too.

使用模板标签the_ID()能够产生文章的ID数字，为内部网页链接和样式提供了唯一的标示符。这篇文章拥有post-1的样式，也有post-2的样式。虽然没有必要为每篇文章设计一种样式，但是你可能希望有一两篇文章看起来与其它文章不同。有的插件可能使用这个标示符自动地更改不同的文章的外观。

The Default Theme content container features a different look for multi-post views like the front page, categories, archives, and searches, and a different single post view for single posts. The multi-post view looks like this:

默认主题内容container对于多篇文章的网页如首页，类别，归档，和搜索，拥有不同的外观，对于单篇文章的网页拥有不同的单篇文章外观。多篇文章网页看起来像： 

<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">
   <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>

There is a lot going on here. Let's break it down. 这里有许多内容。我们分开描述。

<div id="content" class="narrowcolumn">
In the multi-post views, it features a class="narrowcolumn" and in the single post views, it features class="widecolumn" and the sidebar is not generated on that page, allowing the post to be viewed "wide" across the width of the content area.
<div id="content" class="narrowcolumn">
在多篇文章 views中，拥有class="narrowcolumn"，在单篇文章views中，拥有class="widecolumn"，而且边框并不是在那个网页上产生的，使得用户能够在"较宽"的内容区域内看到文章。
<div class="post" id="post-1">
Like the Classic Theme, this division sets up the style for post and the identifier for post-X, with X representing the post's unique ID number. This allows for customizing the specific post's look.
<div class="post" id="post-1">
与经典主题相似，这个部分设置了文章的样式和post-X的标示符，X代表文章唯一的ID数字。这个部分能够自定义文章的外观。
<h2>Post Title</h2>
This encompasses the post's title code, styled by the <h2> tag.
<h2>Post Title</h2>
这个包围了文章的标题代码，由<h2>标签设计。
<small>Date</small>
The date code is surrounded and styled by the small tag.
<small>Date</small>
日期代码是由small标签包围和设计的。
<div class="entry">
The post content is styled by a combination of the styles within the entry CSS selectors and the paragraph tag.
<div class="entry">
文章内容是由entry CSS选择器和段落标签内的联合的样式共同设计的。
<p class="postmetadata">Post Meta Data Section</p>
The WordPress:Post Meta Data Section contains the data details about the post such as the date, time, and categories the post belongs to.
<p class="postmetadata">文章Meta数据Section</p>
文章Meta数据部分包含文章信息的详细数据，例如文章的日期，时间，以及文章所属的类别。
<div class="navigation">
The WordPress:Next and Previous Links are styled in the navigation. They also include classes for alignleft for the Previous Post and alignright for the Next Post in chronological order.
<div class="navigation">
The 上一个和下一个链接是在导航中设计的，也包含时间顺序上的上一篇文章的alignleft classes和下一篇文章的alignright classes。

These elements are shifted around in the single post view content structure:

这些部分在单一文章view内容结构中得到了切换： 

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






The widecolumn class is featured to stretch the content across the page to fill in the absence of the sidebar. The navigation has been moved up to the top. And the Post Meta Data is now incorporated into the entrytext parent container and styled differently with an alt style added.

widecolumn class是用来将内容布置到整个网页上，期待边框的作用。导航移到了顶上方。而且文章Meta数据现在合并到了entrytext母container，而且通过添加的alt样式，设计地不同。

These two examples from the Default Theme give you just a glimpse into the myriad ways your WordPress site can be customized.

来自默认主题的这两个例子，只是稍微向你显示一下，你的WordPress可以以各种不同的方式自定义。

Comments[ ]

评论[ ]

Comments may be featured on the single post view or in a popup window. The overall styles for the two sets of comments remain basically the same. The two template files are comments.php and comments-popup.php

评论可能在单一文章view或者在弹出的窗口中。这两种评论的总是设计样式是基本相同的。两个模板文件是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='http://example.com/archives/name-of-post/feed/'>
  <abbr title="Really Simple Syndication">RSS</abbr>
  feed for comments on this post.</a>
  <a href="http://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="http://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>












<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='http://example.com/archives/name-of-post/feed/'>
  <abbr title="Really Simple Syndication">RSS</abbr>
  feed for comments on this post.</a>
  <a href="http://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="http://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>



While individual sections of the comments feature styling reference, the Classic Theme has no general comment division or group style reference, one could be easily added.

虽然评论功能样式reference是单个部分的，经典主题没有总体的评论部分或者群样式reference，但是可以轻易地添加。

#comments h2
Styles the title at the top of the comments list which says "Comments 4 Leave a Comment", with the latter part of the sentence in a link that jumps to <h2 id="postcomment">Leave a comment</h2>.
#comments h2
在评论列表的顶端设计标题样式，显示"评论 4 留下评论"，句子的后半部分是链接，链接到<h2 id="postcomment">留下评论</h2>
#comment-n
Comments are given a unique ID number, signified here by the letter n. This allows them to be styled individually.
#comment-n
评论得到唯一的ID数字，在这里由字母n标示。这个ID能够使得一个个地得到设计。
#comments ol
This begins the ordered list of the comments, counting down from one, and sets the overall style of the comments list.
#comments ol
这是以评论安排好的列表开始的，从以开始倒计数，设计评论列表的总体样式。
#comments li
Style reference for each comment on the list.
#comments li
列表上每个评论的样式reference。
#comments p
This paragraph tag styles the actual comments on the comment list.
#comments p
这个段落标签设计了评论列表上真正的评论。
#comment cite
This use of the cite controls the look of the commenter's name. It usually states "Name says:" in the comments list.
#comment cite
使用cite控制评论人员名称的外观。通常声明"姓名显示:"在评论列表中。
#comments h2 or #postcomment
The h2 heading can be styled two ways, as #comments h2 or #postcomment. The latter is used by the "Leave a Comment" link from the top of the comments section, too.
#comments h2 or #postcomment
h2标题可以以两种方式来设计，如#comments h2或者#postcomment。后者也有评论部分的顶端的"留下一个评论"的链接使用。
#commentform
Style reference for the overall "form" for inputting comments. Each input area has it's own ID.
#commentform
为输入的评论设计总体的"形式"的reference。每个输入区拥有自身的ID。
#author
ID reference for the comment author's input area.
#author
评论作者输入区的ID reference。
#comments small
The <small> tag is used in several places in the Classic Theme. This usage surrounds the text in the comment submit form and the text for the list of tags that can be used in the comment.
#comments small
经典主题中的几几处都使用了<small>标签。这个用法包围了评论递交形式处的文本和可以使用在评论中的标签列表的文本。
#email
ID reference for the comment author's email.
#email
评论作者的电子邮件的ID reference。
#url
ID reference for the comment author's URL.
#url
评论作者的URL的ID reference。
#comment
ID reference for the comment input textarea. It does not style the final generated comment, just the input box.
#comment
评论输入文本区的ID reference，没有设计最后形成的评论，只是设计了输入框。
#comment #submit
There are two submit buttons in the Classic Theme, for search and comment submissions. This is the submit comment button.
#comment #submit
经典主题中拥有两个递交按钮，用于搜索和递交评论。这是递交评论按钮。
Default Theme Comments[ ]
默认主题评论[ ]

The Default Theme comments feature a loop query within the comments.php and comments-popup.php which changes some of the information depending upon if comments are open, closed, and any present. If the comments are open or closed and no comments have been made, this information will be displayed within the <h3 id="comments"> tag.

默认主题评论在comments.php和comments-popup.php内拥有loop查询，根据评论是否代开，关闭，是否出现，可以更改一些信息。如果评论打开或者关闭了，或者没有发表的评论，这个信息就会在<h3 id="comments">标签内部出现。 

<h3 id="comments">One Response to "Hello world!"</h3> 
   <ol class="commentlist">
      <li class="alt" id="comment-1">
         <cite>
 <a href="http://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="http://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>




<h3 id="comments">One Response to "Hello world!"</h3> 
   <ol class="commentlist">
      <li class="alt" id="comment-1">
         <cite>
 <a href="http://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="http://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>

While individual sections of the comments feature styling reference, the Default Theme has no general comment division or group style reference, though one could be easily added.

虽然评论功能样式reference的部分是单个的，默认主题没有总评论部分或者群样式reference，但是可以轻易地添加。

h3 #comments
Styles the <h3> tag for the "number of responses to the post" heading.
h3 #评论：为"文章的反馈数"标题设计<h3>标签。
#commentlist ol
Styles the "ordered list" of the comments list.
#commentlist ol
设计评论列表的"有序列表"。
.alt li and #commenet-n
The comment list items have two style references. The first one is the class alt and the second is the comment ID number signified here by the letter n. This allows them to be styled individually.
.alt li and #commenet-n
评论列表items拥有两个样式reference。第一个是class alt，第二个是评论ID数字，这里由字母n标示。两个样式reference能够使得class和评论ID得到独自设计。
cite
The tag cite frames the "Name says:" and link to the comment author's URL.
cite
标签cite frames"名称显示:"并且链接到评论作者的URL。
.commentmetadata small
The <small> tag has a class of commentmetadata which allows the date and time of the post to be styled.
.commentmetadata small
The <small>标签拥有a class of commentmetadata，能够设计文章的日期和时间。
ol #commentlist p
Styles the paragraph within the ordered list of comments.
ol #commentlist p
设计评论有序列表内的段落。
#respond h3
Styles the heading for "Leave a Reply".
#respond h3
设计"留回复"的标头。
#commentform
Style reference for the overall "form" for inputting comments. Each input area has it's own ID.
#commentform
为输入的评论的总体"形式"设计reference。每个输入区拥有自己的ID。
#author
ID reference for the comment author's input area.
#author
评论作者输入区的ID reference。
#comments small
The <small> tag is used in several places in the Classic Theme. This usage surrounds the text in the comment submit form and the text for the list of tags' that can be used in the comment.
#comments small
<small>用在经典主题的几处中。这个用法围绕着'评论递交形式的文本和可以用在评论中的标签列表的文本。
#email
ID reference for the comment author's email.
#email
评论作者的电子邮件的ID reference。
#url
ID reference for the comment author's URL.
#url
评论作者URL的ID reference。
#comment
ID reference for the comment input textarea. It does not style the final generated comment, just the input box.
#comment
评论输入文本区的ID referenc。不设计最后产生的评论，只设计输入框。
#comment #submit
There are two submit buttons in the Classic Theme, for search and comment submissions. This is the submit comment button.
#comment #submit
经典主题中有两个递交按钮，搜索的和评论递交按钮。这是评论递交按钮。
Popup Comments[ ]
弹出评论[ ]

The Classic and Default Themes' comments-popup.php template file is essentially the same. They use the layout for the [[WordPress:#Default Theme Comments|Classic Theme comment structure]]. While the Classic Theme uses <h2> headings and the Default Theme uses <h3> headings for the title headings in their comments, in the comments-popup.php template file, they both use the <h2> heading tag.

经典主题和默认主题的comments-popup.php模板文件基本上是相同的。这两个模板文件为[[WordPress:#Default Theme Comments|经典主题评论结构]]使用布局。虽然经典主题使用<h2>标头，默认主题为comments-popup.php 模板文件中的评论中的标题使用<h3>标题，经典主题和默认主题都使用<h2>标题标签。 

<body id="commentspopup">
<h1 id="header"></h1>
<h2 id="comments">Comments</h2>
....Classic Theme commment section.....
...Classic Theme footer....
<body id="commentspopup">
<h1 id="header"></h1>
<h2 id="comments">Comments</h2>
....经典主题评论部分.....
...经典主题页底文字....

The body tag sets the style for the overall page with #commentspopup. The h2 heading begins the comments section.

body标签使用#commentspopup设置了整个网页的样式。h2标头开始了评论部分。

If you make modifications to the structure of the tags within the header and footer of the overall Theme, ensure those structural changes are applied to the comments popup template, especially if you will be releasing the Theme to the public.

如果你更改了整个主题的标头或者页底文字内的标签的结构，你要确定这些更改同样适用于评论弹出模板，如果你将要公开发行主题，你更要这样做。

Sidebar[ ]

边框[ ]

As you saw with the Default Theme, the sidebar can be visible or not, depending upon the template file in use. The sidebar, in general, can be simple or complex. WordPress Themes often feature information within the sidebar in nested lists. There is a step-by-step guide for the sidebar at WordPress:Customizing Your Sidebar and more information on WordPress:Styling Lists with CSS, too.

如你在默认主题中所看到的那样，边框可以显示也可以隐藏，取决于正在使用的模板文件。一般来说，边框，可以简单，也可以复杂。WordPress主题边框中的信息通常是嵌套列表的形式。自定义你的边框中有一步一步的关于边框的指导，CSS样式表上还拥有更多的信息。

In general, the WordPress sidebar features titles of the various sections within a list, with the section items in a nested list below the title.

一般来说，WordPress边框的列表上拥有不同部分的标题，而且不同部分的items是以嵌套形式出现在标题下面。

The Classic Theme sidebar looks like this, with the links removed for simplification:

经典主题边框看起来像，简化了链接： 

<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" 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>







<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" 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>










Most of these are self-explanatory. Each set of links has its own CSS selector: WordPress:Pages, categories, archives, search, and meta.

边框上的大多数内容清楚明了。每组链接都有自身的CSS选择器：网页，类别，归档，搜索和meta。

Pages and Link Categories[ ]

网页和链接类别[ ]

The WordPress:Pages and Links category, labeled "Blogroll", uses the <?php get_links_list(); ?> and <?php wp_list_pages(); ?> template tags which automatically generates a heading.

网页 和 链接类别，标记为"友情链接"，使用<?php get_links_list(); ?> 和<?php wp_list_pages(); ?>模板标签，这些标签能够自动地产生标题。

For the Links category, it generates an h2 heading for that set of links. This means you can style the menu h2 heading to look differently from the rest of the headings, or, if you want them to all look the same, make sure that the menu h2 style matches the rest of the category styles which are not automatically generated.

对于链接类别，为一组链接产生了h2标题。这意味着你可以将menu h2标题的外观设计地与其它标题的外观不同，或者，如果你想要这些标题外观相同，确定menu h2样式与其它不是自动产生的类别样式是匹配的。

The Pages template tag generates pagenav as the heading and then identifies the pages in a new way. As a general list viewed on mutli-post and single post views, the Page list items feature a class="page_item" to style those links. When viewing an individual Page, that Page's link will change to class="current_page_item", which can then be styled to look differently from the rest of the Page links.

网页模板标签产生pagenav作为标题然后以一种新的方式识别网页。作为多篇文章以单篇文章网页的总列表，网页列表items拥有class="page_item"设计这些链接。当用户访问单个网页的时候，网页链接会更改为class="current_page_item"，这个可以与其它网页链接设计地不同。

Categories, Archives, and Meta[ ]

类别，归档和Meta[ ]

The other sidebar section titles, categories, archives, meta, and others, do not use template tags which generate their own titles. These are set inside of PHP statements which "print" the text on the page. While these could be put inside of heading tags, WordPress uses the _e() function to display or "echo" the text titles while also marking the text as a possible target for language translation. If you will be developing your theme for public release, using the echo functions is highly recommended.

其它的边框部分标题，类别, 归档, meta,和其它内容，不使用产生这些标题的模板标签。这些都在PHP声明的内部，将文本"印制"到网页上。虽然这些可以放到标题标签的内部，WordPress使用_e()函数显示或者"echo"文本标题，同时将文本作为翻译的对象。如果你将要开发主题作为公共发行，推荐你使用echo 函数。

You can style these individually or all the same. Some Themes, like the Default Theme, put all these in <h2> headings so the list headings will all look the same. Therefore, they may or may not use style references for each section. You may add them if you need them to change the look of each section of links.

你可以单独地设计这些或者将这些设计成相同的。有些主题，例如默认主题，将这些放入<h2>标题中，这样列表标题看起来也还是一样的。因此，它们可能为每个部分使用样式references也可能不使用。如果你想要更改每个部分链接的外观，你可能要添加样式references。

Search Form[ ]

搜索形式[ ]

The search form is found within the searchform.php. It may be found in different locations within the sidebar. To style the overall search form, use the search ID. Here is a list of the individual areas of the search form which may be styled by default. You may add style classes to gain more control over the look of your search form.

你可以在searchform.php内找到搜索形式。这可能位于工具条内的不同位置上。要设计整体的搜索形式，请使用search ID。下面是搜索形式每个单个部分的列表，这些部分可能都是默认设计的。你可以添加样式classes，更好地控制你的搜索形式的外观。 

<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" value="Search" />
      </div>
     </form>


<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" value="Search" />
      </div>
     </form>


#search
The overall style for the search form.
#search
搜索形式的整体样式。
#search label
Used to style the label tag, if necessary.
#search label
如果必要的话，用来设计label标签。
#searchform
Used to style the form itself.
#searchform
用来设计搜索形式。
#search div
This unlabeled div is a child container of the parent container search and maybe styled from within that selector.
#search div
这个为标记的div是母containersearch的子container而且可能在那个选择器内部设计。
#searchform input
To style the input area for the search, this selector combination will work.
#searchform input
要设计搜索的输入区，这个选择器联合体可能能够胜任。
#searchsubmit
Used by the Default Theme, this selector may be used to style the search or submit button.
#searchsubmit
由默认主题使用，这个选择器可能用来设计搜索 或者提交按钮。

The search form area, input, and button can be styled in many ways, or left with the default input and "button" look.

搜索形式区，输入，和按钮可以以许多不同的方式设计，或者可以使用默认输入和"按钮"。

Meta Feed Links[ ]

Meta Feed 链接[ ]

The Meta links may be shown as text or icons representing the various links. The XHTML and CSS validation links may use the W3 icons. The various Feeds can also be represented as icons. Or left as text. It's up to you. Use of the feeds within your sidebar with text or icons is covered by the article WordPress:WordPress Feeds.

Meta链接可能显示为文本或者图标，代表不同的链接。XHTML和CSS确认链接可能使用W3图标。不同的Feeds可以表示为图标。或者表示为文本。这由你决定。在边框中使用带有文本或者图标的feeds，在文章WordPress Feeds中有概述。

Footer[ ]

页底文字[ ]

The footer is found within the footer.php template file. In both the Default and Classic Themes, the footer contains little information.

可以在footer.php模板文件中找到页底文字。在默认和经典主题中，页底文字没有包含多少信息。

Classic Theme

经典主题 

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


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


The footer's content is styled with the credit class and the paragraph and cite tags.

页底文字的内容是用credit class和段落和段落和cite标签设计的。

The tag displays the number of mysql queries used on the page and the time it took for the page to load, in HTML commented code. It is there for the administrator's convenience and use. It is only visible within the page's source code. If you would like to display this visible on the page, remove the comments. It's look will be influenced by the credit class style of the paragraph tag. On the template file, it looks like this:

标签显示了网页上使用了多少个mysql查询以及网页在HTML注释的代码中载入的时间，以便于管理员使用。在网页的源代码中才能够看到这个网页。如果你想要在网页上显示这个标签，请移除评论。标签的外观会受到段落标签的credit class style影响。在模板文件中，看起来像： 

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

Default Theme 

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




The Default Theme's footer is styled by the footer ID and the paragraph tag. While the footer area itself maybe styled by the footer, the paragraph tag controls the text within it. To style the paragraph tag differently within the footer than the rest of your page:

默认主题的页底文字是由footer ID和段落标签设计的。虽然页底文字自身可能是由footer设计的，段落标签控制了页底内的文字。将footer内的段落标签设计地与你的网页的其它内容不同： 

#footer p {styles}
  1. footer p {styles}

Resources[ ]

资源[ ]








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