如何将自定义 CSS 添加到您的 WordPress 子主题
已发表: 2022-10-17如果您想为您的 WordPress 子主题添加自定义 CSS,您首先需要创建一个新的样式表。 为此,您可以使用 Notepad++ 之类的文本编辑器或 Dreamweaver 之类的代码编辑器。 保存新样式表后,您需要将其上传到子主题的目录。 最简单的方法是使用 FTP 客户端。 一旦您的新样式表在您的子主题目录中,您需要将其加入队列。 为此,您需要将以下代码添加到子主题的 functions.php 文件中: wp_enqueue_style( 'child-theme-styles', get_stylesheet_uri() ); 此代码将告诉 WordPress 在父主题的样式表之后加载您的新样式表。 这就是为您的 WordPress 子主题添加自定义 CSS 的全部内容!
创建子主题后,您可以开始自定义其设计和配置。 您可以使用层叠样式表 (CSS) 以最简单的方式自定义您的子主题。 您的子主题都包含一个名为 style.css 的文件,其中存储了管理您网站外观的规则。 在大多数网络浏览器中,您可以在浏览时检查网站的 CSS。 子主题文件优先于 WordPress 中父主题文件夹中的相应文件。 除了页眉、页脚、页面布局和侧边栏之外,还可以创建独立文件。 子主题文件夹中只有少数文件将包含在您网站的演示文稿中。
转到您的 WordPress 仪表板并选择外观。 您的孩子主题应该是您唯一的主题,因为您需要在上面放一张图片。 当提示这样做时,单击主题名称旁边的激活按钮,您的网站将照常打开。
如何在子主题 WordPress 中将 Css 文件排入队列?

在 WordPress 中排队文件是将文件加载到 WordPress 核心的过程。 这可以通过 functions.php 文件或使用插件来完成。 使用子主题时,您需要自己将文件排入队列。 正确的方法是使用 wp_enqueue_scripts 动作挂钩。 这个钩子允许您将文件加载到文档的头部,这是应该加载CSS 文件的地方。 要使用这个钩子,你首先需要创建一个函数来加载你的 CSS 文件。 这个函数应该被添加到你的子主题的functions.php 文件中。 一旦你的函数被添加到functions.php,你就可以使用 wp_enqueue_scripts 钩子来调用你的函数。 您的函数应如下所示: function my_theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . ' /style.css' ); } add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles'); 此函数将在父主题的 CSS 文件之后加载您的 CSS 文件。 这很重要,因为它将确保您的 CSS 文件覆盖父主题中的任何样式。
使用 Themename-style 函数加载样式表
如果有给定的 URI,样式表将由函数 themename-style 加载。
如何将代码添加到子主题?
为了向子主题添加代码,您首先需要创建一个子主题。 这可以通过在主题目录中创建一个新文件夹并添加样式表来完成。 然后,您可以将代码添加到此样式表中。
如果您想添加自己的代码,最好的选择是使用子主题。 子主题可用于修改 WordPress 主题,而不修改父主题的文件。 Zakra 儿童主题可直接从起始页面下载。 在 zakra-child 文件夹中创建一个名为 style.css 的文件,后跟如下所示的信息。 如有必要,通过插入来保存文件。 请确保在已安装的主题中,父主题与子主题一起安装。 您可以通过调整将代码添加到模板文件。 如果要对 header.php 文件进行更改或添加额外代码,请复制父主题的文件并将其粘贴到子主题中。
如何将 CSS 添加到 WordPress 中的特定页面?
要添加新插件,请登录您的 WordPress 管理面板并转到插件菜单。 您可以通过在搜索字段中输入 Post/ Page custom CSS来搜索特定插件。 然后可以通过单击“立即安装”按钮完成安装。
在本文中,我将向您介绍如何在特定的 WordPress 页面上使用自定义 CSS。 在应用样式的页面正文中定位页面特定类至关重要。 您需要输入 CSS 代码才能获得样式效果。 您可以查看托管在 WordPress 后端上的 css 文件。 如果您想将样式应用于同一页面上的多个标签,您可以进行以下操作: 这可以通过以相同方式设置多个页面的样式来完成。 多行代码效率低下且耗时。 在一行代码中为多个页面编写 CSS 时,这是一种更有效的方法。
使用自定义 CSS 创建博客页面就像创建页面一样简单。 如果您想为帖子设置样式,则不会使用 page-id; 相反,您将使用唯一的 post-id。 以下是如何设置特定博客文章样式的示例。

