آموزش تابع the_post_thumbnail() در وردپرس و کاربرد آن

تابع the_post_thumbnail() یکی از ابزارهای اصلی نمایش تصاویر شاخص (Featured Images) در قالب‌های وردپرس است. این تابع به شما اجازه می‌دهد تصویر شاخص نوشته یا برگه را با اندازه و ویژگی‌های دلخواه خروجی بگیرید. در این مقاله به صورت گام‌به‌گام، کاربردها، نمونه‌کدها و نکات حرفه‌ای برای استفاده بهینه از این تابع را توضیح می‌دهیم.

پیش‌نیازها: فعال‌سازی تصاویر شاخص

قبل از هر چیزی باید در فایل functions.php قالب، پشتیبانی از تصویر شاخص را فعال کنید:

add_theme_support( 'post-thumbnails' );

این خط قابلیت featured image را در رابط مدیریت وردپرس فعال می‌کند و بدون آن the_post_thumbnail() کار نخواهد کرد.

نمونه پایه‌ای استفاده در حلقه (Loop)

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
  <article id="post-<?php the_ID(); ?>">
    <?php if ( has_post_thumbnail() ) {
      the_post_thumbnail( 'medium' );
    } ?>
    <h2><?php the_title(); ?></h2>
    <?php the_excerpt(); ?>
  </article>
<?php endwhile; endif; ?>

توضیح: در این مثال ابتدا بررسی می‌کنیم که نوشته تصویر شاخص دارد یا نه (has_post_thumbnail). سپس با the_post_thumbnail اندازه «medium» را نمایش می‌دهیم. اندازه‌های پیش‌فرض شامل thumbnail, medium, large, full و post-thumbnail هستند.

استفاده از اندازه‌های سفارشی و برش تصاویر

add_image_size( 'custom-thumb', 400, 250, true ); // hard crop
// سپس در قالب:
the_post_thumbnail( 'custom-thumb' );

توضیح: با add_image_size می‌توانید اندازه جدیدی تعریف کنید. پارامتر آخر اگر true باشد، تصویر با برش سخت (crop) مطابق عرض و ارتفاع مشخص شده خروجی می‌شود. پس از افزودن اندازه جدید، برای تصاویر قبلی ممکن است نیاز به افزونه‌هایی مانند Regenerate Thumbnails داشته باشید تا اندازه‌ها تولید شوند.

ارسال صفات HTML اضافی به تصویر

the_post_thumbnail( 'large', array(
  'class' => 'img-responsive lazyload',
  'loading' => 'lazy',
  'alt' => get_the_title()
) );

توضیح: آرایه دوم برای افزودن attributes به تگ <img> استفاده می‌شود. مثال بالا کلاس CSS، ویژگی loading برای بارگذاری تنبل و مقدار alt براساس عنوان نوشته را اضافه می‌کند. توجه داشته باشید که بهترین تمرین این است که متن alt را در رسانه وردپرس تنظیم کنید، اما اگر لازم است می‌توانید اینجا مقدار دلخواه بدهید.

نمایش تصویر شاخص بیرون از حلقه یا برای یک مطلب خاص

echo get_the_post_thumbnail( $post_id, 'thumbnail', array( 'class' => 'my-thumb' ) );
/* یا گرفتن آدرس مستقیم تصویر */$img_url = get_the_post_thumbnail_url( $post_id, 'full' );

توضیح: get_the_post_thumbnail و get_the_post_thumbnail_url توابعی هستند که مقدار را بازمی‌گردانند (echo نمی‌کنند)، بنابراین می‌توانید آن‌ها را در متغیرها یا منطق شرطی استفاده کنید. پارامتر اول در این توابع می‌تواند شناسه پست یا آبجکت پست باشد.

فِیدی‌بِک یا جایگزین زمانی که تصویر شاخص وجود ندارد

if ( has_post_thumbnail() ) {
  the_post_thumbnail( 'medium' );
} else {
  echo '<img src="' . get_template_directory_uri() . '/assets/images/placeholder.jpg" alt="No image" />';
}

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

عملکرد و بهینه‌سازی (Performance & SEO)

• تصاویر واکنش‌گرا: the_post_thumbnail به صورت خودکار srcset و sizes را اضافه می‌کند اگر اندازه‌های مختلف موجود باشد. این ویژگی به مرورگر اجازه می‌دهد مناسب‌ترین تصویر را دانلود کند.
• بارگذاری تنبل (Lazy Loading): از ویژگی loading=”lazy” یا کتابخانه‌های جاوااسکریپت استفاده کنید تا زمان بارگذاری صفحه سریعتر شود.
• متن ALT و نام فایل: برای سئو تصویر، alt مناسب و نام فایل معنی‌دار انتخاب کنید.
• تولید اندازه‌های لازم: تنها اندازه‌هایی را تولید کنید که واقعاً استفاده می‌کنید و در صورت نیاز از افزونه‌هایی برای بازسازی اندازه‌ها بهره ببرید.

پارامترها و مقایسه (جدول)

نکات پیشرفته و کاربردهای عملی

• اگر قالب شما از بلاک‌های گوتنبرگ استفاده می‌کند، باز هم باید add_theme_support( ‘post-thumbnails’ ) را اضافه کنید تا Featured Image در سندات بلاک در دسترس باشد.
• برای پست‌تایپ‌های سفارشی، می‌توانید با آرگومان third parameter در register_post_type قابلیت تصویر شاخص را محدود یا فعال کنید، اما add_theme_support معمولاً کافی است.
• برای تصاویر چندرسانه‌ای و گالری‌ها بهتر است به جای the_post_thumbnail از wp_get_attachment_image استفاده کنید تا کنترل بیشتری روی attributes و lazy loading داشته باشید.

جمع‌بندی

تابع the_post_thumbnail() راهی سریع و استاندارد برای نمایش تصاویر شاخص در قالب وردپرس است. با ترکیب add_image_size، صفات HTML و مدیریت alt و بهینه‌سازی‌های عملکرد می‌توانید تجربه کاربری و سئوی سایت خود را بهبود دهید. همیشه مطمئن شوید که اندازه‌های ضروری را تولید کرده و برای تصاویر قدیمی از ابزارهایی مثل Regenerate Thumbnails استفاده کنید.

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

ارسال