winkel

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

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

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

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

اولين كاري كه بايد انجام دهيد اين است كه كلاس 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 استفاده كنيد تا با خيال راحت كد را به سايت خود اضافه كنيد. براي جزئيات بيشتر ، به راهنماي ما در مورد چسباندن قطعه ها از وب در وردپرس مراجعه كنيد.

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