ابعاد تصویر شاخص در وردپرس چقدر باید باشد؟

عددی که بیشتر افراد دنبالش هستند ۱۲۰۰ در ۶۳۰ پیکسل است. این همان نسبتی است که فیس‌بوک، لینکدین و ایکس برای پیش‌نمایش لینک‌ها استفاده می‌کنند (۱٫۹۱:۱) و ابعادی است که یک تصویر Open Graph باید داشته باشد. اگر تصویر شاخص را عمدتاً به این خاطر تنظیم می‌کنید که لینک‌های به‌اشتراک‌گذاشته‌شده درست نمایش داده شوند، از ۱۲۰۰ در ۶۳۰ استفاده کنید و همین‌جا متوقف شوید.

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

چرا قالب این عدد را نادیده می‌گیرد

وقتی تصویری را آپلود می‌کنید، وردپرس فقط یک فایل ذخیره نمی‌کند. تابع wp_generate_attachment_metadata() را اجرا می‌کند و برای هر اندازه تصویر ثبت‌شده یک نسخه مشتق می‌سازد: سه اندازه پیش‌فرض (thumbnail، medium، large)، اندازه medium_large مربوط به ویرایشگر بلوکی (با عرض ۷۶۸ پیکسل)، به‌علاوه هر اندازه‌ای که قالب یا یک افزونه با add_image_size() ثبت کرده باشد.

قالبی که یک هدر عریض با نسبت ۱۶:۹ می‌خواهد، چیزی شبیه به این را در functions.php می‌نویسد:

add_theme_support( 'post-thumbnails' );
add_image_size( 'hero-featured', 1200, 675, true );

آرگومان چهارم، یعنی true، به معنای برش سخت (hard crop) است. وردپرس تصویر شما را دقیقاً به ۱۲۰۰ در ۶۷۵ برش می‌دهد و هر چه که در کادر ۱۶:۹ جا نشود دور انداخته می‌شود. اگر سوژه شما نزدیک بالا یا پایین کادر باشد، بریده می‌شود. اگر روی false تنظیم شود (یا حذف شود)، تصویر به نسبت مقیاس می‌شود و ابعاد نهایی می‌تواند با آنچه خواسته‌اید فرق کند.

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

the_post_thumbnail( 'hero-featured' );

هر نامی که به the_post_thumbnail() پاس داده شود، همان برشی است که رندر می‌شود. پس ابعاد واقعی تصویر شاخص در سایت شما در دو جایی تعریف می‌شود که خودتان ننوشته‌اید: فراخوانی add_image_size() و فراخوانی the_post_thumbnail() در قالب. آپلود یک فایل بزرگ‌تر هیچ‌کدام از این دو را تغییر نمی‌دهد.

یک لایه دیگر هم وجود دارد. وردپرس یک srcset ارائه می‌دهد، بنابراین روی صفحه‌نمایش‌های کوچک‌تر مرورگر ممکن است به‌جای برش کامل، نسخه medium یا large را بارگذاری کند. ابعادی که در DevTools می‌بینید اغلب همان چیزی نیست که آپلود کرده‌اید.

چطور مشکل را به‌ترتیب حل کنیم

۱. بفهمید قالب شما واقعاً چه چیزی درخواست می‌کند. پیش از حدس‌زدن، ببینید وردپرس از تصویر شما چه اندازه‌هایی می‌سازد و کدام‌یک همان هدر برش‌خورده است. تصویرتان را در ابزار اندازه‌های تصویر وردپرس بیندازید — این ابزار هر نسخه مشتقی را که وردپرس می‌سازد با ابعاد دقیق پیکسلی نشان می‌دهد تا بتوانید فایل منبع‌تان را به‌جای عدد افسانه‌ای ۱۲۰۰ در ۶۳۰ با هدف واقعی مطابقت دهید.

