在 WordPress 中写技术文章或分享代码时，代码块是必不可少的工具。但很多人对代码块的了解只停留在 “能显示代码” 的层面，不知道它还有很多实用功能可以挖掘。从基础的添加方法到个性化的样式定制，再到提升效率的高级功能，今天这篇文章就带你全方位玩转 WordPress 代码块，让你的代码展示既专业又好用。
一、代码块基础：从零开始认识它
WordPress 代码块简介其实很简单，它是古腾堡编辑器中的一个模块，专门用来在文章或页面中展示代码，避免代码被浏览器解析或格式错乱。和直接粘贴代码相比，代码块能保持代码的格式和结构，让展示更规范。
如何添加代码块很容易操作。在编辑文章时，点击 “+” 号添加模块，搜索 “代码” 找到代码块，点击后就能在框中输入或粘贴代码。如果你用的是经典编辑器，也可以通过快捷键或工具栏按钮插入代码块，操作同样不复杂。
代码块的默认功能包括语法高亮和自动换行。当你输入 PHP、JavaScript 等语言的代码时，代码块会自动识别并高亮显示关键字，让代码层次更清晰；超过代码框宽度的内容会自动换行，避免出现横向滚动条影响阅读。不过，代码块的语法支持有局限性，默认只支持常见的几种语言，特殊语言可能需要借助插件扩展。
基础代码块的使用场景很广泛，比如在教程中展示示例代码、在文章中分享解决方案的代码片段等。无论是技术博主还是网站开发者，只要需要在内容中插入代码，代码块都是必备工具。
二、代码块的样式定制：让你的代码块与众不同
默认的代码块样式比较简单，通过自定义代码块样式，能让它更贴合你的网站风格。
修改代码块的字体和颜色是最直观的美化方式。你可以在主题的自定义 CSS 中添加代码，比如用font-family: Consolas, Monaco;设置等宽字体，让代码对齐更整齐；用color: #333; background: #f5f5f5;调整文字和背景颜色，让代码块和网站整体色调更协调。
添加代码块的高亮效果能提升可读性。除了默认的语法高亮，还可以给代码块添加行高亮，比如让偶数行背景色略深，方便读者逐行查看代码；也可以给鼠标悬停的行添加背景色，操作时更清晰。
代码块的边框和背景设置能增加层次感。比如添加border: 1px solid #ddd;给代码块加一个浅色边框，用border-radius: 6px;让边角更圆润，再搭配padding: 15px;增加内边距，代码块会看起来更精致。别忘了响应式代码块样式，在手机等小屏幕设备上，让代码块宽度自适应屏幕，保证良好的显示效果。
三、代码块的高级功能：让操作更高效
掌握这些高级功能，能让代码块的使用体验大幅提升。
代码块的折叠功能很实用，尤其适合展示长代码。通过插件可以给代码块添加折叠按钮，读者不想看代码时可以点击折叠，让页面更简洁；需要查看时再展开，操作灵活方便。
多语言代码块支持能满足多样化需求。默认代码块支持的语言有限，安装 Prism.js 等插件后，可以扩展到几十种编程语言，无论是 Python、Java 还是 Ruby，都能正确高亮显示，适合分享多语言技术内容的网站。
代码块的行号显示和复制功能是提升用户体验的细节。行号能帮助读者在交流时准确指代某一行代码，避免 confusion；复制按钮则让读者能一键复制代码到本地，不用手动选中，大大提升操作效率。
自动格式化代码块功能可以拯救混乱的代码。当你粘贴格式错乱的代码时，这个功能能自动调整缩进、补全括号，让代码瞬间变得整齐规范，尤其适合处理从别处复制来的代码。
四、代码块的性能优化：避免拖慢你的网站
代码块虽然小巧，但如果使用不当也可能影响网站性能，做好优化代码块的加载速度很有必要。
减少代码块的资源消耗的一个技巧是避免在一篇文章中插入过多代码块。每一个代码块都会加载相应的高亮脚本，数量太多会增加服务器负担和页面加载时间。如果需要展示大量代码，可以分段落插入，或者只展示关键部分，其余部分用链接引导到代码仓库。
压缩代码块内容能减小文件体积。对于较长的代码，在不影响可读性的前提下，可以去掉多余的空行和注释，减少代码块的字符数量；也可以借助工具压缩代码，再粘贴到代码块中，加载时会更快。
缓存代码块输出是针对动态网站的优化方法。如果你的网站有很多页面都用到代码块，可以通过缓存插件将代码块的渲染结果缓存起来，避免每次加载页面时都重新解析代码，从而提升加载速度。
性能优化的最佳实践是保持代码块简洁。只保留必要的功能，不用追求过多的特效；定期清理不用的代码块插件，避免冗余的脚本加载，让代码块在好用的同时不影响网站性能。
五、代码块的插件与工具：扩展功能的好帮手
默认代码块功能有限，借助推荐的代码块插件能解锁更多玩法。
Code Block Pro 是一款功能全面的插件，支持几十种语言高亮、行号显示、复制按钮等功能，还自带多种预设样式，安装后直接在代码块设置中选择即可。WP Code Highlight 则更轻量，专注于语法高亮优化，适合对加载速度有要求的网站。
插件的安装与配置很简单。在后台搜索插件名称，安装激活后进入设置页面，根据提示选择默认语言、设置代码块样式，几分钟就能完成配置。大部分插件都支持在代码块编辑时实时预览效果，方便调整参数。
做代码块插件的功能对比时，要关注这几点：支持的语言数量、是否有响应式设计、是否会增加页面加载时间。可以先安装免费版试用，确认符合需求后再考虑升级付费版获取更多功能。
同时，要注意插件与主题的兼容性。安装新插件后，检查代码块在不同页面的显示效果，看看是否有样式错乱的情况，如果有，可以在插件设置中关闭自定义样式，改用主题默认样式，通常能解决问题。
常见问题解答（FAQ）
- 代码块中的代码显示正常，但复制后有多余空格怎么办？
答：这可能是粘贴代码时带入了多余的格式。可以先将代码粘贴到记事本中，清除格式后再复制到代码块；也可以安装支持 “清除格式粘贴” 的插件，自动去除多余空格和换行。
- 怎么让代码块在手机上显示正常，不出现横向滚动？
答：启用代码块的响应式设置，在 CSS 中添加max-width: 100%; overflow-x: auto;，让代码块在超出屏幕宽度时显示横向滚动条，而不是撑开页面；也可以选择支持响应式的插件，自动适配不同屏幕尺寸。
- 代码块的语法高亮不生效，是什么原因？
答：可能是代码块没有正确识别语言类型，试试在代码块设置中手动选择对应的语言；如果是特殊语言，可能需要安装支持该语言的插件；另外，主题的 CSS 可能覆盖了代码块的样式，检查主题样式表中是否有冲突的代码，修改或删除即可。