ساخت گالری تصویر در وردپرس بدون افزونه؛ آموزش قدم‌به‌قدم

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

راه‌حلش هم ساده‌ست: به‌جای اینکه عکس‌ها پشت سر هم بیفتن، بذاریدشون توی یه گالری شبکه‌ای با ستون و ردیف. اون‌وقت همون دوازده تا عکس توی یه‌سوم فضا جا می‌شن، صفحه مرتب‌تر به نظر می‌رسه و کاربر هم با یه نگاه می‌فهمه چی دارید نشونش می‌دید.

خبر خوب اینه که برای این کار لازم نیست هیچ افزونه‌ای نصب کنید. خود وردپرس ابزارش رو داره و توی این مقاله قدم‌به‌قدم می‌ریم سراغش.

چرا به گالری تصویر نیاز داریم؟

قدم اول بریم ببینیم چرا اصلا به گالری تصویر احتیاج پیدا می‌کنیم.

مشکل نمایش پیش‌فرض تصاویر در وردپرس

وردپرس به‌صورت پیش‌فرض عکس‌ها رو دقیقاً همون‌طوری که اضافه‌شون می‌کنید نشون می‌ده؛ یعنی هر عکس یه بلوک جدا و زیر عکس قبلی. برای یکی دو تا تصویر توی متن هیچ ایرادی نداره، ولی به محض اینکه تعداد بره بالا، صفحه‌تون کش میاد و ریتم مطلب به هم می‌ریزه.

مزیت چیدمان شبکه‌ای برای کاربر و برای سئو

توی چیدمان Grid، عکس‌ها کنار هم و توی چند ستون می‌شینن. نتیجه‌ش چی می‌شه؟ کاربر توی یه صفحه‌ی جمع‌وجور همه‌چی رو می‌بینه و لازم نیست کلی اسکرول کنه. می‌تونید نسخه‌ی بندانگشتی عکس‌ها رو نشون بدید و کاربر با کلیک روی هرکدوم تصویر اصلی رو ببینه. ظاهر مطلب هم حرفه‌ای‌تر می‌شه، مخصوصاً توی مطالبی مثل معرفی محصول، گزارش سفر یا نمونه‌کار.

از طرف دیگه زمان موندن کاربر توی صفحه بیشتر می‌شه و همین برای سئو امتیاز حساب می‌شه. ضمن اینکه خود تصاویر هم شانس دیده‌شدن توی گوگل ایمیجز رو پیدا می‌کنن.

روش‌های ساخت گالری بدون افزونه

قبل از اینکه بریم سراغ جزئیات، بذارید مسیرها رو مشخص کنم تا بدونید کجا داریم می‌ریم. دو تا راه دارید.

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

دوم، شورت‌کد gallery. اگه هنوز با ویرایشگر کلاسیک کار می‌کنید یا می‌خواید گالری رو جایی مثل یه قالب سفارشی بذارید، این گزینه به دردتون می‌خوره.

هر دو تاش داخل خود وردپرسه و هیچ‌کدوم نیاز به نصب چیزی نداره.

ساخت گالری تصویر با بلوک گالری گوتنبرگ

خب برو بریم برای روش اول:

مرحله اول: افزودن بلوک گالری

اول برید سراغ همون پست یا برگه‌ای که می‌خواید گالری توش باشه و بازش کنید برای ویرایش. حالا روی آیکن «+» یا همون افزودن بلوک جدید کلیک کنید و توی کادر جستجو بنویسید «گالری». بلوک گالری رو انتخاب کنید تا به صفحه اضافه بشه.

همین. سخت‌ترین قسمت کار همین بود!

مرحله دوم: آپلود تصاویر از کامپیوتر

حالا دو تا دکمه جلوتون دارید: بارگذاری و کتابخانه رسانه. اگه عکس‌ها روی سیستم خودتونه، روی بارگذاری بزنید.

یه نکته که خیلی‌ها نمی‌دونن و وقتشون رو الکی تلف می‌کنن: لازم نیست عکس‌ها رو تک‌تک آپلود کنید. توی پنجره‌ای که باز می‌شه، کلید Ctrl رو نگه دارید (روی مک کلید Command) و روی هر عکسی که می‌خواید کلیک کنید. اگه هم عکس‌ها پشت سر همن، روی اولی کلیک کنید، Shift رو نگه دارید و روی آخری کلیک کنید تا کل بازه انتخاب بشه.

