编辑“WordPress在文章中插入代码”

<span style="border:1px solid #000; text-align:center; float:right; padding:6px;"><strong>导航:</strong> [[WordPress进阶使用|上一页]] | {{Template:WordPress导航}}</span>
<div style="clear:both;"></div>
无论你是为WordPress写[http://www.wordpress.la/plugins.html 插件]或hack，还是添加有关WordPress的代码片段或其他如[[HTML]]，[[CSS]]，[[PHP]]或[[javascript]]的编程代码，如何让插入于日志中的代码有其形而不发生作用对写[[博客]]的用户来说是常常遇到的拦路虎。

默认情况下，WordPress会将<和>自动转换为&lt;和&gt;，在发表后看起来就是<和>。如果它发现日志中使用了HTML标签，就会将其当作HTML标签来使用，结果你的文本看起来就很怪异，布局也会弄得一团糟。

网页中代码的使用有两个方面。在段落中使用代码表示正在讨论该段代码，然后是被高亮显示的代码。
 以此种方法使其看起来 
 是一个代码片段

==段落中的代码==

有两种HTML[[标签]]可以将文本转为等宽样式，即< code>和< tt>。而后者现今已基本不使用了，取代它的是用处更大且更富语法意义的< code>，它能将计算机代码类的文本与一般语言分辨开来。

 此为用于某段落内的代码示例 
 用以描述WordPress中的< code>index.php</code>, 
 < code>sidebar.php</code>及< code>header.php</code> 
模板文件。如果你希望在文字周围使用标签以使它们看起来如代码一般，此方法就很有用，但如果你想展示如HTML的标签的话该如何是好呢？

在< code>header.php</code>模板文件中， 查找< code>< div class="header"></code> 部分以修改< code>< h1></code>标题栏。使用< code>标签是无法告知WordPress将HTML参考从日志中分离开的。它会看到< code>标签，然后看到div，因此它就会在网页中新建一个容器作为应答。WordPress会认为你实际上是在使用HTML标
签，不小心使用h1这样的标签就能搞砸整个网页布局和设计初衷。

[[Image:201003270001.JPG|WordPress在文章中插入代码]]

若要让WordPress将此识别为段落中的代码的话，可以使用[http://www.wordpress.la/codex-%E7%89%B9%E6%AE%8A%E7%AC%A6%E5%8F%B7.html 字符实体或扩展字符]来表示其前后的左右箭头。
 在< code>header.php</code>模板文件中， 
 查找< code>&lt;div class="header"&gt;</code> 
 部分以修改<code>&lt;h1&gt;</code>标题栏。
默认情况下，WordPress会将任何以http:开头的文本转换为链接。如果你要为WordPress网站内特定文章做链接，而不使用http://example.com/index.php?p=453 并将其转为链接的话，你可以使用扩展字符来代替右斜杠，这样一来WordPress就不会“看到”该[[链接]]了。

 ...在日志中使用
 <code>http:&#47;&#47;example.com&#47;index.php?p=453</code>
 使用链接到某特定的WordPress日志.... 
以下列出一些最常用的HTML字符实体：
 < = &lt;
 > = &gt;
 / = &#47;  	
 ] = &#93;
 [ = &#91;
 " = &#34;
 ' = &#39;
后文给出了[http://codex.wordpress.org/Writing_Code_in_Your_Posts#Resources 相关资源]，它将帮助你将HTML标签转为字符实体，因此你就无需劳神背下这些字符代码了。

==使用PRE标签==
要使得代码可以被复制粘贴到其他代码或模板文件中的话，可以使用< pre>这个HTML标签。

< pre>标签指示[[浏览器]]使用等宽的代码字体，并完完全全地将< 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....
使用< 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 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....
看起来很不舒服吧。要避免这种代码窜出屏幕的现象，就要进行分段。但在哪进行分段并放入段行标签可没那么容易决定下来的。

如果你熟悉编程语言的话，就知道在何处断行而不会弄砸一行代码。但如果你不知道在何处断行的话，就进行实验吧。将代码写入后，进行断行并进行测试。如果代码能够起效的话，就是要这种断行形式。否则的话就请尝试其他的断行位置。

如果你的代码行很长，可以考虑只显示一小部分代码，然后在网站上的文本或PHP文件中给出完整代码段的链接，也可以使用用于临时展示代码的[http://codex.wordpress.org/Writing_Code_in_Your_Posts#Pastebins 在线pastebin]。

==代码的疑难排解==
在WordPress日志中写代码可谓一项挑战，它会覆盖WordPress的默认风格。如果你在日志中写代码时遇上麻烦的话，下面这些内容可能会对你有帮助。

'''代码中的引号'''

在日志中写进代码时常遇到的问题是，WordPress会将代码中的直引号转换为文字处理程序中出现的弯引号。用于实现功能的代码不应当具有这种弯引号，而应该保持原有的直引号。

你可以使用< pre>标签来避免出现这种情况，或使用字符代码来表示引号也可以解决此问题：
 < p class="red">
即可写为
<code>&lt;p class=&#34;red&#34;&gt;</code>
但如果你是在首次发布某页面之后进行编辑的话，html代码编辑器就会用自带的符号替换所有的实体。因此，如果你使用&#34; 来表示引号的话，它们会变为"，而当你保存的时候它们就会被转换掉。

==定制代码标签的风格==
默认情况下，使用< pre>和< code>会将文本显示为等宽样式的字体，并使用body标签的字号。如果你想使用不同的字号，然后让这些标签呈现出不同的颜色或风格。

在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}
使用< code>将会是上面的样子，而使用pre则会是如下形式：
 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}

==相关资源==
*[http://codex.wordpress.org/Fun_Character_Entities <STRONG>有趣的字符实体</STRONG>]
*[http://wordpress.org/resources/tools/encode.php <STRONG>WordPress编码工具</STRONG>]
*[http://www.onlinetools.org/tools/htmlizerdata/ <STRONG>HTMLizer数据</STRONG>] 

==相关条目==
*[[Drupal]] 
*[[OBLOG]] 
*[[X-Space]] 
*[[SaBlog-X]] 
*[[Bo-Blog]]

[[category:WordPress中文文档|W]]
[[category:WordPress使用|W]]