قطعه کد تغییر اندازه تصویر شاخص وردپرس

پروژه‌ای را به یاد می‌آورم که در آن، یک سایت خبری پربازدید برای مدتی با مشکل کندی مواجه شده بود. تیم فنی، ابتدا سراغ افزونه‌های کش و بهینه‌سازی رفته بود، سپس هاست را ارتقا داده بود، ولی صفحهٔ اصلی همچنان با تأخیر بارگذاری می‌شد. وقتی سراغ Network مرورگر رفتم، همه‌چیز روشن شد: تصویر شاخص نوشته‌ها با ابعاد ۱۸۰۰×۱۲۰۰ پیکسل آپلود می‌شد و قالب، همان فایل غول‌آسا را در کارت‌های صفحهٔ اصلی که ابعاد واقعی‌شان ۳۸۰×۲۵۰ پیکسل بود، با CSS کوچک می‌کرد. مرورگر در هر بازدید، چند مگابایت تصویر غیرضروری دانلود می‌کرد. راه‌حل، در آن پروژه، یک اسنیپت کوچک بود: تعریف اندازهٔ اختصاصی برای تصویر شاخص و نمایش آن با اندازهٔ درست. پس از اعمال، حجم صفحهٔ اصلی حدود ۶۵٪ کاهش یافت و زمان بارگذاری به کمتر از نصف رسید. آن تجربه، درسی را در کارم تثبیت کرد که تا امروز دنبال می‌کنم: اندازهٔ تصویر شاخص، یکی از آن تنظیم‌های کوچکی است که اگر بی‌دقت رها شود، می‌تواند گران‌ترین هزینهٔ سرعت و تجربهٔ کاربر را بسازد. در این مقاله، همان مسیر را با هم مرور می‌کنیم: تعریف اندازهٔ سفارشی با add_image_size، نمایش با the_post_thumbnail، اعمال شرطی براساس نوع نوشته، بازتولید تصاویر قدیمی و نکات کارایی و پایداری. اگر با مفهوم پایهٔ اسنیپت آشنا نیستید، پیش از ادامه قطعه کد وردپرس چیست و چگونه از آن استفاده کنیم نقطهٔ شروع بهتری است. مقالهٔ خواهرِ این موضوع در توابع وردپرس برای کار با تصاویر شاخص مبنای کامل‌تری از توابع مرتبط را ارائه می‌دهد.

چرا اندازهٔ تصویر شاخص، یک تصمیم با اثر بزرگ است

تصویر شاخص (Featured Image) در وردپرس، همان تصویری است که به هر نوشته یا برگه اختصاص می‌دهید و در قالب‌های مختلف، در جاهای متفاوتی نمایش داده می‌شود: کارت نوشته در صفحهٔ دسته‌بندی، سرصفحهٔ خودِ نوشته، ابزارک «آخرین نوشته‌ها»، اشتراک‌گذاری در شبکه‌های اجتماعی و حتی گاهی در فید RSS. همین تنوع محل استفاده، سه چالش عملی ایجاد می‌کند که در پروژه‌های واقعی بارها به آن‌ها برخورده‌ام:

چالش اول: ابعاد مناسب در هر نقطه. تصویر شاخص در کارت صفحهٔ دسته‌بندی معمولاً ابعاد کوچکی دارد (۳۸۰×۲۵۰ پیکسل)، ولی در سرصفحهٔ خودِ نوشته ممکن است تمام‌عرض باشد (۱۸۰۰×۱۰۰۰ پیکسل). اگر تنها یک اندازهٔ ثابت تعریف شود، در یکی از دو حالت، یا کیفیت پایین است یا حجم غیرضروری دانلود می‌شود. راه‌حل وردپرس، تعریف چند اندازهٔ مختلف و نمایش هرکدام در جای مناسب است.

چالش دوم: بایت‌های غیرضروری. همان‌طور که در پروژهٔ ابتدای مقاله دیدم، اگر تصویر ۱۸۰۰پیکسلی در کارت ۳۸۰پیکسلی نمایش داده شود، مرورگر همان فایل غول‌آسا را دانلود می‌کند. حتی با بهینه‌سازی تصویر، این کار باعث مصرف پهنای باند و کاهش سرعت می‌شود. تعریف اندازهٔ درست، یکی از مؤثرترین راه‌های کاهش بایت صفحه است. توضیح تفصیلی این موضوع در چگونه تصاویر سایت را فشرده کنیم آمده است.

