بهترین افزونه نمونه کار برای وردپرس
- افزونه وردپرس
- بروزرسانی شده در

اگه عکاس، طراح، فریلنسر یا صاحب یک آژانس هستید، صفحه نمونه کار یکی از مهمترین بخشهای سایتتونه. این صفحه به بازدیدکننده نشون میده چه پروژههایی انجام دادید، سبک کارتون چیه و آیا برای همکاری انتخاب مناسبی هستید یا نه. برای ساخت این بخش هم لازم نیست کدنویسی بلد باشید؛ یک افزونه مناسب میتونه بیشتر کار رو براتون انجام بده.
در این راهنما چند گزینه رو برای ساخت نمونه کار، گالری تصویری و فهرست قابل فیلتر بررسی میکنیم. بعد هم یاد میگیرید موقع انتخاب افزونه به چه نکاتی دقت کنید، چطور اولین نمونه کارتون رو بسازید و چه کاری انجام بدید تا صفحه نهایی هم حرفهای باشه و هم روی موبایل درست نمایش داده بشه.
آنچه در این مقاله میخوانید
بهترین افزونه نمونه کار وردپرس برای شما کدومه؟
هیچ افزونهای برای همه سایتها بهترین انتخاب نیست. انتخاب مناسب به نوع پروژهها، تعداد نمونهکارها و مدل نمایشی که میخواید بستگی داره. مثلاً یک عکاس بیشتر به گالری تصویری مرتب نیاز داره، ولی یک آژانس ممکنه برای هر پروژه به توضیحات، دستهبندی و صفحه جدا احتیاج داشته باشه.
مقایسه سریع افزونههای نمونه کار وردپرس
| افزونه | کاربرد مناسب | نقطه قوت اصلی | نکته مهم |
|---|---|---|---|
| Radius Portfolio | فریلنسرها و آژانسها | مدیریت پروژهها جدا از نوشتههای سایت | امکانات نسخه رایگان رو با نیازتون مقایسه کنید |
| Grid Kit Portfolio Gallery | طراحها و سایتهای تصویری | ترکیب گالری و نمونه کار | مخزن وردپرس درباره آزمایشنشدن با نسخههای جدید هشدار داده |
| Filterable Portfolio | سایتهایی با چند نوع پروژه | مرتبکردن پروژهها با فیلتر | ظاهر نهایی رو با قالب سایتتون آزمایش کنید |
| Gallery – Photo Albums Plugin | عکاسها و نمونهکارهای تصویری | ساخت آلبوم و گالری | محدودیتهای نسخه رایگان رو قبل از واردکردن تصاویر بررسی کنید |
برای یک نمونه کار ساده، Radius Portfolio میتونه نقطه شروع مناسبی باشه. اگه تصاویر بخش اصلی کارتون هستن، Grid Kit Portfolio Gallery یا Gallery – Photo Albums Plugin به نوع نیازتون نزدیکتر هستن. برای پروژههایی که باید براساس موضوع یا نوع خدمت جدا بشن، Filterable Portfolio کاربرد بیشتری داره. این پیشنهادها براساس نوع نمایش پروژهها هستن و رتبهبندی قطعی کیفیت افزونهها محسوب نمیشن.
قبل از نصب، صفحه هر افزونه رو در مخزن رسمی افزونههای نمونه کار وردپرس باز کنید. تاریخ آخرین بهروزرسانی، نسخه وردپرس آزمایششده، امتیازها و پرسشهای پشتیبانی اطلاعات خوبی درباره وضعیت افزونه بهتون میدن.
قبل از انتخاب افزونه نمونه کار به چه چیزهایی دقت کنید؟
- هماهنگی با ویرایشگر و قالب: افزونه باید با ویرایشگر بلوکی و قالب سایتتون درست کار کنه. بهتره اول اون رو روی یک نسخه آزمایشی، یعنی یک کپی غیرعمومی از سایت، نصب کنید و صفحه نمونه کار رو در چند اندازه صفحه ببینید.
- فیلتر و دستهبندی: اگه پروژههای متنوعی دارید، فیلتر به بازدیدکننده کمک میکنه فقط نمونهکارهای مرتبط با نیازش رو ببینه. برای مثال میتونید دستههای «طراحی فروشگاه»، «سایت شرکتی» و «طراحی رابط کاربری» بسازید.
- نمایش در موبایل: واکنشگرا یعنی چیدمان صفحه با اندازه نمایشگر هماهنگ بشه. ستونها، دکمههای فیلتر و پنجره نمایش تصویر باید روی موبایل هم خوانا و قابل لمس باشن.
- سرعت بارگذاری: تصاویر بزرگ و ویدیوهای متعدد میتونن صفحه رو سنگین کنن. قبل از بارگذاری، ابعاد و حجم تصاویر رو کم کنید و فقط رسانههایی رو بذارید که واقعاً به معرفی پروژه کمک میکنن.
- مرز نسخه رایگان و پولی: داشتن نسخه رایگان به این معنی نیست که همه قابلیتها رایگان هستن. تعداد پروژهها، فیلتر، صفحهبندی، لایتباکس و مدلهای چیدمان رو قبل از شروع بررسی کنید. لایتباکس همون پنجرهایه که تصویر رو بدون خروج از صفحه، در اندازه بزرگتر نشون میده.
- بهروزرسانی و سازگاری: افزونهای رو انتخاب کنید که بهطور منظم بهروزرسانی میشه و با نسخه وردپرس سایتتون هماهنگه. نسخه پشتیبان هم یادتون نره تا اگه ناسازگاری پیش اومد، بتونید سایت رو برگردونید.
معرفی بهترین افزونههای نمونه کار وردپرس
افزونه Radius Portfolio

