سایز تصویر شاخص وردپرس: 1200×630 + یافتن سایز قالب شما

پاسخ کوتاه: اگر هنوز سایز قالب خود را نمی‌دانید، از 1200 × 630 پیکسل (حدود 1.91:1) استفاده کنید. این همان اندازه پیش‌نمایش لینکی است که فیس‌بوک توصیه می‌کند، و افزونه‌های سئو معمولا از تصویر شاخص به‌عنوان تصویر اشتراک‌گذاری استفاده می‌کنند.

اما در خود نوشته، اندازه‌ای اهمیت دارد که قالب شما نمایش می‌دهد. وردپرس هر فایلی را که آپلود می‌کنید در چند اندازه ذخیره می‌کند و قالب انتخاب می‌کند کدام‌یک نمایش داده شود. قالب‌های کلاسیک این را با set_post_thumbnail_size() یا add_image_size() تعیین می‌کنند و قالب‌های بلوکی در بلوک تصویر شاخص. اگر قالب به 16:9 یا مربع برش بدهد، تصویر 1200 × 630 ممکن است بخشی از لبه‌های چپ و راست خود را از دست بدهد. سایز قالب خود را پیدا کنید (چهار روش در ادامه آمده است)، بعد تصویری آپلود کنید که دست‌کم به همان بزرگی باشد، یا برای وضوح روی نمایشگرهای با تراکم بالا حدود دو برابر عرض داشته باشد.

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

کدام سایز را استفاده کنید، بر اساس محل نمایش تصویر

محل نمایش تصویر	سایز آپلود	نکته‌ها
نوشته‌های شما، سایز قالب هنوز نامعلوم	1200 × 630، یا 2400 × 1260 برای وضوح بیشتر	تا وقتی سایز قالب را پیدا کنید، برای پیش‌نمایش لینک هم کار می‌کند
نوشته‌های شما، سایز قالب معلوم	حدود دو برابر عرض تصویر شاخص قالب، با همان نسبت ابعاد	وردپرس از فایل آپلودشده نسخه‌های کوچک‌تر می‌سازد، هرگز بزرگ‌تر
پیش‌نمایش لینک در فیس‌بوک	دست‌کم 1200 × 630 (حدود 1.91:1)؛ 1200 × 628 تقریبا همان شکل است	از راهنمای اشتراک‌گذاری فیس‌بوک
گوگل دیسکاور	عرض دست‌کم 1200 پیکسل، 16:9 (مثلا 1200 × 675)	از دستورالعمل‌های گوگل دیسکاور

اندازه تصاویر وردپرس در یک نگاه

برای هر تصویری که آپلود می‌کنید، به ازای هر اندازه ثبت‌شده یک نسخه تغییر اندازه داده‌شده ساخته می‌شود. این‌ها اندازه‌هایی هستند که هسته وردپرس ثبت می‌کند، با مقادیر پیش‌فرض از Theme Handbook و مرجع توابع هسته:

نام اندازه	ابعاد پیش‌فرض	در تنظیمات > رسانه قابل تغییر است؟	نکته‌ها
thumbnail	150 × 150، برش‌خورده	بله	گزینه «برش به ابعاد دقیق» دارد
medium	حداکثر 300 × 300	بله	کوچک‌شدن متناسب
medium_large	عرض 768، بدون محدودیت ارتفاع	خیر	بیشتر در srcset استفاده می‌شود
large	حداکثر 1024 × 1024	بله	کوچک‌شدن متناسب
1536x1536	حداکثر 1536 × 1536	خیر	در وردپرس 5.3 برای نمایشگرهای با تراکم بالا اضافه شد
2048x2048	حداکثر 2048 × 2048	خیر	در وردپرس 5.3 برای نمایشگرهای با تراکم بالا اضافه شد
post-thumbnail	قالب تعیین می‌کند	خیر	فقط وقتی وجود دارد که قالب set_post_thumbnail_size() را صدا بزند
full	فایل اصلی آپلودشده شما	خیر	فایل‌های خیلی بزرگ اول کوچک می‌شوند (پایین‌تر را ببینید)

«حداکثر» یعنی وردپرس تصویر را درون این کادر جا می‌دهد و نسبت‌هایش را حفظ می‌کند. عکسی با ابعاد 2000 × 1000 برای large به 1024 × 512 تبدیل می‌شود، نه 1024 × 1024.

قالب‌ها و افزونه‌ها اغلب با add_image_size() اندازه‌های بیشتری اضافه می‌کنند. برای مثال ووکامرس اندازه‌های محصول خودش را اضافه می‌کند که راهنمای سایز تصویر محصول ووکامرس ما توضیح‌شان می‌دهد.

