افزونه ویژگی رنگ باران ( attribute ) برای المنتور

مقاله جامع افزونه «🎨 ویژگی رنگ باران»

دانلود افزونه ای فوق سبک رایگان ایرانی برای نمایش متغیر های ووکامرس attribute در المنتور ( کارت محصول و صفحه آرشیو و محصول ) با استفاده از کد کوتاه و پنل مدیریت حرفه ای ( همراه با فیلم آموزش ساخت ویژگی و رنگ ها + تنظیمات افزونه )

مقدمه 🌟

خوش آمدید به دنیای رنگ‌ها با افزونه «ویژگی رنگ باران»!

🌈 اگر شما یک فروشگاه آنلاین با ووکامرس راه‌اندازی کرده‌اید و به دنبال راهی برای نمایش جذاب رنگ‌های محصولات متغیر خود هستید، این افزونه دقیقاً همان چیزی است که نیاز دارید!

🎨 شما را با تمام جنبه‌های این افزونه از جمله امکانات، مزایا، آموزش نصب و استفاده، و جزئیات فنی آشنا می‌کنیم.

پس با ما همراه شوید تا این ابزار شگفت‌انگیز را قدم به قدم کشف کنیم! 🚀

افزونه «ویژگی رنگ باران» چیست؟ 🎨

افزونه «ویژگی رنگ باران» یک افزونه وردپرسی است که به‌طور خاص برای فروشگاه‌های آنلاین مبتنی بر ووکامرس طراحی شده است و هدف اصلی این افزونه، ارائه یک راهکار شیک و مدرن برای نمایش داینامیک رنگ‌های محصولات متغیر در کارت محصولات است.

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

نسخه فعلی که به‌عنوان ۱.۰.۰ در نظر گرفته شده، نتیجه تلاش‌های تیم «باران سایت» برای ارائه ابزاری کاربردی و کاربرپسند است. 💡

تاریخچه توسعه

این افزونه توسط تیم حرفه‌ای «باران سایت» توسعه یافته و نسخه ۱.۰.۰ نتیجه بازخوردهای کاربران جهت راه کاری مبنی بر رفع نیاز نمایش attribute ویژگی رنگ ها در طرح های المنتوری ( کارت محصول، صفحه محصول و … ) که تا به الان المنتور المان یا راه کاری برای آن ارائه نکرده است، این نسخه با قابلیت‌های پیشرفته و رفع باگ‌ها، پایه‌ای محکم برای آینده افزونه فراهم کرده است.

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

امکانات افزونه 🌈

افزونه «ویژگی رنگ باران» با مجموعه‌ای از امکانات منحصربه‌فرد، یک انتخاب عالی برای فروشگاه‌های آنلاین است. در ادامه، به‌طور کامل امکانات این افزونه را بررسی می‌کنیم:
نمایش دایره‌های رنگی: رنگ‌های محصولات به‌صورت دایره‌های رنگی قابل تنظیم در کارت محصول نمایش داده می‌شوند. 🎨
پاپ‌آپ با انیمیشن: با کلیک روی آیکون «+»، یک پاپ‌آپ با انیمیشن فید باز می‌شود و رنگ‌های اضافی را نشان می‌دهد. ✨

تنظیمات سفارشی:

جهت نمایش رنگ‌ها (افقی یا عمودی) در کارت محصول و پاپ‌آپ. ↔️↕️
تعداد رنگ‌های قابل نمایش در کارت محصول. 🔢
ابعاد دایره‌ها (در کارت و پاپ‌آپ). 📏
رنگ و سایز بوردر دایره‌ها. 🎨
رنگ پس‌زمینه، پدینگ، بوردر و شعاع بوردر پاپ‌آپ. 📐
فونت فارسی «وزیر»: رابط کاربری و تنظیمات با فونت زیبای «وزیر» طراحی شده‌اند. 🖌️
سازگاری با ووکامرس: بهینه‌سازی کامل برای محصولات متغیر ووکامرس. 🛒
مدیریت خطاها: نمایش پیام‌های خطا به‌جای Crash سایت در صورت عدم وجود ووکامرس یا محصول متغیر. ⚠️
آیکون بستن قابل تنظیم: سایز و رنگ آیکون بستن پاپ‌آپ قابل شخصی‌سازی است. 🔴

