如何正确地将背景图像添加到您的 WordPress 网站

技术教程 2021年11月25日
3.57 0

向您的 WordPress 网站添加背景图片很容易.对吗?

在大多数情况下，是的.除非你的主题不支持它.事实是，当今的许多 WordPress 主题都具有用于添加或更改现有背景图像的快速简便的设置.与默认的 WP 外观自定义设置一样.

您还可以使用 CSS 或通过各种插件更改背景，打开用于在页面、帖子和类别上设置背景图像的选项.

在本文中，我们将向您展示如何执行上述所有操作，并让您的网站以您自己选择的引人注目的外观脱颖而出.

继续阅读，或使用以下链接跳转:

为什么要改变你的背景?好吧，您的主题默认图像可能不会吸引您，或者感觉它与您的品牌相符.或者，也许它根本不是图像，只是颜色.或者也许您最初喜欢这张图片，但您已经厌倦了.

不管是什么原因，让我们尝试改变它.

使用默认的 WordPress 自定义添加背景图像

WordPress 主题可以有彩色背景或背景中的默认照片.大多数人选择用更适合他们的品味和网站品牌的图片和/或颜色替换这些.

要在默认的 WordPress 编辑器中添加背景图片，您需要按照以下步骤操作:

  • 从 WP 仪表板，转到 外观 >自定义 >背景图像或外观>背景/背景图片.
  • 点击选择图片按钮打开您的媒体库.
  • 通过从您的计算机上传或从您的媒体库中选择一个来选择所需的图像.
  • 选择想要的图片后，点击蓝色的选择图片按钮.
  • 在左侧菜单的顶部窗口中，您会看到您的选择已填充.在右侧，您会看到网站主页的全尺寸预览以及背景图片.

如果您喜欢所看到的内容，请点击右上角的蓝色发布按钮，大功告成！

如果您想在最终确定之前更改外观，您可以使用多种设置和选项来找到您喜欢的外观.

Default WP background settings
重复选项最适合用于制作完全对齐，而不是照片.

背景图像菜单编辑工具及其相关选项如下:

  • 预设
    • 默认、填充屏幕、适合屏幕、重复、自定义
  • 图像位置
    • 居中、右上、右中、右下、中下、左上、左中、左下、中上
  • 图像大小
    • 原始、适合屏幕、填充屏幕
  • 重复背景图像-复选框
  • 随页面滚动-复选框

使用编辑工具查看您最喜欢的尺寸、图案和位置.从子菜单中选择任何下拉选项将在右侧为您提供页面预览.

不要担心被任何事情困住.您可以轻松返回设置并随时更改背景图片(和相关选项).

使用插件添加背景图片

WordPress.org 上有几个插件可以完成添加背景图片的任务.

仅举几例:高级 WordPress 背景、全后台管理器 和 简单的全屏背景图片.

后者是我最喜欢的，所以这就是我将在本教程中使用的内容.

simple fullscreen background image plugin banner

简单的全屏背景图片可以轻松安装和设置全屏图片作为您网站的背景.它会使用浏览器自动缩放图像，这意味着图像始终会填满屏幕.

只需几个简单的步骤即可将其付诸实施.有付费/专业版可以添加其他功能，但免费版是我们在本练习中所需要的.

让我们现在使用插件添加全屏背景图像.

  1. 安装 &激活简单的全屏背景图像插件.
  2. 从 WP 仪表板，转到 外观 >全屏背景图片.
  3. 通过从您的计算机上传或从您的媒体库中选择一个来选择所需的图像.
  4. 选择好图片后，点击蓝色的使用图片按钮.
  5. 点击蓝色的保存选项按钮，然后查看您的网站.
full screen background image preview
在全屏中选择图像后的页面预览背景图片.

给你！该图片现在应该作为全屏背景图片显示在您的网站上.

我想提一下这个插件的背景图像设置覆盖了默认的 WP 自定义背景设置.这不是坏事，只是需要注意.

可以使用此特定插件为单个帖子、页面、类别、标签等设置背景图像，但需要购买 专业版.

使用 CSS 添加背景图像

现在我们将探索如何使用 CSS 代码更改背景图像.可以使用 WP 主题定制器来制作全站点或特定类别的背景.

WP default customize adding CSS
默认WP自定义附加CSS</strong > 输入菜单.
  1. 从您的 WordPress 仪表板，导航至 外观 >自定义.
  2. 向下滚动并点击其他 CSS.
  3. 在 CSS 字段中粘贴适当的代码，如下所示:

