站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Site Architecture 1.5
”(章节)
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
跳转至:
导航
、
搜索
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
=== 内容=== The content container in WordPress plays the most important role. It holds the [[WordPress:The Loop|WordPress Loop]] which dictates the generation of content on the page depending upon the request by the user. WordPress中的内容承载器起着重要的作用。内容承载器中承载有[[WordPress:The Loop|WordPress Loop]],Loop根据用户的需求,规定网页上产生什么内容。 The Classic Theme has the simplest content structure: 经典主题拥有最简单的内容结构: <pre><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></pre> <pre><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></pre> 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。经典主题同时显示了强大的功能,能够单个地设计只有一篇文章的网页的外观。 <pre><div class="post" id="post-1"></pre> <pre><div class="post" id="post-1"></pre> The <tt>post</tt> CSS class selector applies the <tt>post</tt> styles to this container, but it also has an ID which is generated automatically by WordPress. The code looks like this: <tt>post</tt> CSS class选择器对于这个container使用<tt>文章</tt>样式,但是也有一个WordPress自动产生的ID。代码看起来像: <pre><div class="post" id="post-<?php the_ID(); ?>"></pre> <pre><div class="post" id="post-<?php the_ID(); ?>"></pre> The use of the template tag <tt>[[WordPress:Template Tags/the_ID|the_ID()]]</tt> 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 <tt>post-1</tt>, as could <tt>post-2</tt>. 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. 使用模板标签<tt>[[WordPress:Template Tags/the_ID|the_ID()]]</tt>能够产生文章的ID数字,为内部网页链接和样式提供了唯一的标示符。这篇文章拥有<tt>post-1</tt>的样式,也有<tt>post-2</tt>的样式。虽然没有必要为每篇文章设计一种样式,但是你可能希望有一两篇文章看起来与其它文章不同。有的插件可能使用这个标示符自动地更改不同的文章的外观。 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对于'''多篇文章的网页'''如首页,类别,归档,和搜索,拥有不同的外观,对于单篇文章的网页拥有不同的'''单篇文章外观'''。多篇文章网页看起来像: <pre><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></pre> <pre><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></pre> There is a lot going on here. Let's break it down. 这里有许多内容。我们分开描述。 ;<tt><div id="content" class="narrowcolumn"></tt>:In the '''multi-post views''', it features a <tt>class="narrowcolumn"</tt> and in the '''single post views''', it features <tt>class="widecolumn"</tt> and the sidebar is not generated on that page, allowing the post to be viewed "wide" across the width of the content area. ;<tt><div id="content" class="narrowcolumn"></tt>:在'''多篇文章 views'''中,拥有<tt>class="narrowcolumn"</tt>,在'''单篇文章views'''中,拥有<tt>class="widecolumn"</tt>,而且边框并不是在那个网页上产生的,使得用户能够在"较宽"的内容区域内看到文章。 ;<tt><div class="post" id="post-1"></tt> :Like the Classic Theme, this division sets up the style for <tt>post</tt> and the identifier for <tt>post-X</tt>, with <tt>X</tt> representing the post's unique ID number. This allows for customizing the specific post's look. ;<tt><div class="post" id="post-1"></tt> :与经典主题相似,这个部分设置了<tt>文章</tt>的样式和<tt>post-X</tt>的标示符,<tt>X</tt>代表文章唯一的ID数字。这个部分能够自定义文章的外观。 ;<tt><h2>Post Title</h2></tt> :This encompasses the post's title code, styled by the <tt><h2></tt> tag. ;<tt><h2>Post Title</h2></tt> :这个包围了文章的标题代码,由<tt><h2></tt>标签设计。 ;<tt><small>Date</small></tt> :The date code is surrounded and styled by the <tt>small</tt> tag. ;<tt><small>Date</small></tt> :日期代码是由<tt>small</tt>标签包围和设计的。 ;<tt><div class="entry"></tt> :The post content is styled by a combination of the styles within the <tt>entry</tt> CSS selectors and the paragraph tag. ;<tt><div class="entry"></tt> :文章内容是由<tt>entry</tt> CSS选择器和段落标签内的联合的样式共同设计的。 ;<tt><p class="postmetadata">Post Meta Data Section</p></tt> :The [[WordPress:Post Meta Data Section]] contains the data details about the post such as the date, time, and categories the post belongs to. ;<tt><p class="postmetadata">文章Meta数据Section</p></tt> : [[WordPress:Post Meta Data Section|文章Meta数据部分]]包含文章信息的详细数据,例如文章的日期,时间,以及文章所属的类别。 ;<tt><div class="navigation"></tt> :The [[WordPress:Next and Previous Links]] are styled in the <tt>navigation</tt>. They also include classes for <tt>alignleft</tt> for the Previous Post and <tt>alignright</tt> for the Next Post in chronological order. ;<tt><div class="navigation"></tt> :The [[WordPress:Next and Previous Links|上一个和下一个链接]]是在<tt>导航</tt>中设计的,也包含时间顺序上的上一篇文章的<tt>alignleft</tt> classes和下一篇文章的<tt>alignright</tt> classes。 These elements are shifted around in the '''single post view''' content structure: 这些部分在'''单一文章view'''内容结构中得到了切换: <pre><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> </pre> <pre><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> </pre> The <tt>widecolumn</tt> class is featured to stretch the content across the page to fill in the absence of the sidebar. The <tt>navigation</tt> has been moved up to the top. And the Post Meta Data is now incorporated into the <tt>entrytext</tt> parent container and styled differently with an <tt>alt</tt> style added. <tt>widecolumn</tt> class是用来将内容布置到整个网页上,期待边框的作用。<tt>导航</tt>移到了顶上方。而且文章Meta数据现在合并到了<tt>entrytext</tt>母container,而且通过添加的<tt>alt</tt>样式,设计地不同。 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 <tt>comments.php</tt> and <tt>comments-popup.php</tt> 评论可能在单一文章view或者在弹出的窗口中。这两种评论的总是设计样式是基本相同的。两个模板文件是<tt>comments.php</tt> 和 <tt>comments-popup.php</tt> ===== Classic Theme Comments ===== ===== 经典主题评论 ===== <pre><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></pre> <pre><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></pre> 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 <tt><h2 id="postcomment">Leave a comment</h2></tt>. ;#comments h2:在评论列表的顶端设计标题样式,显示"评论 4 留下评论",句子的后半部分是链接,链接到<tt><h2 id="postcomment">留下评论</h2></tt> ;#comment-n :Comments are given a unique ID number, signified here by the letter <tt>n</tt>. This allows them to be styled individually. ;#comment-n :评论得到唯一的ID数字,在这里由字母<tt>n</tt>标示。这个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 <tt>cite</tt> controls the look of the commenter's name. It usually states "Name says:" in the comments list. ;#comment cite :使用<tt>cite</tt>控制评论人员名称的外观。通常声明"姓名显示:"在评论列表中。 ;#comments h2 or #postcomment :The <tt>h2</tt> heading can be styled two ways, as <tt>#comments h2</tt> or <tt>#postcomment</tt>. The latter is used by the "Leave a Comment" link from the top of the comments section, too. ;#comments h2 or #postcomment : <tt>h2</tt>标题可以以两种方式来设计,如<tt>#comments h2</tt>或者<tt>#postcomment</tt>。后者也有评论部分的顶端的"留下一个评论"的链接使用。 ;#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 <tt><small></tt> 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 :经典主题中的几几处都使用了<tt><small></tt>标签。这个用法包围了'''评论递交形式'''处的文本和可以使用在评论中的'''标签列表'''的文本。 ;#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 <tt>comments.php</tt> and <tt>comments-popup.php</tt> 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 <tt><h3 id="comments"></tt> tag. 默认主题评论在<tt>comments.php</tt>和<tt>comments-popup.php</tt>内拥有loop查询,根据评论是否代开,关闭,是否出现,可以更改一些信息。如果评论打开或者关闭了,或者没有发表的评论,这个信息就会在<tt><h3 id="comments"></tt>标签内部出现。 <pre><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></pre> <pre><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></pre> 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 <tt><h3></tt> tag for the "number of responses to the post" heading. ;h3 #评论:为"文章的反馈数"标题设计<tt><h3></tt>标签。 ;#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 <tt>alt</tt> and the second is the comment ID number signified here by the letter <tt>n</tt>. This allows them to be styled individually. ;.alt li and #commenet-n :评论列表items拥有两个样式reference。第一个是class <tt>alt</tt>,第二个是评论ID数字,这里由字母<tt>n</tt>标示。两个样式reference能够使得class和评论ID得到独自设计。 ;cite :The tag <tt>cite</tt> frames the "Name says:" and link to the comment author's URL. ;cite :标签<tt>cite</tt> frames"名称显示:"并且链接到评论作者的URL。 ;.commentmetadata small :The <tt><small></tt> tag has a class of <tt>commentmetadata</tt> which allows the date and time of the post to be styled. ;.commentmetadata small :The <tt><small></tt>标签拥有a class of <tt>commentmetadata</tt>,能够设计文章的日期和时间。 ;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 <tt><small></tt> 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 : <tt><small></tt>用在经典主题的几处中。这个用法围绕着'''评论递交形式''的文本和可以用在评论中的'''标签列表'''的文本。 ;#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' <tt>comments-popup.php</tt> 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 <tt><h2></tt> headings and the Default Theme uses <tt><h3></tt> headings for the title headings in their comments, in the <tt>comments-popup.php</tt> template file, they both use the <tt><h2></tt> heading tag. 经典主题和默认主题的<tt>comments-popup.php</tt>模板文件基本上是相同的。这两个模板文件为[[WordPress:#Default Theme Comments|经典主题评论结构]]使用布局。虽然经典主题使用<tt><h2></tt>标头,默认主题为<tt>comments-popup.php</tt> 模板文件中的评论中的标题使用<tt><h3></tt>标题,经典主题和默认主题都使用<tt><h2></tt>标题标签。 <pre><body id="commentspopup"> <h1 id="header"></h1> <h2 id="comments">Comments</h2> ....Classic Theme commment section..... ...Classic Theme footer....</pre> <pre><body id="commentspopup"> <h1 id="header"></h1> <h2 id="comments">Comments</h2> ....经典主题评论部分..... ...经典主题页底文字....</pre> The <tt>body</tt> tag sets the style for the overall page with <tt>#commentspopup</tt>. The <tt>h2</tt> heading begins the comments section. <tt>body</tt>标签使用<tt>#commentspopup</tt>设置了整个网页的样式。<tt>h2</tt>标头开始了评论部分。 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 [[WordPress:Designing Themes for Public Release|releasing the Theme to the public]]. 如果你更改了整个主题的标头或者页底文字内的标签的结构,你要确定这些更改同样适用于评论弹出模板,如果你将要[[WordPress:Designing Themes for Public Release|公开发行主题]],你更要这样做。
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)