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


您是否要在WordPress網站上添加平滑的背景顏色更改效果? 您可能在某些受歡迎的網站上看到過,其中特定區域或整個網頁的背景顏色會自動從一種顏色轉換為另一種顏色。 這種美麗的效果可以幫助您吸引用戶的注意力並提高網站的參與度。 在本文中,我們將向您展示如何輕鬆地在WordPress中添加平滑的背景顏色更改效果。

在WordPress中添加平滑的背景顏色更改效果

什麼是平滑的背景顏色變化效果?

平滑的背景顏色變化效果使您可以在不同的背景顏色之間自動過渡。 更改會緩慢地通過不同的顏色進行,直到達到最終顏色為止。 看起來像這樣:

變色效果動畫

使用此技術以令人愉悅的柔和效果吸引用戶的注意力。

話雖如此,讓我們看一下如何在任何WordPress主題中添加這種平滑的背景顏色變化效果。

在WordPress中添加平滑的背景顏色變化效果

本教程要求您在WordPress文件中添加代碼。 如果您以前沒有做過,請查看我們的指南,了解如何在WordPress中復制和粘貼代碼。

首先,您需要找出要更改的區域的CSS類。 您可以通過使用瀏覽器中的檢查工具來執行此操作。 只需將鼠標移至要更改的區域,然後右鍵單擊以選擇“檢查”工具。

查找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(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        }); 

如果您學習此代碼,則會注意到我們已經使用了要在代碼中定位的CSS類。 我們還添加了四種顏色。 我們的平滑背景效果將從第一種顏色開始,然後過渡到下一種顏色,並不斷在這些顏色之間循環。

不要忘記將更改保存到文件中。

接下來,您需要使用FTP將wpb-bg-tutorial.js文件上傳到WordPress主題的/ js /文件夾中。 如果您的主題中沒有js文件夾,則需要創建一個。

上載您的JavaScript文件

上傳您的JavaScript文件後,是時候將其加載到WordPress中了。

您需要將以下代碼添加到主題的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' ); 

此代碼正確加載了JavaScript文件和該代碼正常工作所需的相關jQuery腳本。

就是這樣,您現在可以訪問您的網站以查看實際運行情況。 您會在目標區域注意到平滑的背景顏色變化效果。

還有許多其他方法可以在WordPress中使用背景色來吸引用戶的注意力或彈出您的內容。 例如,您可以嘗試:

我們希望本文能幫助您學習如何輕鬆地在WordPress中添加平滑的背景顏色更改效果。 您可能還想查看我們可以嘗試的最佳WordPress頁面構建器插件列表。

如果您喜歡這篇文章,請訂閱我們的YouTube頻道WordPress視頻教程。 您也可以在找到我們 推特 和Facebook。