یک قاعده دیگر هم روی فایل‌های بزرگ اثر دارد. از وردپرس 5.3 به بعد، اگر عرض یا ارتفاع تصویری بیشتر از 2560 پیکسل باشد، وردپرس آن را کوچک می‌کند و نسخه کوچک‌شده را بزرگ‌ترین اندازه موجود قرار می‌دهد. این آستانه از فیلتر big_image_size_threshold می‌آید که مقدار پیش‌فرضش 2560 است. اگر در نام فایل‌ها -scaled می‌بینید و می‌خواهید بدانید باید آن را خاموش کنید یا نه، نحوه غیرفعال کردن تصاویر scaled در وردپرس را بخوانید.

سایز تصویر شاخص در عمل از کجا می‌آید

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

قالب‌های کلاسیک

قالب کلاسیک تصاویر شاخص را فعال می‌کند و اندازه را در فایل functions.php خود ثبت می‌کند:

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 1200, 675, true );

تابع set_post_thumbnail_size() اندازه‌ای به نام post-thumbnail ثبت می‌کند. آرگومان سوم برش را کنترل می‌کند. با false (پیش‌فرض)، وردپرس تصویر را طوری کوچک می‌کند که درون 1200 × 675 جا شود. با true، آن را از وسط دقیقا به 1200 × 675 برش می‌دهد، پس هر چیزی بیرون از کادر 16:9 از دست می‌رود. می‌توانید آرایه‌ای مثل array( 'center', 'top' ) هم بدهید تا انتخاب کنید کدام بخش حفظ شود.

بسیاری از قالب‌ها برای قالب‌های نمایشی مختلف، اندازه‌های نام‌دار دیگری هم ثبت می‌کنند:

add_image_size( 'hero-wide', 1600, 900, true );
add_image_size( 'card', 600, 400, true );

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

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'hero-wide' );
}

اگر the_post_thumbnail() بدون نام صدا زده شود، از post-thumbnail استفاده می‌کند. پس سایز واقعی تصویر شاخص در یک قالب کلاسیک همان اندازه‌ای است که در فایل قالب نام برده شده، و آرشیو وبلاگ می‌تواند اندازه‌ای متفاوت از نمای تک‌نوشته داشته باشد.

قالب‌های بلوکی

قالب‌های بلوکی، از جمله قالب‌های رایگان این سایت، تصویر شاخص را با بلوک تصویر شاخص نمایش می‌دهند. مرجع بلوک‌های هسته تنظیمات آن را فهرست می‌کند، از جمله sizeSlug (کدام اندازه ثبت‌شده بارگذاری شود)، aspectRatio، width، height و scale.

این موضوع جایی را که باید نگاه کنید تغییر می‌دهد. نمایش > ویرایشگر را باز کنید، قالب تک‌نوشته‌ها را ویرایش کنید و بلوک تصویر شاخص را انتخاب کنید. نوار کناری نشان می‌دهد کدام اندازه تصویر بارگذاری می‌شود و آیا نسبت ابعادی تعیین شده است. نسبت ابعاد در مرورگر با CSS اعمال می‌شود، پس فایل همان می‌ماند و فقط کادر قابل مشاهده تغییر می‌کند. اگر بلوک کادر 16:9 بخواهد و تصویر شما مربعی باشد، بخشی از آن پنهان می‌شود. قالب‌های آرشیو و صفحه اصلی ممکن است تنظیماتی متفاوت از قالب تک‌نوشته داشته باشند، پس هر کدام را بررسی کنید.

چطور سایز تصویر شاخص قالب خود را پیدا کنید

این روش‌ها را به ترتیب امتحان کنید. اولین روشی که جواب بدهد کافی است.

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

2. اندازه‌های ثبت‌شده را با WP-CLI فهرست کنید. اگر به خط فرمان دسترسی دارید، wp media image-size هر اندازه ثبت‌شده را با عرض، ارتفاع، تنظیم برش و نسبت آن نمایش می‌دهد:

   wp media image-size

3. در فایل‌های قالب جستجو کنید. در قالب کلاسیک، در functions.php (و هر فایلی که فراخوانی می‌کند) دنبال set_post_thumbnail_size و add_image_size بگردید، سپس در single.php یا بخش‌های قالب ببینید چه نامی به the_post_thumbnail() داده شده است. در قالب بلوکی، بلوک تصویر شاخص را در ویرایشگر سایت، همان‌طور که بالا گفته شد، بررسی کنید.

