سلام رفیق! 😊 اگه تو هم مثل من با المنتور کار می‌کنی و عاشق طراحی سایت‌های قشنگ و حرفه‌ای هستی، حتماً با بخش سفارشی المنتور آشنایی. یه قسمت باحال که بهت اجازه میده کد CSS رو مستقیم به المان‌هات اضافه کنی. اما صبر کن!
اما… همیشه یه “اما”یی وجود داره، مگه نه؟ 😉 بزار یه چیزی رو رُک و پوست‌کنده بهت بگم: این راحتی و دم دستی بودن، ممکنه یه بهای سنگین هم روی دستت بزاره که شاید اولش متوجهش نشی، ولی وقتی تعداد این کدهای سفارشی زیاد بشه، دودش حسابی تو چشم سرعت و عملکرد سایتت می‌ره! 💨
تو این مقاله می‌خواهم بهت بگم چرا استفاده از بخش سفارشی المنتور برای اضافه کردن کدهای CSS، فکر خوبی نیست و چطور می‌تونی هم استایل‌های دلخواهت رو داشته باشی و هم سایت عملکرد و سرعت خوبی داشته باشه با من تا انتهای این مقاله همراه باش 🙂
🤔بخش سفارشی المنتور چیه و به چه دردی می‌خوره؟
اول بذار یه توضیح ساده بدم که بخش سفارشی المنتور اصلاً چیه. المنتور یه افزونه فوق‌العاده برای وردپرسه که بهت اجازه میده بدون اینکه برنامه‌نویس باشی، صفحات سایتت رو طراحی کنی. حالا توی هر المان، ستون یا بخش که با المنتور می‌سازی، یه تب پیشرفته (Advanced) هست.
📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD
گوگل اعداد ابزارهای تست سرعت سایت رو نخورید. تجربه کاربری مهمه!
توی این تب، یه قسمت به اسم Custom CSS وجود داره که می‌تونی کدهای CSS خودت رو اونجا بنویسی و استایل دلخواهت رو به اون المان بدی. مثلاً می‌تونی رنگ یه دکمه رو عوض کنی یا یه سایه باحال به یه باکس بدی. 🎨 خیلی خوبه، نه؟ ولی یه لحظه صبر کن، این روش یه سری مشکل داره که الان برات میگم.
چرا قرار دادن کد CSS در بخش سفارشی المنتور روش بهینه ای نیست؟
خب، حالا بریم سراغ اصل مطلب. دلایل زیادی هست که نباید کد CSS رو توی بخش سفارشی المنتور بذاری. بذار برات یکی‌یکی توضیح بدم:
یه نکته طلایی درباره المنتور! ✨
قبول داری که المنتور یه غول واقعیه؟ 🦖 یه افزونه پرقدرت و کاربلد که هر طراح سایتی رو شیفته خودش می‌کنه. تیمشون هم دمشون گرم، مدام آپدیت می‌دن و هر بار بهترش می‌کنن. ولی خب، حتی بهترین ابزارای دنیا هم یه جاهایی ممکنه یه کم لنگ بزنن، مگه نه؟ 😉
گوگل اعداد ابزارهای تست سرعت سایت رو نخورید. تجربه کاربری مهمه!
یکی از همین جاها، بخش سفارشی المنتور یا همون Custom CSS خودمونه. بذار رک بهت بگم: الان که داریم حرف می‌زنیم، استفاده از این بخش برای نوشتن کد CSS خیلی بهینه نیست! 😬 چرا؟ چون وقتی تو کد CSS رو توی بخش سفارشی المنتور می‌نویسی، المنتور برای هر المان، ستون یا بخشی که کد زدی، یه فایل CSS جداگانه درست می‌کنه. 🤯 یعنی اگه تو یه صفحه برای 10 تا المان کد CSS بنویسی، 10 تا فایل CSS ساخته میشه! این یعنی مرورگر کاربر باید کلی فایل جداگانه رو لود کنه، و این کار سرعت سایتت رو پایین میاره.
💢 البته شاید توی آپدیت‌های بعدی، المنتور بیاد و این روش لود CSS رو کلاً دگرگون کنه و مثل موشک بهینه‌ش کنه! 🚀 ولی خب، در حال حاضر که اوضاع اینه و عملکرد این قسمتش تعریف چندانی نداره، امن‌ترین و بهترین کار اینه که حرفه‌ای عمل کنی و کدهای CSS سفارشی‌ت رو به طبق روش اصولی و استاندارد در فایل استایل قالبت یا بخش کاستوم CSS خود وردپرس قرار بدی 🙂
1. سرعت سایت کم میشه ⚡
اصلی ترین مشکل قرار دادن کد CSS در بخش سفارشی المنتور همینه!!!
وقتی کد CSS رو توی بخش سفارشی المنتور می‌نویسی، المنتور برای هر کد CSS که به یه المان، ستون یا بخش اضافه کردی، یه فایل CSS جداگانه ایجاد می‌کنه. حالا فکر کن تو یه صفحه 10 تا المان داری و برای هر کدوم یه کد CSS توی بخش سفارشی نوشتی. چی میشه؟ وقتی کاربر صفحه‌ات رو باز می‌کنه، مرورگرش باید 10 تا فایل CSS جدا رو از سرور بارگیری کنه. 😵 هر فایل یه درخواست HTTP جدا به سرور می‌فرسته، و این درخواست‌ها زمان‌برن. نتیجه؟ صفحه‌ات کندتر لود میشه و کاربرات ممکنه کلافه بشن.
تفاوت بین box-shadow و drop-shadow در CSS
در مقابل، اگه کدات رو توی یه فایل CSS واحد (مثل style.css قالبت) بذاری، مرورگر فقط یه فایل رو بارگیری می‌کنه و حتی می‌تونه اون رو کش کنه. اینجوری تعداد درخواست‌ها به سرور کمتره و سرعت لود صفحه‌ات خیلی بهتر میشه.
2. مدیریت کداها سخت و وقت گیر میشه 🛠️
تصور کن توی چند تا صفحه مختلف، برای دکمه‌ها، باکس‌ها یا ویجت‌هات کد CSS توی بخش سفارشی المنتور نوشتی. حالا اگه بخوای یه تغییر کوچیک بدی (مثلاً رنگ یه دکمه رو عوض کنی)، باید بری توی تک‌تک صفحات و المان‌ها رو ویرایش کنی. این کار هم وقت‌گیره، هم اعصاب‌خوردکن! 😣 ولی اگه کدات رو توی یه فایل CSS جدا نگه داری، فقط کافیه اون فایل رو ویرایش کنی و تغییراتت توی کل سایت اعمال میشه. راحت و سریع!
3. این استایل های جدا کش نمیشن!
اگه از افزونه‌های کش مثل WP Rocket یا LiteSpeed Cache استفاده می‌کنی، باید بدونی که این افزونه‌ها نمی‌تونن فایل‌های CSS جداگانه‌ای که المنتور برای بخش سفارشی می‌سازه رو به خوبی بهینه‌سازی کنن. چون این فایل‌ها به صورت پویا تولید می‌شن، کش کردنشون سخت تره. اما یه فایل CSS واحد رو، این افزونه‌ها راحت‌تر مدیریت می‌کنن و سرعت لود رو بهتر می‌کنن.
حالا که فهمیدی چرا بهتره کدهای css ات رو در بخش سفارشی المنتور وارد نکنی، بذار بهت بگم چیکار کنی که هم سایتت سریع باشه، هم کارات راحت‌تر پیش بره: بهترین روش اینه که کدهای CSS رو توی فایل style.css قالبت بنویسی. این فایل توی پوشه قالب سایتته و می‌تونی با یه ویرایشگر ساده مثل VS Code تغییرش بدی. اینجوری کدات به صورت یه فایل واحد لود می‌شن و سرعت سایتت بهتر میشه.
چرا در آموزش های رایا وردپرس از بخش سفارشی المنتور استفاده کردی؟ 😜
تفاوت بین box-shadow و drop-shadow در CSS
حالا شاید با خودت بگی… “چرا تو آموزش‌های رایا وردپرس از اون بخش CSS سفارشی المنتور استفاده می‌کنین با اینکه خودتون می‌گین بهینه نیست؟!” 😜
راست می‌گی، حق با توئه، شاید این سوال برات پیش بیاد. از اونجایی که می‌دونم شما بچه‌های رایا وردپرسی کنجکاوین، گفتم خودم پیش‌دستی کنم و قبل اینکه بپرسین، جوابتونو بدم! 😄
ببین، کُلاً داستان اینه که ما فقط و فقط تو آموزش‌ها از اون بخش استفاده می‌کنیم. چرا؟ الان میگم بهت:
تفاوت بین box-shadow و drop-shadow در CSS
- اول از همه، خیلی سریع‌تره! ✨ تو محیط آموزش وقت کمه، باید سریع بریم سر اصل مطلب و نتیجه رو به کاربر نشون بدیم. وقتی کد CSS رو همونجا توی تنظیمات المنتور می‌زنی، نیازی نیست هی بری یه فایل دیگه رو باز کنی، کدتو پیست کنی، ذخیره کنی، بعد برگردی ببینی چی شد. همونجا کد رو می‌زنی، سریع نتیجه‌شو می‌بینی. مثل یه راه حل دم‌دسته و فوریه که هی سرعت آموزش رو بالا نگه می‌داره!
- بعدشم، واضح نشون میده چی به چیه! 💥 اگه بخوام برای هر تیکه کوچیک CSS هی بگم برو فایل
style.cssرو باز کن، این کد رو اینجا پیست کن… ممکنه شما که داری یاد می‌گیری گیج بشی و فکر کنی وای چقدر سخته! مخصوصاً اگه تازه کار باشی و هنوز با ساختار فایل‌های وردپرس و پوسته آشنا نباشی که دیگه بدتر. ولی وقتی کد رو دقیقاً زیر همون عنصری که می‌خوای تغییر بدی می‌نویسی، قشنگ کد و نتیجه رو کنار هم می‌بینی و ارتباطشون رو سریع درک می‌کنی. عین این می‌مونه که همزمان با آموزش داری کد می‌زنی و نتیجه‌اش رو همون لحظه می‌بینی، اینجوری یادگیری خیلی راحت‌تر میشه!- و نکته سوم اینکه، این روش نمی‌ذاره از اصل مطلب دور شی! هدف اصلی آموزش اینه که تو خودت کد CSS رو وارد کنی و ببینی نتیجه کار همون چیزی میشه که تو آموزش گفته شده یا نه، یا مثلاً بفهمی کجا اشتباه رفتی. اون بخش سفارشی المنتور مثل یه مسیر میان‌بره که مستقیم می‌برتت سر اصل کد و تأثیرش، بدون اینکه وارد جزئیات پیچیده مثل مدیریت فایل‌ها تو هاست بشی.
فقط یه نکته خیلی مهم: همونطور که گفتم، این روش برای آموزش عالیه، چون سرعت و وضوح داره. اما، برای طراحی سایت، کار درست و اصولی اینه که از فایل
style.cssپوسته (بهتره پوسته فرزند باشه) استفاده کنی. چرا؟ چون اینجوری هم کارت منظم‌تر میشه، هم اگه پوسته اصلیت آپدیت شد کدهایی که نوشتی پاک نمیشن، و کلاً مدیریت و بهینه کردن کدها اینجوری خیلی بهتره.پس خلاصه اینکه، توی آموزش‌هامون اون بخش رو استفاده می‌کنیم چون می‌خوام یادگیری برات سریع، واضح و بدون دردسر باشه و همون لحظه نتیجه کدتو ببینی و بگی: “وای! چقدر راحت!” ✨
جمع بندی
اگه این مقاله بهت کمک کرد، حتماً با دوستات به اشتراک بذارش. 😊 اگه سوالی داری یا چیزی برات گنگه، توی نظرات بپرس، من سریع جوابت رو می‌دم. موفق باشی و سایتت همیشه سریع و قشنگ باشه! 🚀 تا یه مقاله و آموزش دیگه فعلننننن 🙂
گوگل اعداد ابزارهای تست سرعت سایت رو نخورید. تجربه کاربری مهمه!
ارسال نظر ( 0 نظر تایید شده )