جدید!
سرور ابری ساعتی فعال شد. ۱۰۰ هزار تومان اعتبار هدیه بگیرید
به اشتراک بگذارید
آموزش وردپرس | بلاگ وبداده
تغییر اندازه تصاویر بندانگشتی (Thumbnail) در وردپرس
تصاویر بندانگشتی کوچک اما پرکاربردند؛ در فهرست نوشتهها، گالریها و بخشهای مرتبط دیده میشوند. در این راهنما سه روش امن برای تعیین و تغییر اندازهی آنها را قدمبهقدم یاد میگیرید.
تغییر اندازه تصاویر بندانگشتی یعنی تعیین ابعاد نسخههای کوچکِ تصویری که وردپرس هنگام آپلود هر عکس میسازد؛ همان تصاویری که در فهرست نوشتهها، ویجتها و گالریها نمایش داده میشوند. در این مقاله میبینید بندانگشتی چیست، چرا اندازهی درست آن بر سرعت و ظاهر سایت اثر میگذارد، و با سه روش (تنظیمات پیشخوان، کد در functions.php و بازتولید تصاویر قدیمی) چطور آن را بهشکل دلخواه تغییر دهید.
- پیشفرض وردپرس: بندانگشتی 150×150 پیکسل است و در بخش «تنظیمات ← رسانه» قابل تغییر است.
- برش نرم یا سخت: میتوانید تصویر را متناسب کوچک کنید یا با «برش دقیق» به ابعاد مشخص ببرید.
- اندازهی سفارشی با کد: با تابع add_image_size در functions.php اندازههای اختصاصی بسازید.
- نکتهی مهم: هر تغییری فقط روی تصاویرِ جدید اثر دارد؛ تصاویر قدیمی باید «بازتولید» شوند.
- واقعیت صادقانه: این کار روی سایتهای کوچک تأثیر سرعت محسوسی ندارد و ارزش اصلیاش ظاهر منظم است.
در یک نگاه
تصویر بندانگشتی مثل عکس روی جلد یک پرونده است؛ کوچک است اما اولین چیزی است که کاربر میبیند. اگر اندازهاش با طراحی قالب هماهنگ نباشد، تصاویر کِشآمده یا بریده به نظر میرسند. با تنظیم درستِ اندازه، ظاهر فهرست نوشتهها و گالریها مرتب و حرفهای میشود.
حتماً این مقاله را باز کردهاید چون تصاویر کوچکِ سایتتان بدقواره یا با اندازهی نامناسب نمایش داده میشوند، یا میخواهید برای بخش خاصی از قالب یک اندازهی اختصاصی بسازید. خبر خوب این است که هر سه روش را طوری توضیح میدهیم که حتی اگر تازهکار باشید خودتان از پسش بربیایید.
تغییر اندازه تصاویر بندانگشتی چیست و وردپرس چطور آن را میسازد؟
«تصویر بندانگشتی» (Thumbnail) نسخهی کوچکشدهای از یک تصویر است که برای پیشنمایش به کار میرود. نکتهی کلیدی این است که وردپرس هنگام آپلود هر عکس، فقط یک فایل ذخیره نمیکند؛ بلکه بهطور خودکار چند نسخه با اندازههای مختلف میسازد تا هر بخش از سایت نسخهی مناسب خودش را بارگذاری کند. اندازههای پیشفرضِ هستهی وردپرس عبارتاند از:
- بندانگشتی (thumbnail): بهصورت پیشفرض 150×150 پیکسل.
- متوسط (medium): حداکثر 300×300 پیکسل.
- متوسط بزرگ (medium_large): عرض 768 پیکسل (از نسخه 4.4).
- بزرگ (large): حداکثر 1024×1024 پیکسل.
- از نسخه 5.3: دو اندازهی 1536×1536 و 2048×2048 هم برای نمایشگرهای رتینا اضافه شدهاند.
چرا وردپرس چند نسخه میسازد؟
تصور کنید یک عکس 4000 پیکسلی را در فهرست نوشتهها نشان دهیم؛ مرورگر مجبور میشود همان فایل سنگین را دانلود و بعد کوچک کند. با داشتن نسخهی بندانگشتیِ سبک، صفحه سریعتر بارگذاری میشود. پس اندازههای تصویر مستقیماً به تجربهی کاربر و سرعت گره خوردهاند.
همهی این اندازهها فایل اصلیِ آپلودشده را دستنخورده نگه میدارند و فقط کپیهای اضافه میسازند. برای همین است که میتوانید بدون ترس از دسترفتن عکس اصلی، اندازهها را تغییر دهید.
چرا اندازهی درست بندانگشتی برای ظاهر، سرعت و سئو مهم است؟
پیش از اینکه سراغ روشها برویم، خوب است بدانید چرا این تنظیم ساده ارزش وقتگذاشتن دارد:
- ظاهر منظم: وقتی اندازهی بندانگشتی با شبکهبندی قالب هماهنگ باشد، فهرست نوشتهها و گالریها یکدست و حرفهای دیده میشوند.
- سرعت بارگذاری: بندانگشتیهای سبک، حجم صفحه را کم میکنند و زمان بارگذاری را پایین میآورند.
- مصرف فضای هاست: اندازههای اضافیِ بلااستفاده فقط فضای دیسک را اشغال میکنند؛ تعریف اندازههای منطقی جلوی این هدررفت را میگیرد.
- اثر غیرمستقیم بر سئو: سرعت و تجربهی صفحه بخشی از سیگنالهای رتبهبندی گوگل است، پس تصاویر بهینه بهطور غیرمستقیم به سئو کمک میکنند.
انتظار معجزه نداشته باشید
صادقانه بگوییم: روی یک سایت کوچک و کمبازدید، تغییر اندازهی بندانگشتی تأثیر محسوسی بر سرعت نمیگذارد و ارزش اصلی آن «نظم بصری» است. سود سرعت زمانی جدی میشود که سایت پرتصویر و پربازدید باشد.
سه روش تغییر اندازه تصاویر بندانگشتی در وردپرس
بسته به نیاز و سطح مهارتتان، سه راه پیش رو دارید: تنظیمات آمادهی پیشخوان (ساده)، افزودن اندازهی سفارشی با کد (منعطف)، و بازتولید تصاویر قدیمی (برای اعمال تغییرها). این سه روش را بهترتیب مرور میکنیم.
روش اول: تغییر اندازه از تنظیمات پیشخوان (بدون کد)
سادهترین راه، استفاده از خودِ وردپرس است. از پیشخوان به «تنظیمات ← رسانه» (Settings → Media) بروید. در این صفحه سه بخش برای اندازهی بندانگشتی، متوسط و بزرگ میبینید. برای بندانگشتی، عرض و ارتفاع دلخواه را وارد کنید.
درست زیر فیلدهای بندانگشتی، گزینهای با عنوان «Crop thumbnail to exact dimensions» (برش بندانگشتی به ابعاد دقیق) وجود دارد. تفاوت این دو حالت مهم است:
- تیکزده (برش سخت): وردپرس تصویر را دقیقاً به همان ابعاد میبُرد؛ نتیجه همیشه هماندازه است اما ممکن است بخشی از عکس حذف شود.
- بدون تیک (برش نرم): تصویر متناسب کوچک میشود و چیزی حذف نمیگردد، اما ابعاد نهایی ممکن است دقیقاً یکسان نباشند.
پس از واردکردن مقادیر، روی «ذخیرهی تغییرات» کلیک کنید. کار همینجا تمام است، اما یک نکتهی حیاتی وجود دارد که در باکس زیر آمده است.
تنظیمات فقط روی تصاویر جدید اثر دارد
این مهمترین نکتهی کل مقاله است: تغییر اندازه در «تنظیمات ← رسانه» فقط برای تصاویری که از این پس آپلود میکنید اعمال میشود. تصاویری که قبلاً در کتابخانهی رسانه دارید با اندازهی قدیمی باقی میمانند و باید «بازتولید» شوند (روش سوم).
روش دوم: ساخت اندازهی سفارشی با کد در functions.php
گاهی به اندازهای فراتر از سه اندازهی پیشفرض نیاز دارید؛ مثلاً یک اندازهی مربعی مخصوص بخش «نوشتههای مرتبط». برای این کار از تابع رسمی add_image_size استفاده میکنیم. پیش از ویرایش، حتماً باکس هشدار زیر را بخوانید.
قبل از ویرایش functions.php بکاپ بگیرید
یک خطای کوچک در functions.php میتواند کل سایت را از دسترس خارج کند. پیش از هر تغییری یک بکاپ کامل بگیرید و بهتر است کد را در «قالب فرزند» قرار دهید تا با بهروزرسانی قالب پاک نشود. برای بکاپ میتوانید از بکاپ رایگان و اسنپشات فوری در هاست سیپنل کمک بگیرید.
حالا کد زیر را در انتهای فایل functions.php قالب فرزند اضافه کنید. این کد دو اندازهی سفارشی میسازد: یکی نرم و یکی با برش سخت. توجه کنید که تعریف اندازه باید داخل هوک after_setup_theme و پس از فعالسازی پشتیبانی از تصویر شاخص باشد:
// افزودن اندازهی سفارشی برای تصاویر بندانگشتی
// این کد را در functions.php قالبِ فرزند (child theme) قرار دهید
add_action( 'after_setup_theme', 'webdade_custom_thumbnails' );
function webdade_custom_thumbnails() {
// پشتیبانی از تصویر شاخص باید پیش از تعریف اندازه فعال باشد
add_theme_support( 'post-thumbnails' );
// اندازهی «نرم» و متناسب: حداکثر 400 در 300 پیکسل، بدون برش
add_image_size( 'webdade-medium', 400, 300 );
// اندازه با «برش سخت»: دقیقاً 300 در 300 پیکسل از مرکز تصویر
add_image_size( 'webdade-square', 300, 300, true );
}پارامتر چهارم تابع، رفتار برش را مشخص میکند: اگر false باشد (یا نوشته نشود) تصویر متناسب کوچک میشود و اگر true باشد برش سخت انجام میگیرد. طبق مستندات رسمی وردپرس، نامهایی مثل thumbnail، medium و large رزرو شدهاند، پس برای اندازههای خودتان یک نام یکتا (مثلاً webdade-square) انتخاب کنید.
اندازههای سفارشی بهطور خودکار در فهرست انتخاب اندازهی پیشخوان (مثلاً هنگام درج تصویر) نمایش داده نمیشوند. اگر میخواهید کاربر بتواند آنها را انتخاب کند، این کد را هم اضافه کنید:
// نمایش اندازههای سفارشی در فهرست انتخاب اندازهی پیشخوان
add_filter( 'image_size_names_choose', 'webdade_show_custom_sizes' );
function webdade_show_custom_sizes( $sizes ) {
return array_merge( $sizes, array(
'webdade-square' => 'مربعی وبداده',
'webdade-medium' => 'متوسط وبداده',
) );
}روش سوم: بازتولید تصاویر قدیمی (Regenerate Thumbnails)
همانطور که گفتیم، تغییر تنظیمات یا افزودن اندازهی جدید، تصاویر قبلی را بازنمیسازد. برای اعمال اندازهی جدید روی کل کتابخانه، باید تصاویر را «بازتولید» کنید. دو راه دارید:
- با افزونه: افزونهی رایگان و پرکاربرد «Regenerate Thumbnails» را نصب و فعال کنید، سپس از مسیر «ابزارها ← Regenerate Thumbnails» دکمهی بازتولید را بزنید تا همهی تصاویر با اندازههای فعلی دوباره ساخته شوند.
- با خط فرمان (WP-CLI): اگر به SSH سرور دسترسی دارید، ابزار رسمی WP-CLI همین کار را سریعتر انجام میدهد.
دستورهای WP-CLI برای بازتولید بهاین شکلاند:
# بازتولید همهی تصاویر بندانگشتی موجود در کتابخانهی رسانه
wp media regenerate --yes
# فقط تصاویری که اندازهشان تا کنون ساخته نشده است
wp media regenerate --only-missing --yes
# بازتولید فقط یک اندازهی مشخص (مثلاً thumbnail)
wp media regenerate --image_size=thumbnail --yesبازتولید، عکس اصلی را خراب نمیکند
خیالتان راحت باشد: بازتولید فقط کپیهای اندازههای جدید را میسازد و فایل اصلیِ آپلودشده را دستنخورده نگه میدارد. با گزینهی only-missing هم میتوانید فقط تصاویری را بسازید که اندازهشان تا کنون ساخته نشده تا زمان کمتری صرف شود.
مقایسهی سه روش؛ کدام برای شما مناسب است؟
این جدول به شما کمک میکند بر اساس نیاز و مهارتتان روش درست را انتخاب کنید:
| روش | مناسب چه کسی | سطح دشواری | انعطاف | روی تصاویر قدیمی اثر دارد؟ |
|---|---|---|---|---|
| تنظیمات پیشخوان | همه، بهویژه تازهکارها | بسیار ساده | محدود به ۳ اندازه | خیر (نیاز به بازتولید) |
| کد add_image_size | کاربر آشنا با کد | متوسط | بالا (اندازهی دلخواه) | خیر (نیاز به بازتولید) |
| بازتولید (افزونه/WP-CLI) | همه | ساده تا متوسط | اجرای تنظیمات فعلی | بله، همین کار را میکند |
جمعبندی جدول
برای تغییر سادهی اندازهها روش پیشخوان کافی است. اگر به اندازهی اختصاصی نیاز دارید سراغ کد بروید. و در هر دو حالت، برای اینکه تغییر روی تصاویر موجود هم اعمال شود، در پایان یکبار بازتولید را اجرا کنید.
میزبانی سریع وردپرس و پشتیبانی وبداده
مدیریت تصاویر و بازتولید انبوهِ آنها، بهویژه در سایتهای پرمحتوا، به بستری سریع و پایدار نیاز دارد؛ سروری با دیسک سریع و کنترلپنلی که کار با فایلها و افزونهها را ساده کند. ما در وبداده تلاش کردهایم اینها را فراهم کنیم:
✅ زیرساخت سرورهای نسل جدید HPE (Gen11 و Gen10) با دیسکهای سریع برای پردازش و بازتولید سریعتر تصاویر.
✅ دیتاسنترهای متنوع در ایران، هلند و آلمان برای انتخاب نزدیکترین لوکیشن به کاربران.
✅ کنترلپنل سیپنل بههمراه مدیر فایل و ابزار بکاپ برای ویرایش امن functions.php.
✅ پشتیبانی فنی ۲۴ ساعته برای کمک در نصب افزونه، ویرایش کد و بازتولید تصاویر.
✅ دیتاسنترهای متنوع در ایران، هلند و آلمان برای انتخاب نزدیکترین لوکیشن به کاربران.
✅ کنترلپنل سیپنل بههمراه مدیر فایل و ابزار بکاپ برای ویرایش امن functions.php.
✅ پشتیبانی فنی ۲۴ ساعته برای کمک در نصب افزونه، ویرایش کد و بازتولید تصاویر.
تجربهی پشتیبانی وبداده
در تیم پشتیبانی وبداده بارها پیش آمده که کاربری بعد از تعویض قالب سایتش شکایت کرده که تصاویر فهرست نوشتهها بدقواره و بریده شدهاند. علت تقریباً همیشه یک چیز بوده: قالب جدید اندازههای تصویر متفاوتی تعریف میکند، اما تصاویر قدیمی هنوز با اندازهی قالب قبلی ذخیره شدهاند. راهحل ساده است: یکبار تصاویر را با افزونه یا WP-CLI بازتولید میکنیم و مشکل حل میشود. همین تجربه نشان میدهد چرا مرحلهی «بازتولید» را نباید فراموش کرد.
اگر بهدنبال بستری سریع و مطمئن برای راهاندازی وردپرس و سایر سرویسهای خود هستید، میتوانید سرور مجازی ایران وبداده را بررسی کنید که با منابع اختصاصی و امکان انتخاب سیستمعامل در اختیار شما قرار میگیرد. همچنین، اگر به محیط مدیریت هاست ساده و کاربردی نیاز دارید، هاست سیپنل وبداده گزینه مناسبی برای میزبانی سایت شماست. اگر تازه میخواهید شروع کنید، مطلب آموزش نصب وردپرس روی سیپنل میتواند کمککننده باشد.
نقلقول از مستندات رسمی وردپرس
مستندات توسعهدهندگان وردپرس دربارهی تابع تعریف اندازه تأکید میکند که اگر پارامتر برش false باشد «تصویر متناسب مقیاس میشود» و اگر true باشد «تصویر به ابعاد مشخص و از مرکز بریده میشود». همچنین یادآوری میکند که پشتیبانی از تصویر شاخص (post-thumbnails) باید پیش از تعریف اندازه فعال شود. منبع: راهنمای رسمی add_image_size در WordPress.org
پرسشهای پرتکرار درباره تصاویر بندانگشتی وردپرس
اندازهی پیشفرض تصویر بندانگشتی در وردپرس چقدر است؟
بهصورت پیشفرض، اندازهی بندانگشتی وردپرس 150 در 150 پیکسل و با برش سخت است. میتوانید این مقدار را از مسیر «تنظیمات ← رسانه» در پیشخوان تغییر دهید. علاوه بر بندانگشتی، وردپرس اندازههای متوسط (حداکثر 300 پیکسل) و بزرگ (حداکثر 1024 پیکسل) را هم میسازد.
چرا بعد از تغییر اندازه، تصاویر قدیمی هنوز کوچک یا بزرگاند؟
چون تنظیمات جدید فقط روی تصاویری اعمال میشود که از آن به بعد آپلود میکنید. تصاویری که قبلاً در کتابخانهی رسانه دارید با اندازهی قدیمی باقی میمانند. برای اعمال اندازهی جدید روی آنها باید با افزونهی Regenerate Thumbnails یا دستور WP-CLI تصاویر را بازتولید کنید.
تفاوت برش نرم (Soft Crop) و برش سخت (Hard Crop) چیست؟
در برش نرم، تصویر متناسب کوچک میشود و هیچ بخشی از آن حذف نمیگردد، اما ابعاد نهایی ممکن است دقیقاً یکسان نباشد. در برش سخت، وردپرس تصویر را دقیقاً به همان ابعاد میبُرد تا همهی بندانگشتیها هماندازه شوند، اما ممکن است بخشی از لبههای عکس حذف شود. انتخاب بین این دو به طراحی قالب شما بستگی دارد.
آیا تغییر اندازهی بندانگشتی به عکس اصلی آسیب میزند؟
خیر. وردپرس همیشه فایل اصلیِ آپلودشده را دستنخورده نگه میدارد و اندازهها فقط کپیهای اضافه هستند. حتی بازتولید تصاویر هم فقط نسخههای کوچک را دوباره میسازد و به عکس اصلی کاری ندارد. با این حال، پیش از ویرایش کد یا هر تغییر بزرگی گرفتن بکاپ توصیه میشود.
چطور یک اندازهی کاملاً سفارشی برای بخشی از قالب بسازم؟
با تابع add_image_size در فایل functions.php قالب فرزند میتوانید هر اندازهی دلخواهی تعریف کنید. کافی است یک نام یکتا، عرض و ارتفاع و در صورت نیاز حالت برش را مشخص کنید. بعد از افزودن کد، حتماً تصاویر را بازتولید کنید تا اندازهی جدید برای عکسهای موجود هم ساخته شود.
افزونه بهتر است یا دستور WP-CLI برای بازتولید؟
هر دو نتیجهی یکسانی میدهند. اگر با پیشخوان راحتترید و به SSH دسترسی ندارید، افزونهی Regenerate Thumbnails سادهترین راه است. اگر مدیر سرور هستید و تعداد تصاویر زیاد است، WP-CLI سریعتر و کمفشارتر عمل میکند و میتوانید با گزینهی only-missing فقط موارد لازم را بسازید.
تغییر اندازهی تصاویر واقعاً سرعت سایت را زیاد میکند؟
بستگی به سایت دارد. برای سایتی پرتصویر و پربازدید، بندانگشتیهای بهینه میتوانند حجم صفحه را کم و بارگذاری را سریعتر کنند. اما برای سایت کوچک و کمبازدید، تأثیر آن ناچیز است و ارزش اصلیاش نظم بصری است. اندازهی تصویر یکی از چند عامل سرعت است و در کنار کش و میزبانی خوب معنا پیدا میکند.
اندازههای اضافهی تصویر فضای هاست را زیاد اشغال میکنند؟
بله، هر اندازهای که تعریف کنید برای همهی تصاویر جدید ساخته میشود و فضای دیسک مصرف میکند. اگر قالب یا افزونهای اندازههایی میسازد که استفاده نمیکنید، آنها فقط فضا اشغال میکنند. پیشنهاد میشود فقط اندازههای موردنیاز را نگه دارید تا مصرف فضای هاست بهینه بماند.
روی هاست اشتراکی که به SSH دسترسی ندارم چه کنم؟
روی هاستهای اشتراکی معمولاً به SSH دسترسی ندارید، اما این مشکلی نیست: هم تغییر تنظیمات از پیشخوان و هم بازتولید با افزونهی Regenerate Thumbnails بدون خط فرمان کار میکنند. برای ویرایش functions.php هم میتوانید از مدیر فایلِ کنترلپنل (مثل سیپنل) استفاده کنید. در صورت تردید از پشتیبانی هاست کمک بگیرید.
جمعبندی و چکلیست نهایی
دیدیم که وردپرس هنگام آپلود هر عکس چند نسخه با اندازههای مختلف میسازد و اندازهی درستِ بندانگشتی هم به ظاهر منظم سایت و هم (در سایتهای بزرگ) به سرعت آن کمک میکند. برای تغییر ساده از تنظیمات پیشخوان استفاده کنید، برای اندازهی اختصاصی از کد add_image_size، و در پایان حتماً تصاویر را بازتولید کنید تا تغییر روی عکسهای قدیمی هم اعمال شود.
چکلیست سریع تغییر اندازه بندانگشتی
✅ ابتدا هدفتان را مشخص کنید: تغییر اندازهی موجود یا ساخت اندازهی جدید.
✅ برای تغییر ساده به «تنظیمات ← رسانه» بروید و عرض/ارتفاع و حالت برش را تنظیم کنید.
✅ برای اندازهی سفارشی، کد add_image_size را در functions.php قالب فرزند اضافه کنید.
✅ پیش از ویرایش کد، یک بکاپ کامل بگیرید.
✅ در پایان با افزونهی Regenerate Thumbnails یا WP-CLI تصاویر را بازتولید کنید.
✅ اندازههای بلااستفاده را نگه ندارید تا فضای هاست هدر نرود.
✅ برای تغییر ساده به «تنظیمات ← رسانه» بروید و عرض/ارتفاع و حالت برش را تنظیم کنید.
✅ برای اندازهی سفارشی، کد add_image_size را در functions.php قالب فرزند اضافه کنید.
✅ پیش از ویرایش کد، یک بکاپ کامل بگیرید.
✅ در پایان با افزونهی Regenerate Thumbnails یا WP-CLI تصاویر را بازتولید کنید.
✅ اندازههای بلااستفاده را نگه ندارید تا فضای هاست هدر نرود.
در صورتی که سوالی داشتید میتوانید در بخش نظرات با ما در ارتباط باشید.
منابع: راهنمای رسمی add_image_size در WordPress.org، مستندات دستور wp media regenerate در WP-CLI، و صفحهی رسمی افزونهی Regenerate Thumbnails در WordPress.org.
