将自定义CSS代码添加到WordPress博客的方法有多种。

今天,我将向您介绍两种不同方法的优缺点,以便您能够选择最适合自己的一种。

但是之前,如果您从未安装过WordPress发现 如何安装WordPress博客7步骤 et 如何找到,安装和你的博客激活WordPress主题 

然后回到为什么我们在这里。

如何找到要自定义的项目

一旦隔离了 您要更改的WordPress主题 (例如文章标题),您需要 确定CSS属性 应用于它,以便您可以进行适当的更改。 幸运的是,此过程并不复杂。

CSS使用选择器来确定哪些元素将经历不同的特定更改。 通常,这可以通过指定“  “元素(或DOM元素)。 但是,CSS也可以用于定义整个元素的布局(例如,标签“ ”)或使用标签的标识符。

幸运的是,流行的浏览器允许我们单击几下即可看到应用于页面元素的不同选择器和声明。 例如,在Google Chrome上,您只需要突出显示文档的特定部分,然后右键单击即可,如下面的示例所示。

blogpascher检查

通过点击 检查元素 在出现的下拉菜单中,您将在新窗口中看到页面的HTML代码,其中选中的项目在右侧窗口中突出显示(或以下)。 你可以看到下面的例子。

blogpascher车标

这些元素的文字(或属性)以红色突出显示可通过检查代码来显示适用于您突出显示的项目的不同特定样式。

另请参阅: 如何使用CSS添加下拉菜单中的可视化编辑器

例如,元素“ 字体大小 告诉您突出显示的项目中显示的字体大小为13像素。 描述符用花括号括起来,并在选择符之前。 相应的样式表文件的名称显示在选择器的右侧。

