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

ضعیفمتوسطخوببسیار خوبعالی
( 0 رای , میانگین : 0٫00 از 5)
بارگذاری...

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

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

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

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

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

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

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

در ادامه بخوانید:  آموزش ویروس یابی در CPanel و نحوه اسکن سایت و محیط هاست

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

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

در ادامه بخوانید:  ساخت دکمه های زیبا و فلت با کد های css و html

اطلاعات بیشتر



درباره نویسنده



جواد
( عضو از 2 سال قبل )
  • 220 نوشته
  • 33 دیدگاه
  • 0 محصول
  • 0 دوره آموزشی
جواد - عضو تیم تحریریه مجموعه نوین وردپرس...

نظرات کاربران

ثبت دیدگاه

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

دیدگاهتان را بنویسید

مطالب مرتبط



دسته بندی مطالب

آخرین آپدیت محصولات

همکار ما شوید

اگر دوست دارید در زمینه آموزش ، افزونه ، قالب وردپرس و ووکامرس ، آموزش سئو و… مقالات آموزشی خود را در نوین وردپرس منتشر کنید میتوانید به عنوان نویسنده در نوین وردپرس فعالیت کنید.

  • تولید کننده فیلم آموزشی کار با محصولات
  • نویسندگی و ارسال مطالب آموزشی
  • تولید کننده دورهای آموزشی برنامه نویسی
  • فارسی سازی و ترجمه انواع قالب
  • و هر آنچه که توانایی دارید...