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

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

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

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

سپس شما باید کد CSS مورد نظر خود را بنویسید. به عنوان مثال، در تصویر بالا ما می خواهیم منطقه ویجت را در پایین قرار دهیم که دارای صفحه “header”   CSS است.

در مرحله بعد، باید یک ویرایشگر متن ساده را در رایانه خود باز کنید و یک فایل جدید ایجاد کنید. باید این فایل را به عنوان 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);
            },۴۰۰۰);
        });
        }); 

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

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

سپس شما باید فایل 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' ); 

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