WordPress:Writing Code in Your Posts

来自站长百科
Fludlen（讨论 | 贡献）2008年4月19日 (六) 17:26的版本
跳转至： 导航、​ 搜索

Whether you write plugins or hacks for WordPress, or you want to add bits and pieces of code about your own WordPress site or other programming code like HTML, CSS, PHP, or javascripts, putting code in your post that "looks" like code, but "doesn't behave" like code, is a frequent challenge for bloggers.

不管你是为WordPress写插件或者插件，还是你想为你自己的WordPress站点或者其它的像HTML, CSS, PHP, 或者javascripts，编程代码添加一些代码，经代码放进你的文章，"看起来"像代码，但"不表现得"像代码，对于写博客的人来说，这是一个时常发生的挑战。


By default, WordPress will convert unrecognized uses of < and > into characters which actually look like &lt; and &gt;, which will "look" like a < and a > when posted. Or, if it finds the use of an HTML tag within the post, it will use the tag like it is HTML and you will have funky looking text and a messed up layout.

默认情况下，WordPress会将不能被识别使用< and >转变为字符，这些字符事实上看起来像&lt; 和 &gt;,当发表时，这些字符"看起来"像a < and a >。或者，如果它发现了文章中使用了一个HTML 标签，它就会像使用HTML那样使用这个标签，你的文本看起来混乱，布局也混乱了。

In general, there are two uses of code within a web page. There is code found within a paragraph to make a point about the code that is being discussed, and then there is code that is highlighted

一般来说，一个网页内部使用两种代码。一个段落内部可以发现代码，说明正在被讨论的code，还有一个被突出的代码。 

in such a way as to look 
like a box of code
以这种方式看起来就像一框代码

Code Within Paragraphs

段落内部的代码

There are two HTML tags which will turn text into monospaced type. They are <code> and <tt>. The latter is rarely used today, replaced by the more useful and semantically correct <code>, which distinguishes text that is computer code from normal language.

有两个HTML标签会将文本转变为monospaced type。这两个标签是<code> 和 <tt>。后一个标签如今已经很少使用了，已经被更有用的，语法更加正确的<code>代替了，这个标签可以将计算机代码的文本与正常的语言区别开来。 

This is an example of code used within 
a paragraph to talk about the <code>index.php</code>, 
<code>sidebar.php</code>, and <code>header.php</code> 
template files in WordPress.
这个是在一个段落内使用的代码的例子谈论的是WordPress中的<code>index.php</code>, 
<code>sidebar.php</code>, 和 <code>header.php</code> 
的模板文件。


This is great for using the tag around words that you want to look like code, but what about tags like HTML that you want to showcase?

这对于那些你想让它们看起来像代码的单词的周围使用标签非常的好，但是对于那些你想要显示的HTML标签，你该怎么做呢？ 

In the <code>header.php</code> template file, 
look for the <code><div class="header"></code> 
section to change the <code><h1></code> heading.
在 <code>header.php</code>模板文件, 
查找 <code><div class="header"></code> 
部分并且更改 <code><h1></code> heading.


Using the <code> tag doesn't tell WordPress to strip the HTML references from the post. It sees the <code> tag and then it sees the div and so it responds by creating a new container in your web page. WordPress thinks that you are actually using HTML tags, and the start of an h1 tag will screw up your entire web page layout and design.

使用<code>标签，不要让WordPress从文章中清除HTML参考资料。它看到了<code>标签，然后看到了div，通过在你的网页上创建一个新的container,它做出了反应。WordPress认为你正在使用HTML标签，开始一个h1标签会破坏你整个的网页布局和设计。

In the header.php template file, look for the

leftsection to change the heading.
在 header.php 模板文件中, 查找

left部分来改变 标签。


To make WordPress recognize this as code within a paragraph, use character entities or extended characters to represent the left and right arrows and surround them with the <code> tags.

要使WordPress将这个辨别为一个段落中的代码，使用字符实体或者扩展的字符来代表左右箭头符号，并用<code>标签将它们包围。 

In the <code>header.php</code> template file, 
look for the <code>&lt;div class="header"&gt;</code> 
section to change the <code>&lt;h1&gt;</code> heading.
在<code>header.php</code> 模板文件, 
查找 <code>&lt;div class="header"&gt;</code> 
部分来更改 <code>&lt;h1&gt;</code> 标题。


By default, WordPress will turn any phrase in the text that begins with http: into a link. If you are giving an example of how to link to a specific post within a WordPress site, instead of using the link with http://example.com/index.php?p=453 and having it turn into a link, you can use extended characters for the slashes, so WordPress won't "see" the link.