مرحله سوم: انتخاب تصاویر از کتابخانه رسانه

اگه عکس‌ها رو قبلاً آپلود کردید، به‌جای بارگذاری روی «کتابخانه رسانه» بزنید. اینجا همه‌ی فایل‌هایی که تا حالا روی سایت گذاشتید رو می‌بینید و فقط کافیه روی هرکدوم کلیک کنید تا تیک بخوره.

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

مرحله چهارم: پر کردن عنوان، زیرنویس و متن جایگزین

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

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

مرحله پنجم: ساخت گالری و به‌روزرسانی

وقتی انتخاب عکس‌ها تموم شد، پایین گوشه‌ی سمت چپ روی دکمه‌ی «گالری تازه بسازید» کلیک کنید. یه صفحه‌ی جدید باز می‌شه به اسم ویرایش گالری که اونجا می‌تونید ترتیب عکس‌ها رو با درگ‌اند‌دراپ عوض کنید، زیرنویس‌ها رو کامل کنید یا عکس اضافی رو حذف کنید.

آخرش هم روی «به‌روزرسانی گالری» بزنید تا گالری بشینه سر جاش توی پست.

تنظیمات گالری تصویر در گوتنبرگ

تا اینجا گالری ساخته شده، ولی هنوز کارمون تموم نشده. حالا که روی بلوک گالری کلیک می‌کنید، یه پنل تنظیمات کنار صفحه باز می‌شه که چند تا گزینه‌ی مهم داره.

تعداد ستون‌ها

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

فقط حواستون باشه هرچی تعداد ستون بیشتر بشه، عکس‌ها توی موبایل کوچیک‌تر دیده می‌شن.

برش تصویر (Crop)

یه گزینه هست به اسم «برش تصاویر». اگه فعالش کنید، وردپرس همه‌ی عکس‌ها رو هم‌اندازه می‌کنه تا شبکه‌تون مرتب و منظم به نظر برسه. اگه خاموشش کنید، هر عکس با نسبت ابعاد اصلی خودش نمایش داده می‌شه.

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

لینک تصاویر؛ مهم‌ترین تنظیم این بخش

اینجا سه تا گزینه دارید و انتخابتون مستقیم روی تجربه‌ی کاربر اثر می‌ذاره.

هیچ‌کدام: کاربر روی عکس کلیک می‌کنه و هیچ اتفاقی نمی‌افته. برای وقتی خوبه که عکس‌ها فقط جنبه‌ی تزئینی دارن.

پرونده رسانه: با کلیک، همون عکس با اندازه‌ی کامل باز می‌شه. برای گالری‌هایی که جزئیات عکس مهمه، بهترین گزینه‌ست.

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

پیش‌نمایش زنده

قبل از انتشار، حتماً روی «پیش‌نمایش» بزنید و گالری رو توی حالت واقعی سایت ببینید. مخصوصاً حالت موبایل رو چک کنید. خیلی وقت‌ها گالری‌ای که توی ویرایشگر عالی به نظر می‌رسه، توی گوشی به‌هم‌ریخته‌ست.

ساخت گالری با شورت‌کد در ویرایشگر کلاسیک

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

[gallery ids="12,45,78,90" columns="3" size="medium" link="file"]

بذارید پارامترها رو باز کنیم. ids شناسه‌ی عددی عکس‌هاست؛ برای پیدا کردنش برید به بخش رسانه، روی عکس کلیک کنید و آدرس مرورگر رو نگاه کنید، عددی که جلوی item نوشته شده همون شناسه‌ست. columns تعداد ستون‌ها رو مشخص می‌کنه، size اندازه‌ی تصویر بندانگشتی رو (معمولاً medium یا thumbnail) و link هم مقصد کلیک رو تعیین می‌کنه که file یعنی فایل اصلی و none یعنی هیچ لینکی.

ترتیب شناسه‌ها توی ids همون ترتیبیه که عکس‌ها نمایش داده می‌شن، پس اگه خواستید جای دو تا عکس رو عوض کنید، کافیه جای عددشون رو توی همین خط جابه‌جا کنید.

بهینه‌سازی حجم تصاویر گالری برای جلوگیری از افت سرعت سایت

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

ابعاد استاندارد

