چگونه نمونه کار خود را در سایت وردپرسی نمایش دهیم؟

چند سال پیش برای یک عکاس، گالری نمونه‌کاری روی وردپرس ساختم. سه ماه بعد زنگ زد که مشتری‌ها کارها را می‌بینند اما تماس نمی‌گیرند. بررسی کردم و دیدم گالری فقط تصویر است — نه مسیری به تماس، نه توضیحی از فرآیند. آن پروژه به من آموخت نمونه‌کار، ابزار فروش است نه ویترین؛ از آن روز هر گالری را با این پرسش شروع می‌کنم: بازدیدکننده بعد از تماشا دقیقاً باید چه کار کند؟

چرا گالری نمونه‌کار با فید اینستاگرام فرق دارد؟

بسیاری از فریلنسرها و آژانس‌ها نمونه‌کارهای خود را فقط در اینستاگرام می‌گذارند. منطق پشتش روشن است: زحمت کم، دیده‌شدن فوری. اما همین کار در سایت، رفتار بازدیدکننده را عوض می‌کند. در اینستاگرام، کاربر با ذهنیت «مرور کردن» وارد می‌شود؛ روی سایت، با ذهنیت «تصمیم گرفتن». یعنی کسی که به سایت شما می‌آید، معمولاً از یک جستجوی هدفمند رسیده — مثلاً «نمونه کار گرافیست در تهران» یا «نمونه سایت شرکت معماری» — و انتظار دارد سریع بفهمد: شما چه کارهایی انجام داده‌اید، چطور آن‌ها را انجام می‌دهید، و چرا باید به شما اعتماد کند.

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

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

نمونه‌کار روی سایت، پرونده‌ای است که برای مشتری آینده نوشته می‌شود؛ نه آلبومی که برای دل خودتان بسته می‌شود.

سه تصمیم معماری پیش از ساخت گالری

پیش از هر انتخاب افزونه یا قالب، سه تصمیم معماری وجود دارد که اگر اشتباه گرفته شوند، بعداً هزینهٔ سنگینی به بار می‌آورند. تجربه‌ام می‌گوید این سه تصمیم، هشتاد درصد کیفیت نهایی گالری را می‌سازند.

تصمیم اول: برگهٔ اختصاصی یا گالری درون برگه؟

اگر تعداد نمونه‌کارها زیر پنج مورد است و قصد رشد ندارید، گالری می‌تواند یک برگهٔ ساده باشد. اما اگر تعداد بالا می‌رود یا نمونه‌کارها دسته‌بندی دارند (طراحی سایت، برندینگ، عکاسی)، ساختار باید از روز اول قابل گسترش باشد. بیشتر گالری‌های ضعیفی که دیده‌ام، روز اول با پنج نمونه‌کار کار می‌کردند و روز دهم با سی نمونه‌کار می‌شکستند.

تصمیم دوم: کد دستی یا افزونه؟

پاسخ این پرسش به دو چیز بستگی دارد: مهارت شما و سرعت رشد گالری. اگر با ساختار قالب وردپرس آشنا هستید و به دنبال گالری سبک هستید، کد دستی همیشه گزینهٔ تمیزتری است. اگر می‌خواهید مشتری خودش نمونه‌کار اضافه کند یا گالری با فیلتر و لایت‌باکس باشد، افزونه منطقی‌تر است.

تصمیم سوم: استاتیک یا فیلترپذیر؟

گالری استاتیک یعنی همهٔ آیتم‌ها در یک صفحه و کاربر با اسکرول می‌بیند. گالری فیلترپذیر یعنی کاربر روی دسته‌بندی می‌زند و آیتم‌ها فیلتر می‌شوند. اگر تعداد آیتم‌ها زیر ده است، فیلتر فقط شلوغی می‌آورد. اگر بالای بیست است، فیلتر به کاربر کمک می‌کند سریع به آنچه می‌خواهد برسد.

CPT (Custom Post Type) در برابر برگه‌های معمولی

وقتی تصمیم گرفتید گالری خودش ساختار داشته باشد، انتخاب اصلی می‌شود: نمونه‌کارها را به‌عنوان برگه بسازیم یا به‌عنوان نوع نوشتهٔ سفارشی؟

