久久精品水蜜桃av综合天堂,久久精品丝袜高跟鞋,精品国产肉丝袜久久,国产一区二区三区色噜噜,黑人video粗暴亚裔

WordPress:Codex:Styles

來(lái)自站長(zhǎng)百科
跳轉(zhuǎn)至： 導(dǎo)航、? 搜索


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內(nèi)使用代碼的樣本，用于列出標(biāo)簽和代碼使用的例子。這些代碼涉及到HTML和CSS，以及MediaWiki 標(biāo)記。

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內(nèi)文章的布局遵循簡(jiǎn)單的慣例。文章一般以描述性的段落開始，但是有時(shí)候文章會(huì)以一個(gè)標(biāo)題開始，標(biāo)題后面有個(gè)介紹性的段落。然后，就會(huì)出現(xiàn)文章的其它內(nèi)容，而且清晰的分為信息部分，例子部分和圖像部分，這樣能夠幫助用戶了解正在討論的內(nèi)容。

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.

資源通常在標(biāo)題為資源部分的文章的結(jié)尾部分而且可能包含鏈接到外部站點(diǎn)的鏈接。外部鏈接應(yīng)該限定為最可靠和一致的資源，可能的話，那些非商業(yè)化的站點(diǎn)更合適。

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.

使用等號(hào)，通過(guò)MediaWiki標(biāo)記樣式設(shè)計(jì)部分標(biāo)題。第一個(gè)部分標(biāo)題應(yīng)該在標(biāo)題的兩邊標(biāo)記兩個(gè)等號(hào)（= =）。單詞之間有空格或者缺少空格，以及等號(hào)都不會(huì)影響最后結(jié)果。

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.

第二級(jí)別部分標(biāo)題的左右邊應(yīng)該分別標(biāo)上三個(gè)等號(hào)（===），第三級(jí)別部分標(biāo)題左右邊應(yīng)該分別標(biāo)上四個(gè)等號(hào)（====），第四級(jí)別部分標(biāo)題左右邊標(biāo)上五個(gè)等號(hào)（=====）。很少有文章?lián)碛兴膫€(gè)多的子部分。

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內(nèi)所有布局樣式的典型文章是CSS樣式列表?？梢栽?a href="/wiki/WordPress:WordPress_Semantics" title="WordPress:WordPress Semantics">WordPress語(yǔ)義學(xué)中找到典型非編碼的編寫樣式。

Table of Contents[ ]

內(nèi)容表格[ ]

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.

四個(gè)部分創(chuàng)建好之后，每個(gè)頁(yè)面上的內(nèi)容表格會(huì)自動(dòng)產(chǎn)生。內(nèi)容表格自動(dòng)設(shè)置懸浮在第一個(gè)部分標(biāo)題的內(nèi)容的右邊。迫使內(nèi)容表格出現(xiàn)在頁(yè)面或者沒(méi)有四個(gè)部分的文章的某個(gè)位置，你可以使用__TOC__放置或者迫使內(nèi)容表格。

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很常見(jiàn)。可以以不同的方式顯示。

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.

；文本內(nèi)的代碼：在一篇文章的文本內(nèi)設(shè)計(jì)代碼，如列出index.php模板文件，請(qǐng)使用<tt>標(biāo)簽將代碼包裹在句子中。不要使用<code>標(biāo)簽，因?yàn)檫@個(gè)標(biāo)簽在文本的背后創(chuàng)建了藍(lán)色的背景色，這樣使得文本較難閱讀。在 句子中使用<tt> 標(biāo)簽，會(huì)移除文本后面的藍(lán)色背景色，使得文本便于閱讀。

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標(biāo)簽中的代碼：設(shè)計(jì)代碼這樣代碼從文本中分開，突出在一個(gè)藍(lán)色背景的container中，請(qǐng)使用<pre>標(biāo)簽包圍代碼。不要在PRE標(biāo)簽內(nèi)部使用<tt>或者<code>，除非你想要顯示這些標(biāo)簽。如果在PRE標(biāo)簽內(nèi)部使用鏈接，請(qǐng)使用<nowiki>迫使鏈接不會(huì)變?yōu)榛钴S的鏈接。
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
如果你正在編寫非常短的代碼，你可以在代碼之前放置空格，這樣軟件會(huì)在代碼的周圍自動(dòng)創(chuàng)建<pre>標(biāo)簽。
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>標(biāo)簽?zāi)軌蚝芎玫耐怀鑫谋?，但是這個(gè)標(biāo)簽與任何HTML<pre>標(biāo)簽運(yùn)行方式仍然是相同的。<pre></tt內(nèi)的代碼布局，標(biāo)簽，空格，長(zhǎng)行，都很明顯。超過(guò)頁(yè)面寬度的長(zhǎng)行會(huì)從頁(yè)面上消失。如果可能，迫使代碼分行，動(dòng)手縮短代碼行的寬度。如果不能夠這樣做（這樣會(huì)破壞代碼復(fù)制粘貼時(shí)的格式），請(qǐng)自己判斷。避免大的縮排和跳格設(shè)定破壞代碼。為長(zhǎng)行的代碼使用兩個(gè)或者多個(gè)空格而不是跳格設(shè)定，來(lái)設(shè)置縮排。
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創(chuàng)建div，效仿<pre>標(biāo)簽用法，但是代碼將會(huì)是container內(nèi)的真正的文本，通過(guò)使用<tt> 和將 > 和< 更改為&gt;和 &lt;，并且在代碼例子內(nèi)使用行分隔符<br />，使得文本看起來(lái)像代碼。這種樣式的好處在于使用空格的時(shí)候，代碼會(huì)自動(dòng)地包裹，能夠顯示更長(zhǎng)的代碼。
<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:

