创建自定义 WordPress 网站 – 选项

已发表: 2020-10-16

今天有大量的 WordPress 网站是使用预先构建的主题创建的。在许多情况下，该主题将提供一些可以导入的“演示”网站。尽管您想要定制您的 WordPress 网站的可能性很高，有时甚至需要大量定制，以实现最适合您的业务或博客的视觉风格。

在深入定制您的 WordPress 网站之前，重要的是首先仔细考虑您想要从新设计中获得什么，因为这将在一定程度上决定用于实现此目的的方法。重要的是，您所做的任何更新都可以保存并且不会被覆盖，这显然至关重要，例如在更新主题文件或 WordPress 核心本身时。

一个常见的误解是，自定义 WordPress 网站时的“正确”步骤是首先创建子主题。这个子主题位于我们的父主题旁边，是进行任何设计更改（特别是主题的 CSS 文件）的地方。毫无疑问，在自定义网站样式或调整功能时创建和使用子主题可能是最佳实践。但是，有很多方法可以自定义您的 WordPress 网站，而无需您这样做。这是创造新闻，特别是如果您是非编码人员，因为子主题确实增加了网站的复杂性。任何可以降低复杂性并使编辑网站设计更容易的事情都必须受到欢迎！

如果需要对主题进行广泛的自定义，那么使用子主题是有意义的。然而，对于简单的调整和更新，子主题是矫枉过正的。我们有一些关于如何在没有子主题的情况下快速轻松地自定义网站的建议。最重要的是，它们是强大的方法，可以保留您在以后更新主题或 WordPress 核心时所做的任何更新。让我们来看看。

WordPress 定制器

WordPress 了解您需要调整网站的外观。为了帮助解决这个问题，它们包括一个默认的内置定制器，无论您使用什么主题，它都允许您对网站设计进行一系列更新。 WordPress 定制器非常易于使用，可以通过 WP-Admin 访问外观 > 定制菜单。让我们看看这在实践中是如何工作的。

下图显示了当前默认 WordPress 主题（二十二十）处于活动状态时简单帖子的外观。

自定义 WordPress 网站 - WordPress 定制器 - 默认帖子标题

现在让我们玩一下我们的定制器选项。从 WP-Admin 中前往外观 > 自定义，或单击页面和帖子上显示的黑色菜单栏中的自定义链接。

当它加载时，您会看到一系列选项，所有这些选项都控制着您网站的不同元素，例如配色方案和徽标。在这种情况下，我们可以通过单击“站点标识”来更改我们的网站徽标。我们不仅在此部分上传了新徽标，还添加了网站图标和标题/标语。

完成后，我们点击“颜色”并从那里更改我们网站的背景颜色以及添加背景纹理图像。

只需点击几下，我们就彻底改变了我们网站的外观，并且全部使用默认的 WordPress 定制器。好的！

如果您拥有一些 CSS 技能，您可以在使用 CSS 更改网站设计方面走得更远。 WordPress 定制器具有出色的“附加 CSS”编辑器，可让您添加 CSS 并实时查看其影响。但是，在您单击定制器左上角的“发布”按钮之前，更改不会生效。

这是我们用一些简单的 CSS 实现的：

我想你会同意颜色现在匹配得更好了。我们还让“搜索”一词从放大镜图标下方消失，看起来更整洁。此外，我们更改了字体系列和颜色。

主题定制器

为您的网站选择正确的主题可以为您节省大量自定义时间，因为无论如何，主题开发人员已经完成了很多使网站看起来“恰到好处”的工作。毕竟，既然您本可以选择一个主题来为您提供更接近您一开始想要的设计，为什么还要花费数小时编写 CSS 和更新选项。

许多主题将包括额外的自定义选项，通常通过他们自己定制的“选项面板”提供。此选项面板的功能和可用性因主题而异。也许不足为奇的是，与不太复杂的主题相比，编码更好且维护得更好的主题往往具有更丰富、更强大的选项面板。

我们最喜欢的主题之一是 Astra。拥有超过 1,000,000 名用户，由于其强大的编码、良好的设计和定期更新，它显然非常受欢迎。

正如您所料，Astra 带有一个有用的选项面板，允许您更改一系列设置，包括颜色、侧边栏选项、布局样式等等。如果您安装主题并从 WP-Admin 中前往外观菜单，您将能够通过“Astra 选项”子菜单访问此面板。

许多主题将包括一个选项面板，该面板提供了类似的一系列功能，使其成为一种快速简便的方式来自定义您的网站，而无需触摸一行代码或不需要子主题。这种易用性是 WordPress 与主题结合成为快速创建令人惊叹的网站的强大方式的众多原因之一。

使用 CSS 插件进行自定义

毫无疑问，从设计角度在网站上实施更改的最有效方法之一是添加或更改 CSS 代码。 CSS（或层叠样式表）描述了 HTML 元素如何在屏幕上显示——换句话说，它们的外观。如果没有 CSS，您的网站将根本没有样式元素，因此它非常重要。

即使您以前从未编写过代码，CSS 实际上也很容易学习和使用。当然，高级 CSS 可能需要一些时间来学习编写，但您会惊讶于通过谷歌搜索和练习可以实现的目标！

为了更新您网站上的 CSS，您需要 a) 直接编辑您网站上已经存在的 CSS 文件或 b) 使用允许您更新 CSS 的插件。选项 A 更难，因为您需要使用 FTP 客户端来访问您网站的 CSS 文件，而插件可以提供一个易于使用的编辑器，可以直接从 WordPress 管理员中访问。让我们看一下下面的几个 CSS 插件选项。

简单的 CSS 插件

一个流行的 CSS 插件是 Tom Usborne 的 Simple CSS。

简单的 CSS 使我们能够快速轻松地将 CSS 添加到我们的网站。更好的是，它在定制器中提供了一个实时预览编辑器，这意味着您可以立即查看您的代码是否正在生成您想要的外观。作为奖励，您还可以将 CSS 添加到特定页面或帖子，而不是（通常会发生）您的 CSS 更改更新站点范围。

自定义 WordPress 网站 - CSS 插件 - 简单的 CSS 插件菜单

简单的自定义 CSS & JS

Simple Custom CSS & JS 是另一个很棒的 CSS 插件。它的工作原理类似于上面提到的简单 CSS 插件，它允许您从 WordPress 管理员中更新您网站上的 CSS（和另一种编程语言 JS）代码。您还可以指定您的自定义 CSS 是否应在网站的页眉、页脚或正文中打印代码，这为您提供了更大的灵活性。