چگونه یک سایت نمونه کار با وردپرس بسازیم؟ راهنمای پروژه‌محور
چطور یک سایت نمونه کار حرفه‌ای با وردپرس بسازیم که به مشتری برسد؟ راهنمای پروژه‌محور از انتخاب ساختار و صفحهٔ اصلی تا سئو، سرعت و مسیر تبدیل.
اولین سایت نمونه‌کاری که برای خودم ساختم، از نظر گرافیکی قوی‌ترین چیزی بود که تا آن روز ساخته بودم؛ اما شش ماه پس از راه‌اندازی، هیچ سفارشی از آن نیامده بود. بررسی کردم و فهمیدم چه چیزی را فراموش کرده‌ام: سایت نمونه‌کار را مثل یک گالری ساخته بودم، نه مثل یک دفتر خدمات. کارهای زیبا آن‌جا بودند، اما مسیر «چه کار می‌کنم»، «برای چه کسی»، و «چطور تماس بگیریم» غایب بود. آن تجربه، ساخت نگاه من به سایت نمونه‌کار را عوض کرد: سایت نمونه‌کار یک پروژهٔ تجاری است، نه ویترین گرافیکی. این مقاله، همان نقشه‌ای است که امروز برای هر نمونه‌کار شخصی یا حرفه‌ای طی می‌کنم.
پیش از هر چیزی: سایت نمونه‌کار برای چه کسی است؟
اگر یک ساعت وقت برای تصمیم‌گیری درباره سایت نمونه‌کار دارید، بهترین استفاده از آن، انتخاب قالب نیست؛ نوشتن یک جمله است: «این سایت برای [نوع مشتری] است که می‌خواهد [نتیجهٔ مشخص] بگیرد.» همین یک جمله، پنجاه درصد انتخاب‌های بعدی را از پیش تعیین می‌کند.
سه نمونهٔ متفاوت:
- فریلنسر طراحی UI: سایت برای «مدیران محصول استارتاپ‌های کوچک» است که می‌خواهند «طراح قابل‌اعتماد برای پروژه‌های کوتاه‌مدت» پیدا کنند. یعنی در بالای صفحه اصلی، نمونه‌کارهای UI و فرآیند کار باید دیده شوند.
- توسعه‌دهنده وردپرس: سایت برای «صاحبان کسب‌وکار آنلاین» است که می‌خواهند «سایت سریع و پایدار» بسازند. یعنی تمرکز روی نمونه پروژه‌های فنی و نتایج قابل‌سنجش.
- عکاس: سایت برای «آژانس‌های تبلیغاتی یا زوج‌های در حال ازدواج» است که «سبک بصری مشخصی» را می‌جویند. یعنی گالری تصویر، محور اصلی سایت است.
این سه سایت، از نظر فنی متفاوت‌اند: یکی روی ساختار پروژه تمرکز دارد، یکی روی توضیح فنی، یکی روی تصویر. اگر این جمله را در ابتدا بنویسید، متوجه می‌شوید که انتخاب قالب و افزونه، پیامد طبیعی این جمله است، نه تصمیم مستقل. اگر تازه در مسیر فریلنسری هستید و می‌خواهید بدانید این نمونه‌کارها در چه چارچوب بزرگ‌تری معنا پیدا می‌کنند، ساخت نمونه‌کار حرفه‌ای برای فریلنسری تصویر کلان را می‌دهد.
سایت نمونه‌کار بی‌هدف، مثل مغازه‌ای است که همه‌چیز در ویترین دارد اما تابلویی بالای در نیست.
معماری سایت: چهار تصمیم پیش از انتخاب قالب
معماری سایت نمونه‌کار، قبل از قالب شکل می‌گیرد. چهار تصمیم که ترتیب‌شان اهمیت دارد:
تصمیم اول: تک‌صفحه‌ای یا چندصفحه‌ای؟
سایت تک‌صفحه‌ای (One-Page) سریع‌تر راه می‌افتد و برای کسی که ۵ تا ۸ پروژه دارد، کافی است. اما اگر می‌خواهید در نتایج گوگل برای چند کلیدواژه دیده شوید — مثلاً «طراح سایت شرکتی» و «طراح سایت فروشگاهی» — به سایت چندصفحه‌ای نیاز دارید. این تصمیم ساختاری، هم انتخاب قالب را عوض می‌کند، هم معماری سئو را.
تصمیم دوم: تمرکز روی فرآیند یا روی نتیجه؟
بعضی سایت‌های نمونه‌کار، روی «فرآیند کار» تأکید می‌کنند (این‌طور طراحی می‌کنم، این‌طور کد می‌نویسم). بعضی روی «نتیجه» (این دستاورد را ساختم، این عدد را بهبود دادم). مشتری‌های فنی و کارآفرین معمولاً نتیجه‌محور هستند؛ مشتری‌های آژانسی و بزرگ‌تر معمولاً فرآیندمحور. این تصمیم، روی چیدمان صفحهٔ اصلی اثر مستقیم دارد.
تصمیم سوم: سایت شخصی یا سایت برند؟
اگر قصد دارید در بلندمدت برند بسازید، نام شخصی می‌تواند محدودکننده باشد؛ اگر می‌خواهید در بازار فریلنسری شناخته شوید، نام شخصی همان چیزی است که مشتری به خاطر می‌سپارد. این تصمیم بر انتخاب دامنه، لوگو و لحن متن اثر می‌گذارد.
تصمیم چهارم: زبان — فارسی، انگلیسی، یا هر دو؟
اگر مخاطب‌تان فقط ایرانی است، سایت فارسی با کدگذاری RTL کافی است. اگر پروژه‌های بین‌المللی هم می‌گیرید، سایت انگلیسی — نه ترجمهٔ فارسی — لازم دارید. هر دو حالت، ساختار متفاوتی می‌خواهد که در توسعه وردپرس چیست و از کجا باید شروع کنیم باز کرده‌ام.
صفحهٔ اصلی: پنج بلوک ضروری
صفحهٔ اصلی سایت نمونه‌کار، مهم‌ترین صفحه کل سایت است. در تجربه‌ام، پنج بلوک زیر، تفاوت بین سایت «که کاربر روی آن می‌ماند» و سایت «که کاربر می‌بندد» را می‌سازند:
۱. هیرو (Hero) با سه عنصر
بالای صفحه باید در سه ثانیه بگوید چه کسی هستید، چه کاری انجام می‌دهید، و چه‌کار کنید. سه عنصر: یک جملهٔ تمرکز، یک تصویر یا نمونه‌کار برجسته، و یک دکمهٔ CTA (Call To Action). جای این دکمه، مستقیم باید به صفحهٔ تماس یا فرم پیشنهاد قیمت وصل باشد.
۲. فهرست خدمات در سه تا پنج کارت
کاربر باید سریع بفهمد چه چیزی می‌توانید برایش انجام دهید. سه تا پنج کارت، هر کدام با یک آیکن، یک عنوان کوتاه و یک خط توضیح.
۳. سه نمونه‌کار برجسته
نه همه پروژه‌ها. سه مورد که بهترین‌ها یا متنوع‌ترین‌ها را نشان می‌دهند. دکمهٔ «مشاهدهٔ همه» در پایین این بخش، به آرشیو نمونه‌کار وصل می‌شود.
۴. توصیه‌نامه یا شواهد اجتماعی
یکی از سه حالت: نقل‌قول یک مشتری، لوگوی شرکت‌هایی که با آن‌ها کار کرده‌اید، یا عدد مشخص (مثلاً «بیش از ۸۰ پروژه در ۶ سال»). این بلوک، اعتماد را می‌سازد و در پروژه‌های من همیشه در صفحهٔ اصلی هست.
۵. CTA پایانی
پایین صفحه، یک CTA واضح: «درخواست مشاورهٔ رایگان» یا «ارسال پیام». این دکمه، به فرم تماس وصل می‌شود. اگر با ساخت برگه و افزودن محتوا آشنا نیستید، چگونه برگه در وردپرس بسازیم مسیر را نشان می‌دهد.
صفحهٔ خدمات: عنصری که اکثر سایت‌ها ندارند
بزرگ‌ترین شکاف در سایت‌های نمونه‌کار، نبود صفحهٔ خدمات است. اکثر سایت‌ها فقط نمونه‌کار دارند، اما مشتری‌ای که به شما نگاه می‌کند، در ذهنش یک سؤال روشن دارد: «دقیقاً چه کاری می‌توانی برای من انجام دهی؟»
صفحهٔ خدمات باید برای هر خدمت، این پنج عنصر را داشته باشد:
- توضیح کوتاه: این خدمت چه چیزی را در بر می‌گیرد.
- خروجی قابل‌تحویل: چه چیزی تحویل می‌دهید (فایل طراحی، سایت زنده، مستندات).
- مدت زمان: چند روز یا هفته طول می‌کشد.
- بازهٔ قیمتی: نه قیمت دقیق، اما بازه مشخص. کاربری که بازهٔ قیمت نمی‌بیند، به‌سختی به شما اعتماد می‌کند.
- حداقل یک نمونه‌کار مرتبط: با لینک به پروژه‌ای که این خدمت را نشان می‌دهد.
این صفحهٔ خدمات، در جستجوهای تجاری هم برای شما ترافیک می‌آورد. کسی که «طراحی سایت شرکتی» یا «طراحی رابط کاربری اپلیکیشن» را جستجو می‌کند، دقیقاً همان چیزی است که در این صفحه می‌خواهد. اگر مطمئن نیستید خدمات سایت نمونه‌کارتان چه چیزی باید باشد، چگونه یک قالب وردپرس مناسب کسب‌وکار انتخاب کنیم به شما کمک می‌کند خدمات و ساختار را هم‌راستا کنید.
ساختار نمونه‌کارها: CPT یا برگه؟
این تصمیم، در نگاه اول فنی به نظر می‌رسد اما در عمل، به آیندهٔ سایت نمونه‌کار شما مربوط است. تفاوت را در جدول زیر ببینید:
| معیار | CPT (نوع‌نوشتهٔ سفارشی) | برگه‌های معمولی |
|---|---|---|
| تعداد آیتم‌ها | از پنج مورد به بالا | زیر پنج مورد |
| فیلترپذیری | با تاکسونومی سفارشی | ندارد |
| URL ساختاریافته | بله | محدود |
| نمایش کارت در آرشیو | خودکار | دستی |
| قالب نمایش اختصاصی | بله | محدود |
در تجربه‌ام، برای سایت نمونه‌کار حرفه‌ای که انتظار رشد دارد، CPT انتخاب درست است. با CPT می‌توانید صفحات آرشیو نمونه‌کار بسازید، فیلتر خدمت یا صنف اضافه کنید، و ساختار URL تمیزی داشته باشید. اگر با CPT آشنا نیستید، ساخت نوع نوشته سفارشی در وردپرس شروع خوبی است.
در همان پروژه، برای نمایش نمونه‌کارها هم می‌توانید از فیلدهای سفارشی استفاده کنید. مثلاً «سال پروژه»، «نوع خدمت» و «نتیجهٔ کلیدی». این فیلدها، دقیقاً همان چیزی است که کارت نمونه‌کار را از یک تصویر ساده به یک ابزار تصمیم‌گیری تبدیل می‌کند. اگر می‌خواهید بدانید نمایش نمونه‌کار روی همین ساختار، چه تفاوت‌های طراحی دارد، چگونه نمونه کار خود را در سایت وردپرسی نمایش دهیم مکمل این بخش است.
نمونه‌کار بدون فیلد، تصویر است. نمونه‌کار با فیلد، پرونده است.
صفحهٔ دربارهٔ من: اعتمادسازی در سه پاراگراف
صفحهٔ «دربارهٔ من» در سایت‌های نمونه‌کار، معمولاً به دو حالت افراط و تفریط می‌افتد: یا یک پاراگراف خشک و رسمی، یا یک متن شخصی بی‌ربط به کسب‌وکار. تجربهٔ من، یک ساختار سه‌پاراگرافی است که در پروژه‌ها نتیجه داده:
پاراگراف اول: تخصص در یک جمله
یک جملهٔ روشن درباره اینکه چه کاری انجام می‌دهید و برای چه کسی. نه از «من از کودکی به طراحی علاقه داشتم»، بلکه از یک تعریف حرفه‌ای.
پاراگراف دوم: چطور کار می‌کنم
سه تا چهار خط از فرآیند کار: چطور شروع می‌کنم، چطور به مشتری گزارش می‌دهم، در پایان چه چیزی تحویل می‌دهم. این پاراگراف، اعتمادسازترین بخش صفحه است.
پاراگراف سوم: چرا من
یک یا دو تمایز مشخص. نه کلیشه («ما کیفیت را جدی می‌گیریم»)، بلکه چیزی که واقعاً شما را متمایز می‌کند: تخصص خاص، تیر زمانی مشخص، نمونه‌ای از یک صنف خاص.
در پایان صفحه، یک عکس شخصی واقعی، لینک به شبکه‌های حرفه‌ای، و یک CTA ساده («برای بحث در مورد پروژه‌تان، پیام بگذارید»).
فرم تماس و مسیر تبدیل
صفحهٔ تماس، پایان مسیر تصمیم مشتری است. اگر این صفحه فقط یک فرم چهارفیلدی و یک آدرس ایمیل باشد، نیمی از مشتریان بالقوه را از دست می‌دهید. تجربه‌ام می‌گوید سه عنصر روی این صفحه، تفاوت را می‌سازد:
- دو مسیر به‌جای یک مسیر: فرم تماس برای پروژه‌های جدی، و واتس‌اپ یا ایمیل برای سؤالات کوتاه. کاربری که سؤال سریع دارد، حوصلهٔ پر کردن فرم ندارد.
- فرم با فیلدهای هدفمند: نه فقط نام و ایمیل؛ بلکه «نوع پروژه» به‌عنوان یک منوی کشویی، و «بازهٔ بودجه» به‌عنوان یک انتخاب. این دو فیلد، به شما کمک می‌کند پیش از پاسخ، مشتری را بهتر بشناسید.
- تأیید ارسال موفق: بعد از ارسال فرم، یک پیام واضح و شخصی بدهید. اگر فرم به ایمیل وصل نباشد یا خطا داشته باشد، شما نمی‌فهمید مگر اینکه کاربر به شما بگوید — و کاربری که پیام تأیید نگرفته، احتمالاً پیام دوم نمی‌فرستد.
یک نکتهٔ عملی: در پروژه‌های خودم، صفحهٔ تماس را روی همان سرور اصلی میزبانی می‌کنم، نه روی یک سرویس خارجی. اگر این کار را با افزونهٔ فرم‌ساز انجام دهید، هم کنترل کامل دارید، هم اطلاعات مشتری از سایت شما خارج نمی‌شود.
انتخاب قالب: چهار معیار عملی
در سایت نمونه‌کار، ظاهر گرافیکی مهم است، اما نه به‌تنهایی. چهار معیاری که در انتخاب قالب نمونه‌کار استفاده می‌کنم:
۱. سبکی ساختاری
قالبی که برای نمایش یک نمونه‌کار، ده فایل CSS و پانزده فایل JS بار می‌کند، ارزش زیبایی‌اش را با کندی می‌پردازد. معیارهای دقیق سبک در قالب وردپرس سبک چیست و چگونه سرعت سایت را افزایش می‌دهد آمده است.
۲. سادگی رابط کاربری
قالبی که خودش یک پنل تنظیمات بزرگ دارد، ممکن است در ابتدا راحت به نظر برسد اما در بلندمدت شما را به پنل خودش وابسته می‌کند. قالب ساده که از Customizer و Gutenberg استفاده می‌کند، انعطاف بیشتری می‌دهد.
۳. ریسپانسیو واقعی
سایت نمونه‌کار معمولاً روی موبایل بازدید می‌شود؛ چون مشتریان بالقوه در وقت‌های آزاد، گوشی‌شان را چک می‌کنند. معیارهای ریسپانسیو واقعی در قالب وردپرس ریسپانسیو چیست و چرا اهمیت دارد آمده است.
۴. سازگاری با گوتنبرگ
قالب‌هایی که بلوک‌های بومی گوتنبرگ را به‌درستی پشتیبانی می‌کنند، برای ساختار صفحه‌های خدمات و دربارهٔ من، دست شما را باز می‌گذارند. اگر می‌خواهید فهرست گزینه‌های بازار را ببینید، قالب‌های وردپرس برای نمونه‌کار نقطه‌ی شروع خوبی است. اگر هم مطمئن نیستید کدام قالب را انتخاب کنید، بهترین قالب‌های وردپرس برای طراحی حرفه‌ای فهرست معیارمحوری دارد.
افزونه‌های ضروری برای سایت نمونه‌کار
سایت نمونه‌کار به‌ندرت به افزونهٔ زیاد نیاز دارد. در تجربه‌ام، چهار افزونه کافی است:
- سئو: یکی از افزونه‌های سئوی معتبر برای مدیریت متا و sitemap. انتخاب دقیق در بهترین افزونه‌های سئو وردپرس آمده است.
- فرم‌ساز: با فیلدهای هدفمند و اتصال مطمئن به ایمیل.
- کش: روی هر هاستی که نیست، یک افزونهٔ کش سبک، تفاوت محسوسی ایجاد می‌کند.
- بکاپ: ضروری، هر پروژه‌ای. اگر با اصول کلی انتخاب افزونه آشنا نیستید، افزونه وردپرس چیست و چگونه انتخاب کنیم راهنمای مناسبی است.
بیشتر از چهار افزونه در سایت نمونه‌کار، معمولاً یعنی چیزی را اشتباه انتخاب کرده‌اید. اگر در پروژه‌ای به این نقطه رسیدید، فهرست افزونه‌های ضروری هر سایت را مرور کنید و اضافه‌ها را حذف کنید.
سئوی سایت نمونه‌کار: چه چیزی برنده است؟
سئوی سایت نمونه‌کار، با سایت محتوایی تفاوت دارد. کاربری که دنبال یک فریلنسر یا آژانس می‌گردد، معمولاً در یکی از این سه دستهٔ جستجو قرار می‌گیرد: «[تخصص] + [شهر]» مثل «طراحی سایت در اصفهان»، «[خدمت] + [نوع کسب‌وکار]» مثل «طراحی فروشگاه اینترنتی»، و «بهترین [تخصص]» مثل «بهترین طراح رابط کاربری». برای هر کدام از این سه دسته، یک ساختار متفاوت لازم است:
- برای جستجوهای شهری: یک صفحهٔ خدمت در هر شهر، با محتوای متفاوت (نه کپی‌پیست).
- برای جستجوهای خدمت + کسب‌وکار: صفحهٔ خدمات تخصصی هر کسب‌وکار، با نمونه‌کارهای همان صنف.
- برای جستجوهای «بهترین»: محتوای مقایسه‌ای یا نقد، نه فقط لیست نمونه‌کار.
اصول پایه سئو را در سئو چیست و چگونه به رشد سایت کمک می‌کند و جزئیات روی‌صفحه را در سئو داخلی چیست و چه تاثیری دارد آورده‌ام. برای سایت نمونه‌کار، نکتهٔ کلیدی این است: کلمات کلیدی شما نه در متن بلاگ، که در عناوین صفحات خدمات و نمونه‌کارها هستند.
در سایت نمونه‌کار، صفحهٔ خدمات و صفحهٔ نمونه‌کار، همان چیزی هستند که در سایت بلاگ، مقاله‌های اصلی هستند.
سرعت و تصاویر: دو گلوگاه اصلی
سایت نمونه‌کار، در ذات خودش تصویرمحور است. این یعنی سرعت، بزرگ‌ترین چالش پیش روی شماست. دو گلوگاه اصلی که در پروژه‌ها دیده‌ام:
گلوگاه اول: تصویر شاخص نمونه‌کار
تصویر شاخص هر نمونه‌کار، معمولاً یک اسکرین‌شات از پروژه یا یک تصویر محصول است. اگر این تصویر با ابعاد بزرگ آپلود شود و با CSS کوچک شود، بزرگ‌ترین سهم کندی به آن تعلق دارد. راه‌حل: تصویر را در ابعاد درست آپلود کنید و از فرمت WebP یا AVIF استفاده کنید. مقایسهٔ کامل در بهترین فرمت تصویر وب کدام است و روش فشرده‌سازی در چگونه تصاویر سایت را فشرده کنیم آمده است.
گلوگاه دوم: فونت و آیکون
فونت‌های فارسی حجیم و ست‌های آیکون که همه‌چیز را بار می‌کنند، سهم پنهانی از کندی دارند. یک فونت با font-display: swap و آیکون SVG inline، بهترین ترکیب برای سایت نمونه‌کار است. اگر با Core Web Vitals آشنا نیستید، Core Web Vitals چیست و چرا گوگل بر آن تاکید دارد معیارهای دقیق را می‌دهد.
یک ترفند کاربردی: پیش از هر پروژهٔ نمونه‌کار، PageSpeed را روی قالب پیش‌فرض وردپرس با ده تصویر واقعی اجرا کنید. اگر در آن حالت هم LCP بالای ۲.۵ ثانیه است، بدانید که مشکل ساختاری است، نه قالب.
اشتباهات رایج در ساخت سایت نمونه‌کار
پنج اشتباه که در بازبینی سایت‌های نمونه‌کار زیاد دیده‌ام:
- نداشتن صفحهٔ خدمات: سایت فقط نمونه‌کار دارد، اما مشتری نمی‌داند دقیقاً چه چیزی می‌توانید ارائه دهید. این بزرگ‌ترین شکاف سایت‌های نمونه‌کار تازه‌کارهاست.
- نمونه‌کار بدون توضیح: تصویر پروژه بدون یک خط توضیح «چه حل کردم»، فقط یک تصویر است. مشتری نمی‌تواند ارتباط برقرار کند.
- نداشتن تاریخ پروژه: نمونه‌کار بدون سال، به مرور قدیمی به نظر می‌رسد. حتی اگر پروژه دو سال پیش است، سال را بنویسید؛ صداقت، اعتماد می‌سازد.
- نداشتن مسیر تماس در همهٔ صفحات: مشتری ممکن است در نیمهٔ صفحهٔ نمونه‌کار تصمیم بگیرد. اگر دکمهٔ تماس در فوتر باشد اما جای دیگری نباشد، این تصمیم بی‌پاسخ می‌ماند.
- تکیه بر سایت‌ساز رایگان به‌جای وردپرس: در بلندمدت، انتقال از یک سایت‌ساز بسته به وردپرس، معمولاً کاری است که می‌تواند یک هفته طول بکشد و بسیاری از کارها را از دست بدهد. اگر می‌خواهید بدانید چرا، چرا باید از وردپرس استفاده کنم توضیح روشنی می‌دهد.
خط پایان: سایت نمونه‌کار به‌عنوان ابزار فروش
ساخت سایت نمونه‌کار با وردپرس، فنی‌ترین کار این مقاله نیست؛ اما مهم‌ترین تصمیمش، فنی نیست — تعریف مخاطب است. اگر این جمله را در ابتدا بنویسید که سایت برای چه کسی و برای چه نتیجه‌ای است، پنجاه درصد انتخاب‌های بعدی خودشان را نشان می‌دهند. باقی مسیر سه بخش دارد: ساختار داده (CPT و فیلدها)، ساختار محتوا (صفحهٔ خدمات و صفحهٔ نمونه‌کار)، و ساختار مسیر (CTA در همهٔ نقاط تصمیم). اگر این سه را درست بسازید، سایت نمونه‌کار شما از یک گالری زیبا به یک ابزار فروش تبدیل می‌شود که مشتری‌ها را پیش از تماس آماده می‌کند.
اگر در پروژهٔ نمونه‌کار خودتان به نکته‌ای رسیدید که این مقاله به آن اشاره نکرده — چه در انتخاب قالب، چه در ساختار نمونه‌کار، چه در مسیر تماس — خوشحال می‌شوم در دیدگاه‌ها بخوانم. برای خوانندهٔ بعدی که همین مسیر را شروع می‌کند، تجربهٔ واقعی شما از هر مقالهٔ مرجع مفیدتر است. 🎯
نویسنده در وردپرس کار.