مزایای استفاده از افزونه 🌟

• استفاده از «ویژگی رنگ باران» فواید متعددی برای فروشگاه‌های آنلاین شما به همراه دارد:
• جذابیت بصری: نمایش رنگ‌ها با دایره‌های رنگی و پاپ‌آپ انیمیشنی، تجربه کاربری را بهبود می‌بخشد. 😍
• انعطاف‌پذیری: تنظیمات گسترده به شما امکان می‌دهد افزونه را با نیازهای خود تطبیق دهید. 🔧
• بهینه‌سازی برای ووکامرس: سازگاری کامل با محصولات متغیر ووکامرس. 🛍️
• سبک و سریع: طراحی سبک افزونه باعث می‌شود عملکرد سایت شما تحت تأثیر قرار نگیرد. ⚡
• پشتیبانی از فونت فارسی: استفاده از فونت «وزیر» برای کاربران فارسی‌زبان ایده‌آل است. 🖋️
• رایگان و قابل ارتقا: نسخه فعلی رایگان است و قابلیت توسعه در آینده دارد. 💸

لیست مزایا

• افزایش جذابیت کارت محصولات. 🌈
• بهبود تجربه کاربری با پاپ‌آپ شیک. ✨
• تنظیمات ساده و قابل فهم. 😊
• سازگاری با تم‌های مختلف وردپرس. 🎉
• عدم نیاز به دانش برنامه‌نویسی. 🚀
• پشتیبانی از به‌روزرسانی‌های آینده. 🔄

آموزش نصب افزونه 📥

نصب افزونه «ویژگی رنگ باران» بسیار ساده و کاربرپسند است. مراحل زیر را با دقت دنبال کنید:

دانلود افزونه:

