CSS و JavaScript سفارشی سایت — استایل و اسکریپت سراسری
میزکار
publish-status: draft
CSS و JavaScript سفارشی — وقتی تم کافی نیست
با خواندن این راهنما میتوانید…
بفهمید CSS سفارشی و JavaScript سفارشی چه زمانی لازم است
کد ظاهری یا رفتاری را روی همهٔ صفحات سایت بگذارید
از راهنمای داخل پنل برای کلاسهای آماده استفاده کنید
این بخش پیشرفته است. اگر تازهکار هستید، اول تم و رنگها و سکشنهای صفحه اصلی را کامل کنید.
این بخش چیست؟
گاهی تنظیمات تم برای همهٔ نیازها کافی نیست. دو ابزار اضافه دارید:
ابزار | برای چه کاری |
|---|---|
CSS سفارشی | تغییر ظاهر — رنگ دقیق، فاصله، مخفی کردن بخشی |
JavaScript سفارشی | رفتار — چت آنلاین، آمار بازدید گوگل، پیکسل تبلیغات |
کد روی همهٔ صفحات عمومی سایت اعمال میشود.
از کجا پیدایش کنم؟
سایت من → سایتها → سایت → تنظیمات:
صفحه | نام در پنل |
|---|---|
ظاهر | CSS سفارشی |
رفتار | JavaScript سفارشی |
قبل از شروع
اگر به CSS یا JavaScript آشنایی ندارید، با پشتیبانی یا متخصص هماهنگ کنید — کد اشتباه میتواند سایت را خراب کند
یک تغییر کوچک بزنید → ذخیره → تست — نه ده خط یکجا
اول تم را کامل تنظیم کنید
CSS سفارشی — قدمبهقدم
۱. صفحه را باز کنید
تنظیمات → CSS سفارشی
در همین صفحه راهنمای کلاسهای CSS نمایش داده میشود — کلاسهایی که سایتساز خودکار میگذارد.
۲. کلاسهای مفید (خلاصه)
سایت روی هر صفحه یک نوع مشخص میگذارد:
صفحه | کلاس |
|---|---|
صفحه اصلی |
|
فروشگاه |
|
جزئیات محصول |
|
بلاگ |
|
تماس با ما |
|
۳. مثالهای ساده
مخفی کردن بالای سایت فقط در صفحه اصلی:
body.mz-page-home .page-header {
display: none;
}پسزمینهٔ صفحه محصول:
body.mz-page-product .page-content {
background: #f8f9fa;
}۴. ذخیره و تست
کد را در کادر بنویسید یا بچسبانید
ذخیره
سایت را با
Ctrl+F5تازه کنید
JavaScript سفارشی — قدمبهقدم
کاربردهای رایج
کار | توضیح |
|---|---|
Google Analytics | کد رسمی گوگل |
چت آنلاین (Raychat، Crisp و …) | کدی که سرویس چت به شما میدهد |
پیکسل تبلیغات | فقط از منبع رسمی |
مراحل
تنظیمات → JavaScript سفارشی
کد را بچسبانید — معمولاً همان کدی که سرویس داده
ذخیره
سایت را باز کنید — اگر خطایی بود، با پشتیبانی تماس بگیرید
مثال واقعی — «مخفی کردن هدر در صفحه اول»
مدیر سایت میخواست روی اسلایدر تمامعرض، هدر دیده نشود:
تم و رنگها → هدر Transparent (قبلاً تنظیم شده)
CSS سفارشی → کد مخفی کردن هدر فقط در صفحه اصلی
ذخیره
صفحهٔ اول — اسلایدر تمام صفحه بدون هدر ✅
نکات امنیت و کیفیت
فقط کد معتبر
کد را فقط از منابع معتبر (گوگل، سرویس چت رسمی و …) بگیرید.
اول تم، بعد CSS
قبل از CSS پیچیده، تم را تنظیم کنید.
سکشن صفحه اصلی
برای ظاهر یک بخش خاص صفحه اول، بهتر است از تنظیمات همان سکشن در سکشنهای صفحه اصلی استفاده کنید — نه CSS سراسری.
اگر این اتفاق افتاد…
مشکل | چه کار کنید |
|---|---|
استایل اعمال نشد | کد را بررسی کنید — راهنمای کلاسها در همان صفحه |
کل سایت سفید یا خراب | خطا در CSS — کد را موقتاً خالی کنید و ذخیره |
اسکریپت کار نمیکند | کد را از منبع رسمی دوباره بگیرید |
فقط یک صفحه را میخواهم | از کلاس |
قدم بعدی
موضوع | لینک |
|---|---|
ظاهر بدون کد | |
بخشهای صفحه اول | |
آمار بازدید |
مسیر فنی (برای پشتیبانی)
بخش | مسیر |
|---|---|
CSS سفارشی |
|
JavaScript سفارشی |
|