نحوه تغییر رنگ منو ویترین فروشگاه ووکامرس

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

تغییر رنگ منوی ویترین فروشگاه ووکامرس

با این وجود، انجام این سفارشی‌سازی با استفاده از گزینه «Customize» در زیر «ظاهر» در داشبورد بسیار آسان است. این بخش به شما امکان می دهد طرح زمینه خود را به روش های مختلفی که توسط نویسنده تم مجاز است تغییر دهید. با این حال، نویسنده تم نمی تواند به همه چیز فکر کند و تغییر رنگ منو می تواند در این دسته قرار گیرد.

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

مراحل تغییر رنگ منوی تم ویترین

در اینجا مراحل ساده ای وجود دارد که باید دنبال کنید:

1. عنصری را که باید تغییر دهید شناسایی کنید

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

به سادگی بر روی ناحیه ای که می خواهید تغییر دهید در مرورگری مانند کروم یا فایرفاکس راست کلیک کنید و روی “Inspect Element” مانند این کلیک کنید:

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

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

2. رنگ مورد نظر خود را انتخاب کنید

اکنون که کار سخت را انجام داده اید، مرحله بعدی تغییر رنگ است. این را می توان با برداشتن تیک گزینه رنگ موجود و کلیک کردن نزدیک براکت بسته شدن “}” انجام داد. این به شما اجازه می دهد تا قانون CSS خود را وارد کنید. شما باید چیزی مانند “background-color” را وارد کنید، tab را فشار دهید و رنگ مورد نظر خود را تایپ کنید.

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

3. استخراج قانون جدید

شما باید با کلیک راست روی آن (در فایرفاکس) مانند زیر و انتخاب “Copy Rule” قانون را استخراج کنید:

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

4. اضافه کردن قانون

بخش باقیمانده کپی/پیست کردن در بخش «CSS اضافی» رابط سفارشی‌سازی تم فروشگاه است. برای انجام این:

  • وارد سایت وردپرس خود شوید و به عنوان کاربر مدیریت به داشبورد دسترسی پیدا کنید.
  • از منوی داشبورد، روی Appearance Menu > Customize کلیک کنید.
  • در نوار کناری سمت چپ که ظاهر می‌شود، به قسمت Additional CSS بروید.

  • قانون CSS را مطابق شکل زیر اضافه کنید:

  • پس از اینکه از تغییرات راضی شدید، روی انتشار کلیک کنید.

نتیجه

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

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

هنگامی که از تغییرات راضی شدید، باید قانون جدید را استخراج کرده و در بخش CSS اضافی در رابط سفارشی سازی Storefront them خود قرار دهید. اگر تحت تاثیر تغییرات قرار گرفته اید، می توانید روی انتشار کلیک کنید. تا به حال، من مطمئن هستم که می توانید رنگ هر عنصری را در سایت خود تغییر دهید!

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

برای ارسال نظر نیاز است تا ابتدا وارد سایت شوید.

هیچ نظری ارسال نشده است.

در این مقاله قصد داریم تا درباره نحوه تغییر رنگ منو ویترین فروشگاه ووکامرس صحبت کنیم.


قیمت آموزش
رایگان
نوع دسترسی
رایگان

این مقاله در حال حاضر تنها به روش رایگان در دسترس می باشد.

ناصر خالدی
مدرس دوره

ناصر خالدی

مهندس شبکه, امنیت, برنامه نویسی تلفن های هوشمند, طراح وب سایت و متخصص هوش مصنوعی

گفتگوی برنامه نویسان

بخشی برای حل مشکلات برنامه‌نویسی و مباحث پیرامون آن

دوره های پیشنهادی

مقالات پیشنهادی

نود جی اس

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


۹۱۷
۰
۱۲ آذر ۱۳۹۹

اندروید

اندروید یک سیستم عامل می باشد که توسط گوگل توسعه داده میشود, این سیستم عامل بر پایه نسخه ی اصلاح شده ی هسته ی لینوکس و دیگر نرم افزار های متن باز طراحی شده است و ...


۱۰۵۵
۰
۲۹ آبان ۱۳۹۹

جاوا اسکریپت

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


۸۷۰
۰
۱۳ آذر ۱۳۹۹

بک لینک چیست؟

بک لینک (Back Link) به لینک دادن یک سایت به سایت دیگر گفته میشود که یک فاکتور مهم و اساسی در سئو هر سایتی می باشد.


۹۹۳
۰
۲۲ آذر ۱۳۹۹