代碼看起來(lái)像： 

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

關(guān)于在文檔內(nèi)使用代碼實(shí)體或者代碼的更多的信息，請(qǐng)看看在你的文章中編寫代碼。

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的用戶希望在嘗試之前，"知道"最后結(jié)果是怎樣的?？赡艿脑挘旅媸荂odex中可能使用的一些"現(xiàn)實(shí)的"例子。

Realistic Examples[ ]

實(shí)例[ ]

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.

當(dāng)需要實(shí)例顯示文章中的用法的時(shí)候，我使用下面的內(nèi)容作為例子—根據(jù)需要更改padding，寬度和顏色。一般而言，根據(jù)Codex默認(rèn)字體，我會(huì)更改字體外觀但是不會(huì)使用字體集參考，以避免不同瀏覽器和電腦系統(tǒng)之間的字體沖突問(wèn)題。

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.






框用來(lái)顯示代碼在"現(xiàn)實(shí)世界"中的外觀。我可以使用spans 設(shè)計(jì)部分使用其它的CSS inline 樣式自定義這個(gè)列表的外觀：
  • 用小型大寫字母列出的列表內(nèi)容
  • 斜體和粗體列出的列表內(nèi)容
  • 更改大小和顏色
有一些限制，就如你不能夠重新創(chuàng)建懸浮，但是極大程度上，可以在Codex上使用所有的inline CSS樣式，重新創(chuàng)建產(chǎn)生用法的實(shí)例。

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">
用來(lái)顯示代碼在"現(xiàn)實(shí)世界"中的外觀的框。我可以使用 <span style="color:red; font-weight:bold">spans設(shè)計(jì) sections</span>使用其它的CSS inline樣式自定義這個(gè)列表的外觀：
<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>
有一些限制，就如你不能夠重新創(chuàng)建一個(gè)懸浮，但是在極大程度上，可以在Codex上使用所有的inline CSS樣式，重新創(chuàng)建用法產(chǎn)生的實(shí)例。</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 標(biāo)題="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:

創(chuàng)建例子鏈接，鏈接到這個(gè)使用這個(gè)例子的標(biāo)頭。如果你在一篇稱為"使用 WordPress"的文章中而且在標(biāo)題"列表類別"下面顯示例子，那么鏈接到類別的例子鏈接將會(huì)是： 

* [[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|現(xiàn)實(shí)和虛幻]]

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

使用上述的示范代碼，結(jié)果看起來(lái)像：

  • [[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|現(xiàn)實(shí)和虛幻]]

Showing Links that Work Like Links[ ]

顯示像鏈接一樣運(yùn)行的鏈接[ ]

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:

要?jiǎng)?chuàng)建例子鏈接的外觀，使其不像真正的鏈接那樣運(yùn)行，你可以將span標(biāo)簽與下劃線一起使用，設(shè)計(jì)偽鏈接： 

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> 更多的信息
請(qǐng)看看 這篇文章得到更多的信息。

Using Images in the Codex[ ]

在Codex內(nèi)使用圖像[ ]

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

Codex中歡迎與WordPress和WordPress文章相關(guān)的圖像。我們?yōu)閳D像設(shè)定一些"規(guī)則"。

  • DO NOT use spaces in the file names. Dashes are acceptable.
  • 不要在文件名內(nèi)使用空格?？梢越邮芷普厶?hào)。
  • 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不清楚。請(qǐng)使用link-manager-panel.png。
  • Keep image width no larger than 600 pixels, if possible.
  • 如果可能的話，將圖像的寬度設(shè)置在600像素范圍之內(nèi)。
  • Keep files sizes small, preferably below 60K when possible.
  • 可能的話，盡量將文件大小設(shè)置地小一些，最好在60K以下。
  • The file types preferred are jpg and png. The png files tend to be best.
  • 偏愛(ài)的文件類型有jpg 和 png。png文件是最好的。
  • If you resize an image to make it much smaller, be sure and sharpen it before saving and uploading.
  • 如果你重新調(diào)整圖像的大小，使得圖像更小，確定保存上傳圖像之前，已經(jīng)調(diào)整了圖像大小。
  • 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.
  • 如果你沒(méi)有適當(dāng)?shù)厣蟼鲌D像，上傳一個(gè)新的版本，使得文件小組中的一員刪除舊的圖像。

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

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

To use images within the Codex: 在Codex內(nèi)使用圖像： 

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

[[WordPress:Image:Kubrick_Single.jpg|right|thumbnail|WordPress 默認(rèn)主題]]

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

right|thumbnail|WordPress 默認(rèn)主題 – 單篇文章外觀會(huì)創(chuàng)建帶有標(biāo)題的圖像縮略圖，懸浮在右邊。

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.


葉子葉子的圖像懸浮在左邊，不帶有鏈接或者邊框。只是個(gè)圖像，作為在文本的左邊（或者右邊）懸浮圖像的例子，在文章在圖像周圍包裹文本中得到說(shuō)明。


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

將圖像懸浮在右邊（或者左邊），標(biāo)題并不簡(jiǎn)短，請(qǐng)使用： 

[[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|葉子的圖像這個(gè)例子將框架設(shè)置在非縮略圖圖像的周圍，這樣文本就會(huì)包圍圖像。這個(gè)圖像會(huì)位于有邊框的container中，帶有標(biāo)題，但是沒(méi)有鏈接到更大版本的圖像的鏈接。雖然圖像本身仍然是個(gè)鏈接，點(diǎn)擊可以單獨(dú)地查看圖像，但是圖像不是個(gè)可擴(kuò)展的版本。對(duì)于需要標(biāo)題的小圖像，這很有用。

Resources[ ]





資源[ ]