如何添加WordPress代码高亮？代码块怎么用？-WordPress-PHP中文网

最直接有效的方法是使用专业插件实现WordPress代码高亮。Enlighter、Code Prettify和SyntaxHighlighter Evolved是三款常用插件，其中Enlighter功能全面且与古腾堡编辑器集成良好，支持多种语言、主题、行号和一键复制；Code Prettify轻量高效，适合追求性能的用户；SyntaxHighlighter Evolved稳定经典，适合习惯短代码的用户。古腾堡自带“代码”块仅提供等宽字体显示，无语法高亮、行号或复制功能，实用性有限。为确保最佳效果，应选择合适插件并进行主题统一、响应式适配、可访问性优化，同时注意避免插件冲突和性能影响。

如何添加wordpress代码高亮？代码块怎么用？

在WordPress中添加代码高亮，最直接有效的方法通常是依赖专门的插件，它们能将你的代码片段渲染得既美观又易读。当然，WordPress自带的古腾堡编辑器也有一个“代码”块，但它默认只提供等宽字体显示，并不具备语法高亮功能，除非你通过其他方式进行扩展。所以，如果你想要真正的语法高亮效果，插件几乎是必选项。

解决方案

要为WordPress文章中的代码实现高亮显示，最普遍且功能强大的做法是安装并配置一个专业的代码高亮插件。以我个人经验来看，这是一个投入产出比非常高的选择。这些插件通常提供多种编程语言支持、不同的主题样式、行号显示、一键复制等功能，极大地提升了用户阅读体验。

具体操作流程大致如下：

选择并安装插件： 前往WordPress后台，在“插件”菜单下选择“安装插件”。搜索诸如“Enlighter”、“Code Prettify”、“SyntaxHighlighter Evolved”等关键词。我个人比较推荐Enlighter，它功能全面，界面也比较友好。找到心仪的插件后，点击“立即安装”，然后“启用”。
配置插件设置： 插件启用后，通常会在“设置”或独立的菜单项下出现其配置页面。在这里，你可以根据自己的喜好和网站风格进行调整。
- 主题选择： 多数插件提供多种内置主题（如深色、浅色、Solarized等），你可以预览并选择最适合你网站的。
- 语言支持： 确认插件支持你常用的编程语言，如PHP、JavaScript、Python、CSS等。
- 行号显示： 决定是否默认显示代码行号。
- 复制按钮： 启用或禁用代码块右上角的一键复制按钮。
- 其他高级设置： 比如字体大小、是否自动换行、自定义CSS等。
在文章中插入代码： 当你编辑文章时，根据插件的不同，插入代码的方式也会有所差异。
- 古腾堡编辑器： 许多插件会集成到古腾堡编辑器中，提供一个专门的代码块。例如，Enlighter插件会添加一个“Enlighter Code Block”，你可以直接选择语言和主题。
- 经典编辑器/短代码： 如果你还在使用经典编辑器，或者插件没有直接的古腾堡块，通常会提供短代码（shortcode）的方式。例如：
```
[enlighter language="php" theme="atom-one-dark"]
<?php
echo "Hello, WordPress!";
?>
[/enlighter]
```
  登录后复制
  你只需将代码粘贴在短代码之间，并指定语言和主题即可。
保存并预览： 完成代码插入和文章编辑后，保存并预览你的文章。你应该能看到代码已经按照你选择的主题进行了语法高亮显示。

WordPress代码高亮插件哪个好用？如何选择适合你的？

在WordPress生态中，代码高亮插件的选择确实不少，各有侧重。我个人在尝试过几个之后，对以下几款有些心得体会：

