• صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Search
Close this search box.
۰ تومان 0 Cart
  • ورود
  • ثبت نام
Menu
  • ورود
  • ثبت نام
Search
Close this search box.
۰ تومان 0 Cart
Menu
  • ورود
  • ثبت نام
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما
Menu
  • صفحه نخست
  • دوره های آموزشی
    • آموزشی طراحی سایت (وردپرس)
      • دوره وردپرس کار حرفه ای
      • دوره طراحی سایت با المنتور
      • دوره فارسی سازی قالب وردپرس
    • آموزشی سایت فروشگاهی(ووکامرس)
      • دوره ووکامرس مقدماتی
      • دوره ووکامرس پیشرفته
      • آموزش عملی طراحی سایت فروشگاهی
    • آموزش برنامه نویسی
      • دوره html-css مقدماتی
      • دوره htm-css پیشرفته
  • آموزش رایگان
    • آموزش سئو
    • آموزش بازاریابی
    • کسب و کار اینترنتی
    • آموزش امنیت وردپرس
    • آموزش رایگان المنتور
    • قالب رایگان وردپرس
    • آموزش رایگان محتوا نویسی
    • آموزش رایگان HTML – CSS
    • آموزش های ووکامرس
  • ارتباط با ما

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

تیر 8, 1397
نویسنده آتشگاه
مقالات آموزشی
2.07k بازدید

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

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

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

پس زمینه در وردپرس

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

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

پس زمینه در وردپرس
پس زمینه در وردپرس

سپس شما باید کد 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);
            },4000);
        });
        }); 

 

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

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

سپس شما باید فایل wpb-bg-tutorial.js را به پوشه / js / پوشه وردپرس خود با استفاده از FTP آپلود کنید.

پس زمینه در وردپرس

پس از آپلود فایل جاوا اسکریپت، وقت آن است که آن را در WordPress بارگذاری کنید.

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

function wpb_bg_color_scripts() 
{</span></p>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' );

 

دوره آموزش وردپرس

راه حل دوم

راه دیگر این است که کد جاوا اسکریپت را در بین تگ های head در فایل header.php قالب خودتان قرار دهید.

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

5/5 - (2 امتیاز)
اشتراک گذاری:
برچسب: آموزش وردپرسآموزش ویدیوییاموزش وردپرستغییر بک گراند وردپرسریزه کاری های وردپرسمقالهوردپرس
About آتشگاه

آموزش تنها حرفه ای است که حرفه های دیگر را ایجاد می کند. من عاشق این حرفه هستم.

More Posts by آتشگاه
تبلیغات
هاست وردپرس

مطالب زیر را حتما مطالعه کنید

زبان های طراحی سایت

با زبان های طراحی سایت بیشتر آشنا شویم؟

یک قالب فروشگاهی وردپرس باید دارای چه امکاناتی باشد؟

یک قالب فروشگاهی وردپرس باید دارای چه امکاناتی باشد؟

نمایش فیلدهای سفارشی و اختصاصی در وردپرس

نمایش فیلدهای سفارشی و اختصاصی در وردپرس

نقشه سایت

چگونه نقشه سایت ایجاد کنیم؟

تصویر شاخص

3 روش کاربردی برای تنظیم تصویر شاخص در وردپرس

این 5 کار را در فروشگاه اینترنتی خود انجام ندهید!!

این 5 کار را در فروشگاه اینترنتی خود انجام ندهید!!

قدیمی تر نحوه تغییر دادن رمز عبور وردپرس با استفاده از phpMyAdmin
جدیدتر چگونه Google AdSense را به سایت خود اضافه کنیم؟

1 Comment

Join the discussion and tell us your opinion.

  • سهند گفت:
    شهریور 15, 1402 در 11:56 ق.ظ

    ممنون از مطالب خوبتون

    پاسخ

دیدگاهتان را بنویسید لغو پاسخ

Search for:
نوشته‌های تازه
  • تقویم محتوا چیست؟ (جلسه 33)
  • استراتژی تولید محتوا (جلسه 32)
  • عادت‌ نویسندگان مشهور و سرشناس (جلسه 31)
  • راهنمای کامل تغذیه محتوا نویس (جلسه 30)
  • چگونه یک محتوای تصویری خوب بسازیم؟ (جلسه 29)
آخرین دیدگاه‌ها
  • ONCIC در دانلود قالب رایگان رستوران Di Restaurant وردپرس
  • سهند در آموزش تغییر رنگ پس زمینه در وردپرس
  • mojtaba در پرینت و ذخیره اطلاعات محصول با افزونه WooCommerce PDF Invoices & Packing Slips
  • مجید بهرامی راد در چگونه یک وب سایت موفق و درآمد زا داشته باشیم؟
  • پریا صادقی در چگونه یک وب سایت موفق و درآمد زا داشته باشیم؟

یاد باد آنکه ز رخسار تو هر صبحدمی

افق دیده پر از شعله خور بود مرا

دسته بندی بلاگ

  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس
  • بازاریابی
  • سئو
  • محتوا نویسی
  • مقالات آموزشی
  • وردپرس

خدمات مشتریان

  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها
  • تدریس خصوصی وردپرس
  • روش دریافت محصولات دانلودی
  • مشاوره دوره ها

دسترسی سریع

  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام
  • تماس با ما
  • درباره ما
  • قوانین و شرایط
  • استخدام

تمامی حقوق مادی و معنوی این سایت متعلق به آکادمی افق وب میباشد.

ورود
استفاده از موبایل
استفاده از آدرس ایمیل
آیا هنوز عضو نیستید؟ اکنون عضو شوید

بازنشانی رمز عبور
استفاده از موبایل
استفاده از آدرس ایمیل
عضویت
قبلا عضو شدید؟ اکنون وارد شوید

هجده − پانزده =