wordpress 背景_如何在WordPress中添加平滑的背景颜色变化效果

最新推荐文章于 2022-03-03 13:39:35 发布

cumohuo9136

最新推荐文章于 2022-03-03 13:39:35 发布

阅读量646

点赞数

文章标签： css python javascript java js ViewUI

原文链接：https://www.wpbeginner.com/wp-themes/how-to-add-smooth-background-color-change-effect-in-wordpress/

版权

wordpress 背景

Do you want to add a smooth background color change effect on your WordPress site? You may have seen on some popular websites where the background color of a specific area or the whole web page automatically transitions from one color to another. This beautiful effect can help you get users attention and improve engagement on your website. In this article, we will show you how to easily add a smooth background color change effect in WordPress.

您是否要在WordPress网站上添加平滑的背景颜色更改效果？您可能已经在一些流行的网站上看到过，其中特定区域或整个网页的背景颜色会自动从一种颜色转换为另一种颜色。这种美丽的效果可以帮助您吸引用户的注意力并提高网站的参与度。在本文中，我们将向您展示如何轻松地在WordPress中添加平滑的背景颜色更改效果。

Adding smooth background color change effect in WordPress

什么是平滑的背景颜色变化效果？ (What is Smooth Background Color Change Effect?)

Smooth background color change effect allows you to automatically transition between different background colors. The change happens slowly going through different colors until it reaches the final color. It looks like this:

平滑的背景颜色变化效果使您可以在不同的背景颜色之间自动过渡。更改会缓慢地通过不同的颜色进行，直到达到最终颜色为止。看起来像这样：

This technique is used to capture user attention with gentle effects that are pleasing to the eye.

使用此技术以令人愉悦的柔和效果吸引用户的注意力。

That being said, let’s take a look at how to add this smooth background color change effect in any WordPress theme.

话虽如此，让我们看一下如何在任何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 how to copy and paste code in 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 using the Inspect tool in your browser. Simply take your mouse to the area you want to change and right click to select the Inspect tool.

首先，您需要找出要更改的区域CSS类。您可以通过使用浏览器中的检查工具来执行此操作。只需将鼠标移至要更改的区域，然后右键单击以选择“检查”工具。

Next, you need to write down the CSS class you want to target. For example, in the screenshot above we want to target the widget area in the bottom which has the CSS class ‘page-header’.

接下来，您需要写下要定位CSS类。例如，在上面的屏幕截图中，我们希望将底部的小部件区域定位为CSS类“ page-header”。

In the next step, you need to open a plain text editor on your computer and create a new file. You need to save this file as wpb-background-tutorial.js on your desktop.

下一步，您需要在计算机上打开纯文本编辑器并创建一个新文件。您需要在桌面上将此文件另存为wpb-background-tutorial.js。

Next, you need to add the following code inside your JS file:

接下来，您需要在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);
        });
        });

If you study this code, then you will notice that we have used the CSS class we want to target in the code. We have also added four colors. Our smooth background effect will start from the first color, then transition to the next color, and keep cycling through these colors.

如果您学习此代码，则会注意到我们已经使用了要在代码中定位CSS类。我们还添加了四种颜色。我们平滑的背景效果将从第一种颜色开始，然后过渡到下一种颜色，并不断在这些颜色之间循环。

Don’t forget to save your changes to the file.

不要忘记将更改保存到文件中。

Next, you need to upload wpb-bg-tutorial.js file to your WordPress theme’s /js/ folder using 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文件夹，则需要创建一个。

After uploading your JavaScript file, it is time to load it in WordPress.

上传您JavaScript文件后，是时候将其加载到WordPress中了。

You need to add the following code to your theme’s functions.php file.

您需要将以下代码添加到主题的functions.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 properly loads the JavaScript file and the dependent jQuery script that you need for this code to work.

这段代码正确地加载了JavaScript文件以及使该代码正常工作所需的从属jQuery脚本。

That’s all, you can now visit your website to see it in action. You will notice the smooth background color change effect in the area that you targeted.

就是这样，您现在可以访问您的网站以查看实际运行情况。您会在目标区域中注意到平滑的背景颜色变化效果。

There are many other ways to use background colors in WordPress to capture user attention or make your content pop-out. For example, you can try:

还有许多其他方法可以在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 best WordPress page builder plugins that you can try.

我们希望本文能帮助您学习如何轻松地在WordPress中添加平滑的背景颜色更改效果。您可能还想查看我们可以尝试的最佳WordPress页面构建器插件列表。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

如果您喜欢这篇文章，请订阅我们的YouTube频道 WordPress视频教程。您也可以在Twitter和Facebook上找到我们。