چالش سوم: یکنواختی طراحی. در قالب‌هایی که کارت نوشته‌ها با ارتفاع ثابت طراحی شده‌اند، اگر ابعاد تصویر شاخص یکسان نباشد، کارت‌ها به‌هم می‌ریزند. تعریف اندازهٔ سفارشی با برش دقیق (crop)، این یکنواختی را تضمین می‌کند.

تصویر شاخص، ویترین هر نوشته است. اگر ویترین با شیشهٔ ضخیم و سنگین پوشیده شود، مشتری پیش از دیدن محتوای داخل، خسته می‌شود.

اندازه‌های پیش‌فرض وردپرس: نقشهٔ اولیه

پیش از هر تغییری، باید بدانید وردپرس به‌طور پیش‌فرض چه اندازه‌هایی می‌سازد. این آگاهی، از اضافه‌کردن بی‌دلیل اندازه‌های تازه جلوگیری می‌کند. جدول زیر نقشهٔ اندازه‌های پیش‌فرض است:

سه نکتهٔ کلیدی در این جدول. اول، این اندازه‌ها را می‌توانید از بخش «تنظیمات ← رسانه» در پیشخوان وردپرس تغییر دهید؛ ولی این تغییر، روی تصاویر آپلودشدهٔ قبلی اثر ندارد و نیاز به بازتولید دارد (بخش «بازتولید تصاویر» همین مقاله). دوم، در کنار این اندازه‌ها، وردپرس برای هر تصویر آپلودشده، چند اندازهٔ دیگر هم می‌سازد که در فهرست تنظیمات نمایش داده نمی‌شوند؛ مثلاً 1536x1536 و 2048x2048. سوم، بیشتر قالب‌های حرفه‌ای، اندازه‌های اختصاصی خودشان را اضافه می‌کنند که در کنار پیش‌فرض‌ها وجود دارند. اگر با این فهرست آشنا نیستید، توابع وردپرس برای مدیریت رسانه‌ها نمای کلی بهتری می‌دهد.

تعریف اندازهٔ سفارشی با add_image_size

ابزار اصلی برای تعریف اندازهٔ سفارشی در وردپرس، تابع add_image_size است. این تابع باید در زمان بارگذاری اولیهٔ قالب یا افزونه اجرا شود تا در فهرست اندازه‌های شناخته‌شدهٔ وردپرس ثبت شود. الگوی پایه:

/**
 * Snippet: Add custom image size for featured images.
 *
 * @since 2026-09-16
 * @author WordPressKar
 *
 * Purpose: Register a custom image size for cards in archive pages.
 * Location: mu-plugins directory or child theme functions.php.
 */

add_action( 'after_setup_theme', 'wphk_register_custom_image_sizes' );

function wphk_register_custom_image_sizes() {
    add_image_size(
        'wphk-card-thumb',   // نام اندازه
        380,                   // عرض
        250,                   // ارتفاع
        true                   // برش دقیق
    );

    add_image_size(
        'wphk-hero',         // اندازهٔ بزرگ برای سرصفحه
        1600,                  // عرض
        900,                   // ارتفاع
        true                   // برش دقیق
    );
}

چهار نکتهٔ کلیدی در این نمونه. اول، استفاده از هوک after_setup_theme که نقطهٔ استاندارد ثبت اندازه‌های تصویر است؛ اگر این تابع را در هوک دیرتری اجرا کنید، ممکن است اندازه‌های شما در فهرست پیشخوان رسانه نمایش داده نشوند. توضیح دقیق این هوک در مهم‌ترین Action Hook های وردپرس آمده است. دوم، پارامتر چهارم true که برش دقیق (crop) را فعال می‌کند؛ این تصمیم، برای کارت‌های طراحی‌شده با ابعاد ثابت ضروری است. اگر false بگذارید، وردپرس تصویر را در نسبت ابعاد اصلی نگه می‌دارد و ارتفاع، متناسب محاسبه می‌شود. سوم، انتخاب نام با پیشوند اختصاصی (wphk-) برای جلوگیری از تعارض با افزونه‌های دیگر. چهارم، برای هر اندازه، یک نام معنادار انتخاب شده که در کد بعدی به آن ارجاع می‌دهیم.

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

نمایش با the_post_thumbnail و get_the_post_thumbnail

