وب آکادمی

مرجع آموزش طراحی و برنامه نویسی وب

جلسه نهم – نمایش تصویر شاخص(بندانگشتی) برای نوشته ها

دسته بندی:آموزش ساخت قالب وردپرس تاریخ انتشار: 25 مهر 1397 برچسب ها : برچسب‌ها:,

یکی از قابلیت هایی که در نسخه های جدید وردپرس بصورت پیش فرض قرارداده شده است، امکان تعیین تصویر شاخص یا بندانگشتی(thumbnail) برای نوشته ها و نمایش آنها در پوسته است.

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

add_theme_support(‘post-thumbnails’);

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

 

از طرفی نیاز داریم تا در صفحات مختلف سایت تصویر شاخص را با اندازه های مختلف نشان دهیم، در فایل index.php می خواهیم تصویر شاخص با ابعاد کوچک (مثلاً 150*150 ) دیده شود یا در فایل single.php همان تصویر شاخص را با ابعاد بزرگتر (مثلاً  300*300) نشان دهیم.

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

دستورات زیر در فایل functions.php ، ابتدا قابلیت تصویر شاخص را فعال کرده و سپس دو اندازه برای تصویرها تعیین می کنند:
add_theme_support('post-thumbnails');
add_image_size('small-size', 150, 150, true);
add_image_size('medium-size', 300, 300, true);

پس از اینکه تنظیمات لازم را در فایل functions.php انجام دادیم و برای نوشته ها هم تصویر شاخص تعیین کردیم، برای نمایش تصویر شاخص در فایل index.php  و single.php تغییراتی می دهیم، بعنوان مثال در فایل index.php ، حلقه اصلی را بصورت زیر باز نویسی می کنیم:
<?php while ( have_posts() ) : the_post(); ?>
<h2>
<a href=" <?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>
<?php  if ( has_post_thumbnail()) :  ?>
<?php  the_post_thumbnail('small-size');?>
<?php endif; ?>
<p> <?php the_excerpt(); ?></p>
<?php endwhile; ?>

تا نتیجه زیر بدست آید:

طراحی پوسته وردپرس - نمایش تصویر شاخص وردپرس

همان طور که در کدفوق دیده می شود از تابع has_post_thumbnail برای بررسی اینکه نوشته دارای تصویر شاخص هست یا خیر و از تابع the_post_thumbnail برای نمایش تصویر شاخص استفاده شده است.

تابع the_post_thumbnail دارای پارامتری است که اندازه تصویر را تعیین می کند و نیز پارامتر دیگری دارد که برای تعیین ویژگی های تگ img تصویر استفاده می شود. به مثال زیر دقت کنید:

the_post_thumbnail(‘small-size’,array(‘align’=>’right’,’class’=>’img1′));

در این دستور برای تگ img خاصیت align  مساوی right و خاصیت class  مساوی img1 تعیین شده است، با این روش می توان همچنین تنظیمات دیگری مثل alt  ، title   و … را برای تصویر تعیین کرد.

مثال :
the_post_thumbnail('small-size',array('align'=>'right','class'=>'img1', 'alt'=>'picture 1' , 'title'=>'picture title '));
در جلسه بعد روش نمایش دسته بندی ها و تگ ها را آموزش خواهیم داد…

دیدگاهتان را بنویسید

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

7 + ده =