在您的帖子中编写代码

无论您是为 WordPress 编写插件还是 hack,或者您想添加有关您自己的 WordPress 站点的代码片段或其他编程代码(如 HTML、CSS、PHP 或 JavaScript),都将代码放入您的帖子中,看起来像代码,但“不像代码”是博主经常遇到的挑战。

默认情况下,一段代码写入或粘贴到 WordPress 帖子编辑器的解释方式取决于您使用的是可视化帖子编辑器还是 HTML 帖子编辑器。可视化编辑器会将代码视为普通文本,将 < 和 > 字符转换(编码)为它们的 < 和 > 字符实体 等价物,这样代码就不会被 Web 浏览器解释。引号也会被转换,但请记住,默认情况下,WordPress 也会应用 自动更正 ,以便根据您的语言细节正确引用文本。HTML 编辑器不会转换任何这些字符,因此请注意,您在代码示例中使用的 HTML 和 CSS 标记将被 Web 浏览器识别,您最终可能会得到看起来很时髦的文本和混乱的布局。

请注意,此行为可能因 WordPress 版本、帖子编辑器和其他使用的插件而异。在一些旧版本的 WordPress 中,无法识别的 < 和 > 字符的使用被转换为 < 和> 字符实体,当在帖子中找到HTML 标签时,标签保持原样,允许在 Web 浏览器中对其进行解释。

段内代码 #

将文本转换为monospaced字体的 HTML 标记。它们是 <code> 和 <tt>。后者在今天很少使用,取而代之的是更有用且语义正确的 <code>,它将作为计算机代码的文本与自然语言区分开来。

这是一个在段落中提到代码的例子,
即函数 <code>wp_title()</code>、
<code>wp_content()</code> 和 <code>wp_footer()</code>,
它们非常在 WordPress 中很有用。

这非常适合让一段非 HTML 文本看起来像代码,但是您想要展示的 HTML 标记呢?

在 header.php 模板文件中,
查找 <code><div class="header"></code>
部分以更改 <code><h1></code> 标题。

使用<code>标签不会告诉 WordPress 在标签内编码 HTML 标记或将其从帖子中删除。WordPress 认为您正在使用此标记进行格式化,而保持原样。然后,Web 浏览器会看到一个<code>标签,然后是一个<div>标签,因此它会通过在您的网页中创建一个新容器来响应。 

为避免这种行为,请使用字符实体或扩展字符来表示左右箭头字符,这种方式不会被 Web 浏览器识别为 HTML 标记的开头和结尾,如下所示:

在 header.php 模板文件中,
查找 <code><div class="header"></code>
部分以更改 <code><h1></code> 标题。

顶部↑

段落内的 URL #

默认情况下,WordPress 会将任何以http:开头的短语转换为链接。如果您要举例说明如何链接到 WordPress 网站中的特定帖子,而不是使用链接http://example.com/index.php?p=453并将其转换为链接,您可以使用扩展字符作为斜杠,这样 WordPress 就不会“看到”链接:


...在您的帖子中使用<code>http:& amp;#47;& amp;#47;example.com& amp;#47;index.php?p=453</code>链接到特定的 WordPress
帖子。 ...

注意:去掉“&”和“amp”之间的空格。

顶部↑

以下是与本文主题相关的一些 HTML 字符实体的列表:

123456789101112(less than) = &lt; or &#060;(greater than) = &gt; or &#062;/ = &#047;      ] = &#093;[ = &#091;" = &quot; or &#034;' = &#039;“ = &ldquo; or &#8220;” = &rdquo; or &#8220;‘ = &lsquo; or &#8216;’ = &rsquo; or &#8217;(ampersand) = &amp; or &#038;

下面的资源列表将帮助您自动将 HTML 标记转换为字符实体,因此您不必记住这些字符代码。

顶部↑

使用 <pre> 标签 #

要将您的代码放在一边,使其看起来像一盒代码,可以在其他代码或模板文件中复制和粘贴,您可以使用 <pre> HTML 标记。

<pre> 标签指示浏览器使用等宽字体,但要 准确再现 <pre> 标签内的任何内容。每个空格、换行符、每一段代码都被精确地复制。

<h3>第三节标题</h3> 
<p>这是你我之间
<a title="article on Relations" href="goodtalk.php">
良好关系</a>的开始......

使用 <pre> 标记不是很“漂亮”,但它可以完成工作。如何设置样式的示例可以在下一节中找到。尽管如此,它还是 准确地展示了代码。

确切地说,我们 的意思是完全正确。如果你有很长的代码行,它会跑出页面,因为没有 指令告诉代码换行。它不会。这是一个例子:

<h3>第三节标题</h3><p>这是你我之间<a title="article on Relations" 
href="goodtalk.php">良好关系</a>的开始,我认为你应该阅读它,因为
重要的是我们偶尔有这些小<a title="article on communication"
href="communication.php">conversations</a>让彼此了解我们的感受......

不漂亮,是吗。为避免此屏幕溢出,请插入换行符。不幸的是,当你展示将被复制的代码时,决定在哪里放置这些换行符是一个艰难的决定。

如果你熟悉编程语言,你就会知道什么时候换行不会弄乱一行代码,所以选择那里。如果您不熟悉在哪里放置换行符,请尝试一下。把代码放进去,换行,然后测试代码。如果有效,则在此处使用换行符。如果不是,请更改换行符位置。

如果您有很长的代码行,请考虑仅展示摘录并以文本或 PHP 文件的形式提供指向放置在您网站上的完整代码的链接,或者使用可用于临时展示代码的众多在线粘贴箱之一。

顶部↑

故障排除代码 #

在 WordPress 帖子中编写代码可能是一项挑战,可能会迫使您覆盖 WordPress 默认样式并使用过滤器来“修复”我们编写的内容。如果您在 WordPress 帖子中编写代码时遇到问题,本部分可能会有所帮助。

顶部↑

报价自动更正 #

在您的帖子中使用代码时的一个常见问题是 WordPress 的引号自动更正功能,该功能主要来自文字处理软件。默认情况下,在提供网页时,WordPress 会根据您在wp-config.php文件中设置的 WordPress安装语言将引号转换为开始和结束的“弯”引号。请注意,无论您是在可视化还是 HTML 帖子编辑器中编写引号,都会应用自动更正(也称为智能引号)功能。

在 HTML 帖子编辑器中,您可以通过使用 <code>、<tt> 或 <pre> 标签将引号括起来来避免此问题。其他解决方案是用各自的字符实体替换引号,例如使用:

<code><p class=& #34;red& #34;></code> // 去掉 & 和 # 之间的空格

代替:

<p class="红色">

请注意,在某些较旧版本的 WordPress 中,如果您在发布页面后再次对其进行编辑,HTML 编辑器会将所有这些实体替换为其文字等价物。例如,如果您小心地将 ” 用于引号,它们将返回为“,如果保存,自动更正功能将对它们产生影响。

顶部↑

资源 #

顶部↑

频繁代码用户 #

如果您在帖子中始终使用大量公式、函数和编程代码,请考虑使用插件或 PHP 工具来简化整个过程。如果您倾向于发布大量代码块,请考虑将代码粘贴到粘贴箱中并在您的网站上链接到它。

顶部↑

粘贴工具 #

Powered by BetterDocs

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

Scroll to Top