سبد خرید

نمایش خلاصه ای از خرید هایی که شما انجام خواهید داد

سبد خرید خالی می باشد
مبلغ کل
0
تسویه حساب

تغییر رنگ نرم پس زمینه در وردپرس
ملت وب
ملت وب
تعداد کل دانلود ها : 1080654
تعداد کل مطالب : 1851

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

تعداد دانلود:
0
تعداد بازدید:
8115
تاریخ:
دسته بندی:

هشتگ ها :

#پس زمینه نرم

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

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

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

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

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

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

اول، شما نیاز به پیدا کردن کلاس 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 را که برای کار با این کد نیاز دارید بارگیری می کند.

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

 

محصولات مشابه فروشی
هشتگ ها :

این محصول بدون نظر می باشد شما میتوانید اولین نظر را ثبت کنید

ارسال نظر

آخرین های مشابه مشاهده بیشتر

  • تلفن : 04136383693
  • پیامک : 500020606688
  • آدرس : آذربایجان شرقی، تبریز، شهرک مصلی، خیابان راجی، راجی 4، کوچه بیست هشتم، قطعه 1339، طبقه چهارم

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

  • logo-samandehi