WordPress:Codex:Styles

来自站长百科
Fludlen（讨论 | 贡献）2008年9月16日 (二) 16:41的版本
(差异) ←上一版本 | 最后版本 (差异) | 下一版本→ (差异)
跳转至： 导航、​ 搜索


The following are samples of code used within the WordPress Codex for presenting examples of tag and code use. They involve familiarity with HTML and CSS, as well as MediaWiki markup.

下面是WordPress Codex内使用代码的样本，用于列出标签和代码使用的例子。这些代码涉及到HTML和CSS，以及MediaWiki 标记。

Overall Styles[ ]

总体样式[ ]

Layouts of articles within WordPress Codex follow a simple convention. Articles normally start with a descriptive paragraph, though sometimes it may start with a title followed by an introductory paragraph. Following that, then the rest of the article is presented, and is divided into concise sections of information, examples, and images that help WordPress users understand the concept under discussion.

WordPress Codex内文章的布局遵循简单的惯例。文章一般以描述性的段落开始，但是有时候文章会以一个标题开始，标题后面有个介绍性的段落。然后，就会出现文章的其它内容，而且清晰的分为信息部分，例子部分和图像部分，这样能够帮助用户了解正在讨论的内容。

Resources are usually found at the end of the article in the section title Resources and may include links to external sites. External links should be limited to the most reliable and consistent sources, preferably non-commercial sites, when possible.

资源通常在标题为资源部分的文章的结尾部分而且可能包含链接到外部站点的链接。外部链接应该限定为最可靠和一致的资源，可能的话，那些非商业化的站点更合适。

Section titles are styled through the MediaWiki markup style using equal signs. The first section title should be marked with two equal signs (==) on both sides. Spaces or lack of spaces between the words and the equal signs will not affect the end result.

使用等号，通过MediaWiki标记样式设计部分标题。第一个部分标题应该在标题的两边标记两个等号（= =）。单词之间有空格或者缺少空格，以及等号都不会影响最后结果。

Second level section titles should be marked with three equal signs (===), and the third level with four (====), and the fourth with five (=====). Rarely do articles have more than four subsections.

第二级别部分标题的左右边应该分别标上三个等号（===），第三级别部分标题左右边应该分别标上四个等号（====），第四级别部分标题左右边标上五个等号（=====）。很少有文章拥有四个多的子部分。

A good example of an article which uses all of the layout styles within WordPress Codex is WordPress:Styling Lists with CSS. A good example of the non-code writing style is found at WordPress:WordPress Semantics.

使用WordPress Codex内所有布局样式的典型文章是CSS样式列表。可以在WordPress语义学中找到典型非编码的编写样式。

Table of Contents[ ]

内容表格[ ]

The table of contents featured on every page is generated automatically when four sections have been created. It sets itself to float to the right side of the content of the first section title. To force a table of contents onto a page in a particular place, or on an article that lacks more than four sections, you can use __TOC__ to place or force the table of contents.

四个部分创建好之后，每个页面上的内容表格会自动产生。内容表格自动设置悬浮在第一个部分标题的内容的右边。迫使内容表格出现在页面或者没有四个部分的文章的某个位置，你可以使用__TOC__放置或者迫使内容表格。

Using Codes in the Codex[ ]

在Codex中使用代码[ ]

Displaying programming codes, HMTL, and CSS is common within the WordPress Codex. It can be styled in several different ways.

在WordPress Codex中使用程序代码，HTML和CSS很常见。可以以不同的方式显示。

Code within the text
To style code within the text of an article, such as listing the index.php template file, use the <tt> tag to wrap the code within a sentence. Do not use the <code> tag as it puts a blue background behind the text which makes it a little hard to read. Using the <tt> tag in a sentence removes the blue background and makes it easier to read.

；文本内的代码：在一篇文章的文本内设计代码，如列出index.php模板文件，请使用<tt>标签将代码包裹在句子中。不要使用<code>标签，因为这个标签在文本的背后创建了蓝色的背景色，这样使得文本较难阅读。在 句子中使用<tt> 标签，会移除文本后面的蓝色背景色，使得文本便于阅读。