Radius Portfolio برای سایتهایی مناسبه که میخوان پروژهها رو بهصورت منظم و جدا از نوشتههای وبلاگ مدیریت کنن. این مدل برای طراح سایت، گرافیست، فریلنسر و آژانسی که برای هر پروژه تصویر و توضیح جدا داره، کاربردیه.
بعد از نصب افزونه، بخش مربوط به نمونهکارها رو در پیشخوان پیدا کنید. یک پروژه آزمایشی بسازید، عنوان و تصویرش رو وارد کنید و تنظیمات نمایش افزونه رو ببینید. روش قراردادن خروجی داخل برگه ممکنه با توجه به نسخه افزونه بهشکل بلوک یا کد کوتاه باشه. کد کوتاه یا Shortcode یک تکه متن داخل کروشه هست که خروجی افزونه رو در محل دلخواه نشون میده. نام دقیق منوها و روش نمایش رو در راهنمای نسخهای که نصب کردید بررسی کنید.
مزیت این روش اینه که پروژهها از محتوای عادی سایت جدا میمونن و مدیریت اونها راحتتره. بااینحال، امکانات نسخه رایگان و پولی ممکنه در بهروزرسانیهای مختلف تغییر کنن. قبل از انتخاب نهایی بررسی کنید چیدمان، فیلتر، صفحهبندی و تنظیمات ظاهری موردنیازتون در کدوم نسخه قرار دارن.
افزونه Grid Kit Portfolio Gallery

