spot_img
HomeWordPress教程将自定义 CSS 添加到 WordPress + 常见错误的 2 种方法

将自定义 CSS 添加到 WordPress + 常见错误的 2 种方法

JasperAI 10000字免费额度试用

您是否曾经想更改网站外观的某些方面,但就是不知道如何做? 有一个解决方案——您可以将自定义 CSS(层叠样式表)添加到您的 WordPress 网站!

在本文中,我们将讨论您需要了解的有关 CSS 的所有信息,以及如何使用它来修改网站的整体外观。

将自定义 CSS 添加到 WordPress + 常见错误的 2 种方法

什么是 CSS?

CSS 是一种样式表语言,用于修改以 HTML 编写的网站基本结构的外观。 CSS 允许您为 HTML 标记分配不同的属性,例如颜色、大小、布局和显示。

您也可以定制某些 WordPress 主题的默认外观。 因此,如果您想创建所需的设计和外观,您可以将自定义 CSS 添加到您的 WordPress 网站。

使用块编辑器添加自定义 CSS 类

WordPress 5.9 更新为站点自定义带来了一些变化。 其中之一是自定义 CSS 的实现。

谷歌SEO优化服务

新的全站点编辑方法依赖于全局样式和基于每个块的设计,减少了对 CSS 和大量编码的需求。

但是,仍然可以向任何 WordPress 块添加自定义 CSS 类。

首先,通过导航到在样式表中定义 CSS 类 工具 -> 主题文件编辑器. 选择活动主题并打开 样式表 主题文件编辑 样式.css 文件。

WordPress 主题文件编辑器。

使用文本编辑器添加 CSS 类和代码。 例如,让我们添加一个 justify-class 类来对齐文本。

p.justify-class {
  text-align: justify; 
}

点击 更新文件 一旦你完成了。

WordPress divi主题

现在通过导航到打开站点编辑器 外貌 -> 网站编辑. 选择要自定义的块并通过单击打开其设置 设置 屏幕右上角的按钮。

WordPress 网站编辑器右上面板的设置按钮。

打开 先进的 下拉菜单并找到 额外的 CSS 类 部分在底部。 在文本字段中插入 CSS 类。

WordPress 站点编辑器面板底部的附加 CSS 类部分。

添加 justify-class 类后,块段落中的文本将被对齐。

在块编辑器中添加 CSS 类后的段落块。

您可以将多个 CSS 类添加到一个块中,方法是用空格分隔它们。

通过插件添加 WordPress 自定义 CSS

将新插件添加到您的 WordPress 网站

为 WordPress 实现自定义 CSS 的一种更简单的方法是使用插件。 有很多可供选择,所以让我们概述最流行的那些,看看它们是如何工作的。 我们在本指南中使用的所有工具都可以通过以下方式轻松安装 插件 -> 添加新的 WordPress 仪表板的一部分。

简单的自定义 CSS

为 WordPress 安装自定义 CSS 插件
使用 Simple Custom CSS 插件添加自定义 CSS

Simple Custom CSS 是社区中最流行的 WordPress 自定义 CSS 插件之一,可让您实现自己的样式或覆盖当前主题的 CSS。 即使您更改主题,您在此处设置的值也会保留。 一旦激活,该工具将可通过 外观 -> 自定义 CSS 部分。 使用它非常简单——只需在编辑器中输入您需要的任何值并保存更改!
如果你想看到变化,你需要做的就是刷新你的网站。

WP 添加自定义 CSS

为 WordPress 安装 WP 添加自定义 CSS 插件
使用 WP 添加自定义 CSS 插件添加自定义 CSS
将 WordPress 自定义 CSS 应用于单个帖子

WP Add Custom CSS 是另一个可以用来实现 WordPress 自定义 CSS 的好工具。 安装后,它将出现在仪表板的专用部分中。 通过它,您可以将 CSS 应用于整个网站。
方便的部分是您还将在每篇文章下拥有一个 CSS 编辑器。 因此,您可以应用不同的 CSS 规则 个人职位 如果需要的话。 就像以前的插件一样,所有的变化都可以通过刷新浏览器来查看。

网站来源 CSS

为 WordPress 安装 SiteOrigin CSS 插件
使用 SiteOrigin CSS 插件添加自定义 CSS
通过 SiteOrigin 的内置编辑器添加自定义 CSS

SiteOrigin CSS 是一种用户友好的交互式工具,用于添加 WordPress 自定义 CSS。 安装后,该工具将在 外观 -> 自定义 CSS 部分。 该插件具有方便的编辑器界面,您可以在其中选择站点的任何部分并使用内置工具或手动添加代码进行编辑。

简单的自定义 CSS 和 JS