全站背景图片:

加载要点 323116c6a2b8c0123031df725076be2d

确保将代码中"imageURL"的持有者文本替换为图像文件 URL 的实际名称.要查看此内容，请选择媒体库中的任意图像，然后查看屏幕右侧的图像信息.

Media library copy to clipboard
点击将 URL 复制到剪贴板 按钮，用于粘贴 CSS 代码.

特定类别背景图片:

加载要点 b5ec07658945233270289ae7c5503cd0

确保替换上面代码中的两个持有人文本区域:

    • "imageURL"的图像文件 URL 的实际名称
    • catname

的有效类别名称

要查找类别名称:

  1. 导航到您的 WordPress 网站仪表板
  2. 点击帖子>类别
  3. 选择您要引用的类别，然后将鼠标悬停在"编辑"链接上；您将在页面左下方看到显示类别 ID 的 URL
Category ID
在这种情况下，类别 ID 将为 428.

请记住，这是硬编码的，因此某些插件可能不会延迟加载图像，或者无法将其索引到 CDN.

向特定区域添加背景图像

还有另一个不错的插件可以帮助将背景图片添加到特定的内容区域.

AWB plugin banner

用于 WordPress 的 高级 WordPress 背景 插件允许使用 Gutenberg 块添加背景.您可以将颜色、图片甚至视频设置为背景，这些都可以在移动设备上查看.

它还允许为背景图像和视频添加视差效果.

在本例中，我们只是将静态背景图片添加到内容区域，特别是帖子.

因为这适用于古腾堡块，所以您需要使用古腾堡编辑器，所以如果需要，请确保从经典编辑器模式切换.

安装并激活插件后，导航到 WordPress 仪表板.

1.点击发布>添加新.

2.单击加号 + 按钮，向下滚动到 Design 部分，然后单击 AWB 块.

我们想要进行任何编辑的工具栏位于两个区域:顶部图标栏和侧边菜单栏.

3.从任一菜单(我更喜欢使用侧栏)，点击顶部的图像栏(在颜色和视频之间)，然后点击它下方的蓝色选择图像按钮，它将打开您的媒体库.

4.选择您想要的图片，然后点击蓝色的选择按钮.

完成此操作后，您应该会看到图像现在是 AWB 块的一部分.(如果您没有看到它，请单击 AWB 图标栏中的图片图标，它应该会弹出.)

AWB editing tools
AWB 插件有两个单独的菜单区域用于编辑.

使用菜单设置，您可以更改图像的位置(基于轴上的指示器)、大小、间距等.我将百分比设置保留为默认的 50/50(将其直接放在中间)，以及 Full 和 Cover 的大小默认值.

现在我们有了帖子背景，我们需要添加实际的帖子内容/文本.

1.点击位于背景图像顶部块中的加号+按钮.

2.点击段落图标，这将在我们的背景图片顶部添加一个文本块.

Adding paragraph to image background block
在AWB中可以"堆叠"块</强>;你可以把文字放在背景图片上.

输入您的文本内容，然后根据需要更改对齐方式或文本颜色(我做了，但它是可选的)，瞧！我们的帖子有自己的背景图片.

Post with background image using AWB plugin
AWB 插件可让您创建带有背景图像的帖子，独立于页面.
Post with background image paragraph blocks
具有组合背景图像/文本块的多个文本块之间.

您可以将帖子的一部分设置为背景图片，这给它一些魅力.只需在背景图片之前和之后添加额外的段落块即可.

很酷.

回到(基础)基础

为您的 WordPress 网站添加背景似乎是一件小事.但如果做得好，它可以产生很大的影响.它还可以帮助您保持在线状态的新鲜感，这样访问者就不会因为一遍又一遍地看到相同的图片而感到厌烦.

使用主题功能的内置自定义来添加背景图像是理想的选择，因为它是专门为编码工作而设计的.

但是，在放置 WordPress 背景图像时，您确实有其他选择.WP 核心自定义、插件、页面构建器和 CSS 调整，所有这些都可以对使用的图像和位置进行微调控制.

所以继续吧，利用您的背景发挥创意.产生主题影响，并让您的访问者在视觉上保持参与.

 

WordPress(893)添加(37)背景图片(1)
♥赞11

相关文章

发表回复