如何使用CSS在WordPress网站上进行样式图像

技术教程 2022年2月12日
1671 0

我相信你已经了解了图像的重要性如何成为您的网站的成功.

但是当谈到促进订婚时(并最终是您的底线)，它不仅仅是在您的网站上包括图像，它是关于您包含的图像以及您如何呈现它们.

在这篇文章中我想解决一个重要的拼图:演示文稿.

wordpress通过使用CSS的简单方式进行预装.您有权为WordPress自动分配给站点上的图像的各种CSS类来创建不同的效果.(如果似乎我开始用外语谈论，别担心，我会在文章后面详细解释一切.)

我将首先参加图像对您的网站非常重要的原因，然后继续介绍WordPress适用于图像的默认CSS类，最后演示如何使用CSS来应用自定义样式到你的图像.

  • 为什么图像对网站非常重要
  • 一个wordpress css crash课程
  • 如何将自定义CSS添加到WordPress
  • WordPress默认CSS图像类
  • WordPress
    • 简单图像造型
  • 您可以使用WordPress
    • 中的图像CSS进行的更多示例
  • 现有风格怎么样?
  • 天空是极限

为什么映像对网站非常重要

解释有益的图像对博客有什么更好的方法，而不是通过用图像证明它?

Images Infographic 由mdg广告

当您达到我们如何处理信息的生物学时，事情会变得更加有趣.例如，考虑到传输给大脑的90％的信息是视觉的，40％的人对普通文本(来源:Zabisco)的视觉信息更好地回应.

但是，让我们说实话:我不需要抛出统计数据来制作我的观点.您从自己的习惯中知道，视觉上吸引人的网站和博客更有可能抓住你的注意力而不是大量文本.图像添加颜色，吸引力和阴谋.他们在我们的大脑中发射了一堆反应，然后我们甚至有机会开始阅读.

简单地说，如果您不包括博客文章中的引人注目，相关图像，您无处可靠近充分利用您的内容.谈到额外的英里，当涉及博客文章和呈现它们的图像，可以使所有差异与参与，交通和销售.

WordPress CSS崩溃课程

WordPress核心开发人员只是太了解了图像对网站的重要性，这就是为什么他们提供主题开发人员(和主题调整器)在确定图像呈现的大量功率和灵活性.

以许多CSS类的形式提供电源和灵活性.但在我们进一步进一步之前，让我们花点时间让您了解CSS是什么以及如何使用它.

CSS代表级联样式表:用于确定网页如何外观的标记语言.CSS与HTML(超文本标记语言)组合，这是用于定义网站语义结构的标记语言.如果这对你没有很大意义，不要出汗-它比必要的更多信息.

css是一种简单的语言，一旦你围绕它.在能够改变图像的外观和放置方面，您可以使用相对缓解的代码来获取和处理我在本文中包含的代码.

这是一个与WordPress中的特定图像类型的外观有关的CSS代码片段的示例:

.alignright {
	border: 1px solid #c5c5c5;
	float: right;
	margin: 0 0 10px 10px;
	padding: 3px;
}

.alignright文本是css 类(在其名称之前的时段中识别为类).在这种情况下，.alignright是WordPress分配给WordPress后端中选择的任何图像的类，以便对齐内容的右侧:

Image Alignment

各种声明(例如border和padding)可以应用于css类，最终应用于已分配相关类的任何HTML元素.

在上面的示例中，WordPress中的任何图像都与右侧(通过文本编辑器)对齐(通过文本编辑器)将具有分配给它的.alignright类，因此将继承应用于该类的样式.图像将"浮动"向右，有一点边距来停止文本运行到它中，围绕它的灰色边框，以及一点填充，将边界与图像边缘分开.

将与视觉表示有更多的意义:

Image aligned right

可以添加更多的声明，可以添加到CSS类中;我们很快就会享受一些乐趣.

如何将自定义CSS添加到WordPress

WordPress主题附带自己的CSS的"样式表"，这些表是上面示例中的CSS标记的文件.虽然有很多方法可以向您的网站添加自己的自定义CSS，但编辑现有的主题的CSS样式表是不是去的方式.您的辛勤工作可以在下次更新主题时覆盖.

最干净和最前果最具未来的方法是使用自己的CSS样式表创建自己的简单WordPress"子主题".您儿童主题目录中的CSS样式表将覆盖"父"主题的样式表中的任何匹配样式.

创建一个孩子主题可能听起来像是一个令人生畏的锻炼，但如果你熟悉FTP，就很容易.如果你想去这条路，请查看WordPress Codex的教程.

如果您正在寻找更直接的东西，我有两个插件建议:

  1. Jetpack中的自定义CSS模块:如果您在网站上使用Jetpack，则为理想.
  2. 简单的自定义CSS:如果您没有使用Jetpack(并且无需其变化的功能)，这是一个更轻量级的选项.

使用哪种选项，将自定义CSS添加到WordPress将简单地编辑已生成的自定义CSS文件(由您或其中一个插件).

WordPress默认CSS图像类

与所有的方式，让我们走到多汁的东西:WordPress'默认图像CSS类.

有四个默认类，可以用来更改WordPress中的图像的外观:

  • .aligncenter
  • .alignleft
  • .alignright
  • .alignnone

我确定你可以弄清楚这些类分配了哪些类型的图像.

通过帖子/页面屏幕上的TinyMCE文本编辑器添加到您的网站上的每一个图像都将拥有其中一个分配给它的类，这意味着您可以使用您认为所有这些图像的电源.