Grid Kit Portfolio Gallery برای وقتی مناسبه که میخواید نمونهکار و گالری تصویری رو کنار هم داشته باشید. این انتخاب برای عکاسها، تصویرگرها، طراحهای گرافیک و افرادی که ظاهر پروژه براشون مهمتر از توضیحات طولانیه، کاربرد داره.
نکته مهم: مخزن رسمی وردپرس برای این افزونه هشدار داده که با سه نسخه اصلی اخیر وردپرس آزمایش نشده و ممکنه هنگام استفاده در نسخههای جدید مشکل سازگاری داشته باشه. این پیام بهتنهایی ثابت نمیکنه که افزونه حتماً مشکل داره، ولی نشونهایه که باید جدی بگیرید. قبل از نصب روی سایت اصلی، تاریخ آخرین بهروزرسانی و وضعیت پشتیبانی رو در صفحه افزونه ببینید، اون رو روی یک نسخه آزمایشی امتحان کنید و از سایتتون نسخه پشتیبان بگیرید.
برای شروع، بعد از فعالکردن افزونه منوی مربوط به اون رو در پیشخوان باز کنید و یک گالری آزمایشی بسازید. دو یا سه تصویر اضافه کنید و تنظیمات موجود برای عنوان، ستونها و فاصله تصاویر رو ببینید. بعد روش نمایش ارائهشده در همون نسخه رو پیدا کنید و خروجی رو داخل برگه نمونه کار بذارید.
قبل از اینکه تعداد زیادی تصویر وارد کنید، بررسی کنید قابلیتهایی که لازم دارید در نسخه رایگان فعال هستن یا نه. بعد یک گالری کوچک بسازید و ظاهرش رو روی موبایل، تبلت و کامپیوتر ببینید.
افزونه Filterable Portfolio

Filterable Portfolio برای سایتی مفیده که چند گروه نمونه کار داره. فیلتر به بازدیدکننده اجازه میده با انتخاب یک موضوع، پروژههای نامرتبط رو پنهان کنه. این ویژگی مخصوصاً برای آژانسهایی کاربردیه که خدمات مختلفی مثل طراحی سایت، برندینگ و تولید محتوا دارن.
بعد از نصب، اول دستههای ساده و قابل فهم بسازید. تعداد زیاد دسته، انتخاب رو سخت میکنه؛ پس فقط گروههایی رو نگه دارید که واقعاً به تصمیم بازدیدکننده کمک میکنن. بعد هر پروژه رو با تصویر، عنوان و توضیح کوتاه ثبت کنید و دسته مرتبط رو براش انتخاب کنید.
برای نمایش پروژهها، راهنمای نسخه نصبشده افزونه رو باز کنید و روش قراردادن خروجی در برگه رو همونطور که توضیح داده دنبال کنید. چون نام منوها و روش نمایش ممکنه بین نسخهها فرق کنه، قبل از واردکردن همه پروژهها با یک یا دو مورد آزمایشی جلو برید. در پایان روی همه دکمههای فیلتر کلیک کنید و مطمئن بشید هر پروژه زیر دسته درست خودش دیده میشه.
افزونه Gallery – Photo Albums Plugin

Gallery – Photo Albums Plugin برای ساخت آلبوم و گالری تصویری طراحی شده و برای نمونهکار عکاسی، نقاشی، طراحی گرافیک و پروژههای قبل و بعد مناسبه. این افزونه بیشتر روی نمایش رسانه تمرکز داره؛ پس اگه برای هر پروژه به یک مطالعه موردی طولانی نیاز دارید، باید ببینید ساختارش با محتوای موردنظرتون هماهنگه یا نه.
قبل از شروع، محدودیت تعداد آلبومها، گالریها و تصاویر رو در صفحه رسمی نسخه فعلی بررسی کنید. قابلیتهایی مثل صفحهبندی، فیلتر، دستهبندی و مدلهای مختلف لایتباکس هم ممکنه فقط در بعضی نسخهها در دسترس باشن. این محدودیتها میتونن با بهروزرسانی افزونه تغییر کنن؛ پس تصمیمتون رو براساس اطلاعات فعلی صفحه افزونه بگیرید.
برای ساخت اولین گالری، وارد بخش افزونه بشید، یک آلبوم آزمایشی بسازید و چند تصویر بهینهشده رو به اون اضافه کنید. بعد عنوان و ترتیب تصاویر رو تنظیم کنید و با روش ارائهشده در نسخه نصبشده، خروجی گالری رو داخل برگه نمونه کار بذارید. بهتره هر آلبوم فقط یک موضوع مشخص داشته باشه تا بازدیدکننده بین تصاویر سردرگم نشه.
آموزش نصب افزونه نمونه کار در وردپرس
- وارد پیشخوان وردپرس بشید و از منوی «افزونهها»، گزینه افزودن افزونه تازه رو انتخاب کنید.
- نام دقیق افزونه رو در کادر جستوجو بنویسید. نام سازنده و مشخصات افزونه رو هم بررسی کنید تا گزینه اشتباهی نصب نشه. بعد دکمه نصب رو بزنید و پس از پایان نصب، افزونه رو فعال کنید. متن دکمهها ممکنه در نسخههای مختلف ترجمه فارسی وردپرس کمی فرق داشته باشه.
- از منوی افزونه، اولین پروژه، گالری یا آلبومتون رو بسازید. برای آزمایش اولیه دو یا سه تصویر کافیه و لازم نیست همه نمونهکارها رو یکجا وارد کنید.
- یک برگه با عنوانی مثل «نمونهکارها» بسازید. روش نمایش معرفیشده در افزونه رو پیدا کنید و بلوک یا کد کوتاه اون رو داخل برگه بذارید.
- برگه رو پیشنمایش کنید و ظاهرش رو روی موبایل و کامپیوتر ببینید. اندازه تصاویر، فاصله ستونها، دکمههای فیلتر و لینک هر پروژه رو هم آزمایش کنید.
اگه هنوز با بخشهای اصلی وردپرس آشنا نیستید، راهنمای طراحی سایت با وردپرس بدون کدنویسی مسیر شروع رو سادهتر براتون توضیح میده. برای طراحی چیدمان اختصاصیتر هم میتونید از افزونه المنتور کمک بگیرید، ولی اول مطمئن بشید افزونه نمونه کارتون با صفحهساز انتخابی هماهنگه.
چطور یک صفحه نمونه کار حرفهای بسازید؟
- تصویر واضح انتخاب کنید: اولین تصویر باید نتیجه پروژه رو سریع نشون بده. از تصویر کشیده، تار یا شلوغ استفاده نکنید و برای همه پروژهها نسبت تصویر یکسانی در نظر بگیرید.
- داستان پروژه رو کوتاه بگید: برای هر نمونه کار توضیح بدید مشتری یا پروژه چه نیازی داشت، شما چه کاری انجام دادید و نتیجه چی بود. ادعایی مثل افزایش فروش یا بازدید رو فقط وقتی بنویسید که داده قابل بررسی دارید.
- دستهها رو ساده نگه دارید: نامهایی مثل «فروشگاهی»، «شرکتی» و «شخصی» از عنوانهای مبهم بهترن. بازدیدکننده باید بدون حدسزدن بفهمه هر فیلتر چه پروژههایی رو نشون میده.
- حجم تصاویر رو کم کنید: تصویر رو با ابعاد متناسب با محل نمایش ذخیره کنید. فشردهسازی درست باعث میشه صفحه سریعتر باز بشه، بدون اینکه کیفیت تصویر بهشکل آزاردهندهای پایین بیاد.
- راه تماس رو مشخص کنید: پایین صفحه یا بعد از هر پروژه یک دکمه واضح مثل «درخواست همکاری» بذارید. کاربر نباید برای پیدا کردن فرم تماس بین چند صفحه بگرده.
خود افزونه فقط ابزار نمایش پروژههاست. انتخاب پروژه مناسب، توضیح روشن و ترتیب درست نمونهکارها نقش مهمتری در قانعکردن مشتری دارن. راهنمای ارائه نمونه کار طراحی سایت از روش درست بهتون کمک میکنه محتوای هر پروژه رو هدفمندتر آماده کنید.
بالاخره کدوم افزونه نمونه کار رو انتخاب کنید؟
انتخاب نهایی رو با یک آزمایش کوچک انجام بدید. اگه میخواید هر پروژه اطلاعات جدا داشته باشه، Radius Portfolio رو بررسی کنید. اگه تمرکزتون روی تصاویر و آلبومهاست، Gallery – Photo Albums Plugin به نیازتون نزدیکتره. برای دستهبندی و فیلتر پروژهها هم Filterable Portfolio رو آزمایش کنید.
Grid Kit Portfolio Gallery برای ترکیب گالری و نمونه کار طراحی شده، ولی هشدار سازگاری مخزن وردپرس رو نادیده نگیرید. هر افزونهای رو که انتخاب میکنید، اول با چند پروژه روی یک نسخه آزمایشی بسنجید و فقط وقتی نگهش دارید که امکانات لازم رو با کمترین پیچیدگی در اختیارتون میذاره.
سؤالهای رایج درباره افزونه نمونه کار وردپرس
آیا میتونید بدون کدنویسی صفحه نمونه کار بسازید؟
بله. بیشتر افزونههای نمونه کار با بلوک، کد کوتاه یا تنظیمات آماده کار میکنن. شما پروژهها و تصاویر رو وارد میکنید و خروجی ساختهشده رو داخل یک برگه میذارید.
آیا افزونههای نمونه کار رایگان هستن؟
افزونههای معرفیشده نسخه رایگان دارن، ولی همه قابلیتها لزوماً رایگان نیستن. قبل از نصب، محدودیت تعداد پروژه، گالری، تصویر، فیلتر و چیدمانها رو در صفحه رسمی نسخه فعلی افزونه بررسی کنید.
چطور نمونهکارها رو داخل یک برگه نمایش بدید؟
اول روش نمایش نسخه نصبشده افزونه رو در تنظیمات یا راهنمای اون پیدا کنید. بعد برگه موردنظرتون رو باز کنید و بلوک اختصاصی یا کد کوتاه ارائهشده رو اضافه کنید. در پایان، برگه رو پیشنمایش کنید و لینکها و فیلترها رو آزمایش کنید.
افزونه نمونه کار روی سرعت سایت اثر میذاره؟
بله، تعداد زیاد تصویر، فایلهای حجیم و افکتهای نمایشی میتونن صفحه رو کند کنن. تصاویر رو قبل از بارگذاری فشرده کنید، ابعاد مناسب بذارید و قابلیتهایی رو که لازم ندارید فعال نکنید.
برای نمایش ویدیو در نمونه کار به چه چیزی نیاز دارید؟
اول صفحه رسمی نسخه فعلی افزونه رو بررسی کنید تا مطمئن بشید از ویدیو، لینک ویدیو یا جاسازی ویدیو پشتیبانی میکنه. بهتره ویدیوهای سنگین رو مستقیم داخل وردپرس بارگذاری نکنید و از روش میزبانی مناسبی استفاده کنید که با قوانین و نیازهای سایتتون هماهنگ باشه.

هر چند خیلی گذشته اما برای دیگران حداقل این رو می نویسم. شما این پلاگین هارو بنداز سطل زباله و الکی سایتتو سنگین نکن. بیا با المنتور نمونه کارهات رو در بیار. باکس عکست رو کد css زیر رو بهش بده. همونی میشه که میخوای:
selector{
-webkit-transition: ease-in-out 4s !important;
transition: ease-in-out 4s !important;
}
selector:hover{
background-position: center bottom !important;
}
در سایتهای نمایش دمو ، روشی استفاده میشود که عکسهای بلندِ اسکرین شات در فضای محدودی نمایش داده شده و با هاورِ ماوس روی آن تمام تصویر به صورت اسکرال خودکار نمایش داده میشود
میشه معرفی کنین از چه افزونه یا کدی استفاده میکنن
سلام. این امکانتی که مد نظر شماس، با استفاده از CSS قالب اجرا میباشد .
ویژگی transform:translat
آموزش و افزونه زیبای بود