ملت وب مرجع دانلود قالب وردپرس فارسی و قالب فارسی وردپرس و قالب html و افزونه وردپرس
24
ساعت با شما

04144235034

آیا میدانستید دلیل اصلی محبوبیت ملت وب در چیست ؟ ملت وب به عنوان مرجعی پیشرو در پشتیبانی مشتریان خود توانسته رضایت کاربران را در برگیرد در واقع در ملت وب وب شخص پاسخگو نیاز های شما نیست در اینجا یک شرکت معتبر و پاسخگو در کنار مشتریان خود می باشد و تمام مسئولیت پشتیبانی بر عهده شرکت می باشد و نقطه قوت فوق العاده بالای برای یک وب سایت می باشد
فروش محصولات
فروش محصولات شما
تغییر رنگ نرم پس زمینه در وردپرس
امین صفرپور
امین صفرپور
Asset 1
1397-1-4
Asset 2

دانلود شده

0
Asset 1

نظرات

0
Asset 1

بازدید شده

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

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

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

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

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

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

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

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

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

 

ارسال پرسش و دیدگاه

0دیدگاه
مطالبی که شاید خوشتان بیاد
سلام! ما 277 محصول رایگان در بخش آموزش wordpress داریم اگر قصد بازدید دارید روی لینک سبز رنگ روبرو بزن بریم