4. یک نوشته منتشرشده را بررسی کنید. روی تصویر شاخص راست‌کلیک کنید، گزینه Inspect را بزنید و نام فایل را در src بخوانید. وردپرس ابعاد را به نام نسخه‌های تغییر اندازه داده‌شده اضافه می‌کند، پس my-photo-1200x675.jpg به شما می‌گوید قالب یک نسخه 1200 × 675 بارگذاری کرده است. به srcset هم نگاه کنید، چون مرورگر ممکن است روی صفحه‌های باریک نسخه کوچک‌تری انتخاب کند. اگر در نام فایل ابعادی نیست، فایل اصلی استفاده شده است.

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

انتخاب اندازه فایل برای آپلود

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

• عرض. دست‌کم به اندازه عرضی که قالب نمایش می‌دهد آپلود کنید. برای وضوح روی نمایشگرهای با تراکم بالای گوشی و لپ‌تاپ، حدود دو برابر آن را هدف بگیرید. برای جایی با عرض 1200px یعنی 2400px. وردپرس از فایل شما نسخه‌های کوچک‌تر می‌سازد و هرگز نسخه بزرگ‌تر نمی‌سازد، پس فایل اصلی کوچک رایج‌ترین علت تار شدن تصویر بعد از آپلود است.
• نسبت ابعاد. نسبت را با برش قالب هماهنگ کنید. اگر قالب به 16:9 برش می‌دهد، تصویر 16:9 بدهید و سوژه را نزدیک وسط نگه دارید تا برش سخت سر افراد یا متن را نبرد.
• حجم فایل. عکسی با عرض 2400px که با کیفیت معقول به‌صورت JPEG ذخیره شده باشد معمولا چند صد کیلوبایت است. آپلود فایل دوربین با عرض 6000px فقط کار اضافه می‌سازد: وردپرس به هر حال هر چیزی بالای 2560px را کوچک می‌کند و پیکسل‌های اضافه هرگز به بازدیدکننده نمی‌رسند.
• فرمت فایل. وردپرس از نسخه 5.8 آپلود WebP و از نسخه 6.5 آپلود AVIF را می‌پذیرد، به شرطی که کتابخانه پردازش تصویر سرور شما از آن‌ها پشتیبانی کند. هر دو معمولا با کیفیتی مشابه، فایلی کوچک‌تر از JPEG می‌دهند.

تصویر اشتراک‌گذاری در شبکه‌های اجتماعی کار جداگانه‌ای است

وقتی کسی نوشته شما را در فیس‌بوک، لینکدین یا شبکه‌های دیگر به اشتراک می‌گذارد، پیش‌نمایش از تگ og:image می‌آید که افزونه‌های سئو معمولا آن را با تصویر شاخص پر می‌کنند. مستندات اشتراک‌گذاری فیس‌بوک تصاویری با دست‌کم 1200 × 630 پیکسل و تا حد امکان نزدیک به نسبت 1.91:1 را توصیه می‌کند.

توصیه 1200 × 628 را هم خواهید دید. این اندازه تقریبا دقیقا 1.91:1 است، در حالی که 1200 × 630 حدود 1.90:1 درمی‌آید. اختلاف این دو فقط 2 پیکسل در ارتفاع است، پس هر کدام مناسب است.

اگر اندازه نمایش قالب شما هم نزدیک به 1.91:1 باشد، یک فایل 1200 × 630 (یا 2400 × 1260) برای هر دو کار می‌کند. اگر قالب به 16:9 یا مربع برش می‌دهد، محتوای مهم را از لبه‌های چپ و راست دور نگه دارید یا در افزونه سئوی خود یک تصویر جداگانه برای شبکه‌های اجتماعی تعیین کنید.

گوگل دیسکاور توصیه‌های خودش را برای تصویر دارد. دستورالعمل‌های گوگل دیسکاور تصاویری با عرض دست‌کم 1200 پیکسل، بیش از 300 هزار پیکسل در مجموع و با نسبت 16:9، مثل 1200 × 675، را توصیه می‌کند. تصاویر بزرگ همچنین به تنظیم robots با مقدار max-image-preview:large نیاز دارند که وردپرس از نسخه 5.7 به‌طور پیش‌فرض اضافه می‌کند، مگر اینکه سایت طوری تنظیم شده باشد که موتورهای جستجو را از ایندکس کردن منع کند.

چطور سایز تصویر شاخص را تغییر دهید