لازم نیست عکسی با عرض ۴۰۰۰ پیکسل رو توی گالری سه‌ستونه بذارید. اون عکس نهایتاً با عرض سیصد چهارصد پیکسل نمایش داده می‌شه، پس دارید کلی حجم اضافه به کاربر تحمیل می‌کنید. قبل از آپلود، ابعاد عکس‌ها رو متناسب با عرض سایتتون کوچیک کنید؛ با فتوشاپ، با ابزارهای آنلاین، هر چیزی که باهاش راحتید.

فشرده‌سازی و فرمت WebP

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

بارگذاری تنبل را چک کنید

نسخه‌های جدید وردپرس به‌صورت پیش‌فرض Lazy Load رو فعال دارن؛ یعنی عکس‌ها فقط وقتی لود می‌شن که کاربر بهشون برسه. برای صفحه‌ای که ده‌ها عکس داره، این یعنی تفاوت زمین تا آسمون توی سرعت لود اولیه. بعد از انتشار گالری، یه بار با ابزارهای تست سرعت صفحه رو بررسی کنید تا مطمئن بشید این ویژگی روی تصاویر گالریتون درست کار می‌کنه.

سئوی تصاویر گالری؛ نحوه بهینه‌سازی تگ Alt برای گوگل

تصاویر گالری شانس خیلی خوبی برای رتبه گرفتن توی گوگل ایمیجز دارن و می‌تونن یه کانال ترافیک جداگانه براتون باز کنن. فقط چند تا کار ساده لازمه.

تگ Alt را جدی بگیرید

مهم‌ترین کاری که می‌تونید برای سئوی تصاویرتون بکنید همینه. متن جایگزین یه توضیح کوتاهه که به گوگل می‌گه توی این عکس چی هست. برای هر عکس یه عبارت کوتاه، توصیفی و مرتبط بنویسید که واقعاً محتوای همون عکس رو توضیح بده.

مثلاً به‌جای «گالری ۱» بنویسید «تنظیمات تعداد ستون در بلوک گالری وردپرس».

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

اسم فایل را قبل از آپلود درست کنید

فایلی به اسم IMG_20240513.jpg هیچ سیگنالی به گوگل نمی‌ده. قبل از آپلود، اسم فایل رو به یه عبارت معنادار تغییر بدید و کلمات رو با خط تیره جدا کنید. مثلاً wordpress-gallery-block-settings.jpg.

عنوان و زیرنویس را هم پر کنید

اینا به اندازه‌ی Alt وزن ندارن، ولی به گوگل کمک می‌کنن موضوع کلی گالری شما رو بهتر بفهمه. ضمن اینکه زیرنویس مستقیم به کاربر نمایش داده می‌شه و می‌تونه اطلاعات مفیدی بهش بده.

محدودیت‌های گالری پیش‌فرض وردپرس

بذارید روراست باشیم. گالری داخلی وردپرس برای بیشتر سایت‌ها کاملاً کافیه، ولی اگه به‌صورت حرفه‌ای و مداوم با گالری کار می‌کنید، یه جاهایی کم میاره.

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

دسته‌بندی و آلبوم نداره. نمی‌تونید گالریتون رو به آلبوم و برچسب تقسیم کنید. برای یه سایت عکاسی که ده‌ها مجموعه‌ی مجزا داره، این محدودیت جدیه.

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

ظاهرش وابسته به قالبه. استایل نهایی گالری رو قالب سایتتون تعیین می‌کنه و کنترل زیادی روش ندارید.

اگه هیچ‌کدوم از اینا براتون مشکل‌ساز نیست، همین روش داخلی رو استفاده کنید و بی‌خودی سایتتون رو با افزونه‌ی اضافه سنگین نکنید.

سؤالات متداول

جمع‌بندی

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

فقط دو تا چیز رو فراموش نکنید که فرق یه گالری معمولی با یه گالری اصولی همینه: حجم عکس‌ها رو قبل از آپلود کم کنید و تگ Alt رو برای تک‌تک تصاویر بنویسید. اولی سرعت سایتتون رو نجات می‌ده و دومی براتون از گوگل ایمیجز ترافیک میاره.

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

تیم تولید محتوا

ما در تیم تولید محتوای میهن وردپرس در تلاش هستیم تا بهترین مقالات آموزشی در زمینه وردپرس و کسب‌و‌کارهای اینترنتی را تهیه کنیم. صحت محتوای این صفحه توسط رضا راد بررسی خواهد شد.