چطور تصویر را در وردپرس بند انگشتی کنیم؟

تصویر بندانگشتی وردپرس

چگونه به پست های خود تصویر بند انگشتی (thumbnail) اضافه کنیم ؟

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

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

برای بند انگشتی کردن تصاویر یا همان (thumbnail) در نوشته ها و تصاویر شاخص میتوانید پس از آپلود عکس در قسمت سمت چپ سایز تصویر را تغییر دهید.اما این قابلیت تنها برای کسانی فعال است که پوسته و قالبشان از این نسخه پشتیبانی کند.کسانی که این قابلیت در پوسته شان پشتیبانی نمیشود در این مطلب با ما همراه باشند تا با استفاده از کدهایی ساده و افزودن ان.بتوانید این ویژگی مهم را به سایت خود بیفزایید.

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

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

<?php
if (function_exists('add_theme_support')) {
add_theme_support( 'post-thumbnails' );
}
?>

در این کد دستوری منبی بر اینکه وردپرس ما از نسخه بند انگشتی تصاویر پشیبانی می کند را صادر میکنیم. قسمت دوم کد مخصوص وردپرس هایی است که نسخه ان ها زیر ۲.۹ است.برای نسخه های بالاتر نبود قسمت دوم کد هم مشکلی ایجاد نمیکند و بند اول وردپرس شمارا برای پشتیبانی تصاویر بند انگشتی آماده میکند.برای نسخه های بالاتر از ۲.۹ این کد را وارد کنید:

<?php
add_theme_support( 'post-thumbnails' );
?>

خب حال این قابلیت به وردپرس شما اضافه شده است اما هنوز سیستم شما نمیداند که باید در چه بخش هایی این تصاویر به نمایش در بیاید.پس باید این ویژگی را به قسمت هایی مانند:index , search , archive , category و …اضافه کنیم.برای شروع فایل مورد نظر را جستجو کنید و سپس باز کنید و حلقه وردپرس را در آن بیابید:(حلقه وردپرس مانند شکل زیر است)

while ( have_posts() ) : the_post();

حال کد زیر که مشاهده میکنید برای نمایش تصاویر بند انگشتی حتما باید قبل از تابع the_content و یا the_excerpt قرار بگیرد.نتیجه حاصل باید مانند کد زیر باشد:

while ( have_posts() ) : the_post();
<?php the_post_thumbnail(); ?>
<?php the_content(); ?>

و اما یک نکته که ممکن یک سوال برای دوستان باشد این است که اگر تصویری برای تصویر شاخص انتخاب نشود ظاهر مطلب و سایت به چه شکلی خواهد بود؟ خب مسلما در نبود یک عکس شاخص یک فضای  خالی در سایت ایجاد میشود که منظره خیلی جالبی هم نخواهد داشت اما شما میتوانید با افزودن یک تصویر پیش فرض برای پست هایی که تصویر شاخص ندارند یک تصویر جایگزین بگذارید.برای انیکار باید طبق دستور زیر عمل کنید:

<?php
 
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/no-thumbnail.png" />';
}
 
?>

خب در کد بالا، باید تصویری در پوشه ء عکس ها که در اینجا با نام images آمده است و با نام no-thumbnail بارگذاری کنید .در سیستم وردپرس پس از بارگذاری تصاویر که در نوشته ها و….به شکل چندین سایز مختلف به صورت پیشفرض تبدیل میشوند و شما میتوانید از هر کدام به دلخواه در جایی که مناسب است استفاده کنید.کد های این تصاویر در وردپرس به شکل زیر است:

<?php the_post_thumbnail('thumbnail'); ?>

تامب نایل که بصورت پیش فرض در اندازه ۱۵۰ × ۱۵۰ می باشد .
<?php the_post_thumbnail('medium'); ?>

مدیوم که بصورت پیش فرض در اندازه ۳۰۰ × ۳۰۰ می باشد .
<?php the_post_thumbnail('large'); ?>

لارج که بصورت پیش فرض در اندازه ۶۴۰ × ۶۴۰ می باشد .
<?php the_post_thumbnail('full'); ?>

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

if (function_exists('add_image_size')){
add_image_size( 'first-thumb', 300, 255, true);
add_image_size( 'secound-thumb', 400, 300, true);
add_image_size( 'third-thumb', 125, 125, true);
}

با عمل ذخیره سازی در فانکشن سه اندازه دیگر برای تصاویر بند انگشتی شما ایجاد میشود دستور اول نام عکس قسمت دوم طول عکس و قسمت سوم عرض عکس میباشد.اقسمت چهارم برای برش تصاویر است که اجباری نیست و در صورت لزوم میتوانید از آن استفاده کنید.اگر در صورت وارد کردن سایز تصاویر نتیجه انطور که میخواستید نبود میتوانید از افزونه کاربردی  Regenerate Thumbnails استفاده کنید تا تصاویرتان را به حالت اول برگرداند.و اما استفاده از تابع بند انگشتی برای اندازه های دلخواه به شکل زیر است که مشاهده میکنید:

<?php the_post_thumbnail('first-thumb'); ?>

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

برای استفاده از اسکریپت Tim Thumb ابتدا باید جدیدترین نسخه آن را دریافت کرده و سپس در ریشه پوسته خود بارگذاری کنیدسپس دستور زیر را به فایل فاکشن بیفزایید.

function get_image_url(){
$image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'full');
$image_url = $image_url[0];
echo $image_url;
}

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

<?php
if ( has_post_thumbnail() ) { ?>
<a href="<?php the_permalink() ?>"> <img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php get_image_url(); ?>&amp;h=150&amp;w=150&amp;zc=1" title="<?php the_title(); ?>" /></a>
<?php } else { ?>
<a href="<?php the_permalink() ?>"> <img src="<?php bloginfo('template_directory'); ?>/images/no-thumbnail.png" title="<?php the_title(); ?>" /></a>
<?php } ?>

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

.post-thumb {
border:1px solid #E0E0E0;
background-color: #fff;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 3px rgba(0,0,0,0.2);
box-shadow: 0 0 3px rgba(0,0,0,0.2);
float: left;
}

به فایل ها دایو مربوط را اضافه کنید یا نتیجه مانند تصویر حاصل شود:

<div class="post-thumb">
 
<?php
 
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/no-thumbnail.png" />';
}
 
?>
 
</div>

کسانی که پس از تعدادی ارسال پست تصمیم به تبدیل تصاویر بند انگشتی کرده اند برای ایجاد تصویر شاخص برای مطالب قبلی میتوانید از افزونه Auto Post Thumbnail استفاده کنید.این افزونه به شما کمک میکند که برای مطالب قبلی هم تصاویر شاخص بگذارید.