• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载

如何使用 CSS 自定义 WordPress 主题

当您想学习如何使css 自定义 wordpress 主题时,您需要知道的第一件事就是如何在主题本身中编辑文件。

无论您是要自定义 CSS 还是 html,编辑主题文件的过程实际上都是相同的,在本系列之前的教程中,我们已经介绍了这个过程,目的是修改 HTML。

因此,为了避免重蹈覆辙,请查看“如何在 WordPress 主题中编辑 HTML ”和“如何使用 XAMPP 在本地安装 WordPress ”以了解:

  • 通过主题编辑器编辑文件

  • 通过 FTP 或远程连接下载和上传文件

  • 为什么您应该考虑在子主题中进行更改

  • 通过 XAMPP 离线编辑

在已经介绍了编辑主题文件的方法之后,在本教程中,我们将通过学习以下主题来专注于如何在 WordPress 中编辑 css:

  • 如何通过主题定制器添加自定义 CSS

  • 如何识别主题正在使用的样式表

  • 如何识别需要更改哪些 CSS 以及在何处更改,以便自定义主题的特定部分

注意:本文假设您具有 CSS 的基本知识,但不一定知道如何在 WordPress 中编辑 CSS。


如何在 WordPress 主题定制器中编辑 CSS

WordPress 有一个专门的区域,您可以在其中添加自己的自定义 CSS 代码。此代码将在正确的时间加载,以确保它覆盖主题的默认样式,并且使用此方法不会对主题文件进行任何直接更改。

在 WordPress 管理面板的左侧边栏菜单中,转到外观>自定义:


如何使用 CSS 自定义 WordPress 主题  第1张


这将带您进入主题自定义区域,您可以在其中单击菜单项Additional CSS:


如何使用 CSS 自定义 WordPress 主题  第2张


将出现一个大字段,您可以在其中添加您喜欢的任何自定义 CSS:


如何使用 CSS 自定义 WordPress 主题  第3张


完成添加自定义代码后,单击左侧边栏顶部的蓝色“发布”按钮保存更改。

如何识别主题的样式表

如果您不想使用 Theme Customizer 中的Additonal CSS区域,而是想直接编辑主题 CSS,您将需要一种方法来找出主题实际用于样式的文件。

在大多数情况下,主题将使用 WordPress 的标准结构,并在主题的根目录中有一个名为“style.css”的文件。事实上,这是一个必不可少的主题文件,因此您总能在任何主题中找到它。


如何使用 CSS 自定义 WordPress 主题  第4张


但是,当您打开它进行编辑时,您可能会发现它没有代码,并且开发人员正在从主题中的其他位置加载样式。或者,您甚至可能会发现它们正在加载多个样式表文件。

有两种方法可以检查主题正在使用哪些样式表。

1.检查头部代码

第一种方法是检查<head>主题的代码。您可以通过右键单击页面上的任意位置并选择View Page Source来执行此操作,然后找到<head>...</head>标签。

在这些标签之间,寻找<link>也有rel='stylesheet'. 然后查看其中哪些来自您的主题目录。样式表的 URL 将告诉您在主题结构中的何处可以找到它们。


如何使用 CSS 自定义 WordPress 主题  第5张


请注意,如果您正在运行一个将您网站的所有样式表组合并缩小到一个文件中的插件,则此技术将不起作用,因为您将看到的只是该单个文件的 URL。相反,使用技术二,检查函数文件。

2. 检查函数文件

每当主题使用样式表时,它必须通过名为wp_enqueue_style(). 因此,我们可以通过查找主题对这个函数的使用来准确地看到主题加载了哪些样式表。

每个主题在其根目录中都有一个名为“functions.php”的文件。该wp_enqueue_style()函数的使用通常在此文件中,因此打开它并开始搜索函数名称。

当您找到wp_enqueue_style()函数的实例时,在括号之间查找第二个参数,即第一个逗号之后的文本位。该文本向您显示样式表的位置。例如:

wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');

在上面的代码中,第二个参数是:

get_template_directory_uri() . '/css/mainstyle.css')