符合特定的图像类型，您需要做的就是按照上面示例中已经看到的格式:

.class-name {
	property: value;
	property: value;
	property: value;
}

重要提示:当图像具有标题时，WordPress将上述类中的一个分配给围绕图像的 div 而不是图像本身.解决这个特殊问题超出了这篇文章的范围，但在你的实验中铭记的东西.我建议您使用标题图像测试所选择的效果，看看如何看待.

与那个说，让我们走到有趣的部分:造型图像！

使用WordPress

简单图像样式

在WordPress中为您的图像添加简单的风格效果时，有五个常见的CSS属性:

  1. background
  2. border
  3. float
  4. margin
  5. padding


为了完整地了解这些属性如何影响图像的外观(或更准确地，放置图像的"帧"的外观)，我们需要考虑CSS的框模型':

Courtesy of W3.org w3.org

谈到样式图像时，图像本身就是"内容".然后通过填充，边界和边缘包围该图像;所有这些都可以定义.图像也可以是"浮动"，这对于本教程的目的仅仅意味着对齐.您的"浮动"选项留下，右侧和无.(居中居中有点复杂;很快就会进入那个.)

让我们考虑一个简单的例子来演示如何使用这些属性.首先，这是一个分配给它的.alignright类的图像，没有任何css标记:

Image in WordPress (No CSS)

现在让我们添加一些简单的CSS标记:

.alignright {
	background: gray;
	border: 3px solid black;
	float: right;
	margin: 10px;
	padding: 3px;
}

这是最终效果:

Image With CSS

你可能会破译我们在这里做的事情.该图像现在已被"浮动"(即对齐)向右，使文本缠绕在一起.我们添加了一点填充，这已经被灰色背景.我们涂上了一个厚厚的黑色边框，它出现在填充周围.最后，10px边缘在图像和文本之间创建一些房间.

您可以使用上面的五个选择器来做很多.如果您想进一步探索它们，这是每个人的全面资源:

  • background
  • border
  • float
  • margin
  • padding

我承诺了一个居中图像的解决方案.出于超出本教程范围的原因，CSS不仅仅允许您使用float: center;(即，值不存在).相反，您必须将图像定义为块元素，应用margin: 0 auto;并为图像定义宽度.您可以在此处阅读有关此技术的更多信息.(我还提供用于在下面创建居中图像的标记的示例.)

您可以使用WordPress

中的图像CSS执行的内容的更多示例

现在你有更好的了解你可以使用的最常见的CSS属性，这里有一些例子给你一些灵感.

让我们从一些填充和灰色背景开始，给我们的图像一个框架:

.alignleft {
	background: #dbdbdb;
	float: left;
	margin: 0 10px 5px 0;
	padding: 5px;
}

标记结果:

CSS align left

让我们探索在此发生的事情:

  • 我使用了HTML六角颜色来了背景.这些颜色代码为您的网站采摘颜色提供了几乎无限的灵活性.
  • 因为我使用的图像是一个透明的png，background颜色已经填补了图像文件中未使用的所有可用空间.
  • 我已经在margin属性中使用了四个值，为图像的每一侧设置不同的边距.

让我们尝试别的东西.让我们在一个简单的边框中将它们从内容中描绘它们，而不是将我们的图像放在背景颜色.这是标记:

.alignright {
	border: 1px solid #000099;
	float: right;
	margin: 0 0 10px 10px;
	padding: 3px;
}

正如您所看到的，我们已经使用margin属性值播放以解释图像对齐，减少填充并添加1PX实心边框.这是最终结果:

CSS align right

最后，让我们创建一个被居中的图像并给它一个厚厚的灰色边框.这是标记:

.aligncenter {
	border: 5px solid #dbdbdb;
	display: block;
	margin: 0 auto;
	width: 300px;
}

和最终结果:

CSS align center

您可以看到，可以单独使用CSS完全更改WordPress中图像的放置和外观.

在现实中，我们只在这里划伤了表面;有更多的你可以做的更多.(如果您对发现更多的兴趣，我已经提供了一些有用的资源来进一步学习.)

现有风格怎么样?

如果您使用的是任何真实质量的WordPress主题，开发人员将向每个默认WordPress图像类添加了额外的样式.至少她将适当地对齐每个图像类.

除此之外，她的选择将完全是主观的，你现在有能力覆盖其造型效果.您输入的任何CSS标记-无论是您的孩子主题的样式表还是通过插件-将优先于主题的默认CSS.你是控制的.

天空是限制

在阅读本文时，我也希望您能够通过自己的自定义CSS风格进行启发.我不想在本教程中深入深入进入更深入的选择器，但是有一个 lot 你可以用CSS做的比我介绍的更多.

如果您热衷于探索更高级的效果(例如阴影，舍入和旋转)，有大量的免费在线资源可以教您更多关于CSS的信息.我的个人建议是:


  • Mozilla开发人员网络:在Web开发人员社区中被爱.

  • W3学校:讨厌许多"严肃的"网络开发人员，但没有反驳其信息的深度和广度.请记住，它可能并不总是100％正确和/或最新.
  • WordPress Codex:了解有关WordPress和CSS如何聚集在一起的更多信息.

如果您有任何疑问，请随时在下面的评论部分毫不犹豫地触发！

照片信用:Simon Pow，Picjumbo.

css(16)WordPress(893)图像(37)
♥赞1

相关文章

发表回复