اگر بخواهیم یک سایت وردپرسی داشته باشیم که ظاهری خاص و منحصر به فرد داشته باشد، المنتور یک ابزار بسیار قوی و مفید محسوب می‌شود. یکی از قابلیت‌های برجسته این ابزار، امکان استفاده از کلاس‌های سفارشی CSS است که به شما اجازه می‌دهد تا طراحی‌های پیشرفته و متمایز ایجاد کنید.
المنتور به راحتی به شما این امکان را می‌دهد که در هر ویجتی که استفاده می‌کنید، کلاس‌های سفارشی CSS اضافه کنید. فرض کنید می‌خواهید استایل خاصی به یک دکمه بدهید. کافی است ابتدا کلاس مورد نظر خود را تعریف کرده و سپس از آن در المنتور استفاده کنید. این کار می‌تواند باعث شخصی‌سازی بیشتر سایت شما شده و تجربه کاربری بهتری را ارائه دهد.
در این آموزش، نحوه اضافه کردن و استفاده از کلاس‌های سفارشی در المنتور را توضیح خواهیم داد. شما یاد خواهید گرفت که چگونه با استفاده از CSS و المنتور، طراحی زیباتری برای وبسایت وردپرسی خود ایجاد کنید.
قبل از هر چیز، باید مطمئن شوید که المنتور بر روی سایت شما نصب و فعال است. سپس می‌توانید به راحتی کلاس‌های CSS مد نظر خود را به هر عنصر در صفحه اضافه کنید. این قابلیت به شما این امکان را می‌دهد که بدون استفاده از کدهای پیچیده، تغییرات بصری بزرگی در سایت خود ایجاد کنید.
در نهایت، استفاده از کلاس‌های سفارشی در المنتور می‌تواند به شما اجازه بدهد که سایت خود را به بهترین شکل ممکن شخصی‌سازی کنید و جلوه‌ای حرفه‌ای به آن ببخشید. بیایید با نگاهی دقیق‌تر، وارد مراحل اجرای این کار شویم.
نمونه کد برای استفاده از کلاس‌های سفارشی در المنتور
/* CSS */
.my-custom-button {
background-color: #3498db;
color: white;
padding: 10px 20px;
border-radius: 5px;
}
توضیحات خط به خط کد
/* CSS */ این خط نشان‌دهنده آغاز محیط نوشتن کدهای CSS است.
.my-custom-button این یک کلاس CSS تعریف شده به نام
my-custom-button است که به دکمه‌ها استایل می‌دهد.background-color: #3498db; این تنظیم رنگ پس‌زمینه دکمه را به آبی می‌دهد.
color: white; رنگ متن داخل دکمه را به سفید تبدیل می‌کند.
padding: 10px 20px; این اندازه فضای داخلی دکمه را از بالا و پایین ۱۰ پیکسل و از چپ و راست ۲۰ پیکسل می‌دهد.
border-radius: 5px; این موجب می‌شود گوشه‌های دکمه کمی منحنی شوند و ظاهری زیباتر پیدا کنند.