تغییر رنگ نرم پس زمینه در وردپرس

آیا می خواهید یک تغییر رنگ پس زمینه نرم در سایت وردپرس خود اضافه کنید؟ شما ممکن است در برخی از وب سایت های محبوب مشاهده کنید که رنگ پس زمینه یک منطقه خاص یا کل صفحه وب به طور خودکار از یک رنگ به یک دیگر تغییر می کند. این اثر زیبا می تواند به شما کمک کند توجه کاربران را افزایش داده و تعامل را در وب سایت خود افزایش دهید. در این مقاله، ما به شما نشان می دهیم که چگونه یک تغییر رنگ پس زمینه نرم در سایت وردپرس خود اضافه کنید.

اثر تغییر رنگ پس زمینه صاف چیست؟

اثر تغییر رنگ پس زمینه صاف به شما اجازه می دهد به طور خودکار بین رنگ های پس زمینه مختلف انتقال دهید. این تغییر به آرامی با رنگ های مختلف ادامه می یابد تا رنگ نهایی به آن برسد. این به نظر می رسد:

این تکنیک برای جلب توجه کاربر با اثرات ملایم است که برای چشم لذت بخش است.

به این ترتیب، بیایید نگاهی به نحوه اضافه کردن این تغییر رنگ پس زمینه تغییر رنگ در هر تم وردپرس کنیم.

اضافه کردن اثر تغییر رنگ پس زمینه صاف در وردپرس

اول، شما نیاز به پیدا کردن کلاس CSS از منطقه ای که می خواهید تغییر دهید. شما می توانید با استفاده از ابزار Inspect در مرورگر خود این کار را انجام دهید. به سادگی ماوس خود را به منطقه ای که می خواهید تغییر دهید را انتخاب کرده و راست کلیک کنید تا ابزار Inspect را انتخاب کنید.

بعد، شما باید کلاس 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 که میخواهیم در کد استفاده کنیم استفاده کردهایم. ما همچنین چهار رنگ اضافه کرده ایم. اثر پس زمینه صاف از رنگ اول شروع می شود و سپس به رنگ بعدی تبدیل می شود و از طریق این رنگ ها ادامه پیدا می کند.

بعد، شما باید فایل wpb-bg-tutorial.js را به پوشه / js / پوشه وردپرس خود با استفاده از FTP آپلود کنید.

پس از آپلود فایل جاوا اسکریپت، وقت آن است که آن را در 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' ); 

این کد به درستی بار فایل جاوا اسکریپت و اسکریپت وابسته به jQuery را که برای کار با این کد نیاز دارید بارگیری می کند.

تمام، شما هم اکنون می توانید وب سایت خود را ببینید تا آن را در عمل ببینید.