wordpress背景
您想在您的 WordPress 网站上添加平滑的背景颜色变化效果吗？您可能在一些流行的网站上看到过，特定区域或整个网页的背景颜色自动从一种颜色转换为另一种颜色。这种美丽的效果可以帮助您吸引用户的注意力并提高网站的参与度。在这篇文章中，我们将向您展示如何在WordPress中轻松添加平滑的背景颜色变化效果。
您想为您的 WordPress 网站添加平滑的背景颜色变化效果吗？您可能在一些流行的网站上看到过，特定区域或整个网页的背景颜色自动从一种颜色变为另一种颜色。这种美丽的效果可以帮助您吸引用户的注意力并提高网站的参与度。在这篇文章中，我们将向您展示如何在WordPress中轻松添加平滑的背景颜色变化效果。
什么是平滑的背景颜色变化效果？ （What is Smooth Background Color Change Effect?）
平滑的背景颜色变化效果允许您在不同的背景颜色之间自动过渡。变化缓慢地经历不同的颜色，直到达到最终的颜色。它看起来像这样：
平滑的背景颜色变化效果允许您在不同的背景颜色之间自动过渡。通过不同的颜色慢慢地进行变化，直到达到最终的颜色。它看起来像这样：
该技术用于通过赏心悦目的柔和效果来吸引用户注意力。
使用此技术可以通过令人愉悦的柔和效果来吸引用户的注意力。
话虽这么说，让我们看看如何在任何 WordPress 主题中添加这种平滑的背景颜色变化效果。
话虽如此，让我们看看如何将这种平滑的背景颜色变化效果添加到任何 WordPress 主题中。
在WordPress中添加平滑的背景颜色变化效果 （Adding Smooth Background Color Change Effect in WordPress）
This tutorial requires you to add code in your WordPress files. If you haven’t done this before, then please take a look at our guide on 如何在 WordPress 中复制和粘贴代码.
本教程要求您在WordPress文件中添加代码。 如果您以前没有做过，请查看我们的指南， 了解如何在 WordPress 中复制和粘贴代码 。
First, you need to find out the CSS class of the area that you want to change. You can do this by 使用检查工具 in your browser. Simply take your mouse to the area you want to change and right click to select the Inspect tool.
首先，您需要找出要更改的区域CSS类。 您可以通过使用浏览器中检查工具来执行此操作 。 只需将鼠标移至要更改的区域，然后右键单击以选择“检查”工具。
接下来，您需要写下您想要定位的 CSS 类。例如，在上面的屏幕截图中，我们希望定位底部具有 CSS 类“page-header”的小部件区域。
接下来，您需要写下您想要定位的 CSS 类。例如，在上面的屏幕截图中，我们希望使用 CSS 类“page-header”来定位底部小部件区域。
在下一步中，您需要在计算机上打开纯文本编辑器并创建一个新文件。您需要将此文件保存为桌面上的 wpb-background-tutorial.js。
接下来，您需要在计算机上打开纯文本编辑器并创建一个新文件。您需要将此文件保存为桌面上的 wpb-background-tutorial.js。
接下来，您需要在 JS 文件中添加以下代码：
接下来，您需要在 JS 文件中添加以下代码：
jQuery(function($){
$('.page-header').each(function(){
var $this = $(this),
colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];
setInterval(function(){
var color = colors.shift();
colors.push(color);
$this.animate({backgroundColor: color}, 2000);
},4000);
});
});
如果您研究这段代码，您会注意到我们已经在代码中使用了我们想要定位的 CSS 类。我们还添加了四种颜色。我们的平滑背景效果将从第一种颜色开始，然后过渡到下一种颜色，并不断循环这些颜色。
如果你研究这段代码，你会注意到我们在代码中使用了 CSS 类来定位。我们还添加了四种颜色。我们的平滑背景效果将从第一种颜色开始，然后过渡到下一种颜色，在这些颜色之间不断循环。
不要忘记保存对文件的更改。
不要忘记保存对文件的更改。
Next, you need to upload wpb-bg-tutorial.js file to your WordPress theme’s /js/ folder 使用FTP. If your theme doesn’t have a js folder inside it, then you need to create one.
接下来，您需要使用FTP将wpb-bg-tutorial.js文件上传到WordPress主题的/ js /文件夹中间 。 如果主题中没有js文件夹，则需要创建一个。
上传 JavaScript 文件后，就可以将其加载到 WordPress 中。
上传 JavaScript 文件后，就可以将其加载到 WordPress 中了。
You need to add the following code to your theme’s 函数.php file.
您需要将以下代码添加到主题的函数.php文件中。
function wpb_bg_color_scripts() {
wp_enqueue_script( 'wpb-background-tutorial', get_stylesheet_directory_uri() . '/js/wpb-background-tutorial.js', array( 'jquery-color' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' );
This code 正确加载 JavaScript file and the dependent jQuery script that you need for this code to work.
这段代码JavaScript 已正确加载文件以及使该代码正常工作所需的从属jQuery脚本。
就这样，您现在可以访问您的网站以查看其运行情况。您会注意到目标区域中背景颜色的平滑变化效果。
就是这样，您现在可以访问您的网站以查看其运行情况。您会注意到目标区域有平滑的背景颜色变化效果。
还有许多其他方法可以在 WordPress 中使用背景颜色来吸引用户注意力或使您的内容弹出。例如，您可以尝试：
还有许多其他方法可以在 WordPress 中使用背景颜色来吸引用户的注意力或弹出您的内容。例如，您可以尝试：
- 添加全屏背景图片添加全屏背景图片
- 添加全屏视频背景添加全屏视频背景
- 每个页面加载时的随机背景颜色每个页面加载随机背景颜色
- 为任何 WordPress 主题添加视差效果为任何 WordPress 主题添加视差效果
- 为不同背景的各个帖子设置样式在不同背景下设置各个帖子的样式
We hope this article helped you learn how to easily add smooth background color change effect in WordPress. You may also want to see our list of the 最好的 WordPress 页面构建器插件 that you can try.
我们希望本文能帮助您学习如何轻松地在WordPress中添加平滑的背景颜色更改效果。 您可能还想查看我们可以尝试的最佳 WordPress 页面生成器插件列表。
If you liked this article, then please subscribe to our YouTube 频道 for WordPress video tutorials. You can also find us on 推特 and Facebook.
如果您喜欢这篇文章，请订阅我们的YouTube 频道 WordPress视频教程。 您也可以在推特和Facebook上找到我们。
翻译自: https://www.wpbeginner.com/wp-themes/how-to-add-smooth-background-color-change-effect-in-wordpress/
wordpress背景