آموزش افزودن تصویر شاخص(Featured Image) به قالب وردپرس

در هنگام ایجاد یک پست(نوشته) یا صفحه در وردپرس، معمولا متاباکسی(Meta Box) با عنوان “تصویر شاخص” مشاهده می کنید که به شما اجازه می دهد تصویری را برای نوشته موردنظرتان انتخاب کنید، در این باکس تصویر انتخاب شده به صورت بند انگشتی یا Thumbnail نشان داده خواهد شد.

متاباکس افزودن تصویر شاخص در وردپرس

اگر می خواهید برای خودتان یک قالب اختصاصی ایجاد کنید باید حواستان باشد که این قابلیت را به صورت پیش فرض فعال کنید وگرنه باکس تصویر شاخص را مشاهده نخواهید کرد، پس در اولین گام کد زیر را در فایل functions.php قرار دهید:

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
}

برای ایجاد محدودیت و فعال سازی این باکس در نوشته ها از کد زیر:

add_theme_support( 'post-thumbnails', array('post') );

و در صفحات از این کد استفاده نمائید:

add_theme_support( 'post-thumbnails', array('page') );

اندازه پیش فرض تصاویر

زمانی که یک تصویر را آپلود می کنید وردپرس به صورت پیش فرض ابعاد مختلفی از آن تصویر را در اندازه های Thumbnail ،Medium ،Medium_Large ،Large ،Full تولید می کند.

اندازه پیش فرض تصاویر وردپرس

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

// without parameter -> Post Thumbnail (as set by theme using set_post_thumbnail_size())
the_post_thumbnail();

the_post_thumbnail( 'thumbnail' );       // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' );          // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' );    // Medium Large resolution (default 768px x 0px max)
the_post_thumbnail( 'large' );           // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' );            // Original image resolution (unmodified)

لازم به ذکر است که این ابعاد از طریق گزینه “رسانه” در “تنظیمات” وردپرس قابل تغییر هستند.

تنظیمات رسانه در وردپرس

استفاده از تصویر شاخص در عمل

وردپرس برای استفاده از تصاویر شاخص سه تابع اصلی را در اختیارتان قرار می دهد:

  1. has_post_thumbnail: آیا تصویر شاخص برای نوشته یا صفحه موردنظر وجود دارد.
  2. the_post_thumbnail: رشته ای حاوی تگ img چاپ(Echo) می کند.
  3. get_the_post_thumbnail: رشته ای حاوی تگ img بر می گرداند(Return).

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

<?php
while ( have_posts() ) : the_post();
    if( has_post_thumbnail() ):
        echo get_the_post_thumbnail();
    endif;  
endwhile; 
?>

و اگر می خواهید تصویر شاخص را به صورت لینک شده نمایش دهید کد زیر اینکار را برای شما انجام می دهد:

<?php
echo '<a href="', get_permalink(), '">';
if ( has_post_thumbnail() ) {
	the_post_thumbnail("medium");
}
else {
	echo '<img src="', get_bloginfo('template_directory'),
           '/images/no-image.png',
           '" width="300" height="300" alt="no image selected" />';
}
echo '</a>';
?>

می توانید به توابع the_post_thumbnail و get_the_post_thumbnail دو پارامتر اختیاری ارسال کنید که پارامتر اول اندازه تصویر و دومی آرایه ای از ویژگی های src ،class، alt و title می باشد:

the_post_thumbnail(
	array(50, 50), 
	array(
		'src' => 'image.png',
		'class' => 'img-responsive',
		'alt' => 'alt post thumbnail',
		'title' => 'custom title'
	)
);

نتیجه کار نیز بدین صورت خواهد بود:

<img width="50" height="50" src="image.jpg" class="img-responsive" alt="alt post thumbnail" title="custom title" />

جمع بندی

در پایان به این نکته توجه داشته باشید که استفاده از تصاویر جذاب، با کیفیت و متناسب با موضوع می تواند در میزان درگیر شدن کاربران و جذب آنها به وب سایت تان بسیار تاثیرگذار باشد.

نظرات و سوالات کاربران

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *