در بخش سوم از آموزش ساخت قالب وردپرس سعی داریم تا در ادامه‌ی آموزش‌های قبل، به سراغ نمایش عکس‌های شاخص پست‌ها برویم. اگر با وردپرس کار کرده باشید، می‌دانید که هر مطلبی که در وردپرس منتشر می‌شود، می‌تواند یک تصویر شاخص داشته باشد. حال می‌خواهیم این تصویر شاخص را به نمایش بگذاریم. البته در کنار این کار می‌خواهیم چند سایز استاندارد(بسته به نیاز قالب خود) تعریف کنیم تا با این کار، هر کجا که نیاز است، تصویر شاخص با اندازه دلخواه ما نمایش داده شود.
[divider]
تمامی کدها و اتفاقات خاصی که می‌خواهیم در قالب وردپرسی ما اتفاق بیوفتد باید در داخل فایلی به نام functions.php در داخل پوشه قالب قرار گیرد. اولین قابلیتی که می‌خواهیم به کمک این فایل فعال کنیم قابلیت تصویر بندانگشتی(post-thumbnails) برای پست است. این کار به کمک تابع add_theme_support انجام می شود. پس از فعال کردن قابلیت post-thumbnails می‌توانیم سایزهایی که لازم داریم را به کمک تابع add_image_size معرفی کنیم. به کد زیر توجه کنید:
add_theme_support( 'post-thumbnails' ); add_image_size( 'my-size-s', 400, 267, array( 'center', 'center' ) ); add_image_size( 'my-size-m', 400, 400, array( 'center', 'center' ) ); add_image_size( 'my-size-l', 220, 220, array( 'center', 'center' ) );
اگر کد بالا را در فایل functions.php قرار دهید، هر تصویر شاخصی که آپلود شود، به چهار سایز قابل دسترس خواهد بود. یکی سایز اصلی و سه تای دیگر ابعادی که در کد بالا معرفی کردیم. در نتیجه در هر قسمتی از قالب خود، می‌توانیم از سایز مناسب عکس استفاده کنیم. با این کار حجم کلی صفحات بهینه‌تر می‌شود و این امتیاز بسیار مهمی است.
نحوه استفاده:
برای نمایش تصویر شاخص پست ها دو تابع کاربردی در وردپرس داریم. یکی has_post_thumbnail برای بررسی اینکه پست تصویر شاخص دارد یا خیر و دیگری the_post_thumbnail برای قرار دادن تصویر شاخص در صفحه استفاده می‌شود. دقت کنید که برای تعیین اینکه کدام سایز از تصویر شاخص نمایش داده شود، باید نام سایز دلخواه را به عنوان پارامتر ورودی به تابع the_post_thumbnail بدهیم.
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail( 'my-size-m' );
}
?>
حال بیاید قالب خود را توسعه دهیم و تصویر شاخص پست‌ها را به نمایش بگذاریم. فرض کنید بخواهیم در صفحه index.php تصاویر شاخص با ابعاد ۲۰۰x۲۰۰ و در صفحه single.php با ابعاد ۴۰۰x۴۰۰ نمایش داده شوند. در اینصورت فایل‌های مربوطه باید به این صورت تغییر کنند:
فایل index.php:
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('name'); ?></title>
<body>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail( 'my-size-l' );
}
?>
<h1><?php the_title(); ?></h1>
<p><?php the_excerpt(); ?></p>
<a href="<?php the_permalink(); ?>">ادامه مطلب</a>
<br/>
<hr/>
<?php endwhile; else : ?>
<p>پستی جهت نمایش وجود ندارد.</p>
<?php endif; ?>
</body>
</html>
فایل single.php:
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('name'); ?></title>
<body>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail( 'my-size-m' );
}
?>
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
<p>نویسنده: <?php the_author(); ?></p>
<p>تاریخ: <?php the_date(); ?></p>
<p>دسته‌بندی: <?php the_category(); ?></p>
<br/>
<?php endwhile; else : ?>
<p>پستی جهت نمایش وجود ندارد.</p>
<?php endif; ?>
</body>
</html>
اکنون اگر نگاهی به وب سایت خود بیاندازیم تغییرات را مشاهده خواهیم کرد:
صفحه فهرست:
صفحه پست:
همانطور که مشاهده می‌کنید اکنون می‌توانیم تصاویر شاخص پست‌ها را در صفحات مختلف سایت با ابعاد دلخواه به نمایش بگذاریم. در آموزش بعد سعی داریم تا امکان جستجو در مطالب را به قالب خود اضافه کنیم. با ما همراه باشید!