🏫 راهنمای نصب صفحهی اصلی «مدرسهی گلستان» — قدم به قدم
طراحی به سبک ایمپرزا (نسخهی صورتی) | سازگار با قالب آسترا و المنتور | فونت فارسی وزیرمتن | واکنشگرایی ۱۰۰٪ در موبایل و تبلت
قبل از شروع: فایلهای آماده در کنار همین راهنما قرار دارند:
school-homepage.html— پیشنمایش دقیق طرح (همین را در حال مشاهده هستید)golestan-page-template.php— قالب برگهی آمادهی وردپرس (روش ب)astra-child-گلستان.zip— قالب فرزندِ آماده برای آسترا (روش ب)img/— ۸ تصویر اختصاصی برای استفاده در المنتور
📌 پیشنیازها (۵ دقیقه)
وردپرس نصب باشد
هاست ایرانی یا خارجی با وردپرس نصبشده. آدرس پیشفرض مدیریت: yourdomain.com/wp-admin
افزونههای چتهای قبلی را نصب کنید
از پیشخوان: افزونهها ← افزودن ← بارگذاری افزونه و فایل ZIP هر افزونه را آپلود و فعال کنید. (اگر فایلها را در این گفتگو ندارید، دوباره همینجا آپلودشان کنید تا چکشان کنم.)
نصب فونت فارسی (همان افزونهی قبلی)
افزونهی فونت فارسی (مثلاً «فونت فارسی» / Persian Fonts) را نصب و فعال کنید و فونت پیشفرض را وزیرمتن قرار دهید — همین طرح با وزیرمتن ساخته شده است.
روش الف — پیشنهادی برای شروع
🛠 روش الف: ساخت صفحه در المنتور + آسترا (قابل ویرایش کامل)
نصب قالب آسترا
نمای ظاهری ← پوستهها ← افزودن → جستجوی Astra → نصب و فعالسازی.
نصب المنتور
افزونهها ← افزودن → جستجوی Elementor → نصب و فعالسازی (نسخهی رایگان کافی است).
وارد کردن پالت صورتی (خیلی مهم!)
نمای ظاهری ← سفارشیسازی ← رنگهای سراسری یا در تنظیمات سایت المنتور این رنگها را بسازید:
#EA4C89صورتی تیره —
#C23372صورتی روشن —
#FCE8F1رنگ متن —
#2E2A33ساخت برگهی صفحه اصلی
برگهها ← افزودن → عنوان «صفحه اصلی» → کلیک روی ویرایش با المنتور → ایجاد کانتینر (Container) با عرض کامل (Full Width).
ساخت بخشها — دقیقاً مثل طرح
| بخش طرح | ویجتهای المنتور | نکتهی کلیدی |
|---|---|---|
| هیرو (بنر اصلی) | Container + تصویر پسزمینه + Heading + Text + Button | فیلتر گرادیان صورتی روی عکس + دکمهی گرد |
| نوار آمار | ۴ × Counter داخل یک کانتینر | پسزمینه سفید، سایهی نرم، عددها صورتی |
| درباره ما | دو ستون: Image + (Heading, Text, Icon List, Button) | برچسب «۲۰+ سال» روی عکس |
| مقاطع تحصیلی | ۳ کارت: Image Box + Heading + Text + Link | هاور: بالا پریدن کارت + بزرگشدن عکس |
| چرا ما | ۴ × (Icon Box) | آیکون داخل مربع صورتی روشن |
| اخبار | ۳ کارت: Image + Heading + Text | برچسب تاریخ صورتی روی عکس |
| نظر والدین | Testimonial (یا Quote) | گیومهی گرد صورتی بالای کادر |
| بنر ثبتنام | Container با گرادیان صورتی + Button | دایرههای تزئینی نیمهشفاف |
| فوتر | ۴ ستون: Text + Icon List + HTML | پسزمینه تیرهی بنفش-قهوهای #2E1424 |
واکنشگرایی ۱۰۰٪
پایینِ چپ ویرایشگر المنتور سه آیکون دارد: دسکتاپ / تبلت / موبایل. در هر حالت بررسی کنید:
- در تبلت: کارتها دوستونه، چیدمان دربارهی ما تکستونه شود
- در موبایل: فونت هیرو کوچکتر، دکمهها تمامعرض، منو بهصورت کشویی (جایگزین هدر)
- عددها در موبایل دوستونه باشند
انتشار و تنظیم بهعنوان صفحهی اصلی
تنظیمات ← خواندن → گزینهی «یک برگهی ثابت» → «صفحه اصلی» را انتخاب کنید → ذخیره. تمام! 🎉
روش ب — سریع (بدون کدنویسی، دقیقاً همین طرح)
⚡ روش ب: نصب قالب آمادهی همین طرح (۲ دقیقه)
نصب قالب فرزند آسترا
نمای ظاهری ← پوستهها ← افزودن ← بارگذاری پوسته → آپلود فایل astra-child-گلستان.zip → نصب و فعالسازی.
اگر قبلاً آسترا را فعال کردهاید اشکالی ندارد؛ قالب فرزند همان امکانات آسترا را دارد.
ساخت برگه با قالب اختصاصی
برگهها ← افزودن → عنوان «صفحه اصلی مدرسه» → در ستون سمت راست، بخش قالب (Template) را باز کنید و گزینهی «صفحه اصلی مدرسه (طراحی ایمپرزا صورتی)» را انتخاب کنید → انتشار.
معرفی بهعنوان صفحهی اصلی
تنظیمات ← خواندن → «یک برگهی ثابت» → همین برگه را انتخاب → ذخیره.
در این روش، متنها، شمارهتلفن و تصاویر را میتوانید با باز کردن فایل golestan-page-template.php (در wp-content/themes/astra-child/) ویرایش کنید یا بعداً به المنتور منتقلش کنید.
⚙️ تنظیمات نهایی و سرعت
- جایگزینی تصاویر: عکسهای نمونه را با عکسهای واقعی مدرسه عوض کنید (فایلهای
img/آماده هستند؛ تصاویر ۷۲۰–۱۲۸۰ پیکسل با حجم کم). - کش (Cache): قالب آسترا سبک است؛ با نصب افزونهی کش (LiteSpeed Cache یا WP Fastest Cache) + فشردهسازی تصاویر، امتیاز سرعت بالای ۹۰ میگیرید.
- سئو: Rank Math یا Yoast نصب کنید و عنوان/توضیح متای صفحهی اصلی را با نام مدرسه پر کنید.
- آزمون نهایی: صفحه را در گوشی واقعی و تبلت باز کنید؛ منو و کارتها باید بدون خطا نمایش داده شوند.