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

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

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

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

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

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

ابتدا شما باید کلاس CSS مربوط به ناحیه ای که میخواهید در آن تغییر ایجاد کنید را پیدا کنید. برای انجام این کار می توانید از ابزار Inspect tool در مرورگر کروم و یا ابزار Inspect elements مرورگر فایرفاکس استفاده کنید. تنها کافی است نشانگر موس را به ناحیه مذکور برده و روی آن راست کلیک کرده و گزینه Inspect tool را انتخاب کنید.

بعد از آن شما باید کلاس 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);
},۴۰۰۰);
});
});

در کد بالا مشاهده می کنید که ما از کلاس CSS ناحیه ای که میخواستیم آن را هدف قرار دهیم استفاده کرده ایم. همچنین در کد بالا از چهار رنگ استفاده کرده ایم. افکت مد نظر ما از اولین رنگ شروع شده و با تغییر آهسته به رنگ بعدی تبدیل می شود و این کار به صورت چرخه ادامه می یابد.

در نهایت نباید فراموش کنید که تغییرات صورت گرفته را ذخیره کنید.

در مرحله بعد شما باید فایل wpb-background-tutorial.js را در پوشه js قالب خود آپلود کنید. اگر قالب شما فاقد چنین پوشه ای است، میبایست پوشه ای تحت عنوان js ایجاد کنید.

بعد از بارگذاری فایل جاوااسکریپت مذکور، نوبت بارگذاری آن در وردپرس است. برای این منظور شما باید کد زیر را به فایل 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' );

کار تمام است و حالا می توانید سایت خود را باز کرده و تغییرات صورت گرفته را مشاهده کنید.