اضافه کردن قابلیت تصویر شاخص به قالب و نمایش آن در وردپرس

چرا تصویر شاخص لازم است؟

حتما در بعضی از قالب های وردپرس مشاهده کرده اید که هنگام افزودن نوشته قسمتی با عنوان تصویر شاخص وجود دارد که این تصویر بیشتر در قسمت ابزارک های سایت و مطالب صفحه اصبی کاربرد دارد علاوه بر آن تصویر شاخص برای یک سایت بسیار مهم است زیرا وقتی کاربری پست شما را در شبکه های اجتماعی Share می کند تصویر شاخص شما به همراه خلاصه مطلب قرار داده می شود که اگر قالبتان از این قابلیت پشتیبانی نکند هنگام کار با افزونه های انتشار خودکار مطالب در شبکه های اجتماعی با مشکل مواجه می شوید.

اضافه کردن قابلیت تصویر شاخص به قالب و نمایش آن در وردپرس

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

add_theme_support( 'post-thumbnails' );

کد بالا قابلیت تصویر شاخص را به قالب وردپرس شما اضافه می کند. و شما می توانید هنگام افزودن مطلب قسمت تصویر شاخص را مشاهده کنید.

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

<?php the_post_thumbnail(); ?>

[irp posts=”456″ name=”بهینه سازی و کم کردن حجم تصاویر با افزونه WP Smush”]

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

if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/default.png" />';
}

کد بالا به دنبال تصویر شاخص می گرده و اگر آن را پیدا نکرد عکس default را که در پوشه images قالب قرار دارد نشان می دهد. شما می توانید به جای default.png اسم و فرمت تصویر خود را قرار بدید.

گاهی اوقات نیز شما می خواهید یک تصویر شاخص را در اندازه های مختلف به کار بگیرید و مثلا آن را در یک ابزارک به ابعاد 40*40 و همزمان در قسمت دیگری از سایت خود به ابعاد 500*500 قرار بدید اگر اندازه تصویر شاخص شما 700*700 باشد و از آن در ابزارک استفاده کنید ظاهر خوبی ندارد و همچنین استفاده از عکس 700*700 در یک باکس 40*40 کار غلطی است در این مواقع شما باید اندازه هایی را برای تصویرتان تنظیم کنید تا هنگام آپلود به صورت خودکار برش بخورد برای این کار باید کد زیر را به functions.php خود اضافه کنید:

add_image_size( 'single-post-thumbnail', 500, 500 );
add_image_size( 'widget-thumbnail', 40, 40 );

کد بالا اندازه عکس ها را هنگام آپلود تنظیم می کند و شما می توانید اندازه های مختلفی برایش تعیین کنید. حال برای استفاده از این عکس های Resize شده باید از کدهایی مثل زیر استفاده کنید:

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>
<?php the_post_thumbnail( 'widget-thumbnail' ); ?>

امیدوارم از این آموزش استفاده کرده باشید!

امیرحسین غلامیان

نزدیک به 7 سال است که با وردپرس آشنا شدم و این آشنایی تا الان ادامه داشته و خواهد داشت. در حال حاضر مدیریت تیم آریا وردپرس رو بر عهده دارم و سعی میکنم هر روز تجربیاتم رو با شما در اینجا به اشتراک بگذارم.