无论你是为WordPress写插件或hack,还是添加有关WordPress的代码片段或其他如HTML,CSS,PHP或javascript的编程代码,如何让插入于日志中的代码有其形而不发生作用对写博客的用户来说是常常遇到的拦路虎。
默认情况下,WordPress会将<和>自动转换为<和>,在发表后看起来就是<和>。如果它发现日志中使用了HTML标签,就会将其当作HTML标签来使用,结果你的文本看起来就很怪异,布局也会弄得一团糟。
网页中代码的使用有两个方面。在段落中使用代码表示正在讨论该段代码,然后是被高亮显示的代码。
段落中的代码
有两种HTML标签可以将文本转为等宽样式,即< code>和< tt>。而后者现今已基本不使用了,取代它的是用处更大且更富语法意义的< code>,它能将计算机代码类的文本与一般语言分辨开来。
此为用于某段落内的代码示例
用以描述WordPress中的< code>index.php,
< code>sidebar.php及< code>header.php
模板文件。如果你希望在文字周围使用标签以使它们看起来如代码一般,此方法就很有用,但如果你想展示如HTML的标签的话该如何是好呢?
在< code>header.php模板文件中, 查找< code>< div class="header"> 部分以修改< code>< h1>标题栏。使用< code>标签是无法告知WordPress将HTML参考从日志中分离开的。它会看到< code>标签,然后看到div,因此它就会在网页中新建一个容器作为应答。WordPress会认为你实际上是在使用HTML标 签,不小心使用h1这样的标签就能搞砸整个网页布局和设计初衷。
若要让WordPress将此识别为段落中的代码的话,可以使用字符实体或扩展字符来表示其前后的左右箭头。
在< code>header.php模板文件中,
查找< code>
但如果你是在首次发布某页面之后进行编辑的话,html代码编辑器就会用自带的符号替换所有的实体。因此,如果你使用" 来表示引号的话,它们会变为",而当你保存的时候它们就会被转换掉。
定制代码标签的风格
默认情况下,使用< 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}
第一步:首先从网上下载出WordPress的插件Wp-syntax。
第二步:在编辑文章时,使用HTML的编辑方式插入以下代码
//“line为1时表示显示行号”
,中间插入要插入的代码即可,LANGUAGE改为语言类型,例如php、java。line为0不显示行号,为1时显示。这个需要你安装一个插件:
WP-CodeBox