• فایل افزونه را از وب‌سایت رسمی «باران سایت» (https://baransite.com) دانلود کنید. 📦
• فایل ZIP شامل پوشه bs-color با فایل‌ها و زیرپوشه‌های css، js، و fonts است.

آپلود در وردپرس:

• به پیشخوان وردپرس بروید، به بخش «افزونه‌ها» > «افزودن» بروید. ⬆️
• فایل ZIP را انتخاب کرده و روی «اکنون نصب کن» کلیک کنید.

فعال‌سازی:

• پس از نصب موفق، روی دکمه «فعال‌سازی» کلیک کنید تا افزونه فعال شود. ✅

بررسی پیش‌نیازها:

• مطمئن شوید ووکامرس در سایت شما فعال است. 🛒
• نسخه وردپرس و ووکامرس باید به‌روز باشد. 🔄

نکات نصب

• قبل از نصب، بکاپ کامل از سایت خود تهیه کنید. 💾
• اگر خطایی رخ داد، لاگ‌های سرور را بررسی کنید. ⚠️
• افزونه را در محیط تست (Staging) قبل از استفاده در سایت اصلی آزمایش کنید. 🧪

آموزش کار با تنظیمات افزونه ⚙️

پس از نصب، می‌توانید تنظیمات افزونه را از پیشخوان وردپرس مدیریت کنید. برای دسترسی:

1. به منوی «رنگ باران 🎨» در پیشخوان بروید. 🌈
2. با فرم تنظیمات روبه‌رو می‌شوید که شامل موارد زیر است:

تنظیمات اصلی

جایگاه نمایش رنگ‌ها:

• انتخاب بین «عمودی (زیر هم)» و «افقی (کنار هم)» برای دایره‌های رنگ در کارت محصول. ↔️↕️
• پیش‌فرض: عمودی.

جایگاه نمایش رنگ‌ها در پاپ‌آپ:

• انتخاب بین «افقی» و «عمودی» برای رنگ‌ها در پاپ‌آپ. 🌐
• پیش‌فرض: افقی.

تعداد رنگ‌های قابل نمایش:

• تعیین حداکثر تعداد رنگ‌ها در کارت محصول (محدوده: ۱ به بالا، پیش‌فرض: ۴). 🔢

رنگ بوردر دایره‌ها:

• انتخاب رنگ بوردر با ابزار انتخاب رنگ (پیش‌فرض: #cccccc). 🎨

سایز بوردر دایره‌ها:

• تنظیم سایز بوردر به پیکسل (محدوده: ۰ به بالا، پیش‌فرض: ۱). 📏

ابعاد دایره رنگ:

• تنظیم سایز دایره‌ها در کارت محصول (محدوده: ۱۰ پیکسل به بالا، پیش‌فرض: ۱۵ پیکسل). 🔵

ابعاد دایره رنگ در پاپ‌آپ:

• تنظیم سایز دایره‌ها در پاپ‌آپ (محدوده: ۱۰ پیکسل به بالا، پیش‌فرض: ۳۰ پیکسل). 🔵

رنگ پس‌زمینه پاپ‌آپ:

• انتخاب رنگ پس‌زمینه پاپ‌آپ با ابزار انتخاب رنگ (پیش‌فرض: #ffffff). 🎨

پدینگ داخلی پاپ‌آپ:

• تنظیم پدینگ از چهار طرف به پیکسل (محدوده: ۰ به بالا، پیش‌فرض: ۱۰ پیکسل). 📐

ابعاد پاپ‌آپ:

• تنظیم طول و عرض پاپ‌آپ به پیکسل (محدوده: ۵۰ پیکسل به بالا، پیش‌فرض: ۱۰۰×۷۰ پیکسل). 📏

سایز بوردر پاپ‌آپ:

• تنظیم سایز بوردر پاپ‌آپ به پیکسل (محدوده: ۰ به بالا، پیش‌فرض: ۲ پیکسل). 📏

رنگ بوردر پاپ‌آپ:

• انتخاب رنگ بوردر پاپ‌آپ با ابزار انتخاب رنگ (پیش‌فرض: #ffffff). 🎨

شعاع بوردر پاپ‌آپ:

• تنظیم شعاع بوردر پاپ‌آپ به پیکسل (محدوده: ۰ به بالا، پیش‌فرض: ۱۶ پیکسل). 🔲

سایز آیکون بستن پاپ‌آپ:

• تنظیم سایز آیکون بستن به پیکسل (محدوده: ۱۰ پیکسل به بالا، پیش‌فرض: ۲۰ پیکسل). 🔴

رنگ آیکون بستن پاپ‌آپ:

• انتخاب رنگ آیکون بستن با ابزار انتخاب رنگ (پیش‌فرض: #۳۳۳). 🎨

مراحل تنظیم

1. هر گزینه را بر اساس نیاز خود با استفاده از ورودی‌ها (مثل انتخاب رنگ، عدد، یا منوهای کشویی) تنظیم کنید. ⚙️
2. روی دکمه «ذخیره تنظیمات» کلیک کنید تا تغییرات اعمال شود. 💾
3. به صفحه محصول خود بروید و تغییرات را بررسی کنید. 👀

نکات استفاده از تنظیمات

• از ابزار انتخاب رنگ برای دقت بیشتر در انتخاب رنگ‌ها استفاده کنید. 🌈
• سایزها را با توجه به طراحی کلی سایت خود تنظیم کنید تا هارمونی حفظ شود. 📏
• پیش‌نمایش را در مرورگرهای مختلف (کروم، فایرفاکس، سافاری) تست کنید. 🖥️
• اگر پاپ‌آپ به‌درستی نمایش داده نشد، زدن ایندکس (z-index) را در CSS بررسی کنید. ⚙️

کد کوتاه افزونه 📝

• برای استفاده از افزونه در صفحات ووکامرس، از شورت‌کد زیر استفاده کنید:

[bs_color]

نحوه استفاده

• شورت‌کد را در ویرایشگر المنتور، صفحه‌ساز Elementor، یا هر ویرایشگر متنی که از شورت‌کد پشتیبانی می‌کند، قرار دهید. 🛠️
• این شورت‌کد فقط در صفحات محصول متغیر ووکامرس کار می‌کند و برای محصولات ساده یا بدون ویژگی رنگ، پیامی مانند «رنگی برای این محصول یافت نشد» نمایش داده می‌شود. 🛒
• اگر ووکامرس در سایت فعال نباشد، پیام «ووکامرس در سایت فعال نیست» ظاهر می‌شود. ⚠️

مثال عملی

[bs_color]
<div class=”product-description”>این یک محصول زیبا با رنگ‌های متنوع است!</div>

نکات استفاده از شورت‌کد

• شورت‌کد را نزدیک به بخش نمایش محصول قرار دهید تا بهترین نتیجه را بگیرید. 📍
• از CSS سفارشی برای جابجایی موقعیت شورت‌کد در تم خود استفاده کنید (در صورت نیاز). 🎨
• تست کنید که شورت‌کد در همه صفحات محصول به‌درستی کار می‌کند. ✅

سازنده افزونه 👨‍💻

افزونه «ویژگی رنگ باران» توسط تیم حرفه‌ای و با تجربه «باران سایت» توسعه یافته است. این تیم با تمرکز بر طراحی وب و افزونه‌های وردپرسی، محصولاتی با کیفیت بالا و کاربرپسند ارائه می‌دهد. 🌟

• وب‌سایت رسمی: https://baransite.com
• پشتیبانی: از طریق ایمیل support@baransite.com یا فرم تماس در سایت قابل دسترسی است. 📧
• مأموریت: ارائه ابزارهای کاربردی و نوآورانه برای بهبود تجربه کاربران وردپرسی. 🚀

اطلاعات تماس

• ایمیل: baranhelp@gmail.com و support@baransite.com
• شبکه‌های اجتماعی: این تیم را در پلتفرم‌هایی مثل توییتر و اینستاگرام، تلگرام، واتستپ، روبیکا دنبال کنید تا از به‌روزرسانی‌ها مطلع شوید! 📱
• ساعات پشتیبانی: ۹:۰۰ صبح تا ۹:۰۰ شب به وقت محلی (با توجه به منطقه زمانی سازنده).

درباره تیم

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

جزئیات فنی افزونه 🛠️

برای درک بهتر عملکرد افزونه، بیایید به جنبه‌های فنی آن نگاهی بیندازیم:

ساختار فایل‌ها:

• bs-color.php: فایل اصلی افزونه که شامل کدهای PHP و شورت‌کد است.
• css/: شامل فایل‌های admin.css و frontend.css برای استایل‌دهی.
• js/: شامل فایل‌های admin.js و frontend.js برای عملکرد جاوااسکریپت.
• fonts/vazir/: پوشه‌ای برای فونت‌های «وزیر» (Vazir-Regular.woff2 و Vazir-Bold.woff2).

بهینه‌سازی:

• از تابع‌های wp_enqueue_style و wp_enqueue_script برای بارگذاری سبک و بهینه استایل‌ها و اسکریپت‌ها استفاده شده است. ⚡
• فونت‌ها فقط در صورت نیاز بارگذاری می‌شوند تا سرعت سایت حفظ شود. 🚀

امنیت:

• تمام خروجی‌ها با توابع esc_attr و sanitize_hex_color ایمن شده‌اند تا از حملات XSS جلوگیری شود. 🔒
• دسترسی مستقیم به فایل‌ها با شرط !defined(‘ABSPATH’) محدود شده است. 🚫

سازگاری:

• این افزونه با ووکامرس و تم‌های محبوب وردپرس (مانند Astra و OceanWP) آزمایش شده است. 🛠️

نکات فنی برای توسعه‌دهندگان

• اگر می‌خواهید افزونه را سفارشی کنید، از هک‌های کد (Code Hacks) به‌جای تغییر مستقیم فایل‌ها استفاده کنید. ⚙️
• برای اضافه کردن قابلیت‌های جدید، از اکشن‌ها (Actions) و فیلترها (Filters) وردپرس بهره ببرید. 🔧

نکات پیشرفته برای کاربران حرفه‌ای ⚙️

برای کاربرانی که دانش فنی بیشتری دارند، چند نکته پیشرفته وجود دارد:

سفارشی‌سازی CSS:

• می‌توانید با اضافه کردن کد CSS سفارشی در تم خود، استایل‌ها را تغییر دهید. مثلاً:
  .bs-color-circle {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  }
• این کار به شما امکان می‌دهد افکت‌های اضافی مثل سایه اضافه کنید. 🌫️

ادغام با افزونه‌های دیگر:

• این افزونه با افزونه‌هایی مثل Yoast SEO و WP Rocket سازگار است. 🛠️
• برای ادغام با افزونه‌های پیچیده‌تر، از هک‌های PHP استفاده کنید. 💻

آزمایش در محیط‌های مختلف:

• افزونه را در مرورگرهای مختلف (Chrome، Firefox، Safari) و دستگاه‌های مختلف (دسکتاپ، تبلت، موبایل) تست کنید. 🖥️📱

مثال‌های عملی 🌟

برای درک بهتر عملکرد افزونه، چند سناریو عملی را بررسی می‌کنیم:

محصول با ۵ رنگ:

• اگر حداکثر رنگ را ۳ تنظیم کنید، ۲ رنگ اضافی در پاپ‌آپ نمایش داده می‌شوند. 🌈
• تنظیم جهت را افقی کنید تا رنگ‌ها کنار هم قرار گیرند. ↔️

تم تیره:

• رنگ پس‌زمینه پاپ‌آپ را به #۰۰۰۰۰۰ و رنگ بوردر را به #ffffff تغییر دهید تا با تم تیره هماهنگ شود. 🌙

محصول بدون رنگ:

• اگر محصولی رنگ نداشته باشد، پیام «رنگی برای این محصول یافت نشد» نمایش داده می‌شود. ⚠️

لیست مثال‌ها

• تنظیم پاپ‌آپ برای محصول با ۱۰ رنگ. 🔟
• استفاده از فونت «وزیر» در تم‌های مختلف. 🖌️
• تست عملکرد در صفحات با ترافیک بالا. 🚦

نتیجه‌گیری 🌟

افزونه «ویژگی رنگ باران» در نسخه ۱.۰.۰ یک ابزار کامل و قدرتمند برای فروشگاه‌های آنلاین با ووکامرس است.

🌈 با امکانات گسترده از جمله نمایش دایره‌های رنگی، پاپ‌آپ انیمیشنی، و تنظیمات سفارشی، این افزونه می‌تواند تجربه خرید مشتریان شما را به سطح جدیدی ببرد.

✨ نصب و استفاده از آن آسان است، و با آموزش‌های ارائه‌شده در این مقاله، هر کاربری می‌تواند به‌راحتی از آن بهره ببرد.

🚀 تیم «باران سایت» با تعهد به کیفیت و پشتیبانی، این افزونه را به یک انتخاب ایده‌آل برای وبمستران تبدیل کرده است.

اگر به دنبال افزونه‌ای هستید که هم زیبا باشد، هم کاربردی، و هم با نیازهای فارسی‌زبانان سازگار باشد، «ویژگی رنگ باران» بهترین گزینه است!