Code in a PRE tag
To style code so it is separate from the text and highlighted in a blue colored background container, use <pre> tags to surround the code. Do not use <tt> or <code> within the PRE tags unless you want to show those tags. If using a link within a PRE tag, use <nowiki> to force the link to not generate into an active link.
PRE标签中的代码：设计代码这样代码从文本中分开，突出在一个蓝色背景的container中，请使用<pre>标签包围代码。不要在PRE标签内部使用<tt>或者<code>，除非你想要显示这些标签。如果在PRE标签内部使用链接，请使用<nowiki>迫使链接不会变为活跃的链接。
PRE Shortcut
If you are writing a very short line of code, you can put a space before the code and the software will automatically generate a <pre> tag around the code.
PRE Shortcut
如果你正在编写非常短的代码，你可以在代码之前放置空格，这样软件会在代码的周围自动创建<pre>标签。
PRE Limits
The <pre> tag is great for highlighting text, but it still functions the same as any HTML <pre> tag. The layout of the code within a <pre>, with tabs, spaces, and long lines, will all be evident. Long lines that exceed the width of the page will run off the page. When possible, force line breaks in the code to shorten the width manually. When not possible (it will break the code if copied and pasted exactly as written), then use your best judgment. Avoid huge indentions and tabs to push the code over. Use two or more spaces rather than tabs for long lines of code to provide indention.
PRE Limits
<pre>标签能够很好的突出文本，但是这个标签与任何HTML<pre>标签运行方式仍然是相同的。<pre></tt内的代码布局，标签，空格，长行，都很明显。超过页面宽度的长行会从页面上消失。如果可能，迫使代码分行，动手缩短代码行的宽度。如果不能够这样做（这样会破坏代码复制粘贴时的格式），请自己判断。避免大的缩排和跳格设定破坏代码。为长行的代码使用两个或者多个空格而不是跳格设定，来设置缩排。
Wrapping Code
Using the example below, you can create a div styled with CSS to emulate the <pre> tag usage, but the code will be actually text within a container, made to look like code through the use of <tt> and changing > and < into &gt; and &lt; and line breaks <br /> within the code example. The benefit of this style is that the code will automatically wrap when a space is used, allowing longer lengths of code to be showcased.
Wrapping Code
使用下面的例子，你可以使用CSS创建div，效仿<pre>标签用法，但是代码将会是container内的真正的文本，通过使用<tt> 和将 > 和< 更改为&gt;和 &lt;，并且在代码例子内使用行分隔符<br />，使得文本看起来像代码。这种样式的好处在于使用空格的时候，代码会自动地包裹，能够显示更长的代码。
<div class="post" id="post-<?php the_ID(); ?>"><

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="post" id="post-<?php the_ID(); ?>"><

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>

<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

In which the code looks like this:

代码看起来像： 

<div style="padding: 1em; border: 1px dashed #2f6fab; 
color: Black; background-color: #f9f9f9; line-height: 1.1em">
<tt>
&lt;div class="post" id="post-&lt;?php the_ID(); ?&gt;"&gt;&lt;br /&gt;
&lt;h2&gt;&lt;a href="&lt;?php the_permalink() ?&gt;" rel="bookmark" title="Permanent Link to &lt;?php the_title(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;&lt;br /&gt;
&lt;small&gt;&lt;?php the_time('F jS, Y') ?&gt; &lt;!-- by &lt;?php the_author() ?&gt; --&gt;&lt;/small&gt;
</tt>
</div>


<div style="padding: 1em; border: 1px dashed #2f6fab; 
color: Black; background-color: #f9f9f9; line-height: 1.1em">
<tt>
&lt;div class="post" id="post-&lt;?php the_ID(); ?&gt;"&gt;&lt;br /&gt;
&lt;h2&gt;&lt;a href="&lt;?php the_permalink() ?&gt;" rel="bookmark" title="Permanent Link to &lt;?php the_title(); ?&gt;"&gt;&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/h2&gt;&lt;br /&gt;
&lt;small&gt;&lt;?php the_time('F jS, Y') ?&gt; &lt;!-- by &lt;?php the_author() ?&gt; --&gt;&lt;/small&gt;
</tt>
</div>


For more information on using character entities or codes within a document, see WordPress:Writing Code in Your Posts.

关于在文档内使用代码实体或者代码的更多的信息，请看看在你的文章中编写代码。

Examples[ ]

例子[ ]

Users of the Codex like to "see" what the end result will look like before they try it. When possible, here are some examples of "realistic" examples that may be used within the Codex.

Codex的用户希望在尝试之前，"知道"最后结果是怎样的。可能的话，下面是Codex中可能使用的一些"现实的"例子。

Realistic Examples[ ]

实例[ ]