جای تغییر به نوع اندازه و قالب شما بستگی دارد.

اندازه‌های هسته (thumbnail، medium، large). به تنظیمات > رسانه بروید و عرض و ارتفاع را تغییر دهید. مستندات صفحه تنظیمات رسانه فیلدها، از جمله گزینه برش بندانگشتی‌ها، را توضیح می‌دهد.

اندازه‌های قالب در قالب کلاسیک. قالب والد را ویرایش نکنید، چون به‌روزرسانی قالب تغییر شما را بازنویسی می‌کند. مقادیر جدید را در functions.php یک قالب فرزند اضافه کنید. ثبت دوباره اندازه‌ای با همان نام جایگزینش می‌کند و تنظیمات قالب فرزند باید بعد از تنظیمات والد اجرا شود:

add_action( 'after_setup_theme', function () {
	set_post_thumbnail_size( 1600, 900, true );
	add_image_size( 'hero-wide', 1600, 900, true );
}, 11 );

اولویت 11 باعث می‌شود این کد بعد از قالب والدی اجرا شود که با اولویت پیش‌فرض 10 متصل شده است. کد والد را بررسی کنید و اگر از اولویت دیرتری استفاده می‌کند، مقدار را تنظیم کنید.

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

یک تصویر، بدون کد. برای اینکه انتخاب کنید برش در یک تصویر خاص چه بخشی را نگه دارد، آن را از رسانه > کتابخانه باز کنید و روی ویرایش تصویر کلیک کنید. آن را به نسبت قالب خود برش دهید (ابزار برش نسبت ابعادی مثل 16:9 را می‌پذیرد) یا مقیاسش را تغییر دهید، سپس ذخیره کنید. وردپرس تغییر را روی همه اندازه‌های آن تصویر اعمال می‌کند و فایل اصلی را نگه می‌دارد، پس بعدا می‌توانید با بازگردانی تصویر اصلی آن را برگردانید.

بازسازی بندانگشتی‌های موجود

اندازه تغییرکرده فقط روی آپلودهای جدید اعمال می‌شود. تصاویری که از قبل در کتابخانه رسانه شما هستند نسخه‌های قدیمی خود را نگه می‌دارند تا آن‌ها را بازسازی کنید. دستور wp media regenerate این کار را انجام می‌دهد:

wp media regenerate --yes

گزینه‌های مفید از مستندات WP-CLI:

• --image_size=hero-wide فقط همان اندازه را بازسازی می‌کند. برای چند اندازه، گزینه را تکرار کنید.
• --only-missing اندازه‌هایی را که هنوز وجود ندارند می‌سازد و فایل‌های موجود را دست نمی‌زند، که بعد از اضافه کردن یک اندازه جدید سریع‌تر است.
• --skip-delete فایل‌های بندانگشتی قدیمی را نگه می‌دارد. اگر سایت‌های دیگر، خبرنامه‌ها یا فیدها مستقیم به آن فایل‌ها لینک داده‌اند، از آن استفاده کنید.

بدون خط فرمان، افزونه Regenerate Thumbnails از مخزن افزونه‌های WordPress.org همین کار را از پیشخوان انجام می‌دهد. اگر کتابخانه بزرگی دارید اول نسخه پشتیبان بگیرید، چون بازسازی فایل‌های زیادی را بازنویسی می‌کند.

اشتباهات رایج

• اکتفا کردن به 1200 × 630. این نقطه شروع خوبی است و برای پیش‌نمایش لینک مناسب است، اما اگر قالب شما به 16:9 یا مربع برش می‌دهد، بخشی از تصویر بریده می‌شود. پیش از آپلود دسته‌ای از تصاویر، سایز قالب خود را بررسی کنید.
• خاموش کردن اندازه‌های ساخته‌شده برای «نگه داشتن فایل اصلی». اگر قالب نسخه‌های کوچک‌تری نداشته باشد، ممکن است روی همه صفحه‌ها فایل کامل را بارگذاری کند و صفحه روی گوشی کند شود. نسخه‌های کوچک‌شده دقیقا برای جلوگیری از همین وجود دارند.
• ویرایش کد اندازه تصاویر و رد شدن از بازسازی. کد کار می‌کند، اما فقط برای آپلودهای جدید. به همین دلیل خیلی‌ها فکر می‌کنند تغییر اندازه «هیچ کاری نکرد».
• تغییر اندازه در قالب والد. به‌روزرسانی بعدی قالب آن را حذف می‌کند. از قالب فرزند یا ویرایشگر سایت استفاده کنید.

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