默认的情况下，WordPress会将文本中任何以http:开始的短语变为一个链接。如果你给出的例子是怎样链接到WordPress站点内部的某一篇文章，而不是使用http://example.com/index.php?p=453链接并且使它变为一个链接，你可以为斜线使用一个扩展的字符，这样WordPress就不能"看见到"链接。 

...link to a specific WordPress post using 
<code>http:&#47;&#47;example.com&#47;index.php?p=453</code>
in your post....



...链接到某一篇WordPress文章,使用 
<code>http:&#47;&#47;example.com&#47;index.php?p=453</code>
到你的文章....



Here is a list of the most common HTML character entities: 

< = &lt;
> = &gt;
/ = &#47;  	
] = &#93;
[ = &#91;
" = &#34;
' = &#39;


以下是一些最常见的HTML字符实体: 

< = &lt;
> = &gt;
/ = &#47;  	
] = &#93;
[ = &#91;
" = &#34;
' = &#39;


There is a list of [[WordPress:#Resources|resources below]] which will help you turn HTML tags into character entities automatically, so you don't have to memorize these character codes.

有一个[[WordPress:#Resources|下面的资源]]列表,这个列表会帮助你自动地将HTML标签变为字符实体,因此你不需要记住这些字符代码。

Using PRE

使用PRE

To set your code aside so that it looks like a box of code which may be copied and pasted within other code or template file, you can use the <pre> HTML tag.

将你的代码放在一边，这样它看起来就像一盒代码，会在另一个代码或者模板文件内部复制和粘贴，你可以使用<pre> HTML标签。

The <pre> tag instructs the browser to use the monospace code font, but to exactly reproduce whatever is inside of the <pre> tags. Every space, line break, every bit of code is exactly reproduced.

<pre>标签指示浏览器使用monospace代码字体，但是完全的复制<pre>标签中的内容。每一个空格，行的切分，每个小的代码都要被完全的复制。 

<h3>Section Three Title</h3>
<p>This is the start of a 
<a title="article on relationships" href="goodtalk.php">
good relationship</a> between you and I....


<h3>第三部分标题</h3>
<p>This is the start of a 
<a title="关于人际关系的文章" href="goodtalk.php">
好的关系</a> 你我之间....


Using the <pre> tag isn't very "pretty" but it does the job. Examples of how to style it can be found in the next section. Still, it showcases the code exactly.

使用<pre>标签不是非常地"漂亮"，但是它的确能起作用。在下一个部分中可以找到怎样设计它的例子。它依然完全地显示代码。

By exactly, we mean EXACTLY. If you have a long line of code, it will run off the page because there are no instructions which tell the code to wrap. It won't. Here is an example:

完全地，我们指的是完全地。如果你有一长行的代码，代码会在页面上长长地显示出来，因为没有指示命令代码叠起来。代码就不会累迭。下面有一个例子： 

<h3>Section Three Title</h3><p>This is the start of a <a title="article on relationships" href="goodtalk.php">good relationship</a> between you and I and I think you should read it because it is important that we have these little <a title="article on communication" href="communication.php">conversations</a> once in a while to let each other know how we feel....
<h3>第三部分标题</h3><p>这是一个<a title="关于人际关系"的开始，你和我之间href="goodtalk.php">好的关系</a>，我认为你应该阅读，因为我们有这些小的<a title="关于交流的文章"非常重要，href="communication.php">conversations</a>一会儿一次谈话，以让双方知道对方的感受。

Not pretty, is it.  To avoid this screen run-off, put in line breaks. Unfortunately, deciding where to put those line breaks in when you are showcasing code that will be copied makes it a difficult decision.

不漂亮，的确如此。为了避免这种满屏幕的代码，将这些行分开。不幸的是，当你显示这些即将要被复制的代码的时候，很难决定在那儿给这些行分开。

If you are familiar with programming language, you will know when a line break won't mess up a line of code, so choose there.  If you are unfamiliar with where to put line breaks, experiment.  Put the code in, make the line breaks, and then test the code.  If it works, then use the line break there.  If not, change the line break position.

If you have long lines of code, consider showcasing only excerpts and providing a link to the full code placed on your site in a text or <tt>PHPS</tt> file, or using one of the many [[WordPress:Writing_Code_in_Your_Posts#Pastebins|online pastebins]] which are available for temporarily showcasing code.

如果你对程序语言非常熟悉，你就知道在什么位置将一行分开，不会混乱一行的代码，那么你就选择那个位置。如果你熟悉在哪儿分行，你就试一下。将代码放进去，将行分开，然后再测试代码。如果这样做管用，就在那儿分行。如果这样做不管用，改变分行的位置。如果你有长行的代码，考虑一下只显示摘录部分，并且提供一个对于放置在你的站点中的一个文本或者<tt>PHPS</tt>文件中的全部代码的链接，或者使用许多的[[WordPress:Writing_Code_in_Your_Posts#Pastebins|在线的pastebins]]的其中的一个，可以利用这个来临时地显示代码。 

==Troubleshooting Codes==

==发现并解决代码问题==

Writing code within a WordPress post can be a challenge, overriding WordPress' default styles and filters which "fix" what we write. If you are having trouble with writing code within your WordPress post, these might help.

在WordPress文章内部写代码会是一个挑战，越过"规定"我们所写内容的WordPress默认形式和过滤器。如果你在你的WordPress文章内部写代码时，遇到了困难，以下的可能会帮助你。

===Quotes in Codes===

===代码中的引号===

A frequent problem using codes within your post is WordPress' technique of "styling" quote marks.  Instead of seeing '''"'''quotes'''"''', by default WordPress ''texturizes'' the quotes into open and closed quotes, like the quotes used in many word processing programs. Code that is to be copied needs to have the straight quotes, not the pretty quotes.

在你的文章中使用代码的一个常见的问题在于WordPress"设计"引号的方法。不是看到'''"'''quotes'''"''',默认情况下，WordPress将引号''定为''打开的和关闭的引号，就如许多文章处理程序中使用的引号那样。需要复制的代码需要有直引号，而不是漂亮的引号。

You can avoid this problem by using the <tt><pre></tt> tag or by actually including the character code for the quotes in the usage:

通过使用<tt><pre></tt>标签，或者通过真的使使用的引号包含一个字符代码，你可以避免这个问题：

<pre><p class="red">

<pre><p class="red">


Becomes
变成了

<code>&lt;p class=&#34;red&#34;&gt;</code>

&lt;p class=&#34;red&#34;&gt;


Unfortunately, if you edit a page after first publishing it, the html code editor replaces all these entities with their literal equivalents, so, for example, if you carefully use &#34; for your quotes, they'll come back as " and so when you save, they'll be converted.

不幸地是，如果你发表网页之后，编辑一个网页，html代码编辑器用它们的字面上的等价物取代了所有的这些实体，因此，例如，如果你为你的引号谨慎地使用了&#34;它们返回时，会是"，当你保存它们时，它们就会转变形式。

Styling Your Code Tags

设计你的代码标签

By default, using <pre> and <code> will put the text in a monospaced font and use the font-size from the body tag. What if you want the font-size to be different, and the look of these tags to also have a different color or style to them?

默认情况下，使用<pre> and <code>会使文本出现一个monospaced字体，并且从body tag中使用字体大小。如果你想要不同的字体大小，而且这些标签的外观也有不同的颜色和形式，那么你该怎么做呢？

In your style.css style sheet in your WordPress Theme folder, add styles to these two tags. Here is an example:

在你的WordPress主题文件夹中你的style.css样式表上，给这两个标签添加形式。下面是一个例子： 

pre {border: solid 1px blue;
	font-size: 1.3 em; 
 	color: blue; 
	margin: 10px; 
	padding:10px; 
	background: #FFFFB3}
code {font-size:1.2em; 
	color: #008099}



pre {border: solid 1px blue;
	font-size: 1.3 em; 
 	color: blue; 
	margin: 10px; 
	padding:10px; 
	background: #FFFFB3}
code {font-size:1.2em; 
	color: #008099}


Using the <code> would look like that and the pre would look like this:

使用<code>会看起来像那个，先前的看起来会像这个：

pre {border: solid 1px blue;

     font-size: 1.3 em;
     color: blue;
     margin: 10px;
     padding:10px;
     background: #FFFFB3}
code {font-size:1.2em;

     color: #008099}



pre {border: solid 1px blue;

     font-size: 1.3 em;
     color: blue;
     margin: 10px;
     padding:10px;
     background: #FFFFB3}
code {font-size:1.2em;

     color: #008099}


Resources

资源



Frequent Code User

频繁使用代码的用户

If you consistently use a lot of formulas, functions, and programming code in your posts, consider using a plugin or PHP tool to make the entire process easier. If you tend to post a LOT of code blocks, consider pasting the code in a Paste Bin and linking to it on your site.

如果你在文章中总是使用许多的公式，函数，和程序代码，考虑使用一个插件或者PHP工具使整个的过程更加地简单。如果你有粘贴许多的代码块的倾向，考虑一下在一个粘贴板上粘贴代码，并且将代码链接到你的站点上。













Pastebins

粘贴板



PasteServers

PasteServers
取自“https://www.zzbaike.com/wiki/index.php?title=WordPress:Writing_Code_in_Your_Posts&oldid=1817”