سابقه‌ام می‌گوید در نود درصد پروژه‌ها، CPT انتخاب درست است. چهار دلیل:

• ساختار URL تمیزتر: می‌توانید آدرس‌هایی مثل example.com/portfolio/project-name بسازید.
• فیلدهای اختصاصی: برای هر نمونه‌کار می‌توانید فیلدهایی مثل «سال پروژه»، «نوع خدمات» و «نتیجهٔ کلیدی» تعریف کنید.
• دسته‌بندی اختصاصی: با تاکسونومی سفارشی می‌توانید نمونه‌کارها را بر اساس صنعت یا نوع خدمت فیلتر کنید.
• الگوی نمایش اختصاصی: می‌توانید فایل قالبی جداگانه برای نمایش هر نمونه‌کار بسازید.

اما یک استثنای مهم: اگر گالری فقط پنج آیتم دارد و هیچ‌وقت بیشتر نمی‌شود، ساخت CPT می‌تواند زیادی به نظر برسد. در آن حالت، یک برگهٔ ساده با بلوک‌های گوتنبرگ کافی است.

ساخت CPT با کد دستی

اگر می‌خواهید CPT را بدون افزونه بسازید، این قطعهٔ کوتاه در functions.php قالب فرزند (یا بهتر، در یک افزونهٔ اختصاصی) کار را انجام می‌دهد. پیش از هرچیز، ساختار قالب فرزند را در قالب فرزند چیست و چه زمانی به آن نیاز داریم ببینید — این کار جلوی فاجعهٔ پاک‌شدن کد در آپدیت را می‌گیرد.

add_action( 'init', 'wpkar_register_portfolio_cpt' );

function wpkar_register_portfolio_cpt() {
    register_post_type( 'portfolio', array(
        'labels' => array(
            'name'          => 'نمونه‌کارها',
            'singular_name' => 'نمونه‌کار',
        ),
        'public'      => true,
        'has_archive' => true,
        'rewrite'     => array( 'slug' => 'portfolio' ),
        'supports'    => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'show_in_rest' => true,
    ) );
}

خط show_in_rest => true را جدی بگیرید: بدون آن، ویرایشگر بلوک روی این نوع‌نوشته کار نمی‌کند. این یکی از آن اشتباهاتی است که تازه‌کارها همیشه به آن می‌خورند و بعد ساعت‌ها دنبال علتش می‌گردند.

برای دسته‌بندی نمونه‌کارها هم می‌توانید یک تاکسونومی سفارشی بسازید:

add_action( 'init', 'wpkar_register_portfolio_taxonomy' );

function wpkar_register_portfolio_taxonomy() {
    register_taxonomy( 'portfolio_type', 'portfolio', array(
        'labels' => array(
            'name'          => 'نوع نمونه‌کار',
            'singular_name' => 'نوع',
        ),
        'public'       => true,
        'hierarchical' => true,
        'show_in_rest' => true,
    ) );
}

بعد از افزودن این کد، یک بار به «تنظیمات ← پیوندهای یکتا» بروید و ذخیره کنید. این کار قوانین بازنویسی URL را تازه می‌کند — بدونش، صفحه‌های نمونه‌کار ۴۰۴ می‌شوند.

ساخت گالری با امکانات بومی وردپرس

پیش از اینکه سراغ افزونه بروید، بدانید گوتنبرگ خودش چند بلوک آماده برای گالری دارد. بلوک Gallery، بلوک Cover و بلوک Media & Text در اکثر موارد برای ساخت یک گالری ساده کافی هستند. مزیت این روش:

• بدون افزونهٔ اضافی، بدون بار اضافه
• سازگار با هر قالب استاندارد وردپرسی
• سبک و سریع، چون فقط از اسکریپت‌های هستهٔ وردپرس استفاده می‌کند

محدودیتش هم واضح است: فیلتر و لایت‌باکس پیشرفته ندارد و برای گالری با چهل آیتم، تجربهٔ کاربری خوبی نمی‌دهد. اما برای یک فریلنسر با هشت نمونه‌کار و قالب تمیز، همین کافی است.

