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

2020-06-15
WordPress行业动态

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

什么是平滑的背景颜色变化效果？

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

该技术用于以柔和的效果吸引用户的注意力，这些效果令人愉悦。

话虽如此，让我们看一下如何在任何WordPress主题中添加这种平滑的背景颜色更改效果。

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

本教程要求您在WordPress文件中添加代码。如果您之前没有做过，请查看我们的指南，了解如何在WordPress中复制和粘贴代码。

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

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

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

接下来，您需要在JS文件中添加以下代码：

jQuery(function($){ $('.page-header').each(function(){ var$this= $(this), colors = ['#ec008c', '#00bcc3', '#5fb26a', '#fc7331'];
setInterval(function(){ varcolor = colors.shift(); colors.push(color); $this.animate({backgroundColor: color}, 2000); },4000); }); });

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

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

接下来，您需要使用FTP将wpb-bg-tutorial.js文件上传到WordPress主题的/ js /文件夹中。如果主题中没有js文件夹，则需要创建一个。

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

您需要将以下代码添加到主题的functions.php文件中。

functionwpb_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');