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

حال ، آیا شما به دنبال راهی برای تغییر تصادفی رنگ پس زمینه در وردپرس هستید؟

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

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

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

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

پس از آن ، باید کلاس 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);
            },4000);
        });
        }); 

اگر کد را مطالعه کنید ، متوجه خواهید شد که ما از کلاس CSS "page-header" به عنوان منطقه ای که می خواهیم در وب سایت خود هدف قرار دهیم استفاده کردیم.

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

اکنون که پرونده JS شما آماده است ، باید آن را با استفاده از سرویس پروتکل انتقال فایل (FTP) در پوشه JS قالب وردپرس خود بارگذاری کنید.

برای این آموزش ، ما از FileZilla استفاده می کنیم. این یک سرویس گیرنده FTP رایگان برای ویندوز ، مک و لینوکس است و استفاده از آن بسیار آسان است.

برای شروع ، باید وارد سرور FTP وب سایت خود شوید. اطلاعات ورود به سیستم را می توانید از طریق ایمیل از طرف ارائه دهنده میزبان یا داشبورد cPanel حساب میزبانی خود پیدا کنید.

پس از ورود به سیستم ، لیست پوشه ها و پرونده های وب سایت خود را در زیر ستون "سایت از راه دور" مشاهده خواهید کرد. پیش بروید و به پوشه JS در طرح زمینه سایت خود بروید.

اگر موضوع شما پوشه js ندارد ، می توانید یک پوشه ایجاد کنید. بر روی پوشه طرح زمینه خود در کلاینت FTP کلیک راست کرده و گزینه "Create directory" را کلیک کنید.

در مرحله بعدی ، باید محل فایل JS خود را در زیر ستون "سایت محلی" باز کنید. سپس روی پرونده کلیک راست کرده و گزینه load Upload ’را کلیک کنید تا پرونده به موضوع شما اضافه شود.

برای جزئیات بیشتر ، می توانید آموزش ما را در مورد نحوه استفاده از FTP برای بارگذاری پرونده در وردپرس دنبال کنید.

در مرحله بعدی ، باید کد زیر را در پرونده funtions.php طرح زمینه خود وارد کنید. این کد به درستی فایل JavaScript و اسکریپت وابسته jQuery را که برای کار با این کد نیاز دارید بارگیری می کند.

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' ); 

توصیه می کنیم از افزونه Code Snippets استفاده کنید تا با خیال راحت کد را به سایت خود اضافه کنید. برای جزئیات بیشتر ، به راهنمای ما در مورد چسباندن قطعه ها از وب در وردپرس مراجعه کنید.

اکنون می توانید به وب سایت خود مراجعه کنید تا در منطقه ای که هدف قرار داده اید به طور تصادفی در حال تغییر رنگ هستند