یک نکتهٔ ظریف: اگر قالب شما در حالت آرشیو CPT از فایل archive-portfolio.php استفاده می‌کند، می‌توانید همان را با WP_Query سفارشی کنید و ظاهر گالری را از پنل مدیریت، بدون لمس قالب، کنترل کنید. این کار در پروژه‌هایی که مشتری خودش محتوا اضافه می‌کند، بسیار به‌کار آمده است.

افزونه‌های نمونه‌کار: کدام برای چه کسی؟

اگر تصمیم گرفتید افزونه استفاده کنید، انتخاب باید بر اساس نیاز واقعی باشد، نه بر اساس تبلیغات. جدول کوتاه من:

قاعدهٔ شخصی من: هر افزونهٔ گالری که بیش از دو فایل CSS و یک فایل JS بار می‌کند، با احتیاط وارد کنید. اثرش را بعداً روی معیارهای Core Web Vitals می‌بینید. اگر قالب فعلی‌تان کند است، اول افزایش سرعت سایت وردپرسی را اجرا کنید، بعد سراغ افزونهٔ گالری بروید؛ وگرنه مشکل اصلی باقی می‌ماند.

بهینه‌سازی تصاویر گالری

اینجا جایی است که اکثر گالری‌ها شکست می‌خورند. من در پروژه‌ای سه بار با یک گالری عکاسی مشکل پرفورمنس داشتم؛ هر بار فکر می‌کردم مشکل از افزونه است و هر بار هم مشکل از تصویر بود. سه اصل کلیدی:

۱. ابعاد درست را آپلود کنید، نه ابعاد دوربین

تصویر شش‌هزار پیکسلی را با CSS کوچک نکنید. وردپرس به‌صورت خودکار نسخه‌های میانی می‌سازد؛ اگر قالب شما از srcset درست استفاده کند، مرورگر نسخهٔ مناسب دستگاه را انتخاب می‌کند. این رفتار دقیقاً همان چیزی است که در قالب ریسپانسیو چیست و چرا اهمیت دارد بررسی کرده‌ام.

۲. فرمت را جدی بگیرید

برای عکس واقعی، WebP یا AVIF همیشه از JPEG پیشی می‌گیرد. تفاوت حجم می‌تواند تا چهل درصد باشد. مقایسهٔ کامل را در بهترین فرمت تصویر وب آورده‌ام.

۳. فشرده‌سازی هدفمند

ابزارهای فشرده‌سازی زیادی وجود دارند. اگر روی سایت هستید و می‌خواهید یک بار برای همیشه جمع کنید، افزونه‌های بهینه‌سازی تصویر وردپرس را ببینید؛ اگر دستی می‌خواهید، روش من در فشرده‌سازی تصاویر سایت آمده است.

حجم تصویر گالری، تعیین‌کنندهٔ تعداد بازدیدکننده‌ای است که تا انتهای صفحه می‌ماند.

طراحی کارت نمونه‌کار: پنج عنصر ضروری

یک کارت نمونه‌کار ضعیف، فقط تصویر و عنوان دارد. کارت قوی، پنج عنصر دارد که هرکدام یک نقش مشخص ایفا می‌کند:

1. تصویر شاخص با کیفیت: اینجا تصمیم گرفته می‌شود کاربر کلیک می‌کند یا نه. تصویری انتخاب کنید که «قبل و بعد» یا «لحظهٔ کلیدی» را نشان دهد.
2. عنوان کوتاه: حداکثر هشت کلمه. اسم پروژه، اسم مشتری، یا دستاورد اصلی.
3. برچسب‌های نوع خدمت: مثلاً «طراحی سایت»، «برندینگ»، «SEO (Search Engine Optimization)». کمک می‌کند کاربر سریع دسته‌بندی ذهنی کند.
4. یک خط نتیجه: مثلاً «افزایش چهل درصد ترافیک ارگانیک». این خط، کارت را از گالری معمولی جدا می‌کند.
5. CTA (Call To Action): دکمه یا لینک «مشاهده پروژه» یا «جزئیات بیشتر». بدون این، کاربر نمی‌داند کلیک‌کردنی هست یا نه.

این پنج عنصر، همان چیزی است که در ساخت نمونه‌کار مؤثر برای پروژه‌های وردپرسی با جزئیات باز کرده‌ام. اگر می‌خواهید نمونه‌کارتان را به مشتری ارائه دهید، روش ارائهٔ نمونه‌کار به مشتریان را جداگانه دیده‌ام.

