编辑“WordPress:Sandbox”
该编辑可以被撤销。 请检查下面的对比以核实您想要撤销的内容,然后发布下面的更改以完成撤销。
最后版本 | 您的文本 | ||
第1行: | 第1行: | ||
=Demo Sandbox= | =Demo Sandbox= | ||
<!-- comment here Used to leave comments in a page for future editors --> | <!-- comment here Used to leave comments in a page for future editors --> | ||
If you are a new user, please take note of the 6 "Codex tools" links in the top right corner of this page. On your left and right are WordPress navigation links. The middle column is where your changes will show. Enjoy! | If you are a new user, please take note of the 6 "Codex tools" links in the top right corner of this page. On your left and right are WordPress navigation links. The middle column is where your changes will show. Enjoy! | ||
The "Sandbox" is used to [http://codex.wordpress.org/Help:Editing Help Leave Examples] in a page for future editors. Also check out [[WordPress:Codex:Styles|Codex Styles, Formatting, and Layout]] for more tips on the structure and presentation of the Codex. | The "Sandbox" is used to [http://codex.wordpress.org/Help:Editing Help Leave Examples] in a page for future editors. Also check out [[WordPress:Codex:Styles|Codex Styles, Formatting, and Layout]] for more tips on the structure and presentation of the Codex. | ||
'''ANNOUNCEMENT: Guidelines Updated as of March 7'''{{Newpage}} | |||
{{Preview}} | {{Preview}} | ||
TEST TEST TEST------------ | TEST TEST TEST------------ | ||
<!-- New section --> | <!-- New section --> | ||
Viva La Sasau | Viva La Sasau | ||
== AFHAM == | == AFHAM == | ||
第40行: | 第21行: | ||
<h3><span style="color:red;">food supplier</span> fabulous</h3> | <h3><span style="color:red;">food supplier</span> fabulous</h3> | ||
''feel the taste and feel good'' <br> | ''feel the taste and feel good'' <br> | ||
'''try the best food and feel the revelations of tremendous recipe spiced and hardened. ''' <br> | '''try the best food and feel the revelations of tremendous recipe spiced and hardened. ''' <br> | ||
'''place order now and get 20 % discount today...... ''' <br> | '''place order now and get 20 % discount today...... ''' <br> | ||
<small> feel the spices and get rid of your stress through the taste.. </small> <br> | <small> feel the spices and get rid of your stress through the taste.. </small> <br> | ||
<h3><span style="color:blue;"> choice is yours and order now </span><tt> <br> | <h3><span style="color:blue;"> choice is yours and order now </span><tt> <br> | ||
<!-- CATERING --> | <!-- CATERING --> | ||
==Subsection 1.1.2.A== | ==Subsection 1.1.2.A== | ||
第68行: | 第33行: | ||
== New section == | == New section == | ||
hello | hello | ||
== Headline text == | == Headline text == | ||
===bar foo=== | ===bar foo=== | ||
第94行: | 第50行: | ||
[[WordPress:Glossary#Apache]] | [[WordPress:Glossary#Apache]] | ||
<!-- New Subsection --> | <!-- New Subsection --> | ||
[[WordPress:User:IsaacSchlueter|IsaacSchlueter]] 16:11, 13 Sep 2005 (GMT) | [[WordPress:User:IsaacSchlueter|IsaacSchlueter]] 16:11, 13 Sep 2005 (GMT) | ||
==Subsection 1.1.3== | ==Subsection 1.1.3== | ||
<!-- Feel free to play around with this text --> | <!-- Feel free to play around with this text --> | ||
===Aenean ultricies=== | ===Aenean ultricies=== | ||
第120行: | 第66行: | ||
[[WordPress:Wikipedia:Lorem ipsum|Lorem ipsum]] text generated at http://www.lipsum.com/feed/html | [[WordPress:Wikipedia:Lorem ipsum|Lorem ipsum]] text generated at http://www.lipsum.com/feed/html | ||
<!-- New Subsection --> | <!-- New Subsection --> | ||
I need to test the signature ~~ [[WordPress:User:Jim Westergren|Jim Westergren]] 11:26, 28 Oct 2006 (GMT) Correct? | I need to test the signature ~~ [[WordPress:User:Jim Westergren|Jim Westergren]] 11:26, 28 Oct 2006 (GMT) Correct? | ||
==Subsection 1.1.4== | ==Subsection 1.1.4== | ||
<!-- Feel free to play around with this text --> | <!-- Feel free to play around with this text --> | ||
===Code Example=== | ===Code Example=== | ||
This is what it looks like when using <tt>pre</tt> tags: | This is what it looks like when using <tt>pre</tt> tags: | ||
<pre><?php echo "Hello, world!\n";?></pre> | <pre><?php echo "Hello, world!\n";?></pre> | ||
This is what it looks like when using a space before a line of code to autoformat the <tt><pre></tt> tag: | This is what it looks like when using a space before a line of code to autoformat the <tt><pre></tt> tag: | ||
<?php echo "Hello, world!\n";?> | |||
<?php echo "Hello, world | |||
This is what it looks like in <tt>code</tt> tags: | This is what it looks like in <tt>code</tt> tags: | ||
<code> | <code> | ||
<?php echo "Hello, world!\n";?> | <?php echo "Hello, world!\n";?> | ||
</code> | </code> | ||
Notice that the use of <code><code></code> does not put the code example in its own box but continues the sentence, even if there are single line breaks. The Codex requires a double line break to signify a "space" line break. | Notice that the use of <code><code></code> does not put the code example in its own box but continues the sentence, even if there are single line breaks. The Codex requires a double line break to signify a "space" line break. | ||
When using code in text like <tt>index.php</tt>, if you use the <code><code></code> tag, it makes a <code>blue background behind the text that gives it a cluttered look and makes the code a little harder to see.</code> If you put the code in a <tt><tt></tt> tag, <tt>the blue background is gone and the type is monospaced and "code-like" and much easier to read and cleaner.</tt> Documentation in the WordPress Codex tends to use a lot of code within the text, so we prefer the use of <tt><tt></tt> over <code><code></code> for a cleaner look. | When using code in text like <tt>index.php</tt>, if you use the <code><code></code> tag, it makes a <code>blue background behind the text that gives it a cluttered look and makes the code a little harder to see.</code> If you put the code in a <tt><tt></tt> tag, <tt>the blue background is gone and the type is monospaced and "code-like" and much easier to read and cleaner.</tt> Documentation in the WordPress Codex tends to use a lot of code within the text, so we prefer the use of <tt><tt></tt> over <code><code></code> for a cleaner look. | ||
===Another section=== | ===Another section=== | ||
Ah, so this is how sections work! (by adding ='s) | Ah, so this is how sections work! (by adding ='s) | ||
System.err.prinln("Fatal error!"); | System.err.prinln("Fatal error!"); | ||
<!-- New section --> | <!-- New section --> | ||
===Stan's section=== | ===Stan's section=== | ||
''' | ''' | ||
here's yet another section... | here's yet another section... | ||
..how about a format nullifier between sections? | ..how about a format nullifier between sections? | ||
=Other Design Elements to Test= | =Other Design Elements to Test= | ||
==Link Examples== | ==Link Examples== | ||
To '''NOT''' show a link in an example which uses a link use <nowiki>: | To '''NOT''' show a link in an example which uses a link use <nowiki>: | ||
<a title="example" href="<nowiki><nowiki>http://example.com/</nowiki></nowiki>"> | <a title="example" href="<nowiki><nowiki>http://example.com/</nowiki></nowiki>"> | ||
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 "Link Examples", then the example links to the categories would be: | 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 "Link Examples", then the example links to the categories would be: | ||
<pre>* <nowiki>[[WordPress:#Link_Examples|My Life Stories]]</nowiki> | <pre>* <nowiki>[[WordPress:#Link_Examples|My Life Stories]]</nowiki> | ||
第235行: | 第117行: | ||
* <nowiki>[[WordPress:#Link_Examples|Sharing]]</nowiki> | * <nowiki>[[WordPress:#Link_Examples|Sharing]]</nowiki> | ||
* <nowiki>[[WordPress:#Link_Examples|Facts and Fiction]]</nowiki></pre> | * <nowiki>[[WordPress:#Link_Examples|Facts and Fiction]]</nowiki></pre> | ||
And the results would look like this, using the demonstration code from above (click it and see the effect): | And the results would look like this, using the demonstration code from above (click it and see the effect): | ||
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> | <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> | ||
第250行: | 第125行: | ||
* [[WordPress:#Link_Examples|Sharing]] | * [[WordPress:#Link_Examples|Sharing]] | ||
* [[WordPress:#Link_Examples|Facts and Fiction]] | * [[WordPress:#Link_Examples|Facts and Fiction]] | ||
</div> | </div> | ||
To create the look of an example link, without having it actually behave like a link, you can use the <tt>span</tt> tag combined with underline to style a fake link: | To create the look of an example link, without having it actually behave like a link, you can use the <tt>span</tt> tag combined with underline to style a fake link: | ||
<pre>See <span style="color:blue"><u>this article</u></span> for more information</pre> | <pre>See <span style="color:blue"><u>this article</u></span> for more information</pre> | ||
<div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> | <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> | ||
See <span style="color:blue"><u>this article</u></span> for more information.</div> | See <span style="color:blue"><u>this article</u></span> for more information.</div> | ||
==Images Within the Codex== | ==Images Within the Codex== | ||
To use images within the Codex: | To use images within the Codex: | ||
<nowiki>[[WordPress:Image:Kubrick_Single.jpg|right|thumbnail|WordPress Default Theme]]</nowiki> | |||
<nowiki>[[WordPress:Image:Kubrick_Single.jpg|right|thumbnail|WordPress Default Theme]]</nowiki> | |||
[[WordPress:Image:Kubrick_Single.jpg|right|thumbnail|WordPress Default Theme - Single Post Look]]Will create the image floated to the right in a thumbnail with a caption. | [[WordPress:Image:Kubrick_Single.jpg|right|thumbnail|WordPress Default Theme - Single Post Look]]Will create the image floated to the right in a thumbnail with a caption. | ||
==Realistic CSS== | ==Realistic CSS== | ||
When a realistic example is required to show what the usage would look like in a post, use the following as an example - modifying it as needed to change the padding, width, and colors. In general, avoid using font-family references, relying on the default fonts with the Codex in order to avoid font issues with various browsers and computer systems. | When a realistic example is required to show what the usage would look like in a post, use the following as an example - modifying it as needed to change the padding, width, and colors. In general, avoid using font-family references, relying on the default fonts with the Codex in order to avoid font issues with various browsers and computer systems. | ||
<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: | <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> | <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: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> | <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. | 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> | ||
And the code is this: | And the code is this: | ||
<pre><div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> | <pre><div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> | ||
Box in which to provide demonstration of what a code | Box in which to provide demonstration of what a code | ||
looks like when used in the "real world". I can use | looks like when used in the "real world". I can use | ||
第333行: | 第160行: | ||
to customize the look like for this list: | to customize the look like for this list: | ||
<ul> | <ul> | ||
<li style="color:green; font-variant:small-caps">A List Item in Small Caps</li> | <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: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> | <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, | There are limits, like you can't recreate a hover, | ||
but for the most part, all inline CSS styles can be | but for the most part, all inline CSS styles can be | ||
used on the Codex to recreate a realistic example of | used on the Codex to recreate a realistic example of | ||
what the usage will generate.</div></pre> | what the usage will generate.</div></pre> | ||