这告诉我们样式表位于名为“css”的主题子目录中,并且其文件名为“mainstyle.css”。

如何确定要更改的 CSS

一旦您知道如何添加或编辑主题 CSS,接下来要学习的是如何找出您实际需要更改的代码。

最好的方法是使用浏览器中的开发人员工具,最好是 chrome 或 Firefox,因为它们的工具质量高。

例如,假设您想更改帖子标题的字体大小。右键单击其中一个帖子标题并选择“检查”选项:


如何使用 CSS 自定义 WordPress 主题  第6张


这将打开开发人员工具面板。在其样式选项卡中查找font-size属性。

如果您没有看到,则浏览器可能会向您显示父元素或子元素,因此请在“元素”选项卡中尝试单击附近的元素,直到找到一个既能准确突出帖子标题文本的形状并具有font-size属性的元素:


如何使用 CSS 自定义 WordPress 主题  第7张


现在,在样式选项卡中,尝试更改font-size属性的值。如果您在浏览器窗口中看到文本更改大小,您就知道您找到了正确的 CSS。

要了解此 CSS 在样式表中的位置,请查看您刚刚编辑font-size值的位置的右上角。您应该看到一个文件名,然后是一个冒号,然后是一个数字。


如何使用 CSS 自定义 WordPress 主题  第8张


文件名告诉您代码在哪个样式表中,冒号后面的数字告诉您将在哪一行找到该代码。例如,上图显示了第 4054 行“style.css”文件中的代码。如果您正在直接编辑主题样式表,您现在可以打开它,转到有问题的行号,然后更改 CSS。

如果您在Theme Customizer的Additional CSS字段中工作,或者在子主题中工作,您还需要定位与原始 CSS 相同的选择器,以便您可以使用自己的样式覆盖它。

回到浏览器开发者工具中,寻找font-size刚刚更改的属性上方的选择器。它位于我们刚刚查看的样式表文件和行号规范的左侧。


如何使用 CSS 自定义 WordPress 主题  第9张


复制整个选择器并将其粘贴到您的自定义代码中,然后使用它来正确定位您修改后的font-size值。

始终检查烘焙主题选项

在你去定制 CSS 的麻烦之前,总是在主题定制器中检查开发人员可能已经融入主题的选项。

主题通常具有不需要自定义代码的非常全面的自定义选项。因此,在编辑任何 CSS 之前,您可以通过查看是否已经有一种按钮方式来进行所需的更改,从而为自己节省大量时间。

如何逐步自定义 WordPress 主题

既然我们已经讨论了如何自定义 WordPress 主题的 CSS 和 HTML,您可能会有点不确定从哪里开始。因此,让我们将事情归结为要遵循的基本步骤列表:

  1. 检查主题定制器,看看是否已经有一个可用的选项可以促进您想要进行的更改

  2. 如果没有,并且您需要添加一些简单的自定义 CSS,请使用Theme Customizer中的Additional CSS字段

  3. 如果您需要对 HTML 或 CSS 进行更广泛的自定义,请考虑将它们放在子主题中

  4. 要直接对主题进行小的更改,请使用内置主题编辑器中的 WordPress

  5. 要直接对主题进行更深入的更改,请使用 FTP、远程连接或使用 XAMPP 完全脱机工作

  6. 选择编辑方法后,通过检查站点的<head>代码或查看主题的“functions.php”来识别主题的样式表以使用该wp_enqueue_style()功能

  7. 使用Chrome 或 Firefox 开发者工具的Inspect功能定位需要修改的 CSS 的特定行及其相关的选择器

当您深入了解上述所有内容并熟悉时,您将开始了解 WordPress 的可定制性。

在不知不觉中,您将制作自己的完全原创的儿童主题并创建自己的设计。

碰巧的是,学习“如何在 WordPress 中制作子主题”是本系列的下一个教程。敬请关注!




文章目录
  • 如何在 WordPress 主题定制器中编辑 CSS
  • 如何识别主题的样式表
    • 1.检查头部代码
    • 2. 检查函数文件
  • 如何确定要更改的 CSS
  • 始终检查烘焙主题选项
  • 如何逐步自定义 WordPress 主题