Core Web Vitals در صفحات گالری

صفحات گالری معمولاً دو مشکل مشترک دارند که هر دو مستقیم روی CWV (Core Web Vitals) اثر می‌گذارند:

• LCP (Largest Contentful Paint) بالا: تصویر اول گالری معمولاً بزرگ‌ترین عنصر صفحه است. اگر این تصویر lazy-load شده باشد یا ابعادش بهینه نباشد، LCP به بالای چهار ثانیه می‌رود.
• CLS (Cumulative Layout Shift) ناشی از Masonry: چیدمان Masonry اگر ارتفاع آیتم‌ها را از قبل رزرو نکند، هنگام لود صفحه را می‌پراند. کاربر احساس می‌کند سایت «می‌لرزد».

راه‌حل عملی: برای تصویر اول هر گالری از loading="eager" و fetchpriority="high" استفاده کنید. برای بقیه، lazy-load بگذارید. و اگر از Masonry استفاده می‌کنید، هر آیتم را در یک محفظهٔ با aspect-ratio مشخص بگذارید. جزئیات بیشتر در «Core Web Vitals چیست و چرا گوگل بر آن تأکید دارد» آمده است.

نمایش گالری در موبایل

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

1. تپ‌تارگت (Touch Target): هر آیتم گالری باید حداقل ۴۴ در ۴۴ پیکسل باشد. اگر کوچک‌تر است، کاربر انگشتش را روی آیتم اشتباه می‌گذارد.
2. اسکرول افقی ناخواسته: گالری‌های Masonry با آیتم‌های نامتقارن، گاهی صفحه را افقی اسکرول می‌کنند. این را در مرورگر موبایل واقعی تست کنید، نه شبیه‌ساز دسکتاپ.
3. اسکرول عمودی با لمس: اگر از کتابخانه‌ای برای درگ‌کردن گالری استفاده می‌کنید، مطمئن شوید اسکرول عمودی را بلوکه نمی‌کند.

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

اشتباهات رایج در ساخت نمونه‌کار وردپرسی

سه اشتباهی که در ده‌ها پروژه دیده‌ام و هر سه قابل پیشگیری هستند:

• گذاشتن اسلایدر در صفحهٔ اصلی گالری: اسلایدر، گالری نیست. کاربر می‌خواهد همهٔ کارها را یک‌بار ببیند، نه سه کار را با کلیک عوض کند. اگر مجبور به استفاده از اسلایدر هستید، فقط برای «نمونه‌های برجسته» — حداکثر پنج مورد.
• نداشتن مسیر تماس: گالری بدون CTA، مثل فروشگاهی است که درش قفل است. بعد از هر نمونه‌کار یا بالای گالری، حتماً یک راه ارتباطی باشد.
• محتوای تکراری بین نمونه‌کارها: اگر توضیح پنج پروژه، کپی از هم با تغییر اسم مشتری است، کاربر زودتر از صفحه بیرون می‌رود. هر نمونه‌کار باید حداقل یک جملهٔ متفاوت داشته باشد — چالش پروژه یا تصمیم کلیدی.

نمونه‌کار، ویترین نیست؛ پرونده‌ای است که تصمیم مشتری بعدی را عوض می‌کند.

حرف آخر: گالری کار می‌کند، ویترین نه

نمایش نمونه‌کار روی وردپرس، ترکیبی از سه لایه است: انتخاب درست ساختار داده، بهینه‌سازی تصویر برای سرعت، و طراحی کارتی که به تصمیم مشتری جهت بدهد. اگر این سه لایه را جدی بگیرید، گالری شما از یک «صفحهٔ زیبا» به یک «صفحهٔ کاری» تبدیل می‌شود — یعنی صفحه‌ای که بازدیدکننده را به تماس، سفارش، یا رزرو می‌رساند.

اگر در پروژه‌ای با گالری نمونه‌کار درگیر بوده‌اید — به‌خصوص اگر تصمیم خاصی روی CPT، افزونه، یا نوع کارت گرفته‌اید — خوشحال می‌شوم تجربه‌تان را در دیدگاه‌ها بخوانم. برایم جالب است بدانید کدام بخش، بیشترین زمان را از شما گرفت و بعداً چطور حلش کردید. 🎨