When a realistic example is required to show what the usage would look like in a post, I use the following as an example - modifying it as needed to change the padding, width, and colors. In general, I will modify the look of the font but will not use font-family references, relying on the default fonts with the Codex, in order to avoid font issues with various browsers and computer systems.

当需要实例显示文章中的用法的时候，我使用下面的内容作为例子—根据需要更改padding，宽度和颜色。一般而言，根据Codex默认字体，我会更改字体外观但是不会使用字体集参考，以避免不同浏览器和电脑系统之间的字体冲突问题。

Box in which to provide demonstration of what a code looks like when used in the "real world". I can use spans to style sections and other CSS inline styles to customize the look like for this list:
  • A List Item in Small Caps
  • List Item in Italic and Bold
  • Change Size and Color

There are limits, like you can't recreate a hover, but for the most part, all inline CSS styles can be used on the Codex to recreate a realistic example of what the usage will generate.






框用来显示代码在"现实世界"中的外观。我可以使用spans 设计部分使用其它的CSS inline 样式自定义这个列表的外观：
  • 用小型大写字母列出的列表内容
  • 斜体和粗体列出的列表内容
  • 更改大小和颜色
有一些限制，就如你不能够重新创建悬浮，但是极大程度上，可以在Codex上使用所有的inline CSS样式，重新创建产生用法的实例。

And the code is this: 代码是： 

<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">
Box in which to provide demonstration of what a code 
looks like when used in the "real world".  I can use 
<span style="color:red; font-weight:bold">spans to 
style sections</span> and other CSS inline styles 
to customize the look like for this list:
<ul>
<li style="color:green; font-variant:small-caps">A List Item in Small Caps</li>
<li style="color:blue; font-style:italic; font-weight: bold">List Item in Italic and Bold</li>
<li style="color:maroon; font-weight:bold; font-size: 120%">Change Size and Color</li></ul>
There are limits, like you can't recreate a hover, 
but for the most part, all inline CSS styles can be 
used on the Codex to recreate a realistic example of
 what the usage will generate.</div>





<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">
用来显示代码在"现实世界"中的外观的框。我可以使用 <span style="color:red; font-weight:bold">spans设计 sections</span>使用其它的CSS inline样式自定义这个列表的外观：
<ul>
<li style="color:green; font-variant:small-caps">A List Item in Small Caps</li>
<li style="color:blue; font-style:italic; font-weight: bold">斜体和粗体形式的列表</li>
<li style="color:maroon; font-weight:bold; font-size: 120%">更改大小和颜色</li></ul>
有一些限制，就如你不能够重新创建一个悬浮，但是在极大程度上，可以在Codex上使用所有的inline CSS样式，重新创建用法产生的实例。</div>




Showing Links Without Links[ ]

Showing Links Without Links[ ]

To NOT show a link in an example like http://example.com/index.php which uses a link use <nowiki>:

不要在例子中显示链接，如http://example.com/index.php，使用链接use <nowiki>: 

<a title="example" href="<nowiki>http://example.com/</nowiki>">

<a 标题="example" href="<nowiki>http://example.com/</nowiki>">

Making a Live Link Example[ ]

Making a Live Link Example[ ]

To create an example link, link to the heading in which that example is being used. If you are in an article called "Using WordPress" and showing an example under the heading "List Categories", then the example links to the categories would be:

创建例子链接，链接到这个使用这个例子的标头。如果你在一篇称为"使用 WordPress"的文章中而且在标题"列表类别"下面显示例子，那么链接到类别的例子链接将会是： 

