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

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

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

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

این روش برای جلب توجه کاربر با جلوه های ملایم و چشم نواز استفاده می شود.

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

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

برای این آموزش لازم است کدی را در پرونده های وردپرس خود اضافه کنید. اگر قبلاً این کار را انجام نداده اید ، لطفاً به راهنمای ما در نحوه کپی و جایگذاری کد در وردپرس .

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

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

در مرحله بعدی ، باید یک ویرایشگر متن ساده در رایانه خود باز کنید و یک فایل جدید ایجاد کنید. شما باید این فایل را به صورت wpb-background-tutorial.js در دسک تاپ خود ذخیره کنید.

در مرحله بعدی ، باید کد زیر را در داخل پرونده JS خود اضافه کنید:

jQuery (تابع ($) {
        $ ('. page-header'). هر (عملکرد () {
            var $ this = $ (این) ،
colors = ['# ec008c'، '# 00bcc3'، '# 5fb26a'، '# fc7331']؛

            setInterval (تابع () {
                var color = colors.shift ()؛
                رنگ. فشار (رنگ) ؛
                $ this.animate ({backgroundColor: color} ، 2000)؛
            } ، 4000)؛
        })
        })

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

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

بعد ، شما باید پرونده wpb-bg-tutorial.js را در پوشه قالب وردپرس / js / خود بارگذاری کنید با استفاده از FTP . اگر موضوع شما پوشه js داخل آن نیست ، باید یک مورد ایجاد کنید.

پس از بارگذاری فایل JavaScript ، زمان بارگذاری آن در وردپرس فرا رسیده است.

شما باید کد زیر را به توابع خود اضافه کنید پرونده .php .

تابع wpb_bg_color_script () {
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_scriptts'، 'wpb_bg_color_scriptts')؛

این کد به درستی فایل JavaScript و اسکریپت وابسته jQuery مورد نیاز برای کار با این کد را بارگیری می کند.

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

روش های زیادی برای استفاده از رنگ پس زمینه در وردپرس وجود دارد تا توجه کاربر را جلب کند یا محتوای شما را به صورت گسترده باز کند. به عنوان مثال ، می توانید:

را امتحان کنید

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

اگر این مقاله را دوست داشتید ، لطفاً در کانال YouTube برای آموزش های ویدئویی وردپرس. همچنین می توانید ما را در Twitter و فیس بوک .