پس از تعریف اندازه، نوبت به نمایش می‌رسد. وردپرس دو تابع اصلی برای این کار در اختیار شما می‌گذارد: the_post_thumbnail که تصویر را مستقیماً چاپ می‌کند، و get_the_post_thumbnail که تصویر را به‌صورت رشتهٔ HTML برمی‌گرداند. نمونهٔ استفاده از تابع اول:

<?php
the_post_thumbnail( 'wphk-card-thumb', array(
    'class' => 'wphk-card-image',
    'alt'   => esc_attr( get_the_title() ),
    'loading' => 'lazy',
) );
?>

سه نکتهٔ کلیدی در همین نمونه. اول، استفاده از اندازهٔ سفارشی wphk-card-thumb که در بخش قبل تعریف کردیم. اگر نام اندازه را اشتباه بنویسید، وردپرس به‌آرامی به اندازهٔ full برمی‌گردد و شما تصویر غول‌آسا دریافت می‌کنید — بدون هیچ پیام خطایی. این دام را در پروژه‌های مختلف دیده‌ام؛ راه تشخیص، بازبینی فایل تولیدشده در پوشهٔ uploads است. دوم، استفاده از esc_attr برای مقدار ویژگی alt؛ این پاک‌سازی، از تزریق داده به HTML جلوگیری می‌کند. سوم، تنظیم loading روی lazy که از نسخهٔ ۵.۵ وردپرس پشتیبانی می‌شود. تذکر مهم: تصویری که در دید اول کارت است، اگر «اولین عنصر قابل‌مشاهدهٔ» صفحه باشد، lazy ممکن است به LCP آسیب بزند؛ در این حالت، برای همان تصویر خاص، eager و fetchpriority="high" تنظیم کنید. تحلیل کامل این موضوع در Core Web Vitals چیست و چرا گوگل بر آن تاکید دارد آمده است.

نمونهٔ دوم، استفاده از تابع بازگشتی برای ذخیره در متغیر:

<?php
$thumb_html = get_the_post_thumbnail( get_the_ID(), 'wphk-hero', array(
    'class' => 'wphk-hero-image',
) );

if ( $thumb_html ) {
    echo '<div class="wphk-hero-wrap">' . $thumb_html . '</div>';
}
?>

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

set_post_thumbnail_size: یک اندازهٔ پیش‌فرض برای همه

اگر می‌خواهید همهٔ تصویرهای شاخص سایت یک اندازهٔ پیش‌فرض داشته باشند، می‌توانید از تابع set_post_thumbnail_size استفاده کنید. این تابع، در واقع همان add_image_size است ولی با یک نام ویژه: post-thumbnail. هر جا the_post_thumbnail() بدون پارامتر صدا زده شود، همین اندازه استفاده می‌شود:

add_action( 'after_setup_theme', 'wphk_set_default_thumbnail_size' );

function wphk_set_default_thumbnail_size() {
    set_post_thumbnail_size( 400, 300, true );
}

سه نکتهٔ مهم در این الگو: اول، پارامتر سوم true برش دقیق را فعال می‌کند. دوم، این تنظیم، جایگزین چیزی نیست؛ در کنار اندازه‌های دیگر اضافه می‌شود. سوم، اگر قالب شما یا افزونه‌ای دیگر همین تابع را صدا بزند، آخرین فراخوانی برنده است؛ بنابراین اگر بعد از قالب خودتان اجرا می‌شود، می‌توانید مقدار آن را بازنویسی کنید. این نکته، در پروژه‌هایی که قالب و افزونه هر دو اندازهٔ پیش‌فرض تعریف می‌کنند، اهمیت زیادی دارد. توضیح تکمیلی در Priority در هوک‌های وردپرس چیست آمده است.

اندازه‌های متفاوت برای انواع نوشته

در پروژه‌هایی با چند نوع نوشتهٔ سفارشی، ابعاد مناسب برای هرکدام متفاوت است. مثلاً در یک فروشگاه، محصولات می‌توانند در کارت‌های مربعی (۴۰۰×۴۰۰) نمایش داده شوند، ولی نوشته‌های بلاگ در کارت‌های افقی (۶۰۰×۴۰۰). الگوی تعریف اندازه‌های متفاوت:

add_action( 'after_setup_theme', 'wphk_register_sizes_per_post_type' );