一旦记住了这些信息,更改样式就变得容易了。 例如,如果要将字体从13px更改为14px,则只需查找样式表文件,即与突出显示的项之一相对应的选择器。 通常采用以下形式:(« #.block-插件内容信息”)。 然后您可以修改属性的不同值。

您可以在Firefox上执行相同的操作,只需突出显示页面的特定部分,右键单击该项目,然后选择“ 检查元素 在出现的菜单中。

如何WordPress和CSS一起工作

这是一个事实 WordPress主题 以不同的方式创建。 所以请记住,您的 WordPress主题 可能不会 100% 符合您在以下部分中阅读的内容。

也就是说,您的WordPress博客上使用的CSS很可能位于名为“ style.css文件 ” 这是任何类型的网站(不仅仅是WordPress)的样式表的通用名称。

另见: 如何调整WordPress的图像的Gravatar

现在是时候进行不同的编辑过程了。

方法#1:编辑WordPress主题的样式文件

有两种方法可以访问主题的style.css文件。

首先是从WordPress仪表板执行此操作。 在左侧菜单上,选择菜单“ Apparence “然后” 发布 “。

菜单编辑器,在画面边缘

进入编辑器页面后,您将在页面右侧的垂直栏中看到文件列表。 滚动浏览文件列表。 您会看到一个名为“ 样式表的style.css 在页面底部。

如果单击此文件的名称,它将被加载并显示在中间的编辑器中。 您可以使用此屏幕来编辑文件。

菜单WordPress的编辑器,在代码

查找样式表的另一种方法是浏览托管服务提供商的操作系统并在 WordPress主题 (使用FTP客户端). 确切的位置将因您的托管服务提供商而异。 在下面显示的示例中,网站名称 (在我们的例子thecare)是的public_html文件夹下的文件夹。

由于安装了WordPress,因此您可以在“ thecare”中看到wp-content文件夹。 wp-content子文件夹是另一个名为“ WP主题",这是所有 WordPress主题 已安装。

在此网站上使用的主题为“ 订阅电子邮件 »,样式文件« style.css文件 位于文件夹“ 家长通讯 “。

通讯父文件夹,800x401

方法2:使用插件修改CSS

也许编辑WordPress博客CSS的最便捷方法是 使用插件.

使用插件的主要优点之一与子主题相似。 是 您更新WordPress主题,您的更改不会被覆盖,因为它们将单独存储,而不是存储在主题文件中。 当然,另一个优点是您不必创建子主题。

这里有一些高级插件,您也可以使用它们来修改您的 CSS 代码 WordPress主题 :

1. Yellow Pencil:Visual CSS样式编辑器

Yellow Pencil是一种视觉样式编辑器,您可以将其与任何主题一起使用,以在几分钟内(字体,颜色,动画等)个性化您的网站。YellowPencil Visual CSS样式编辑器wordpress插件

Ce WordPress插件 Premium 将通过以下方式创建 CSS 样式 背景 当您像玩游戏一样玩这些色彩时,它是为初学者和有经验的用户设计的。

发现我们的 5插件 WordPress 显示通知

不需要编码知识。 但是,那 WordPress插件 为喜欢编码的人提供了一个很好的 CSS 编辑器。 您可以使用此编辑器实时编码并自定义您的 CSS。

下载 | 演示 | 虚拟主机

2。 Gutenberg的自定义JS和CSS

Le WordPress插件 高级自定义 JS 和 CSS 古腾堡 将允许您为WordPress帖子和页面向WYSIWYG编辑器添加无限数量的自定义样式。 它与WordPress的Gutenberg版本完全兼容。

古腾堡WordPress插件的自定义JS和CSS

您可以使用易于使用的CSS编辑器简单地创建新样式。 该WordPress插件扩展了的功能 自定义字段 网站上的内容,并允许您使用动态且功能强大的个性化模块来修改自定义字段。 和功能 实时预览 这个WordPress插件的使用使其非常舒适和用户友好。

下载 | 演示 | 虚拟主机

3。 SiteOrigin CSS

到目前为止,WordPress插件在此列表中提供最多的选项。 后者的神奇之处在于它是免费的。 该WordPress插件是定制器中唯一找不到的插件。

SiteOrigin CSS-WordPress插件

安装并激活插件后,您需要导航到以下位置“ 外观>自定义CSS 访问插件的CSS版本。 在此页面上,您可以看到不提供实时预览的文本编辑器。 

另请阅读我们的文章 10 WordPress插件可以促进您网站的销售

要访问后者,必须单击出现在编辑器上方左侧的两个按钮之一。 带有眼睛图标的按钮将弹出一个视觉CSS编辑器,爱好者可以欣赏。 带有扩展箭头的图标将显示一个文本编辑器,这将精通CSS代码。

下载 | 演示 | 虚拟主机

4。 简单的自定义CSS

简单的自定义CSS 是最受欢迎的插件之一。

简单的自定义CSS-WordPress插件WordPress.org

发现我们的 如何快速建立博客:管理CSS和JS文件.

它已经安装了100次以上,并获得了五星级的评价。

下载 | 演示 | 虚拟主机

5。 WP添加自定义CSS

WP添加自定义CSS 是一个插件,可让您 更改WordPress博客的布局 整篇或单篇文章。 如果您要在自定义项目中寻求灵活性,这是一个很好的选择。

WP-附加定制

该插件已下载10.000次以上,目前获得4,3星评级。

下载 | 演示 | 虚拟主机

6。 主题吸毒者自定义CSS

如果您正在寻找可以实时预览所做更改的解决方案,则可以考虑使用 主题Junkie自定义CSS

主题迷,CSS

此解决方案将自定义CSS管理器添加到仪表板,您可以在其中添加自己的样式。 它还提供了一种替代 使用儿童主题.

下载 | 演示 | 虚拟主机

其他推荐资源

我们还邀请您参考以下资源,以进一步掌握和控制网站和博客。

结论

这里! 就是本教程的内容了,希望您能设法通过两种方法将自定义CSS代码添加到WordPress博客中,如果有的话 评论 或建议,请随时在保留的部分中告诉我们。

但是,您也可以咨询我们的 RESSOURCES,如果您需要更多的元素来执行创建Internet网站的项目,请参考我们关于 WordPress博客创建 或者那个 Divi:有史以来最好的WordPress主题.

如果您喜欢这篇文章,请不要犹豫 在您喜欢的社交网络上分享

...