WordPress:Writing Code in Your Posts
不管你是為WordPress寫插件或者插件，還是你想為你自己的WordPress站點(diǎn)或者其它的像HTML, CSS, PHP, 或者javascripts，編程代碼添加一些代碼，把代碼放進(jìn)你的文章，"看起來"像代碼，但"不表現(xiàn)得"像代碼，對(duì)于寫博客的人來說，這是一個(gè)時(shí)常發(fā)生的挑戰(zhàn)。
默認(rèn)情況下，WordPress會(huì)將不能被識(shí)別使用< and >轉(zhuǎn)變?yōu)樽址?，這些字符事實(shí)上看起來像< 和 >,當(dāng)發(fā)表時(shí)，這些字符"看起來"像a < and a >?；蛘撸绻l(fā)現(xiàn)了文章中使用了一個(gè)HTML 標(biāo)簽，它就會(huì)像使用HTML那樣使用這個(gè)標(biāo)簽，你的文本看起來混亂，布局也混亂了。
一般來說，一個(gè)網(wǎng)頁內(nèi)部使用兩種代碼。一個(gè)段落內(nèi)部發(fā)現(xiàn)的代碼，彌補(bǔ)正在被討論的code，然后一段代碼被突出來。
以這種方式看起來就像一框代碼
段落內(nèi)部的代碼[ ]
有兩個(gè)HTML標(biāo)簽會(huì)將文本轉(zhuǎn)變?yōu)?tt>monospaced type。這兩個(gè)標(biāo)簽是<code> 和 <tt>。后一個(gè)標(biāo)簽如今已經(jīng)很少使用了，已經(jīng)被更有用的，語法更加正確的<code>代替了，這個(gè)標(biāo)簽可以將計(jì)算機(jī)代碼的文本與正常的語言區(qū)別開來。
這個(gè)是在一個(gè)段落內(nèi)使用的代碼的例子談?wù)摰氖荳ordPress中的<code>index.php</code>, <code>sidebar.php</code>, 和 <code>header.php</code> 的模板文件。
這對(duì)于那些你想讓它們看起來像代碼的單詞的周圍使用標(biāo)簽非常的好，但是對(duì)于那些你想要顯示的HTML標(biāo)簽，你該怎么做呢？
在 <code>header.php</code>模板文件, 查找 <code><div class="header"></code> 部分并且更改 <code><h1></code> heading.
使用<code>標(biāo)簽，不要讓W(xué)ordPress從文章中清除HTML參考資料。它看到了<code>標(biāo)簽，然后看到了div，通過在你的網(wǎng)頁上創(chuàng)建一個(gè)新的container,它做出了反應(yīng)。WordPress認(rèn)為你正在使用HTML標(biāo)簽，開始一個(gè)h1標(biāo)簽會(huì)破壞你整個(gè)的網(wǎng)頁布局和設(shè)計(jì)。
要使WordPress將這個(gè)辨別為一個(gè)段落中的代碼，使用字符實(shí)體或者擴(kuò)展的字符來代表左右箭頭符號(hào)，并用<code>標(biāo)簽將它們包圍。
在<code>header.php</code> 模板文件, 查找 <code><div class="header"></code> 部分來更改 <code><h1></code> 標(biāo)題。
默認(rèn)的情況下，WordPress會(huì)將文本中任何以http:開始的短語變?yōu)橐粋€(gè)鏈接。如果你給出的例子是怎樣鏈接到WordPress站點(diǎn)內(nèi)部的某一篇文章，而不是使用http://example.com/index.php?p=453鏈接并且使它變?yōu)橐粋€(gè)鏈接，你可以為斜線使用一個(gè)擴(kuò)展的字符，這樣WordPress就不能"看見到"鏈接。
...鏈接到某一篇WordPress文章,使用 <code>http://example.com/index.php?p=453</code> 到你的文章....
以下是一些最常見的HTML字符實(shí)體:
< = < > = > / = / ] = ] [ = [ " = " ' = '
有一個(gè)下面的資源列表,這個(gè)列表會(huì)幫助你自動(dòng)地將HTML標(biāo)簽變?yōu)樽址麑?shí)體,因此你不需要記住這些字符代碼。
使用PRE[ ]
將你的代碼放在一邊，這樣它看起來就像一盒代碼，會(huì)在另一個(gè)代碼或者模板文件內(nèi)部復(fù)制和粘貼，你可以使用<pre> HTML標(biāo)簽。
<pre>標(biāo)簽指示瀏覽器使用monospace代碼字體，但是完全的復(fù)制<pre>標(biāo)簽中的內(nèi)容。每一個(gè)空格，行的切分，每個(gè)小的代碼都要被完全的復(fù)制。
<h3>第三部分標(biāo)題</h3> <p>這是一篇你我之間 <a title="關(guān)于人際關(guān)系的文章" href="goodtalk.php"> 好的關(guān)系</a> 開始
使用<pre>標(biāo)簽不是非常地"漂亮"，但是它的確能起作用。在下一個(gè)部分中可以找到怎樣設(shè)計(jì)它的例子。它依然完全地顯示代碼。
完全地，我們指的是完全地。如果你有一長行的代碼，代碼會(huì)在頁面上長長地顯示出來，因?yàn)闆]有指示命令代碼疊起來。代碼就不會(huì)累迭。下面有一個(gè)例子：
<h3>第三部分標(biāo)題</h3><p>這是一個(gè)<a title="關(guān)于人際關(guān)系"的開始，你和我之間href="goodtalk.php">好的關(guān)系</a>，我認(rèn)為你應(yīng)該閱讀，因?yàn)槲覀冇羞@些小的<a title="關(guān)于交流的文章"非常重要，href="communication.php">conversations</a>一會(huì)兒一次談話，以讓雙方知道對(duì)方的感受。 不漂亮，的確如此。為了避免這種滿屏幕的代碼，將這些行分開。不幸的是，當(dāng)你顯示這些即將要被復(fù)制的代碼的時(shí)候，很難決定在那兒給這些行分開。 如果你對(duì)程序語言非常熟悉，你就知道在什么位置將一行分開，不會(huì)混亂一行的代碼，那么你就選擇那個(gè)位置。如果你熟悉在哪兒分行，你就試一下。將代碼放進(jìn)去，將行分開，然后再測(cè)試代碼。如果這樣做管用，就在那兒分行。如果這樣做不管用，改變分行的位置。如果你有長行的代碼，考慮一下只顯示摘錄部分，并且提供一個(gè)對(duì)于放置在你的站點(diǎn)中的一個(gè)文本或者<tt>PHPS</tt>文件中的全部代碼的鏈接，或者使用許多的[[WordPress:Writing_Code_in_Your_Posts#Pastebins|在線的pastebins]]的其中的一個(gè)，可以利用這個(gè)來臨時(shí)地顯示代碼。 ==發(fā)現(xiàn)并解決代碼問題== 在WordPress文章內(nèi)部寫代碼會(huì)是一個(gè)挑戰(zhàn)，越過"規(guī)定"我們所寫內(nèi)容的WordPress默認(rèn)形式和過濾器。如果你在你的WordPress文章內(nèi)部寫代碼時(shí)，遇到了困難，以下的可能會(huì)幫助你。 ===代碼中的引號(hào)=== 在你的文章中使用代碼的一個(gè)常見的問題在于WordPress"設(shè)計(jì)"引號(hào)的方法。不是看到'''"'''quotes'''"''',默認(rèn)情況下，WordPress將引號(hào)''定為''打開的和關(guān)閉的引號(hào)，就如許多文章處理程序中使用的引號(hào)那樣。需要復(fù)制的代碼需要有直引號(hào)，而不是漂亮的引號(hào)。 通過使用<tt><pre></tt>標(biāo)簽，或者通過真的使使用的引號(hào)包含一個(gè)字符代碼，你可以避免這個(gè)問題： <pre><p class="red"> 變成了 <code><p class="red"></code>
不幸地是，如果你發(fā)表網(wǎng)頁之后，編輯一個(gè)網(wǎng)頁，html代碼編輯器用它們的字面上的等價(jià)物取代了所有的這些實(shí)體，因此，例如，如果你為你的引號(hào)謹(jǐn)慎地使用了"它們返回時(shí)，會(huì)回到原來樣子"，當(dāng)你保存它們時(shí)，它們就會(huì)轉(zhuǎn)變形式。
設(shè)計(jì)你的代碼標(biāo)簽[ ]
默認(rèn)情況下，使用<pre> and <code>會(huì)使文本出現(xiàn)一個(gè)monospaced字體，并且從body tag中使用字體大小。如果你想要不同的字體大小，而且這些標(biāo)簽的外觀也有不同的顏色和形式，那么你該怎么做呢？
在你的WordPress主題文件夾中你的style.css樣式表上，給這兩個(gè)標(biāo)簽添加形式。下面是一個(gè)例子：
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>會(huì)看起來像那個(gè)，先前的看起來會(huì)像這個(gè)：
font-size: 1.3 em;
color: blue;
margin: 10px;
padding:10px;
background: #FFFFB3}
code {font-size:1.2em;
資源[ ]
頻繁使用代碼的用戶[ ]
如果你在文章中總是使用許多的公式，函數(shù)，和程序代碼，考慮使用一個(gè)插件或者PHP工具使整個(gè)的過程更加地簡單。如果你有粘貼許多的代碼塊的傾向，考慮一下在一個(gè)粘貼板上粘貼代碼，并且將代碼鏈接到你的站點(diǎn)上。
- QuickCode WordPress 插件 – 隱藏/不隱藏有固定格式的代碼塊。
- FigureRender – 另一個(gè) LaTeX rendering 插件
- 怎樣創(chuàng)建 Dean Lee的插件 – 一個(gè)關(guān)于 GeSHi 的插件- Generic Syntax Highlighter
粘貼板[ ]