مدیریت یک سایت شامل تمامی فعالیت‌هایی می‌شود که وبمستران و مدیران سایت آنها را انجام می‌دهند که این فعالیت‌ها را ممکن است کاربران سایت مشاهده کنند و یا اعمالی باشند در پشت صحنه سایت انجام می‌شوند و کاربران قادر به تشخیص چنین فعالیت‌هایی نباشند؛ به طور مثال بروزرسانی سایت و تولید محتوا از جمله مواردی است که کاربران سایت قادر به مشاهده آن هستند اما مواردی مانند پشتیبانی فنی سایت و بروزرسانی های هسته وردپرس از جمله مواردی است که کاربران قادر به مشاهده آن نخواهند بود.
در طراحی یک سایت نیز عناصر مختلفی کاربران دارند که این عناصر می‌توانند جهت زیبایی ظاهری باشند و یا ایجاد قابلیت‌هایی برای کاربران در سایت باشد.
یکی از موارد بسیار پرکاربرد در وردپرس استفاده از دکمه‌های CSS است که در بخش‌های مختلف کاربرد دارند؛ یکی از بخش‌هایی که این دکمه‌ها کاربرد زیادی دارند، در مطالب سایت می‌باشد که ممکن است نویسنده از آنها جهت استفاده در لینک‌های دانلود و اطلاعات اضافی سایت استفاده کرده باشد. ایجاد دکمه‌های CSS در وردپرس کار ساده‌ای نیست و طراحی آن زمان زیادی را از شما خواهد گرفت که ممکن است در این میان کاربرانی نیز وجود داشته باشند که به دلیل آشنا نبودن با کدنویسی قادر به طراحی چنین دکمه‌هایی نباشد. در این مقاله قصد داریم افزونه‌ای را خدمت شما کاربران وردپرسی معرفی کنیم که توسط آن قادر به ایجاد انواع دکمه‌ها و آیکن‌های CSS در سایت وردپرسی خود خواهید بود.
افزونه Mango Buttons
افزونه Mango Buttons یک افزونه حرفه‌ای و کاربردی برای وردپرس می‌باشد که توسط آن قادر به ایجاد انواع آیکن و دکمه‌های CSS سفارشی در سایت وردپرسی خود خواهید بود. این افزونه توانسته است از میان +۱۰,۰۰۰ نصب خود از طریق مخزن وردپرس امتیاز کامل ۵ از ۵ را به خود اختصاص دهد که نشان از رضایت کامل کاربران می‌باشد.
برخی از ویژگی‌های افزونه:
- قابلیت ایجاد آسان انواع دکمه و آیکن
- قابلیت تعیین نوع طراحی و سفارشی سازی آن
- قابلیت ایجاد آیکن‌های ریسپانسیو و واکنش‌گرا
- قابلیت ایجاد پیش‌نمایش پیش از انتشار در سایت
- قابلیت استفاده بخش‌های مختلف سایت
- قابلیت انتخاب انواع فونت آیکن برای دکمه‌ها
- و…
نصب و استفاده از افزونه Mango Buttons
برای استفاده از افزونه ابتدا اقدام به نصب و فعال‌سازی افزونه از طریق بخش افزودن افزونه در پیشخوان وردپرس و یا مخزن وردپرس کنید.
پس از نصب و فعال‌سازی افزونه بخشی به نام Mango Buttons در پیشخوان وردپرس ظاهر می‌شود که می‌توانید آیکن مورد نظر خود را از طریق این بخش ایجاد کنید؛ برای ایجاد آیکن وارد صفحه Mango Buttons شوید.
Mango Buttons Settings
این بخش مربوط به تنظیمات اصلی و اولیه افزونه می‌باشد که باید آن را متناسب با نیاز خود تکمیل نمایید.
Editor Icon: این بخش از شما می‌خواهد مشخص کنید نوع آیکن شما به چه رنگی باشد!
COLOR: اگر می‌خواهید آیکن‌های شما رنگی باشند، این گزینه را انتخاب کنید تا بتوانید انواع آیکن رنگی در سایت وردپرسی خود ایجاد کنید.
GRAYSCALE: اگر می‌خواهید آیکن‌های شما سیاه‌وسفید باشند، این گزینه را انتخاب کنید تا بتوانید آیکن سیاه‌وسفید در سایت وردپرسی خود ایجاد کنید.
Extended Language Support: توسط این گزینه می‌توانید تعیین کنید پشتیبانی از تمامی زبان‌های دنیا فعال یا غیرفعال باشند.
پس از اعمال تنظیمات موردنظر خود برای ذخیره‌سازی اطلاعات بر روی Save Setting کلیک کنید.
پس از اعمال تنظیمات دلخواه خود، باید وارد بخش ارسال مطلب یا ایجاد برگه شوید تا بتوانید آیکن‌های موردنظر خود را ایجاد کنید. پس از ورود به بخش ارسال مطلب، آیکنی به شکل زیر در نوارابزار ویرایشگر شما ظاهر می‌شود که توسط آن قادر به ایجاد آیکن‌ها در وردپرس خواهید بود. برای ایجاد آیکن بر روی آن کلیک کنید تا پنجره‌ای مطابق شکل زیر مشاهده شود.
Select a style: از طریق این گزینه باید استایلی را برای نمایش آیکن‌های خود انتخاب کنید؛ با کلیک بر روی این گزینه ۴ نوع استایل برای شما قابل انتخاب است.
Flat: با انتخاب این گزینه آیکن شما به صورت کاملا فلت نمایش داده می‌شود.
RAISED: با انتخاب این گزینه حالت فلت شما کمی ساده‌دار می‌شود.
GLASS: با انتخاب این گزینه آیکن‌های شما به صورت شیشه‌ای به نمایش در می‌آید.
REVERSED: با انتخاب این گزینه نیز آیکن شما با حالتی متفاوت به نمایش در می‌آید که می‌توانید نوع آن را با ردن موس خود بر روی این گزینه در بالای همان بخش مشاهده کنید.
Color: این بخش به صورت یک دایره رنگی نمایش داده شده است که با کلیک بر روی آن می‌توانید رنگ آیکن مورد نظر خود را نیز انتخاب کنید تا در سایت با آن رنگ به نمایش درآید.
Size: توسط این بخش نیز می‌توانید سایز آیکن مورد نظر خود را انتخاب کنید؛ این گزینه به شما سه سایز مختلف را نمایش می‌دهد که می‌توانید متناسب با نیاز خود یک سایز را جهت نمایش در سایت انتخاب کنید.
Corners: توسط این گزینه قادر به تعیین نوع حاشیه و استایل آیکن خود را از میان سه حالت دایره، مربع و مربع با حاشیه گرد انتخاب کنید.
Text Style: توسط این گزینه می‌توانید سایز متن ایجاد شده در آیکن را انتخاب کنید؛ در این بخش نیز سه سایز مختلف در دسترس است که می‌توانید یکی از آنها را متناسب با نیاز خود انتخاب نمایید.
Button Text: این گزینه مربوط به متن نمایشی درون دکمه سفارشی است.
Add Icon: با انتخاب این گزینه می‌توانید آیکنی را برای نمایش دکمه خود انتخاب کنید.
Button Link: این گزینه مربوط به لینکی است که کاربران با کلیک بر روی آن وارد سایت می‌شوند که در صورت نیاز به باز شدن لینک در تب جدید باید گزینه کناری آن که گزینه Open in new tab است و به صورت آیکن نمایش داده شده است را انتخاب کنید.
نتیجه‌گیری: استفاده از آیکن‌ها و دکمه‌های CSS سفارشی در سایت‌ها کمک زیادی به مدیران سایت‌ها و وبمستران می‌کند که در این مقاله اقدام به آموزش ایجاد دکمه‌های سفارشی CSS در وردپرس با استفاده از افزونه Mango کردیم.
