برای ساخت سایت با وردپرس، ابتدا دامنه و میزبانی مناسب را آماده میکنید، وردپرس را نصب میکنید، قالب را انتخاب میکنید و بعد صفحات، منو و راه ارتباط را میسازید. کار زمانی به انتشار میرسد که صفحات در موبایل قابل استفاده باشند، فرم واقعاً پیام برساند و پشتیبان قابل بازیابی داشته باشید.
در این آموزش طراحی سایت با وردپرس، یک سایت خدماتی کوچک با صفحه خانه، خدمات، درباره ما، تماس و وبلاگ میسازیم. مثالها تمرینیاند و نام مشتری یا پروژه واقعی نیستند. مسیر اصلی با ویرایشگر بلوکی خود وردپرس پیش میرود؛ نصب المنتور یا فروشگاه برای انجام این تمرین لازم نیست. اگر هنوز بین شاخههای یادگیری تصمیم نگرفتهاید، ابتدا نقشه راه یادگیری طراحی سایت را ببینید.
پیش از شروع، خروجی تمرین را مشخص کنید
برای نمونه، سایت معرفی یک کارگاه تعمیر وسایل را در نظر بگیرید. بازدیدکننده باید بفهمد چه خدماتی ارائه میشود، محدوده پذیرش چیست و چگونه درخواست بفرستد. بهجای وارد کردن متنهای آزمایشی طولانی، برای هر صفحه سه چیز آماده کنید: پرسش مخاطب، پاسخ کوتاه و اقدام بعدی.
| صفحه | محتوای لازم | آزمون خروجی |
|---|---|---|
| خانه | معرفی روشن، خلاصه خدمات و دکمه تماس | مخاطب بدون جستوجوی طولانی، موضوع سایت را میفهمد |
| خدمات | شرح هر خدمت، شرایط و اطلاعات لازم برای درخواست | دکمه درخواست به مقصد درست میرود |
| درباره ما | معرفی واقعی فعالیت و اطلاعات تأییدشده | ادعای ساختگی یا متن نمونه باقی نمانده است |
| تماس | راه تماس و در صورت نیاز فرم کوتاه | پیام آزمایشی واقعاً دریافت میشود |
| وبلاگ | فهرست نوشتهها و یک مقاله مفید | نوشته از فهرست باز میشود و به صفحه مرتبط لینک دارد |
برای دنبال کردن آموزش، دسترسی به پنل میزبانی، مدیریت دامنه و یک ایمیل در دسترس لازم دارید. اگر فقط تمرین میکنید، میتوانید ابتدا از محیط محلی استفاده کنید؛ سایت محلی خودبهخود عمومی نمیشود و انتقال آن به هاست مرحله جداگانهای دارد.
۱. دامنه، هاست و HTTPS را آماده کنید
دامنه، نشانی سایت و هاست، محل نگهداری فایلها و پایگاه داده است. نرمافزار این آموزش، وردپرس قابل نصب روی میزبانی خودتان است. آن را با سرویس میزبانیشده WordPress.com یکسان نگیرید. رایگان بودن دریافت وردپرس، هزینه دامنه، میزبانی، نگهداری یا ابزارهای پولی را حذف نمیکند.
- دامنه را در حساب متعلق به خودتان ثبت کنید و دسترسی بازیابی و تمدیدش را نگه دارید.
- پشتیبانی هاست از نیازمندیهای جاری وردپرس، HTTPS، پشتیبان و روش بازیابی را بررسی کنید.
- نامسرورها یا رکوردهای DNS را دقیقاً طبق راهنمای میزبان تنظیم کنید. پیش از تغییر DNS دامنهای که ایمیل فعال دارد، رکوردهای ایمیل را هم بررسی کنید.
- بعد از اتصال دامنه، گواهی TLS را برای نامهای مورد استفاده فعال کنید و باز شدن نشانی HTTPS را بیازمایید.
در زمان بررسی این راهنما، صفحه رسمی نیازمندیهای وردپرس، PHP 8.3 یا بالاتر، MariaDB 10.11 یا بالاتر یا MySQL 8.0 یا بالاتر و پشتیبانی HTTPS را توصیه میکند. نسخه سازگار قالب و افزونهها را نیز با میزبان تطبیق دهید. برای مراحل پنلهای رایج، آموزش نصب SSL و فعالسازی HTTPS در وردپرس را ببینید؛ روش دقیق به تنظیمات میزبانی شما بستگی دارد.
معیار عبور: دامنه روی میزبانی موردنظر باز شود و مرورگر برای نشانی HTTPS خطای گواهی نشان ندهد. انتشار DNS زمان ثابت و یکسانی برای همه دامنهها ندارد.
۲. وردپرس را روی محل درست نصب کنید
اگر هاست نصبکننده وردپرس دارد، دامنه مقصد، مسیر نصب، زبان و حساب مدیر را بررسی کنید. خالی بودن مسیر نصب معمولاً یعنی نصب در ریشه همان دامنه؛ وارد کردن پوشهای مثل wordpress میتواند نشانی سایت را به آن پوشه ببرد. روی مسیر دارای سایت یا اطلاعات قبلی، نصب تازه انجام ندهید.
در روش دستی، طبق راهنمای رسمی نصب وردپرس، بسته را از منبع رسمی دریافت و در مسیر موردنظر استخراج کنید. سپس پایگاه داده و کاربر دارای مجوز مناسب آن را بسازید، نشانی محل نصب را باز کنید و مشخصات اتصال پایگاه داده را در نصبکننده وارد کنید. در پایان، نام سایت، نام کاربری مدیر، رمز قوی و ایمیل مدیریت را تعیین کنید.
رمز پایگاه داده با رمز حساب مدیر وردپرس دو کاربرد جدا دارد. آنها را در متن صفحه، فایل عمومی یا پیام پشتیبانی قرار ندهید. اگر میزبان وردپرس را از قبل نصب کرده، نصب دوباره لازم نیست؛ ابتدا نشانی و حساب تحویلی را بررسی کنید.
معیار عبور: ورود مدیر ممکن باشد، صفحه عمومی بدون خطای اتصال پایگاه داده باز شود و نصب در دامنه و مسیر انتخابی انجام شده باشد.
۳. تنظیمات پایه را پیش از ساخت صفحات انجام دهید
در «تنظیمات ← عمومی»، عنوان سایت، ایمیل مدیریت، زبان فارسی و منطقه زمانی را تنظیم کنید. برای سایتی که بر اساس زمان ایران کار میکند، تهران را انتخاب کنید. ایمیل مدیریت باید در اختیار مسئول واقعی سایت باشد. مستندات تنظیمات عمومی کاربرد هر فیلد را توضیح میدهد.
در «تنظیمات ← پیوندهای یکتا»، برای این سایت آموزشی ساختار «نام نوشته» را انتخاب و ذخیره کنید. برای هر محتوا نامک کوتاه و مرتبط تعیین کنید؛ مثلاً نامک صفحه تماس میتواند contact باشد. این انتخاب را در شروع انجام دهید. تغییر نشانیهای سایت قدیمی به بررسی ریدایرکت و لینکهای قبلی نیاز دارد. گزینهها در راهنمای پیوندهای یکتا آمدهاند.
نشانی وردپرس و نشانی سایت را برای رفع خطای ظاهری، حدسی تغییر ندهید؛ این تغییر ممکن است دسترسی را مختل کند. محتوای نمونه را بررسی و موارد غیرضروری را حذف کنید. اگر ثبتنام عمومی لازم ندارید، آن را فعال نکنید.
معیار عبور: زبان و زمان درست باشند، ایمیل مدیریت مشخص باشد و یک نشانی داخلی نمونه بدون خطا باز شود.
۴. یک قالب مناسب فارسی انتخاب کنید
از «نمایش ← پوستهها ← افزودن» قالب را جستوجو، پیشنمایش و فعال کنید. برای تمرین اول، قالبی با چیدمان ساده انتخاب کنید و راستبهچپ بودن، خوانایی متن فارسی و نمایش موبایلش را بیازمایید. پیشنمایش زیبا با متن انگلیسی، کافی نیست؛ عنوان بلند فارسی، عدد، تصویر و دکمه واقعی را امتحان کنید.
تفاوت مسیر قالب بلوکی و کلاسیک
در قالب بلوکی، معمولاً «نمایش ← ویرایشگر» در دسترس است و سربرگ، پابرگ و قالبهای صفحات را با ویرایشگر سایت مدیریت میکنید. قالب کلاسیک ممکن است از «سفارشیسازی»، «فهرستها» و تنظیمات خودش استفاده کند. نبودن یک گزینه لزوماً خطا نیست. راهنمای ویرایشگر سایت توضیح میدهد که این ویرایشگر به قالب بلوکی نیاز دارد.
تغییر یک برگه با تغییر قالب نمایش همه برگهها فرق دارد. برای تمرین، ابتدا محتوای یک صفحه را بسازید و سپس سراغ سربرگ مشترک بروید. هنگام تغییر قالب سایت فعال، ابتدا نسخه آزمایشی و پشتیبان داشته باشید. دستورهای نصب و فعالسازی در مستندات کار با پوستهها آمدهاند.
۵. اولین برگه را با ویرایشگر بلوکی بسازید
از «برگهها ← افزودن برگه» صفحه «خدمات» را بسازید. عنوان برگه را وارد کنید و با دکمه افزودن بلوک، پاراگراف، تیتر، تصویر و دکمه اضافه کنید. برای زیرعنوانهای اصلی از H2 و برای زیرمجموعه آنها از H3 استفاده کنید. اگر قالب عنوان صفحه را H1 نمایش میدهد، همان عنوان را دوباره در بدنه تکرار نکنید.
- یک پاراگراف بنویسید که خدمت و مخاطب آن را روشن کند.
- زیر تیتر «چه اطلاعاتی برای درخواست لازم است؟» یک فهرست کوتاه قرار دهید.
- تصویر مرتبط و کمحجم بارگذاری کنید. برای تصویر دارای معنای محتوایی، متن جایگزین توصیفی بنویسید.
- یک دکمه با عنوان روشن مثل «ارسال درخواست» اضافه کنید و مقصد واقعی صفحه تماس را پس از ساخت آن انتخاب کنید.
- پیشنویس را ذخیره و پیشنمایش را بررسی کنید. بعد از آماده شدن، وضعیت انتشار برگه را با توجه به عمومی یا آزمایشی بودن محیط انتخاب کنید.
در این تمرین، خروجی خوب یعنی ترتیب محتوا روشن باشد و اقدام بعدی کار کند. برای ساخت چیدمان، میتوانید بلوکهای گروه و ستون را امتحان کنید؛ قبل از افزودن اجزای تزئینی، نمایش آنها در عرض کم را ببینید. راهنمای ویرایشگر بلوکی وردپرس مرجع کار با این اجزاست.
تمرین: صفحه خدمات را بدون کپی کردن یک دمو بسازید. یک نفر دیگر باید بتواند از روی همین صفحه توضیح دهد چه درخواستی میتواند بفرستد و از کجا شروع کند.
۶. صفحه خانه و وبلاگ را به وردپرس معرفی کنید
برگههای خانه، درباره ما و تماس را نیز بسازید. اگر وبلاگ میخواهید، یک برگه جدا با عنوان «وبلاگ» ایجاد کنید. از «تنظیمات ← خواندن»، گزینه «یک برگه یکتا» را انتخاب کنید، خانه را برای صفحه نخست و وبلاگ را برای برگه نوشتهها تعیین کنید. این دو انتخاب باید متفاوت باشند.
برگهای که بهعنوان محل نوشتهها تعیین میکنید، با قالب فهرست نوشتهها نمایش داده میشود؛ روی نمایش متن داخل آن برگه بهعنوان محتوای وبلاگ حساب نکنید. مسیر در راهنمای صفحه نخست ثابت توضیح داده شده است. اگر خانه هنوز با انتظار شما فرق دارد، قالب Front Page و تنظیمات اختصاصی پوسته را بررسی کنید.
معیار عبور: ریشه دامنه، صفحه خانه موردنظر را نشان دهد و نشانی وبلاگ، فهرست نوشتهها را باز کند.
۷. منو و مسیر رسیدن به صفحات را بسازید
در قالب بلوکی، سربرگ را در ویرایشگر سایت باز کنید و بلوک «ناوبری» را ویرایش کنید. صفحههای موردنظر را اضافه و ترتیبشان را مشخص کنید. طبق راهنمای بلوک ناوبری، فهرست خودکار برگهها را میتوان به لینکهای قابل ویرایش تبدیل کرد؛ پس از این تبدیل، برگههای تازه الزاماً خودکار اضافه نمیشوند.
در قالب کلاسیک، اگر «نمایش ← فهرستها» وجود دارد، فهرست را بسازید، برگهها را به آن اضافه کنید و جایگاه نمایش پشتیبانیشده قالب را انتخاب کنید. ذخیره فهرست بدون انتخاب جایگاه مناسب ممکن است آن را در سربرگ نشان ندهد.
برای سایت تمرینی، خانه، خدمات، درباره ما، وبلاگ و تماس کافیاند. هر گزینه را از خود سایت باز کنید؛ تنها درست بودن نام آن در محیط ویرایش کافی نیست. منوی بازشونده موبایل، دکمه بستن و امکان استفاده با صفحهکلید را هم بررسی کنید.
۸. افزونهها و فرم تماس را بر اساس نیاز اضافه کنید
برای هر افزونه یک کار مشخص بنویسید. اگر قالب یا سرویس هاست آن نیاز را پوشش داده، نصب ابزار دوم را با دلیل انجام دهید. از «افزونهها ← افزودن»، نام ابزار را جستوجو کنید، سازنده، سازگاری و وضعیت بهروزرسانی را بخوانید و سپس نصب و فعال کنید. فعال شدن افزونه به معنای تکمیل تنظیمات آن نیست. مستندات مدیریت افزونهها روش نصب و نگهداری را توضیح میدهد.
برای فرم تماس اول، نام، راه پاسخگویی و متن پیام معمولاً تمرین کافی است. ابزار را بر اساس فیلدها، اعلان و امکان نگهداری پیام انتخاب کنید؛ برای آشنایی با دو گزینه، مقایسه فرمسازهای WPForms و Gravity Forms را بخوانید و امکانات نسخه جاری موردنظر را جداگانه بررسی کنید.
در فرمساز انتخابی، فرم را ایجاد کنید، گیرنده اعلان و پیام پس از ارسال را تنظیم کنید و با بلوک یا کدکوتاه خود افزونه در برگه تماس قرار دهید. از بیرون حساب مدیر یک پیام آزمایشی بفرستید. نمایش پیام «ارسال شد» بهتنهایی ثابت نمیکند ایمیل به مقصد رسیده است. صندوق ورودی، پوشه هرزنامه و محل ذخیره پیام در صورت وجود را بررسی کنید.
اگر ایمیل نمیرسد، گیرنده، فرستنده و تنظیمات سرویس ایمیل را بررسی کنید. راهنمای WP Mail SMTP و ارسال ایمیل وردپرس برای شناخت این مسیر مفید است؛ نتیجه را با ارسال و دریافت واقعی بسنجید و از نصب افزونه، تضمین تحویل ایمیل نتیجه نگیرید.
۹. اولین نوشته و لینکهای داخلی را آماده کنید
از «نوشتهها ← افزودن نوشته» یک مطلب مرتبط با پرسش مخاطب بسازید؛ مثلاً «برای ثبت درخواست تعمیر چه اطلاعاتی آماده کنیم؟». نوشته برای محتوای دورهای مناسب است و برگه برای صفحههای نسبتاً ثابت مثل تماس. یک دسته مرتبط، نامک روشن، تصویر شاخص مناسب و خلاصه قابل فهم تعیین کنید.
در جملهای که به خدمت اشاره میکند، عبارت توصیفی را به برگه خدمات لینک کنید. از صفحه خانه هم راه رسیدن به خدمت و تماس را باز بگذارید. لینک «اینجا کلیک کنید» به اندازه عبارتی که مقصد را توضیح میدهد، به تصمیم مخاطب کمک نمیکند.
عنوان صفحه، عنوان سئو و خلاصه وردپرس کاربردهای یکسان ندارند. اگر ابزار سئو نصب کردهاید، عنوان و توضیحات هر صفحه را در محل مخصوص آن تنظیم و خروجی را بررسی کنید. خلاصه نوشته را خودکار معادل توضیحات متا نگیرید. برای کنترل ساختار نشانی، دسترسی خزنده و موارد پایه، راهنمای طراحی سایت با اصول سئو را دنبال کنید.
۱۰. پیش از انتشار، پشتیبان و آزمون نهایی داشته باشید
پشتیبان کامل باید فایلها و پایگاه داده را پوشش دهد. یک نسخه را خارج از همان محل میزبانی نگه دارید و روش بازیابی را در محیط آزمایشی امتحان کنید. راهنمای پشتیبانگیری رسمی وردپرس این دو بخش را جدا توضیح میدهد. برای آشنایی با ابزارها، مقایسه افزونههای پشتیبانگیری وردپرس را ببینید؛ برنامه نگهداری را با اهمیت و سرعت تغییر اطلاعات سایت تنظیم کنید.
این فهرست را روی سایت خودتان اجرا و نتیجه هر مورد را ثبت کنید:
- خانه، خدمات، تماس و یک نوشته در موبایل خوانده شوند و صفحه اسکرول افقی ناخواسته نداشته باشد.
- همه گزینههای منو و دکمهها مقصد درست داشته باشند و لینک خالی باقی نماند.
- فرم با داده صحیح ارسال شود، فیلد الزامی خطای قابل فهم نشان دهد و پیام در مقصد دریافت شود.
- تصاویر با حجم مناسب نمایش داده شوند و متن نمونه، شماره آزمایشی و ادعاهای تأییدنشده حذف شده باشند.
- سایت با HTTPS باز شود، نسخههای مختلف نشانی رفتار قابل انتظار داشته باشند و صفحه پیدانشدن هم قابل استفاده باشد.
- حسابهای اضافی و دسترسیهای موقت بررسی شوند و مسئول بهروزرسانی و پشتیبان مشخص باشد.
در محیط آزمایشی میتوانید درخواست عدم ایندکس را در «تنظیمات ← خواندن» فعال کنید؛ این گزینه رمز عبور یا کنترل دسترسی نیست و محیط آزمایشی نباید اطلاعات حساس عمومی داشته باشد. هنگام آماده شدن سایت عمومی، وضعیت همین گزینه و هر محدودیت جداگانه هاست یا افزونه را بررسی کنید. مستندات تنظیمات خواندن اثر درخواست عدم ایندکس را شرح میدهد. برداشتن آن، زمان یا نتیجه ایندکس را تضمین نمیکند.
معیار پایان تمرین: فردی خارج از حساب مدیریت بتواند صفحه خدمت را پیدا کند و درخواست آزمایشی موفق بفرستد؛ شما نیز بتوانید یک متن را ویرایش و نسخه پشتیبان را بازیابی کنید.
خطاهای متداول هنگام ساخت اولین سایت وردپرسی
| نشانه | چه چیزی را بررسی کنیم؟ |
|---|---|
| صفحه اصلی هنوز فهرست مقالههاست | انتخاب خانه در تنظیمات خواندن و قالب Front Page پوسته را بررسی کنید. |
| گزینه ویرایشگر سایت وجود ندارد | نوع قالب و دسترسی حساب را بررسی کنید؛ قالب کلاسیک مسیر متفاوتی دارد. |
| برگه ساخته شده ولی در منو نیست | برگه را به منوی فعال اضافه کنید و جایگاه نمایش یا بلوک ناوبری را ذخیره کنید. |
| صفحه داخلی خطای ۴۰۴ دارد | وجود و وضعیت انتشار صفحه، نامک و تنظیمات پیوند یکتا را بررسی کنید؛ اگر مشکل عمومی است، قواعد بازنویسی سرور را با میزبان پیگیری کنید. |
| پس از تغییر، ظاهر قبلی دیده میشود | ذخیره شدن تغییر، قالب درست و کش همان صفحه را بررسی کنید؛ تنظیمات متعدد را همزمان تغییر ندهید. |
| فرم پیام موفقیت دارد، اما ایمیل نمیرسد | گیرنده، ارسال سرویس ایمیل و پوشه هرزنامه را کنترل کنید و دوباره آزمون واقعی انجام دهید. |
بعد از این آموزش، چه چیزی را یاد بگیریم؟
برای آموزش ساخت سایت با وردپرس بدون کدنویسی، همین پروژه پایه مناسبی است. ادامه را از نیاز واقعی انتخاب کنید: طراحی دقیقتر چیدمان، مدیریت محتوای بیشتر، فروشگاه یا توسعه اختصاصی. ووکامرس به تمرین جداگانه محصول، سفارش، پرداخت و ارسال نیاز دارد؛ المنتور نیز مسیر جداگانه چیدمان با کانتینر و ویجتهاست. این دو را همزمان و بدون نیاز به پروژه اول اضافه نکنید.
اگر به آموزش تصویری یا دوره وردپرس نیاز دارید، دورهای را بررسی کنید که پروژه قابل انجام و آزمون خروجی داشته باشد و نوع قالب مورد استفاده را روشن بگوید. عنوان «صفر تا صد» بهتنهایی نشاندهنده پوشش فروشگاه، امنیت، سئو یا توسعه پیشرفته نیست. پس از هر درس، یک بخش از همین سایت را مستقل بسازید.
اگر سایت کاری شما به اجرای تخصصی یا زمانبندی مشخص نیاز دارد، فهرست صفحات، فرمها و معیارهای قبولی را آماده کنید و برای بررسی محدوده اجرا، صفحه طراحی سایت با وردپرس آنیل طراح را ببینید. تمرین شخصی را میتوانید همزمان در محیط جدا ادامه دهید.
پرسشهای متداول
آیا ساخت سایت با وردپرس رایگان است؟
دریافت هسته وردپرس رایگان است و با ابزارهای پایه میتوانید تمرین کنید. انتشار روی دامنه و هاست خودتان، تمدید زیرساخت و بعضی قالبها یا افزونهها هزینه جدا دارند. برای تمرین محلی، عمومی شدن سایت را با نصب نرمافزار یکسان نگیرید.
برای شروع وردپرس، HTML و CSS لازم است؟
برای ساخت این سایت ساده میتوانید با بلوکها شروع کنید. شناخت HTML و CSS در تشخیص ساختار، تنظیم ظاهر و رفع بعضی مشکلها کمک میکند. قابلیت اختصاصی یا اتصال پیچیده ممکن است به برنامهنویسی و کمک متخصص نیاز داشته باشد.
چرا آموزش من با پیشخوان خودم فرق دارد؟
نوع قالب، نسخه وردپرس، افزونهها و سطح دسترسی حساب روی گزینهها اثر دارند. ابتدا مشخص کنید آموزش با قالب بلوکی، قالب کلاسیک یا صفحهساز انجام شده است؛ سپس همان مسیر را در سایت خودتان پیدا کنید.
آیا برای سایت تکصفحهای هم باید همه برگهها را بسازم؟
خیر. برای معرفی محدود میتوانید بخشهای خدمات، درباره و تماس را در یک برگه قرار دهید و منو را به شناسه بخشها وصل کنید. وقتی موضوعها به توضیح مستقل نیاز دارند، برگه جدا بسازید. در هر دو روش، رسیدن به بخش تماس و ارسال درخواست را در موبایل امتحان کنید.