* [[WordPress:#List_Categories|My Life Stories]]
* [[WordPress:#List_Categories|My Family]]
* [[WordPress:#List_Categories|Sharing]]
* [[WordPress:#List_Categories|Facts and Fiction]]
* [[WordPress:#List_Categories|我的生活故事]]
* [[WordPress:#List_Categories|我的家庭]]
* [[WordPress:#List_Categories|分享]]
* [[WordPress:#List_Categories|现实和虚幻]]

And the results would look like this, using the demonstration code from above:

使用上述的示范代码，结果看起来像：

  • [[WordPress:#Making a Live Link Example|My Life Stories]]
  • [[WordPress:#Making a Live Link Example|My Family]]
  • [[WordPress:#Making a Live Link Example|Sharing]]
  • [[WordPress:#Making a Live Link Example|Facts and Fiction]]
  • [[WordPress:#Making a Live Link Example|我的生活故事]]
  • [[WordPress:#Making a Live Link Example|我的家庭]]
  • [[WordPress:#Making a Live Link Example|分享]]
  • [[WordPress:#Making a Live Link Example|现实和虚幻]]

Showing Links that Work Like Links[ ]

显示像链接一样运行的链接[ ]

To create the look of an example link, without having it actually behave like a link, you can use the span tag combined with underline to style a fake link:

要创建例子链接的外观，使其不像真正的链接那样运行，你可以将span标签与下划线一起使用，设计伪链接： 

See <span style="color:blue"><u>this article</u></span> for more information
See this article for more information.


See <span style="color:blue"><u>this article</u></span> 更多的信息
请看看 这篇文章得到更多的信息。

Using Images in the Codex[ ]

在Codex内使用图像[ ]

Images related to WordPress and WordPress articles are welcome in the Codex. We do have some "rules" about the images.

Codex中欢迎与WordPress和WordPress文章相关的图像。我们为图像设定一些"规则"。

  • DO NOT use spaces in the file names. Dashes are acceptable.
  • 不要在文件名内使用空格。可以接受破折号。
  • Name it what it is, not its usage or description. For example, this-is-a-screen-shot-of-link-manager.png is not clear. Use link-manager-panel.png.
  • 是什么，就将其命名为什么，而不是命名为其用法或者描述。如，this-is-a-screen-shot-of-link-manager.png不清楚。请使用link-manager-panel.png。
  • Keep image width no larger than 600 pixels, if possible.
  • 如果可能的话，将图像的宽度设置在600像素范围之内。
  • Keep files sizes small, preferably below 60K when possible.
  • 可能的话，尽量将文件大小设置地小一些，最好在60K以下。
  • The file types preferred are jpg and png. The png files tend to be best.
  • 偏爱的文件类型有jpg 和 png。png文件是最好的。
  • If you resize an image to make it much smaller, be sure and sharpen it before saving and uploading.
  • 如果你重新调整图像的大小，使得图像更小，确定保存上传图像之前，已经调整了图像大小。
  • If you have uploaded an image incorrectly, upload a new version and let one of the WordPress:Documentation team know to delete the old image.
  • 如果你没有适当地上传图像，上传一个新的版本，使得文件小组中的一员删除旧的图像。

You can use images within the Codex as full-sized or thumbnails.

你可以在Codex中使用完整的图像或者图像的缩略图。

To use images within the Codex: 在Codex内使用图像： 

[[WordPress:Image:Kubrick_Single.jpg|right|thumbnail|WordPress Default Theme]]

[[WordPress:Image:Kubrick_Single.jpg|right|thumbnail|WordPress 默认主题]]

right|thumbnail|WordPress Default Theme - Single Post LookWill create the image floated to the right in a thumbnail with a caption.

right|thumbnail|WordPress 默认主题 – 单篇文章外观会创建带有标题的图像缩略图，悬浮在右边。

To put an image floated to the right or left that is not a thumbnail:

将不是缩略图的图像悬浮在右边或者左边： 

[[WordPress:Image:leaf.gif|left]]

[[WordPress:Image:leaf.gif|左边]]

leftThe image of the leaf will float to the left without a link or a border around it. It is simply a graphic used to set an example of floating an image to the left (or right) of text, as exemplified in the article WordPress:Wrapping Text Around Images.


叶子叶子的图像悬浮在左边，不带有链接或者边框。只是个图像，作为在文本的左边（或者右边）悬浮图像的例子，在文章在图像周围包裹文本中得到说明。


To put an image floated to the right (or left) with a caption that is not a thumbnail use:

将图像悬浮在右边（或者左边），标题并不简短，请使用： 

[[WordPress:Image:leaf.gif|right|frame|Image of a leaf]]

[[WordPress:Image:leaf.gif|right|frame|叶子的图像]]

right|frame|Image of a leafThis examples puts a frame around a non-thumbnail image so the text will wrap around the image. The image will sit in a bordered container with a caption but with no link signaling a larger version of the image. Though the picture itself is still a link to view it separately, it is not an enlarged version. This is useful for small images that require a caption.
right|frame|叶子的图像这个例子将框架设置在非缩略图图像的周围，这样文本就会包围图像。这个图像会位于有边框的container中，带有标题，但是没有链接到更大版本的图像的链接。虽然图像本身仍然是个链接，点击可以单独地查看图像，但是图像不是个可扩展的版本。对于需要标题的小图像，这很有用。

Resources[ ]





资源[ ]
取自“https://www.zzbaike.com/wiki/index.php?title=WordPress:Codex:Styles&oldid=10841”