WordPress怎么改代码

一、操作前须知

修改代码存在网站错乱风险！操作前务必备份全站数据，建议搭建测试站点（ staging 环境）调试代码，避免线上站点出现故障。准备就绪，我们正式开始。

二、在文章/页面中编辑HTML

WordPress独立站后台提供两大内容编辑器：区块编辑器（古腾堡编辑器）与经典编辑器，二者均可直接编辑HTML，操作方式略有区别。

1、使用区块编辑器（古腾堡）

区块编辑器将页面内容拆分为独立模块（段落、图片、标题等），方便页面设计，提供多种HTML修改方式，按需选择即可。

（1）添加自定义HTML区块

适合插入自定义按钮、第三方嵌入组件等独立代码片段：

• 进入WordPress后台，点击「文章」或「页面」；
• 新建文章/页面，或打开已有内容；
• 点击页面内「+」号新增区块；
• 在搜索框输入「自定义HTML」并选中。

• 也可直接输入斜杠快速调取该区块；

• 将代码粘贴至编辑框内；
• 点击预览查看实际展示效果。

该方式适合单独嵌入外部内容，不会干扰页面原有内容结构。

（2）将单个区块转为HTML编辑

仅需微调段落、图片等单个模块时使用：

• 选中需要修改的区块；
• 点击区块右上角三点菜单；
• 选择「以HTML形式编辑」；

• 编辑该区块对应的HTML代码；
• 切换回可视化编辑模式完成修改。

适合小幅调整，例如修改图片对齐方式、为链接增加自定义属性。

（3）整篇文章/页面完整HTML编辑

若需大范围修改页面整体结构，可一次性编辑全部HTML代码：

• 点击区块编辑器右上角全局三点菜单；
• 选择「代码编辑器」；

• 页面完整HTML代码将全部展示，按需修改；
• 修改完成后点击「退出代码编辑器」返回可视化界面。

注：此操作会改动页面整体结构，保存前务必预览页面，防止布局错乱。

2、使用经典编辑器

若通过WordPress插件或旧版程序使用经典编辑器，HTML编辑操作更简洁，但功能相对单一：

• 进入文章/页面编辑页面；
• 编辑器顶部存在「可视化」与「文本」两个标签；
• 切换至「文本」标签，即可查看、编辑全文HTML代码；
• 修改完毕切回可视化界面核对效果；
• 保存或发布内容。

适合熟悉HTML、需要快速批量修改页面代码的用户。

三、为文章、页面自定义CSS样式

CSS负责控制网站视觉效果：颜色、字体、页面排版等。主题自带基础样式，但你可以单独为某篇文章、页面定制专属样式。

1、在HTML区块内写入行内CSS

在自定义HTML区块中，可通过<style>标签或行内样式直接添加样式代码，示例：

<style>

.custom-text {

color: navy;

font-size: 18px;

}

</style>

<p class="custom-text">This text is styled with inline CSS.</p>

也可直接给标签添加行内样式：

<p style="color: navy; font-size: 18px;">This text has inline styles.</p>

仅适合一次性临时调整，大量页面使用会导致代码冗余、后期维护麻烦。

2、定义CSS类，在主题自定义器统一管理样式

更整洁规范的方案，一处修改全站同步生效：

• 在自定义HTML区块（或任意区块HTML代码）中添加自定义类，例如<p class=”custom-text”>文字内容</p>；
• 后台依次点击「外观」→「自定义」；
• 选择「附加CSS」；

• 写入对应样式代码：

.custom-text {

color: navy;

font-size: 18px;

}

• 点击发布，所有带有该类名的元素会同步套用样式。

代码结构清晰，后期统一修改样式无需逐篇调整页面。

3、通过自定义器设置全站通用CSS

想要统一修改全网站样式，直接使用自定义器的「附加CSS」功能。不建议直接修改WordPress主题自带样式表，主题更新会覆盖所有改动；子主题搭配附加CSS是长期稳定修改全站样式的最优方案。

四、PHP代码编辑教程

PHP是WordPress的底层运行语言，用于实现自定义模板、插件拓展等高级功能，但修改门槛更高，风险更大。

1、直接编辑PHP的风险

• 网站崩溃：一处语法错误就会导致网站白屏、无法访问；
• 修改丢失：主题、插件更新后，直接修改的源码会被覆盖；
• 安全漏洞：错误的PHP代码极易引入黑客入侵通道。

操作前务必备份全站，优先在测试站点调试；若不熟悉代码，建议寻求专业开发人员协助。

2、使用子主题安全修改主题PHP文件

修改主题代码必须搭配子主题，隔离自定义代码，避免主题更新覆盖修改内容：

搭建步骤：

• 进入网站文件目录 wp-content/themes/；
• 新建文件夹，命名格式为「原主题名-child」，例如mytheme-child；
• 在文件夹内新建style.css，写入以下代码（将mytheme替换为父主题文件夹名称）：

/*

Theme Name: My Theme Child

Template: mytheme

*/

• 新建functions.php文件，用于加载样式、自定义PHP函数；
• 后台「外观」→「主题」，启用该子主题。

完成后，将父主题中需要修改的PHP文件（如page.php页面模板）复制到子主题文件夹，仅编辑副本即可，不受主题更新影响。

3、谨慎修改插件文件

不建议直接改动插件源码，插件更新会清空所有修改。优先使用插件提供的钩子、过滤器实现自定义功能；如需深度调整，建议单独开发小型自定义插件。若必须修改插件源码，务必备份原文件并记录修改内容。

五、安全编辑代码最佳实践

1. 全站备份：使用UpdraftPlus等备份插件，修改代码前完整备份网站；

2. 测试环境先行：所有代码改动先在测试站点调试，无误再上线；

3. 版本管理：PHP代码推荐使用Git记录修改，方便回滚，子主题、自定义插件必备；

4. 先预览再发布：HTML、CSS修改完成后预览页面，及时排查布局、样式问题；

5. 专业人员协助：复杂PHP开发、底层功能修改，交给专业开发者更稳妥。

学会手动编辑WordPress的HTML与CSS，能摆脱主题默认样式限制，实现高度个性化的页面设计。而PHP代码修改风险较高，务必掌握子主题规范流程，再动手调整主题底层文件。

推荐阅读：

《WordPress短代码怎么用？》

《WordPress锚链接怎么设置》

《WordPress页面标题隐藏的4种方法》

《WordPress修改最大文件限制的5种方法》