站长百科 | 数字化技能提升教程 数字化时代生存宝典
首页
数字化百科
电子书
▼
建站程序
开发
服务器
办公软件
开发教程
▼
服务器教程
软件使用教程
运营教程
热门电子书
▼
CSS教程
WordPress教程
导航
程序频道
推广频道
网赚频道
人物频道
网站程序
网页制作
云计算
服务器
CMS
论坛
网店
虚拟主机
cPanel
网址导航
WIKI使用导航
WIKI首页
热点词条
最新资讯
网站程序
站长人物
页面分类
使用帮助
编辑测试
创建条目
网站地图
站长百科导航
站长百科
主机侦探
IDCtalk云说
跨境电商导航
WordPress啦
站长专题
网站推广
网站程序
网站赚钱
虚拟主机
cPanel
网址导航专题
云计算
微博营销
虚拟主机管理系统
开放平台
WIKI程序与应用
美国十大主机
编辑“
WordPress:Codex:Styles
”
人物百科
|
营销百科
|
网赚百科
|
站长工具
|
网站程序
|
域名主机
|
互联网公司
|
分类索引
Xxf3325
(
讨论
|
贡献
)
2008年9月12日 (五) 15:45的版本
(新页面: __TOC__ 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 mar...)
(差异) ←上一版本 |
最后版本
(
差异
) |
下一版本→
(
差异
)
跳转至:
导航
、
搜索
警告:您正在编辑的是本页面的旧版本。
如果您发布该更改,该版本后的所有更改都会丢失。
警告:
您没有登录。如果您做出任意编辑,您的IP地址将会公开可见。如果您
登录
或
创建
一个账户,您的编辑将归属于您的用户名,且将享受其他好处。
反垃圾检查。
不要
加入这个!
__TOC__ 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. ==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. 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. 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]]. ===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 <nowiki>__TOC__</nowiki> to place or force the table of contents. ===Using Codes in the Codex=== Displaying programming codes, HMTL, and CSS is common within the WordPress Codex. It can be styled in several different ways. ;Code within the text :To style code within the text of an article, such as listing the <tt>index.php</tt> template file, use the <tt><tt></tt> tag to wrap the code within a sentence. Do not use the <tt><code></tt> tag as it <code>puts a blue background behind the text which makes it a little hard to read.</code> Using the <tt><tt></tt> tag in a <tt>sentence removes the blue background and makes it easier to read</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 <tt><pre></tt> tags to surround the code. Do not use <tt><tt></tt> or <tt><code></tt> within the PRE tags unless you want to show those tags. If using a link within a PRE tag, use <tt><nowiki></tt> to force the link to not generate into an active link. ;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 <tt><pre></tt> tag around the code. ;PRE Limits :The <tt><pre></tt> tag is great for highlighting text, but it still functions the same as any HTML <tt><pre></tt> tag. The layout of the code within a <tt><pre></tt>, 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. ;Wrapping Code :Using the example below, you can create a div styled with CSS to emulate the <tt><pre></tt> tag usage, but the code will be actually text within a container, made to look like code through the use of <tt><tt></tt> and changing > and < into <tt>&gt;</tt> and <tt>&lt;</tt> and line breaks <tt><br /></tt> 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. <div style="padding: 1em; border: 1px dashed #2f6fab; color: Black; background-color: #f9f9f9; line-height: 1.1em"><tt><div class="post" id="post-<?php the_ID(); ?>"><<br /> <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2><br /> <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small></tt></div> In which the code looks like this: <pre><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></pre> 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. ===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. <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> And the code is this: <pre><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></pre> ===Showing Links Without Links=== To '''NOT''' show a link in an example like <tt><nowiki>http://example.com/index.php</nowiki></tt> which uses a link use <nowiki>: <a title="example" href="<nowiki><nowiki>http://example.com/</nowiki></nowiki>"> ===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: <pre>* <nowiki>[[WordPress:#List_Categories|My Life Stories]]</nowiki> * <nowiki>[[WordPress:#List_Categories|My Family]]</nowiki> * <nowiki>[[WordPress:#List_Categories|Sharing]]</nowiki> * <nowiki>[[WordPress:#List_Categories|Facts and Fiction]]</nowiki></pre> And the results would look like this, using the demonstration code from above: <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px"> * [[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]] </div> ===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 <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> <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> ==Using Images in the Codex== Images related to WordPress and WordPress articles are welcome in the Codex. We do have some "rules" about the images. * DO NOT use spaces in the file names. Dashes are acceptable. * Name it what it is, not its usage or description. For example, <tt>this-is-a-screen-shot-of-link-manager.png</tt> is not clear. Use <tt>link-manager-panel.png</tt>. * Keep image width no larger than 600 pixels, if possible. * Keep files sizes small, preferably below 60K when possible. * The file types preferred are <tt>jpg</tt> and <tt>png</tt>. The <tt>png</tt> files tend to be best. * 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. To use images within the Codex: <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. To put an image floated to the right or left that is not a thumbnail: <nowiki>[[WordPress:Image:leaf.gif|left]]</nowiki> <div style="border:1px solid blue; width:50%; margin: 20px; padding:20px">[[WordPress:Image:leaf.gif|left]]The 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]].</div> To put an image floated to the right (or left) with a caption that is not a thumbnail use: <nowiki>[[WordPress:Image:leaf.gif|right|frame|Image of a leaf]]</nowiki> <div style="border:1px solid blue; width:50%; margin: 20px; padding:32px">[[WordPress:Image:leaf.gif|right|frame|Image of a leaf]]This 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.</div> ==Resources== * [[WordPress:Sandbox|WordPress Codex Sandbox]] * [[WordPress:Codex:Guidelines|Codex Guidelines]] * [[WordPress:Wikipedia:Meta:Help:Contents|MediaWiki Handbook]] * [[WordPress:Wikipedia:Meta:Help:HTML_in_wikitext|HTML in WikiText]] * [[WordPress:Wikipedia:Meta:Help:Link|MediaWiki Linking]] * [[WordPress:Wikipedia:Wikipedia:Picture_tutorial|Wikipedia Picture Tutorial]] * [[WordPress:Wikipedia:Wikipedia:Extended_image_syntax|Wikipedia Extended Image Syntax]] * [[WordPress:Wikipedia:Meta:Help:Images_and_other_uploaded_files|Help with Images and Other Uploaded Files]]
摘要:
请注意,您对站长百科的所有贡献都可能被其他贡献者编辑,修改或删除。如果您不希望您的文字被任意修改和再散布,请不要提交。
您同时也要向我们保证您所提交的内容是您自己所作,或得自一个不受版权保护或相似自由的来源(参阅
Wordpress-mediawiki:版权
的细节)。
未经许可,请勿提交受版权保护的作品!
取消
编辑帮助
(在新窗口中打开)