清远网站建设：如何将自定义代码片段添加到您的WordPress网站

2019.08.09 mf_web

124

如果您想扩展具有自定义功能的WordPress网站，您经常需要向代码库添加自定义代码段。事实上，网络上充满了支持论坛和文章，为您提供了需要添加到WordPress网站的自定义代码段。如果你是初学者，这可能会非常令人生畏，甚至让你放弃努力。但是，你不应该这样做，因为它真的不那么难，并且在这个过程中你也可以依赖很棒的插件。清远网站建设

1.从备份开始

在触摸代码库之前，请始终备份您的站点，以便在出现任何问题时可以快速返回到以前的版本。大多数托管服务提供商都可以选择从cPanel创建完整的网站备份。此外，还有许多很棒的备份插件，您可以使用它们从WordPress管理员创建站点备份。

如果您想100％安全，那么创建您网站的本地副本也是一个好主意。这样，您可以测试自定义代码段在开始在生产中使用之前是否确实没有破坏网站上的任何内容。

2.检查自定义代码的类型

您可以在网上找到的与WordPress相关的自定义代码段通常分为两类。它们是CSS或PHP代码段。CSS用于布局和设计元素，而PHP用于后端功能。即使您对这些语言一无所知，也可以通过语法轻松识别它们。

CSS语法很容易识别，因为它始终遵循以下结构：

五

.classname {

color: #111111;

background: #efefef;

display: block;

}

在括号内总是有一堆属性 - 值对，每行一个。

PHP语法有点复杂。识别它的最简单方法是寻找WordPress开发人员经常在其PHP代码中使用的特殊提示。您可以在（几乎）每个自定义PHP代码段中找到的提示如下：

该function()关键字
add_action()
add_filter()

如果您在作者解释代码片段的文本中找到“将其添加到主题的functions.php文件中”，那么您可以确定它也是一个PHP代码段。如果您无法确定代码段的类型，您也可以向作者询问。

3.通过自定义程序添加自定义CSS

较新版本的WordPress允许您使用Theme Customizer将自定义CSS添加到您的站点。您可以通过单击Appearance > Customize管理区域中的菜单来访问自定义程序。

Customizer打开站点的前端，并在左侧添加垂直管理面板。您可以通过此面板访问自定义选项。选项可能因主题而异，但是自WordPress 4.7起，所有主题都包含“附加CSS”选项，您可以在其中添加自定义CSS代码。

在下图中，您可以看到我添加了一个示例CSS代码段。您需要以相同的方式添加自己的自定义代码。WP Customizer有一个内置的CSS linter来检查CSS中的错误，这也是个好消息。如果linter在您的自定义代码中发现任何错误，它将通过错误消息通知您。

定制器UI

4.使用子主题添加自定义CSS或PHP

如果您只想在WordPress网站上添加几行CSS，则不值得创建子主题，因为使用Customizer非常容易。但是，如果要添加自定义CSS和PHP，它是最佳解决方案。一个儿童主题涉及到其父主题相同的孩子的方式与他们的父母。它继承了它的所有样式和功能，但您也可以为其添加自定义样式和功能。

您可以将子主题添加到主WordPress主题，您可以从官方WordPress主题存储库下载或从商业网站（如ThemeForest）购买。虽然可以手动创建子主题并将其上传到服务器，但使用子主题创建器插件创建它更容易，更安全，更快捷。

虽然有一堆儿童主题创作者插件，但最简单的是Child Themify。它没有任何花哨的选择，只需单击即可快速完成工作。您可以使用Plugins > Add NewWordPress管理员中的菜单安装和激活插件。

安装Child Themify WordPress插件

该插件会在管理区域Create Child Theme的Appearance菜单中添加一个新的子菜单。单击菜单，然后选择要为其创建子主题的父主题。然后，只需为您的孩子主题命名。

为了清楚起见，WordPress建议对子主题使用某种命名约定。但是，如果需要，您可以为您的子主题指定任何其他名称。如果您想遵循WordPress约定，只需在父主题的名称后面添加“Child”字样。例如，“二十七岁”的儿童主题将是“二十七岁儿童”。

使用Child Themify将儿童主题添加到WordPress

创建子主题后，您可以Appearance > Themes在WordPress管理员的菜单中找到所有其他主题。

WordPress管理员中的新子主题

现在，您可以使用单击Appearance > Editor菜单时可以找到的主题编辑器将自定义CSS和PHP代码添加到子主题。

在主题编辑器中，您需要选择要编辑的主题。在页面右侧，您可以找到“选择要编辑的主题”下拉菜单。在此处选择您的子主题，然后单击下拉列表旁边的“选择”按钮。

WordPress主题编辑器选择儿童主题

在默认的子主题中，您将找到两个文件：style.css自定义CSS和functions.php自定义PHP。

将自定义CSS添加到您的子主题

要将自定义CSS代码添加到子主题，请选择style.css屏幕右侧的文件。您需要在@import规则下面的文件底部添加自定义代码。

就像Customizer一样，Theme Editor也有一个CSS内置的linter。因此，您不必担心错误，linter会通知您。完成后，单击页面底部的“更新文件”按钮。

在主题编辑器中添加自定义CSS

将自定义PHP添加到您的子主题

您需要将自定义PHP代码添加到functions.php文件中。您可以style.css在屏幕右侧找到此文件。该functions.php文件包含子主题的自定义主题功能。

您的自定义PHP代码将转到文件的底部。如果是空文件，则需要在<?php开始标记之后添加它，如下面的屏幕截图所示（您可以看到的简短示例代码删除了非管理员用户的管理栏）。请注意，WordPress不会检查PHP代码中的错误。准备好进行更改后，单击屏幕底部的“更新文件”。

在主题编辑器中添加自定义PHP代码

5.添加特定于站点的PHP代码

将PHP代码添加到子主题的问题是，当您开始使用新主题时，您将失去自定义功能。这不是CSS的问题，因为CSS操纵特定主题的样式，因此如果激活新主题，则还需要使用新的CSS。

幸运的是，可以将特定于站点的PHP添加到WordPress。此代码独立于主题，因此在主题之间切换时不会丢失它。

虽然可以手动创建特定于站点的插件，但您可以添加自定义代码，但这需要一些工作并且存在一些安全风险。但是，您也可以使用免费的Code Snippets插件执行相同的操作。

WordPress的代码片段插件

通过WordPress区域中的“插件”菜单安装并激活插件。Code Snippets插件为您的后端添加了一个新的“Snippets”菜单。在这里，您可以添加自定义PHP片段，就像将常规博客帖子添加到WordPress一样。这是一个出色的解决方案，因为您可以保持自定义代码整洁，并分别轻松编辑和删除它们。

只需将自定义代码复制粘贴到“添加新代码段”编辑器中，然后选择要运行代码段的位置即可。在大多数情况下，“Run snippet everywhere”选项将是合适的。然后，将标题，描述和一些标签（如果需要）添加到自定义PHP并单击“保存更改并激活”按钮。

为代码片段插件添加新的代码段屏幕