WordPress优雅代码片段显示技巧与教程

学习如何在WordPress中优雅地展示代码，对于那些热衷于分享编程知识与技术见解的博主和内容创作者来说至关重要。计算机代码本质上是为机器而非人类设计的，它由标签、符号和括号构成，但在网页前端呈现时，我们希望它以更直观、更易读的形式出现。这给开发者和技术博主带来了挑战——我们需要找到一种方法来展示代码的原始形态，而不是让它执行实际功能，比如生成按钮或改变段落样式。简而言之，当我们想在博客中展示代码示例时，目标就是阻止代码的实际运行，让读者能够清晰地看到代码本身，甚至可以复制使用。本文将详细介绍多种在WordPress中展示代码的方法，无论你使用的是哪种主题，都能找到最适合你的解决方案。

### 在WordPress中添加常规代码会发生什么？

当你尝试在WordPress的可视化编辑器中插入代码时，可能会遇到一些意想不到的结果。毕竟，这并非专业的文本或代码编辑环境，但WordPress的行为有时并不如预期。以下是几种可能出现的状况：

1. **部分显示**：代码片段的一部分出现在前端，而其他部分消失，这会给读者留下不专业的印象，也意味着代码的准确性受到质疑。
2. **完全消失**：代码在后台消失，前端没有任何显示，读者完全看不到任何内容。
3. **格式混乱**：代码呈现奇怪的格式，可能是对用户不友好的样式，或者不适合公开发布的内容。
4. **部分呈现**：代码可能只部分显示，无法完整呈现其原始形态。

以以下HTML代码片段为例：
“`html
Chicago A nickname for Chicago is The City of Broad Shoulders.
Los Angeles A nickname for Los Angeles is The City of Angels.
New York A nickname for New York is The Big Apple.
“`
这段代码使用HTML样式元素创建了三个绿色内容块，分别展示城市名称和昵称。但如果我们直接粘贴到WordPress的Gutenberg编辑器中，结果可能并不理想。

### 如何在WordPress网站上正确显示代码？

以下列举了从简单到复杂的多种方法，适合不同使用习惯和需求的用户：

#### 方法1：使用Gutenberg区块编辑器（默认设置）

这是最简单直接的方法，WordPress内置的代码区块能够很好地保留代码格式。

**步骤1：添加代码区块**
在WordPress中打开文章或页面，点击”添加区块”按钮，搜索”代码”或直接输入”/code”快速插入代码区块。

**步骤2：粘贴代码**
将你想要展示的代码粘贴到”Write code…”的框中。Gutenberg编辑器支持Markdown，因此格式会被完整保留。

**步骤3：发布预览**
点击”发布”或”预览”按钮，查看前端效果。代码区块会以灰色背景框展示原始代码，保持所有空格和制表符。

**步骤4：格式化选项**
点击代码区块的设置按钮（齿轮图标），可以调整文本和背景颜色、字体大小、边距和边框等样式。

#### 方法2：使用插件

虽然WordPress已内置代码区块，但插件可以提供更多样式和功能选项。

**推荐插件**：Enlighter SyntaxHighlighter Evolved Code Prettify
这些插件不仅保留代码格式，还提供语法高亮和多种主题。

**步骤1：安装插件**
在WordPress后台安装并激活你选择的代码高亮插件。

**步骤2：插入代码区块**
使用插件提供的特殊代码区块（如Enlighter的”Sourcecode”区块）插入文章。

**步骤3：粘贴代码**
将代码粘贴到指定的输入框中，插件会自动进行语法高亮。

**步骤4：自定义设置**
通过插件设置面板，可以调整语言类型、行号显示、主题样式等。

**额外功能**：
– 行号高亮
– 复制到剪贴板按钮
– 新窗口查看纯文本版本
– 多种预设主题（如Godzilla、Atomic、经典等）
– 自定义主题选项

#### 方法3：使用编码器工具

对于不经常需要展示代码的用户，编码器工具可以快速将代码转换为HTML格式。

**推荐工具**：W3Docs HTML Encoder
这个免费的在线工具可以将代码转换为保留所有格式的HTML。

**步骤1：打开编码器**
访问W3Docs HTML Encoder网站，选择合适的编码类型（JavaScript Unicode或HTML Symbols）。

**步骤2：粘贴代码**
将代码粘贴到左侧输入框，点击”Encode”按钮。

**步骤3：复制结果**
点击”Copy”按钮，获取编码后的HTML代码。

**步骤4：粘贴到WordPress**
在WordPress编辑器中切换到”Code Editor”或”文本”选项卡，粘贴编码后的HTML。

**优点**：简单快捷，无额外样式
**缺点**：无语法高亮，仅保留格式

#### 方法4：使用自定义短代码

创建自定义短代码可以重复使用复杂的代码片段，适合需要频繁展示相同代码的用户。

**步骤1：编辑主题文件**
在functions.php文件中添加自定义短代码函数，例如：
“`php
function html_code_block($atts) {
// 解析属性和代码
// 返回格式化后的HTML
}
add_shortcode(‘html’, ‘html_code_block’);
“`

**步骤2：使用短代码**
在文章中插入`[html]你的代码[/html]`，即可显示格式化的代码。

**优点**：可重复使用，可自定义样式
**缺点**：需要PHP知识，不适用于所有编辑器

#### 方法5：使用``和`



`标签

这是最传统的代码展示方法，适合使用经典编辑器或HTML编辑器的用户。

**``标签**：  
适用于内联代码片段，例如：  
```html
The quick fox jumps over the lazy dog.
```

**``标签**：  
适用于较长的代码块，例如：  
```html
function hello() {
    echo "Hello, world!";
}

```

**优化技巧**：
- 为`

`标签添加CSS样式，如：

  ```css

  pre {

    background: #f5f5f5;

    border: 1px solid #ddd;

    padding: 10px;

    font-family: monospace;

    overflow-x: auto;

  }

  ```

#### 方法6：使用连接到WordPress的Markdown编辑器

Markdown编辑器提供高效的代码展示方式，适合喜欢Markdown的用户。

**推荐工具**：Ulysses (Mac/iOS), ByWord (Mac/iOS), Obsidian (多平台)

**步骤1：在编辑器中添加代码块**
在Ulysses中，输入"```"创建代码块，例如：
```markdown
```html
function hello() {
    echo "Hello, world!";
}
```
```

**步骤2：导出到WordPress**
使用编辑器的发布功能，将代码块直接发送到WordPress。

**优点**：高效编写，保留格式
**缺点**：需要额外编辑器，可能需要付费

### 总结

在WordPress中展示代码有多种方法，选择哪种取决于你的使用习惯、代码类型和样式需求。对于大多数用户，建议从内置的Gutenberg代码区块开始，如果需要更多样式选项，可以尝试插件。对于不经常展示代码的用户，编码器工具是快速转换代码的好选择。自定义短代码适合需要重复使用代码的用户，而``和`


`标签是传统的代码展示方式。对于喜欢Markdown的用户，连接到WordPress的Markdown编辑器提供了高效的代码展示解决方案。根据你的具体需求，选择最适合你的方法，让你的代码内容更专业、更易读。




























                                                        文章网址：https://www.wpbull.com/jiqiao/13392.html

WordPress优雅代码片段显示技巧与教程

相关推荐