function wphk_register_sizes_per_post_type() {
    // اندازهٔ کارت نوشتهٔ بلاگ
    add_image_size( 'wphk-post-card', 600, 400, true );

    // اندازهٔ کارت محصول
    add_image_size( 'wphk-product-card', 400, 400, true );

    // اندازهٔ بزرگ برای سرصفحهٔ محصول
    add_image_size( 'wphk-product-hero', 1200, 800, true );
}

و در نمایش، براساس نوع نوشته، اندازهٔ مناسب را انتخاب کنید:

add_action( 'wphk_after_archive_card', 'wphk_render_archive_thumb' );

function wphk_render_archive_thumb() {
    $post_type = get_post_type();

    if ( 'post' === $post_type ) {
        the_post_thumbnail( 'wphk-post-card', array( 'class' => 'wphk-card-thumb' ) );
        return;
    }

    if ( 'product' === $post_type ) {
        the_post_thumbnail( 'wphk-product-card', array( 'class' => 'wphk-card-thumb' ) );
        return;
    }

    the_post_thumbnail( 'medium', array( 'class' => 'wphk-card-thumb' ) );
}

سه نکتهٔ کلیدی در این الگو: اول، تفکیک دقیق براساس get_post_type که در آرشیوهای مختلف وردپرس به‌درستی مقدار می‌گیرد. دوم، مقدار پیش‌فرض medium برای انواع نوشته‌ای که اندازهٔ مشخصی ندارند — این تصمیم از خطا در انواع ناشناخته جلوگیری می‌کند. سوم، کلاس CSS مشترک wphk-card-thumb که استایل‌دهی یکپارچه را ممکن می‌سازد. الگوهای مشابه برای تعریف اندازه‌های سفارشی در توابع وردپرس برای کار با تصاویر شاخص و توابع وردپرس برای مدیریت رسانه‌ها آمده است.

بازتولید تصاویر قدیمی پس از تغییر اندازه

تعریف یک اندازهٔ جدید، فقط روی تصاویر آپلودشدهٔ بعدی اثر دارد. برای تصاویر قدیمی، وردپرس باید فایل‌های اندازهٔ جدید را دوباره بسازد. این فرآیند را «Regenerate Thumbnails» می‌گویند و سه راه برای انجام آن وجود دارد:

روش اول: افزونهٔ Regenerate Thumbnails

محبوب‌ترین راه، استفاده از افزونهٔ رایگان Regenerate Thumbnails است که از مخزن رسمی وردپرس نصب می‌شود. این افزونه در بخش «ابزارها» منوی جدیدی می‌سازد که به شما اجازه می‌دهد همهٔ تصاویر یا تنها تصاویر انتخاب‌شده را بازتولید کنید. محدودیت اصلی این روش، زمان‌بر بودن آن برای سایت‌های پرمحتوا است؛ در سایت‌هایی با چند هزار تصویر، فرآیند ممکن است چند ساعت طول بکشد و در میانه راه قطع شود. برای این سایت‌ها، افزونه‌های پولی که از صف پس‌زمینه استفاده می‌کنند، گزینهٔ بهتری هستند.

روش دوم: بازتولید با WP-CLI

اگر به SSH دسترسی دارید، WP-CLI راه سریع‌تر و پایدارتری است:

wp media regenerate --yes --only-missing

پارامتر --only-missing از بازتولید تصاویری که فایل‌های موجود دارند جلوگیری می‌کند و بنابراین سریع‌تر است. اگر می‌خواهید همهٔ تصاویر بازتولید شوند، این پارامتر را حذف کنید. برای مطالعهٔ جامع WP-CLI و کاربردهایش در نگهداری سایت، cPanel چیست و چه کاربردی دارد و مستندات رسمی WP-CLI منابع خوبی هستند.

روش سوم: بازتولید دستی برای تعداد محدود

اگر تعداد تصاویری که نیاز به بازتولید دارند محدود است (مثلاً ده تصویر)، سریع‌ترین راه، بازتولید دستی از طریق ویرایشگر تصویر در کتابخانهٔ رسانه است. هر تصویر، با ذخیرهٔ مجدد، فایل‌های اندازهٔ جدید را می‌سازد.

تعریف اندازهٔ جدید بدون بازتولید، مثل اضافه‌کردن یک قالب لباس جدید به کمدی است که همهٔ لباس‌هایش با اندازهٔ قبلی دوخته شده‌اند. تا وقتی لباس‌ها را از نو ندوزی، قالب جدید بلااستفاده می‌ماند.

