如何在不了解 CSS 的情况下定制 WordPress 网站？
我们将向您展示在没有CSS经验的情况下如何对WordPress网站进行重大的视觉更改。 但是首先，让我们花一点时间对WordPress进行一点欣赏。
旧wordpress接口
记住这一点？ 这就是当我们第一次爱上WordPress时的样子。 十一年后，我们仍然爱上了它，但是（令人庆幸的是）它已经改变了很多，几乎无法识别。
从简单的博客平台到世界上最流行的内容管理系统，WordPress现已成为成千上万个流行网站的基础，该平台上有一大批开发人员，而其他开发人员也为WordPress构建了如此多的主题和插件对很多人来说，卖掉他们是一份全职工作。 Themeforest可能是在线上最著名的主题商店，它们拥有近20,000个主题，其中大部分是针对WordPress的。 综上所述，您可以在54年内每天拥有一个完全不同的网站！
您很难找到可比较的产品，无论是付费产品还是免费产品，都可以轻松实现 非编码者可以轻松地从零访问一个功能全面的网站。
近年来，由于越来越多的页面构建器可以帮助用户轻松地将自己的设计整合在一起，因此我们已经看到自定义WordPress变得更加容易。 将这些强大的体系结构工具与不断增加的安全性，共享和注释插件列表结合起来，构建您一直想要的网站非常简单。
上面提到的所有内容都可以为您提供90％的方法； 在您信任的平台上需要的所有内容； 由于开发人员开发了出色的主题和插件而付出了艰辛的努力，因此看起来几乎完美。
但是，即使拥有最佳主题，您仍然总是希望进行一些小的更改。 很少的视觉编辑即可使主题成为您自己的主题，这与其他任何主题都不一样。 无论是倒圆角，加厚边框还是更改对象周围的阴影，正是这些更改使完美的主题变得完美。
上面提到的所有更改都归结为 自定义CSS。 如果您是设计师或开发人员，则很容易，但是如果您不是这样，则喜欢尝试读取矩阵。
进行CSS更改通常意味着使用为开发人员设计的工具，例如“ 浏览器检查器”之类的工具，以找到相关的CSS选择器并手动进行操作。 然后，您必须将该CSS复制为文本，然后将其粘贴到文本编辑器中，以确保该CSS仅包含所需的信息，并且没有选择诸如复选框或样式表名称之类的浏览器选项。 然后，您可以为您的WordPress网站创建一个子主题并将其复制到其中，或者使用现在包含如此多主题的自定义CSS框。 这是一个非常漫长的过程。 通过如此多的步骤，您犯错误的风险将大大增加，而故障排除可能是费时的事。
CSS Hero简介
就像页面构建器使更改WordPress网站的结构变得更加容易一样， CSS Hero也使可视化编辑成为可能。 作为非设计人员，您可能会想到一个角落，认为“使其弯曲，不会那么难”，但是随后您检查了进行此更改所需的代码，这令人望而生畏；
使用CSS Hero感觉更像是使用Photoshop或类似产品。 滑块可让您调整填充，边距，角落的锐度和字体大小等内容，而调色板则可让您调整默认外观，以更好地匹配您的品牌主题和样式。
甚至资深的设计师和CSS专家也喜欢用户友好的实时界面。 它只是使事情变得更顺畅，更快，更容易调整。
有多容易？ 就像安装插件一样简单。
CSS Hero没有附带冗长的说明手册，因为您不需要它。 我们将向您展示如何在几分钟内自定义您的网站。
开始使用
CSS Hero螺栓按钮
每次自定义都从单击蓝色的闪电开始。 这样就可以在您的网站的前端打开自定义CSS Hero菜单，而不会在仪表板上乱七八糟，进行更改，然后返回到最前面以查看它们的外观。 观察更改的发生过程。
CSS的工作由您自己决定，将其留在CSS Hero中，它将像一种魅力一样工作，而无需采取进一步的措施。 您也可以将其复制到 子主题或您的自定义CSS面板。 您CSS，您的规则。 让我们直接进入编辑！
悬停、目标、更改
在本演示中，我们使用“优雅主题”的Divi主题。 这是数十个“ 英雄就绪”主题之一 （这意味着我们已经添加了使它立即可用所需的所有选择器）。 如果您不使用Hero-Ready主题，则仍然可以将自己的类和ID直接添加到CSS Hero中，或者使用Rocket Mode ，但是稍后我们将继续介绍。
除了添加几个页面和一个博客帖子外，我们从Divi几乎“按原样”开始。 我们想向您展示CSS Hero对新主题的作用。 我们以博客文章为例，因为默认情况下它可能是Divi最普通的部分。 这是您无法使用内置页面构建器的唯一部分，因此您肯定会在这里添加您的内置页面构建器 自己的个人风格。
更改标题设计
首先，我们要更改标题（非常平坦），在标题下方保留一条细灰色线，几乎没有发生任何变化。 我们将使用CSS Hero在其下方添加一个阴影并将其抬离页面。 CSS Hero附带了一堆用于添加不同类型阴影的选项，可以对所有这些阴影进行调整以帮助您获得所需的效果。
Box Shadow
接下来，我们将非常轻微地将颜色更改为灰白色。 您可以使用内置的颜色选择器进行这些更改，或者，如果您使用的是配色方案，则只需输入RGBA或HEX值即可。 两者均受支持且易于输入。
改变标题的背景颜色
接下来，我们将通过单击博客的主体部分作为目标，以便CSS Hero可以向我们显示可用选项。 从这里开始，我们将背景色更改为较深的灰色。 现在我们的标题突出了，一旦我们进行了其他更改，内容和侧边栏也会随之变化。
通过将左侧区域的背景更改为白色，它确实位于页面之外，但是颜色在边缘处稍微变淡了，因此我们为它提供了仅1像素厚的深色边框。 略微调整边框半径可以使该部分具有良好的曲线，并且调整填充可以使内容周围具有良好的边缘。
我们已经将标题字体更改为Helvetica 。 CSS Hero的字体下拉菜单中显示的100多种Google字体中的一种，但是如果要添加其他550+种Google字体中的一种， 这很容易做到 。
添加边框半径
更改精选图像尺寸
默认情况下，Divi在标题下方以全角添加博客文章中的特色图片。 这会在折叠上方占据大量空间，并使文本不可见。 我们已经使用CSS Hero将宽度更改为50％，并向右浮动图像。 通过将图像的新height设置为auto ，可以保持其纵横比，并且图像在所有设备上看起来都非常完美。 我们还为图像添加了一些padding ，以使文本不会紧靠其旁边。 使用CSS Hero中的“边框半径”滑块在图像上添加稍微弯曲的角即可使该图像看起来完美。
更改精选图片的大小并添加边框半径
使用CSS Hero进行的其他一些小修改，包括将大写的文本大写，更改“提交评论”按钮的颜色和边框，我们对左侧部分的外观感到非常满意。 如果将其与以前的外观进行比较，您将在几分钟内看到已经取得了巨大的进步。
元数据现在是大写
侧边栏
然后，我们移至侧栏，默认情况下，侧栏再次非常简单。 通过使用与编辑左侧部分相同的技术，我们能够快速应用弯曲的边缘和深色背景，以帮助该部分跳出页面。 我们更改了标题字体以匹配当前的自定义设置，并为它们提供了浅色以帮助在深色背景上脱颖而出。
我们更改了链接颜色以使其更亮，并专门针对用户悬停并设置其他颜色的目的。 我们摆脱了标准的电蓝色，并增加了一些与主题保持一致的东西。 如果需要，还可以为active链接和过去使用CSS Hero visited链接设置不同的颜色。
侧边栏
我们刚刚做了什么？
通过CSS Hero导出实用程序，我们可以在代码端看到我们刚刚在网站上创建的内容。
这对于想开始理解CSS的人以及仅想导出生成的代码并在所需位置复制和粘贴的开发人员而言非常有用。
整个CSS的片段，由CSS Hero生成
CSS Hero检查器
您甚至可以使用我们新的检查器工具来检查您创建CSS，并熟悉如何进行这些更改。 您也可以使用检查器对CSS进行少量更改，例如调整字体大小，边框的曲线或粗细或其他任何操作。 CSS使您感到舒适，检查器工具变得越有用。
总而言之，这些自定义只花了五分钟多的时间。 五分钟完全改变了博客文章的每个元素。
Hero就绪、配置和火箭模式
如前所述， 随时准备使用Hero的主题很好。 大多数流行的WordPress主题都可以使用英雄，包括Generatepress，Enfold，Genesis框架，Pagelines DMS，WooCommerce插件和LayersWP。
这意味着不需要任何配置，但是如果是这样，那也很容易。 有两种解决方法。
火箭模式
火箭模式是一项相对较新的功能，也是我们非常喜欢的功能，它将自动在主题的样式表中搜索有效的选择器。 一旦找到，它将把它们添加到CSS Hero中，并允许您的非英雄就绪主题在没有进一步配置的情况下也能很好地工作。 如果出于某种原因您的主题显示与Rocket Mode不兼容，则可以使用内置配置工具添加选择器。
向CSS Hero添加类和ID
快速配置器
如果您知道主题使用的类和ID，则可以将它们手动添加到CSS Hero中，并将它们定位为目标，就像在英雄可用主题中的其他任何元素一样。 需要帮助找到他们吗？ 尝试在大多数浏览器中使用检查元素工具，或在主题的样式表中搜索前面带有点（。）或井号（＃）的任何内容。 另外，大多数高端主题都将在主题本身内或在其网站上包含文档，并带有您需要的相关选择器。
页面构建器、插件和CSS Hero
前面我们提到了使用页面构建器来加快/简化WordPress中页面构建过程的结构性好处。 但是您仍然想要控制它们的外观，对吗？ 对于构建表格，添加表格等的插件也可以这样说。
这就是我们在构建CSS Hero时不仅关注主题的原因之一。 您将可以立即使用它，就像编辑博客页面时所显示的那样，它具有大量很棒的WordPress资源。 Beaver Builder，一个非常流行的页面构建器，与Visual Studio合成器和Contact Form 7完全兼容，并且与CSS Hero完全兼容。请检查此处使用的插件是否兼容。
就是这样了！ 在不了解CSS（或其他任何编程语言）的情况下，您可以构建一个高度响应，高度定制的WordPress网站。 如果您这样做了，或者已经使用CSS Hero构建了任何东西，请务必在评论中告知我们。 我们希望看到它！
翻译自: https://webdesign.tutsplus.com/tutorials/how-to-customize-your-wordpress-site-without-having-to-understand-css--cms-24152