سایت‌ساز

CSS و JavaScript سفارشی سایت — استایل و اسکریپت سراسری

پشتیبانی میزکار

1405 تیر 28

با خواندن این راهنما می‌توانید…

بفهمید CSS سفارشی و JavaScript سفارشی چه زمانی لازم است
کد ظاهری یا رفتاری را روی همهٔ صفحات سایت بگذارید
از راهنمای داخل پنل برای کلاس‌های آماده استفاده کنید

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

این بخش چیست؟

گاهی تنظیمات تم برای همهٔ نیازها کافی نیست. دو ابزار اضافه دارید:

ابزار	برای چه کاری
CSS سفارشی	تغییر ظاهر — رنگ دقیق، فاصله، مخفی کردن بخشی
JavaScript سفارشی	رفتار — چت آنلاین، آمار بازدید گوگل، پیکسل تبلیغات

کد روی همهٔ صفحات عمومی سایت اعمال می‌شود.

از کجا پیدایش کنم؟

سایت من → سایت‌ها → سایت → تنظیمات:

صفحه	نام در پنل
ظاهر	CSS سفارشی
رفتار	JavaScript سفارشی

قبل از شروع

اگر به CSS یا JavaScript آشنایی ندارید، با پشتیبانی یا متخصص هماهنگ کنید — کد اشتباه می‌تواند سایت را خراب کند
یک تغییر کوچک بزنید → ذخیره → تست — نه ده خط یک‌جا
اول تم را کامل تنظیم کنید

CSS سفارشی — قدم‌به‌قدم

۱. صفحه را باز کنید

تنظیمات → CSS سفارشی

در همین صفحه راهنمای کلاس‌های CSS نمایش داده می‌شود — کلاس‌هایی که سایت‌ساز خودکار می‌گذارد.

۲. کلاس‌های مفید (خلاصه)

سایت روی هر صفحه یک نوع مشخص می‌گذارد:

صفحه	کلاس
صفحه اصلی	`mz-page-home`
فروشگاه	`mz-page-shop`
جزئیات محصول	`mz-page-product`
بلاگ	`mz-page-blog`
تماس با ما	`mz-page-contact`

۳. مثال‌های ساده

مخفی کردن بالای سایت فقط در صفحه اصلی:

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 — کد را موقتاً خالی کنید و ذخیره
اسکریپت کار نمی‌کند	کد را از منبع رسمی دوباره بگیرید
فقط یک صفحه را می‌خواهم	از کلاس `mz-page-...` در CSS استفاده کنید

مجله خبری