ملاحظات کارایی: srcset، کش و بهینه‌سازی تصویر

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

ملاحظهٔ اول: تعریف srcset خودکار است

وردپرس به‌طور خودکار برای هر تصویر، ویژگی srcset تولید می‌کند که فهرستی از فایل‌های مختلف اندازه را به مرورگر می‌دهد. مرورگر براساس عرض ویوپورت و تراکم پیکسلی دستگاه، مناسب‌ترین اندازه را انتخاب می‌کند. اگر اندازه‌های کافی تعریف نکرده باشید، این مکانیزم کم‌اثر می‌شود؛ در نتیجه، تعریف چند اندازهٔ مختلف (مثلاً ۳۸۰، ۷۶۸، ۱۰۲۴، ۱۶۰۰) توصیه می‌شود. توضیح تفصیلی این مکانیزم در چگونه تصاویر سایت را فشرده کنیم و بهترین فرمت تصویر برای وب کدام است آمده است.

ملاحظهٔ دوم: بهینه‌سازی تصاویر سفارشی

اندازه‌های سفارشی که تعریف می‌کنید، خودکار بهینه نمی‌شوند. اگر افزونهٔ بهینه‌سازی تصویر استفاده می‌کنید (مثل Imagify، ShortPixel یا افزونه‌های مشابه)، مطمئن شوید که اندازه‌های جدید را هم شامل می‌شود. در تجربهٔ من، برخی افزونه‌ها به‌طور پیش‌فرض فقط اندازه‌های داخلی وردپرس را بهینه می‌کنند و اندازه‌های سفارشی را رد می‌کنند. توصیه: یک تصویر آزمایشی با هر اندازه آپلود کنید و حجم فایل‌های تولیدشده را در پوشهٔ uploads بررسی کنید. راهنمای کامل ابزارها در بهترین افزونه‌های بهینه‌سازی تصاویر وردپرس آمده است.

ملاحظهٔ سوم: پرهیز از اندازه‌های زیاد

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

اثر این تغییر بر سئو و Core Web Vitals

اندازهٔ درست تصویر شاخص، سه اثر مستقیم بر سئو دارد که تجربه‌ام در آن‌ها پررنگ است:

اثر اول: بهبود LCP. اگر تصویر شاخص، عنصر بزرگ‌ترین در دید اول صفحه باشد (که در اکثر قالب‌ها چنین است)، اندازهٔ آن مستقیماً بر LCP اثر می‌گذارد. تصویر بهینه‌شده و درست اندازه، LCP را بهبود می‌دهد. معیارهای دقیق LCP در Core Web Vitals چیست و چرا گوگل بر آن تاکید دارد آمده است.

اثر دوم: بهبود CLS. اگر ارتفاع و عرض تصویر شاخص در HTML مشخص نباشد، بارگذاری تصویر می‌تواند چیدمان را جابه‌جا کند. وردپرس در تابع the_post_thumbnail به‌طور خودکار ارتفاع و عرض را اضافه می‌کند، ولی اگر قالب شما این ویژگی‌ها را حذف کرده باشد، باید خودتان اضافه کنید. تحلیل کامل CLS در همان مقالهٔ Core Web Vitals آمده است.

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

محل درست قرارگیری این اسنیپت

مانند همهٔ اسنیپت‌های وردپرس، محل قرارگیری این کد هم تصمیم مهمی است. سه گزینه پیش روی شماست:

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

گزینهٔ دوم: افزونهٔ اختصاصی یا mu-plugins. اگر می‌خواهید کد شما مستقل از قالب بماند و در چند سایت مشابه استفاده شود، این گزینه پایدارترین است. اگر با ساختار افزونهٔ اختصاصی آشنا نیستید، کدنویسی اختصاصی برای افزونه وردپرس و ساختار فایل‌های یک افزونه استاندارد وردپرس مراجع کاملی هستند.

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

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

اشتباهات رایج در تغییر اندازه تصویر شاخص

در بازبینی سایت‌های مختلف، شش اشتباه تکراری در این حوزه دیده‌ام که هرکدام درس‌آموز است:

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

دو پروندهٔ واقعی از پروژه‌ها