Enlighter:
- 优点： 这是我目前最常用的。它功能非常强大，内置了多种漂亮的主题，支持几乎所有主流编程语言，而且与古腾堡编辑器的集成做得非常好，有专门的“Enlighter Code Block”，插入和配置都非常直观。它还支持行号、代码复制、高亮特定行等高级功能。性能方面也表现不错，不会给网站带来太大负担。
- 缺点： 初次接触时，设置选项可能略显繁多，需要花一点时间熟悉。
Code Prettify:
- 优点： 基于Google Code Prettify库，轻量级，性能优秀。安装后基本不需要太多配置就能工作，适合追求简洁和速度的用户。它会自动检测语言，这一点很方便。
- 缺点： 主题和自定义选项相对较少，如果你对外观有很高的要求，可能需要自己写一些CSS来调整。语言检测偶尔也会出现偏差，需要手动指定。
SyntaxHighlighter Evolved:
- 优点： 这是一款非常老牌且经典的插件，由Automattic（WordPress的母公司）开发。它稳定可靠，支持多种语言和主题，也支持行号。短代码用法非常灵活，对于习惯经典编辑器的用户来说很友好。
- 缺点： 它的界面和主题风格可能略显陈旧，更新频率也相对较低。在古腾堡编辑器中的集成可能不如Enlighter那么现代化。

如何选择适合你的？

如果你追求功能全面、美观且易用性高： 毫无疑问，Enlighter 是一个非常棒的选择。它能满足绝大多数技术博客的需求，让你的代码块看起来专业且吸引人。
如果你更看重轻量级、高性能和“设置即用”： Code Prettify 值得一试。它能快速为你提供基本的高亮功能，减少网站的资源消耗。
如果你偏爱经典、稳定，并且主要通过短代码操作： SyntaxHighlighter Evolved 仍然是一个可靠的选项，尤其是对于那些对老牌插件有情怀的用户。

我的建议是，先尝试Enlighter，如果觉得它过于“重”或者你对它的主题不满意，再考虑Code Prettify。最重要的是找到一个能让你在发布代码时感到轻松愉快的工具。

WordPress古腾堡（Gutenberg）代码块怎么用？它有什么限制？

古腾堡编辑器自带的“代码”块，使用起来确实非常简单，但它的功能性却相当有限，这可能是我在初次使用时感到有些失望的地方。

怎么用？

wordpress淘宝客主题：Love Shopping红色大气主题

易秀购主题网收集到一款红色的淘宝客主题很不错的，有点想值得买的模板，很适合做淘宝客的童鞋，这款主题需要先去注册阿里妈妈并得到联盟的ID，直接调用淘点金+短代码，大大的方便了添加商品，有简单的SEO功能。如果觉得该模板的SEO功能比较单一不能够满足你，那么你也可以搜索wordpress的SEO插件，很方便。至于如何运营就看自己的了，有大把的人做淘宝客赚了钱，如果通过自己的营销的确可以做的很不错。

查看详情

在古腾堡编辑器中，点击“+”号添加新块。
在搜索框中输入“代码”，或者在“格式”分类下找到“代码”块。
点击插入“代码”块后，你就可以直接将你的代码粘贴到文本区域。

它有什么限制？

无语法高亮： 这是最大的限制。古腾堡的“代码”块仅仅是将你粘贴的文本用等宽字体显示在一个灰色背景的框中，它并不会根据编程语言的语法规则进行颜色区分。换句话说，它只是一个“预格式化文本”块，而不是一个“语法高亮”块。对于技术内容来说，这显然是不够的，因为它失去了高亮显示的关键作用——提高代码的可读性。
无主题选择： 你无法选择不同的颜色主题来改变代码块的样式。它只有一个固定的、非常基础的外观。
无行号显示： 它不提供自动的行号显示功能，这对于较长的代码片段来说，会降低引用和讨论的便利性。
无一键复制功能： 读者无法直接点击按钮复制代码，必须手动选择并复制，这在移动端体验尤其不便。
有限的语言支持： 因为没有语法高亮，所以谈不上对特定编程语言的“支持”。它只是一个纯文本容器。

什么时候会用到它？