۲. به‌اندازه‌ای بزرگ آپلود کنید که بزرگ‌ترین برش را پوشش دهد. اگر هدر قالب ۱۲۰۰ در ۶۷۵ است، دست‌کم به همان اندازه و در حالت ایده‌آل دو برابر برای صفحه‌نمایش‌های رتینا (۲۴۰۰ در ۱۳۵۰) آپلود کنید. وردپرس تصویر را به‌خوبی کوچک می‌کند؛ اما هرگز بزرگش نمی‌کند. یک فایل منبع کوچک‌تر از حد لازم، رایج‌ترین دلیل تار شدن تصویر شاخص است.

۳. نسبت ابعاد تصویرتان را با برش قالب هماهنگ کنید. اگر قالب برش سخت ۱۶:۹ انجام می‌دهد، تصویر ۱۶:۹ به آن بدهید. سوژه را در مرکز کادر قرار دهید تا برش سخت سر کسی را قطع نکند.

۴. اگر اندازه ثبت‌شده اشتباه است، آن را تغییر دهید و دوباره بسازید. مقادیر add_image_size() را در یک قالب فرزند ویرایش کنید، سپس تصاویر بندانگشتی موجود را بازسازی کنید — ابعاد جدید تا زمانی که این کار را نکنید فقط روی آپلودهای بعدی اعمال می‌شوند:

wp media regenerate --yes

WP-CLI ندارید؟ افزونه Regenerate Thumbnails همین کار را از پیشخوان انجام می‌دهد.

چه کارهایی نکنید

فقط یک تصویر ۱۲۰۰ در ۶۳۰ آپلود نکنید و فرض نگیرید که همه‌چیز درست انجام می‌شود. اگر اندازه ثبت‌شده قالب ۱۶:۹ باشد، وردپرس تصویر ۱٫۹۱:۱ شما را برش سخت می‌دهد و بالا و پایین آن را از دست می‌دهید. عدد Open Graph و عدد نمایش دو کار متفاوت‌اند.

اندازه‌های تصویر وردپرس را برای «حفظ نسخه اصلی» غیرفعال نکنید. برخی توصیه می‌کنند اندازه‌های میانی را روی ۰ بگذارید یا the_post_thumbnail را از قلاب جدا کنید. آن وقت قالب به ارائه فایل با اندازه کامل که در مرورگر کوچک شده روی می‌آورد — یعنی یک JPEG با عرض ۴۰۰۰ پیکسل که به یک گوشی فرستاده می‌شود. این کار زمان بارگذاری و Core Web Vitals شما را نابود می‌کند. این نسخه‌های مشتق دلیلی برای وجود دارند.

«اندازه پیشنهادی» یک افزونه را به اندازه ثبت‌شده واقعی قالبتان ترجیح ندهید. افزونه‌های سئو برای تگ OG اندازه ۱۲۰۰ در ۶۳۰ را پیشنهاد می‌دهند که برای همان تگ درست است. اما این هیچ ربطی به این ندارد که قالب تک‌نوشته شما به چه ابعادی برش می‌دهد.

پس از تغییر اندازه‌ها، اجرای wp media regenerate را فراموش نکنید. ویرایش add_image_size() هیچ تأثیری روی تصاویری که پیش‌تر آپلود شده‌اند ندارد. این همان مرحله‌ای است که افراد فراموش می‌کنند و بعد نتیجه می‌گیرند که کد کار نکرده است.

هنوز به مشکل خورده‌اید؟

اگر تصویر پس از هماهنگ‌کردن ابعاد و بازسازی همچنان اشتباه است، مشکل معمولاً حالت برش (true در مقابل false) است یا یک srcset که نسخه مشتق کوچک‌تری از آنچه انتظار دارید ارائه می‌دهد. فایل را در ابزار اندازه‌های تصویر بیندازید تا دقیقاً ببینید تنظیمات شما چه برش‌هایی تولید می‌کند، سپس آن را با چیزی که مرورگر در DevTools بارگذاری می‌کند مقایسه کنید. این دو را با هم هماهنگ کنید و کار حدس‌وگمان تمام می‌شود.