为 WordPress 安装简单的自定义 CSS 和 JS 插件
使用简单自定义 CSS 和 JS 插件添加自定义 CSS
使用 Simple Custom CSS 和 JS 插件使 H1 标签更加丰富多彩

与早期条目相比,Simple Custom CSS ad JS 具有一些额外的功能。 其中之一是能够添加自定义 JavaScript 条目。 安装插件后,它将出现在仪表板下方的单独部分中。 在那里,您将能够像创建 WordPress 帖子一样创建自定义 CSS 条目。 为了测试它,我们改变了 H1 标签要多一点色彩。

使用主题定制器添加 WordPress 自定义 CSS

在 WordPress 中使用内置主题定制器
使用 WordPress 中的内置主题定制器调整自定义 CSS

无论您使用什么 WordPress 主题,您都可以使用内置的主题定制器调整 CSS。 导航 外观 -> 自定义 仪表板部分,向下滚动到页面底部,然后单击 额外的 CSS. 这将打开一个内置工具,允许您添加任何 CSS 代码。 它易于使用,可让您查看网站的手机和平板电脑版本。 恭喜! 您现在知道如何在没有任何插件的情况下在 WordPress 中应用自定义 CSS。

H10的年终大促

使用子主题添加 WordPress 自定义 CSS

另一种选择是创建一个 WordPress 子主题——它允许您修改父主题,而不会有任何破坏您的实时站点的风险。

如果您还不确定要做什么,可以先在子主题上测试您的自定义 CSS。 这样您就可以随心所欲地进行实验。

解决常见的 WordPress 自定义 CSS 问题

有时,在向 WordPress 添加自定义 CSS 时,您可能会遇到小问题。 让我们快速概述一些最常见的问题,看看我们如何解决它们。

变化没有出现

由于缓存,WordPress 自定义 CSS 可能无法显示。

如果您正在为网站缓存使用任何插件,则很有可能会缓存一些资源并从临时存储中提供这些资源以提高速度并降低资源使用率。 只需清除您的 WordPress 缓存,或暂时禁用此类插件。

确保事先清除浏览器缓存以查看应用的新更改——尤其是在启用缓存的情况下。

Hostinger 的 hPanel 上的缓存管理器

最后但并非最不重要的一点是,一些网络托管服务提供商(例如 Hostinger)提供服务器端内置缓存以帮助您的 WordPress 网站更好地运行。 您可以从 缓存管理器 在你的面板上。

拼写错误的 CSS 语法

拼写错误很容易被忽视,并且通常会阻止 WordPress 自定义 CSS 正确显示。 如果您没有看到任何更改出现并且您确定它没有被缓存,那么使用 CSS 验证器可能非常有用。 只需粘贴您的 CSS 并运行该工具。 它会显示任何错误或拼写错误,甚至指出哪一行有它们。

选择太多

有时使用 WordPress 自定义 CSS 可能会有点过火。 通过向选择器添加两个或多个引用,可能会导致冲突。

在现有样式表之上调出新样式表时,这种情况很常见。 如果您尝试更改 H2 标题但没有任何反应,请仔细检查现有条目的样式表。

高质量外链购买

出主意

虽然这不是一个真正的问题,但很多时候最困难的部分是弄清楚你想在 WordPress 中应用什么自定义 CSS。 这可能会让人非常头疼,因为您必须考虑很多因素。

这里有一些资源可以帮助您产生一些新鲜的想法:

结论

CSS 允许您设计网站内容的样式。 因此,向 WordPress 添加自定义 CSS 是使您的网站独一无二且更引人注目的好方法。

有四种方法可以这样做:

  • 使用块编辑器
  • 使用插件
  • 使用主题定制器
  • 通过儿童主题调整它

现在您已准备好调整网站的设计。 祝你好运!

JasperAI 10000字免费额度试用
作者

Domantas 以新颖的想法和开箱即用的方法带领内容和 SEO 团队向前发展。 凭借广泛的 SEO 和营销知识,他的目标是将 Hostinger 传播到世界的每个角落。 在空闲时间,Domantas 喜欢磨练自己的 Web 开发技能并到异国他乡旅行。

5分钟生成10篇英文软文article forge软件试用
siteground

【WordPress花园提醒您】如果想购买国外正版WordPress主题和插件,您需要一张VISA信用卡才能支付,这里我们推荐光大银行信用卡!赶快免费申请,别耽误了买插件哦!

guangda
WordPress花园官方账号
WordPress花园隶致力于为广大跨境电商和独立站爱好者提供优质的WordPress教程、Woocommerce教程、Facebook、Twitter、tiktok、Instagram教程和谷歌SEO教程等资料和对应的建站推广服务。关注‘哟派出海’公众号了解最新资讯。粉丝福利:Shopline免费独立站建设14天优惠 商务合作: [email protected]
RELATED ARTICLES