Enqueue Css WordPress 儿童主题
CSS 是一种样式表语言,用于描述以标记语言编写的文档的呈现方式。 样式表是一组规则,它们告诉 Web 浏览器如何显示以 HTML 或 XML 编写的文档。
CSS 用于设置所有 HTML 标记的样式,包括文档的正文、标题、段落和其他文本片段。 CSS 也可用于设置表格元素、网格元素和图像的显示样式。
如何在 WordPress 主题中添加 Css 文件
要自定义仪表板,请转到外观 - 常规并向下滚动到页面底部。 您将能够使用内置工具将任何 CSS 代码添加到页面。
如果你想做出很大的改变,你应该考虑一下。 我们将在本教程中介绍四种为 WordPress 创建自定义 CSS 的技术。 可以使用定制器或子主题创建自定义 CSS。 当您切换到另一个主题时,您的自定义 CSS 将丢失。 下面的说明将指导您在文本区域中输入您的样式规则。 在这种情况下,您将需要创建自己的 CSS。 在定制器侧边栏的底部,您可以使用小设备图标(台式机、平板电脑、移动设备)来测试不同屏幕尺寸的主题。
除了允许您将独立于主题的 CSS添加到您的站点之外,自定义 CSS 插件还可以让您轻松集成自定义 CSS。 如果你想显着改变主题的 CSS,子主题是个好主意。 您可以使用子主题覆盖父主题的文件,例如 CSS、PHP 和图像等静态资源。 我们将在本教程中使用简单的自定义 CSS 来完成同样的事情,而无需任何额外的配置。 风格。 可以使用您选择的代码编辑器(例如 Atom 或 Visual Studio Code)或 WordPress 管理区域的外观菜单来编辑 CSS。 如果您不想接触代码库,可以使用定制器或定制器。
要调用外部 CSS 文件,请确保 WordPress 核心知道您在使用什么。 如果您想自定义孩子的主题,可以通过创建子主题来实现。 为了给您的子主题添加自定义样式规则,您必须首先修改 style.html 文件。 要制作外部 CSS 文件,您必须首先修改 functions.php。 在 ThemeForest 上,有数以千计的 WordPress 主题可供选择。
如何创建子主题
子主题是继承另一个主题(称为父主题)功能的主题。 当您想要更改现有主题时,通常会使用子主题。
要创建子主题,您需要创建一个新文件夹和两个文件:style.css 和 functions.php。
在新文件夹中,创建一个名为 style.css 的文件并添加以下代码:
/*
主题名称:儿童主题
模板:父主题
*/
@import url(“../parent-theme/style.css”);
此代码告诉 WordPress 使用父主题的样式表。
接下来,创建一个名为 functions.php 的文件并添加以下代码:
php
add_action('wp_enqueue_scripts','my_theme_enqueue_styles');
功能 my_theme_enqueue_styles() {
wp_enqueue_style('父样式',get_template_directory_uri()。'/style.css');
}
? >
此代码告诉 WordPress 将父主题的样式表排入队列。
现在,当您激活子主题时,它将继承父主题的样式和功能。 然后您可以对子主题的样式表和functions.php 文件进行更改,这些更改将反映在您网站的前端。
可以更改子主题的功能,但与父主题的功能不同。 孩子的主题与他或她父母的主题是分开的,不会影响他或她的父母。 当您使用子主题时,您可以更轻松地维护和更新您的网站。 您还可以避免覆盖和危害您网站的风格。 子主题的内容类似于父主题的内容。 此类别包括图像和 JavaScript 资产以及模板文件和函数。 如果不指定特定的代码行,则无需再次对style.css 文件进行编码。
创建 WordPress 子主题的最简单方法之一是使用插件。 单击下拉菜单时,系统将提示您选择自己的父主题。 如果您的网站上有多个主题,请确保它们都是为您定制的。 下一步是定义孩子的主题并写下描述。 或者,您可以直接从此页面向插件的创建者提交支持请求。 如果您使用高级或受限主题作为您的家长,您可能无法执行此步骤。 您不需要丢失您的网站设置,因此请通过备份您的网站来保存它们。
当您手动创建 WordPress 子主题时,您可以在以后对主题进行任何更改。 第一步是为您孩子的主题创建一个文件夹。 第二步是为您孩子的主题创建样式表。 应导入父主题样式表和子主题样式表。 在第 4 步中,您需要将 style.css 文件添加到您刚刚创建的目录文件夹中。 外观可用于启用子主题。 作为子主题,您可以轻松地编辑父主题,而无需直接经历编辑主题的过程。
如果您选择子主题,您可以使用子主题轻松更改现有网站。 此外,您必须找到满足您特定要求的托管服务提供商。 DreamHost 以具有竞争力的价格提供共享主机包,优先考虑网站性能。