برای این‌که این اصول در عمل روشن‌تر شوند، دو پروندهٔ واقعی از تجربهٔ خودم را مرور می‌کنم — بدون جزئیات هویتی، ولی با ساختار دقیق مشکل و راه‌حل.

پروندهٔ اول: سایت خبری که با یک اندازهٔ درست، ۶۵٪ سبک‌تر شد

همان پروژه‌ای که در ابتدای مقاله اشاره کردم. تصویر شاخص با ابعاد ۱۸۰۰×۱۲۰۰ آپلود می‌شد و در کارت‌های ۳۸۰×۲۵۰ نمایش داده می‌شد. راه‌حل: تعریف اندازهٔ wphk-card-thumb با ابعاد ۳۸۰×۲۵۰ و برش دقیق، اعمال آن در قالب کارت‌ها و بازتولید تصاویر قدیمی. نتیجه در یک هفته: حجم صفحهٔ اصلی از ۴٫۲ مگابایت به ۱٫۵ مگابایت کاهش یافت و زمان بارگذاری به‌طور محسوس بهتر شد. مسیر تحلیل عمیق سرعت در چگونه سرعت سایت وردپرسی را افزایش دهیم آمده است.

پروندهٔ دوم: فروشگاهی که با اندازه‌های متفاوت، طراحی را یکنواخت کرد

در یک پروژهٔ فروشگاهی، کارت‌های محصول با ابعاد مربعی طراحی شده بودند ولی کارت‌های نوشتهٔ بلاگ افقی. پیش از تغییر، همهٔ تصاویر شاخص با یک اندازهٔ مشترک تولید می‌شدند و در یکی از دو حالت، ظاهر ناهنجار به‌وجود می‌آمد. راه‌حل: تعریف دو اندازهٔ جداگانه (wphk-product-card و wphk-post-card) و نمایش شرطی براساس نوع نوشته. نتیجه: در هر دو آرشیو، کارت‌ها با ارتفاع و نسبت ابعاد یکنواخت نمایش داده شدند. تجربهٔ مشابهی از این نوع تنظیمات در افزایش سرعت فروشگاه ووکامرس آمده است.

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

درس‌ها و مسیر پیشنهادی

قطعه کد تغییر اندازه تصویر شاخص، یکی از پرتکرارترین و در عین حال کم‌سروصداترین کارهای پروژه‌های وردپرسی است. سه ستون این کار: تعریف اندازهٔ سفارشی با add_image_size در هوک after_setup_theme، نمایش با the_post_thumbnail و اعمال شرطی براساس نوع نوشته، و بازتولید تصاویر قدیمی با Regenerate Thumbnails یا WP-CLI. سه ملاحظهٔ کارایی (استفاده از srcset، بهینه‌سازی اندازه‌های جدید، پرهیز از اندازه‌های زیاد) به‌تنهایی می‌توانند تفاوت محسوسی در سرعت سایت بسازند. سه اثر سئویی (LCP، CLS و نرخ کلیک) به‌طور مستقیم از همین تصمیم‌ها متأثر می‌شوند. و محل درست این اسنیپت، چایلد تم یا افزونهٔ اختصاصی است، نه فایل قالب والد.

گام بعدی عملی که پیشنهاد می‌کنم: در همین امروز، یک آرشیو از سایت خودتان را باز کنید و ابعاد واقعی تصویر شاخص در کارت‌ها را با ابعاد فایل ذخیره‌شده در پوشهٔ uploads مقایسه کنید. اگر فایل اصلی چند برابر بزرگ‌تر از نمایش واقعی است، همین هفته می‌توانید با یک اسنیپت کوچک و یک بازتولید، بار صفحه را کاهش دهید. اگر تجربه‌ای با تعریف اندازه‌های سفارشی یا بازتولید تصاویر داشته‌اید — به‌ویژه اگر در پروژه‌ای با تعداد زیاد تصویر، روش سریعی برای بازتولید پیدا کرده‌اید یا اگر تعداد بهینهٔ اندازه‌ها را در سایت‌های مختلف پیدا کرده‌اید — برای من جالب است بدانید چطور به آن رسیدید. تجربهٔ خودتان را در دیدگاه‌ها بنویسید؛ به‌ویژه اگر روش تمیزی برای ترکیب اندازه‌های سفارشی با افزونه‌های بهینه‌سازی تصویر پیدا کرده‌اید. 🖼️