尽管有这些限制，古腾堡的“代码”块也不是完全没有用武之地。

展示非编程代码的文本： 比如你只是想展示一段配置文件、日志输出、或者其他不需要语法高亮的纯文本。
临时或快速展示： 如果你只是想快速地在文章中插入一小段代码，而对美观度没有太高要求，或者你后期打算用CSS手动美化，那么它可以作为一个起点。
作为插件的替代方案（配合自定义CSS）： 如果你不想安装额外的插件，并且你对CSS有一定了解，你可以通过自定义CSS来为古腾堡的代码块添加一些基础的高亮效果。但这通常需要你手动为不同类型的代码添加不同的CSS类，并编写复杂的样式规则，维护起来也比较麻烦。

总的来说，如果你是写技术博客，并且希望你的代码片段能够专业、美观地呈现，那么古腾堡自带的“代码”块远远不能满足需求，你几乎肯定需要一个专业的代码高亮插件。

WordPress代码高亮设置常见问题与优化技巧

在使用WordPress代码高亮插件的过程中，我遇到过一些问题，也总结了一些优化技巧，希望能帮到你。

常见问题：

高亮不生效或显示异常：
- 原因： 最常见的是插件冲突，或者主题的CSS覆盖了插件的样式。有时候，如果你手动在代码块中添加了HTML实体（如
```
<
```
  登录后复制
  ），也可能导致显示问题。
- 解决方案： 尝试禁用其他插件，看看是否解决。检查主题的
```
functions.php
```
  登录后复制
  或自定义CSS中是否有与代码块相关的样式。确保你的代码是纯文本，没有被WordPress自动转换成HTML实体。某些插件可能需要你手动指定语言，否则会 fallback 到纯文本。
页面加载速度变慢：
- 原因： 某些代码高亮插件可能比较“重”，加载了大量的JavaScript和CSS文件。如果你的文章中有很多代码块，或者代码块特别长，也可能影响性能。
- 解决方案： 选择轻量级的插件（如Code Prettify）。优化插件设置，只加载你需要的语言包和主题。考虑使用缓存插件，并启用JS/CSS文件的合并与压缩。如果文章中代码块过多，可以考虑将其拆分或使用“展开/折叠”功能（部分插件支持）。
代码块样式不符合网站整体风格：
- 原因： 插件默认的主题可能与你的网站设计不协调。
- 解决方案： 大多数插件都允许你选择不同的内置主题。如果内置主题都不满意，你可以通过插件的自定义CSS选项，或者在WordPress的“自定义”->“额外CSS”中，覆盖插件的默认样式。这需要一些CSS知识，但能让你完全掌控代码块的外观。

优化技巧：

统一代码风格： 无论你选择哪个插件，最好在整个网站中保持代码高亮的主题和设置一致。这能让你的网站看起来更专业，用户体验更好。
利用插件的高级功能：
- 高亮特定行： 如果你在讨论代码的某个特定部分，利用插件的高亮行功能（通常通过短代码参数或古腾堡块设置）可以引导读者注意力。
- 显示文件名/标题： 有些插件允许你在代码块顶部添加文件名或标题，这对于展示多个文件或模块的代码非常有用。
- 代码复制按钮： 确保启用这个功能，它极大地提升了用户体验。
响应式设计考虑： 确保你的代码块在不同设备（尤其是移动设备）上都能良好显示。如果代码行很长，插件通常会提供水平滚动条，而不是让代码溢出容器。
可访问性：
- 颜色对比度： 确保你选择的代码高亮主题具有足够高的颜色对比度，以便色盲或视力障碍的用户也能清晰阅读。
- 字体大小： 允许用户通过浏览器设置调整字体大小，或者插件本身提供字体大小调整选项。
定期更新插件： 及时更新你的代码高亮插件，以获取最新的功能、性能优化和安全补丁。但在更新前，最好在测试环境中进行验证，以避免潜在的兼容性问题。