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

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

علت اهمیت اضافه کردن تصویر شاخص

نداشتن تصویر شاخص نه تنها ظاهر مناسب سایت وردپرس شما را بهم می ریزد، بلکه در سئو و بهینه سازی سایت شما برای موتورهای جستجو مثل گوگل نیز تاثیر منفی دارد.

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

تصاویر شاخص در انتقال مفهوم مطالب بسیار تاثیرگذار هستند و با انتخاب یک عکس مناسب به عنوان تصویر شاخص آن مطلب می توانید به کاربر بگویید که در نوشته شما چه خبر است و قرار است چه چیزی را به او آموزش دهید.

[quote bgcolor=’#eec700′ color=’#ffffff’ bcolor=’#ffffff’]

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

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

[/quote]

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

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

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

نکته : پیشنهاد تیم آموزشی وبمستر 98 مثل همیشه این است که قبل از ایجاد هر تغییری در فایل فانکشن از آن نسخه ی پشتیبان تهیه کنید تا در صورت بروز خطا بتوانید آن را به حالت اوله بازگردانید.

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

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

while ( have_posts() ) : the_post();

لازم به ذکر است که کد <?php the_post_thumbnail(); ?> که جهت نمایش تصاویر شاخص در وردپرس به کار می رود حتما باید درون حلقه وردپرس و قبل از تابع 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.png آپلود کنید.

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

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

به طور پیش فرض در اندازه 150 × 150 می باشد.

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

مدیوم که به طور پیش فرض در اندازه 300 × 300 می باشد.

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

لارج که به طور پیش فرض در اندازه 640 × 640 می باشد.

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

فول هم که اندازه کامل تصویر آپلود شده را به نمایش در می آورد.

شما می توانید اندازه پیش فرض تصاویر آپلود شده در قالب وردپرس خود را با رفتن در پیشخوان و در مسیر تنظیمات » رسانه به اندازه ی مورد نظر خود تغییر دهید.

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

برای انجام این کار کافیست کد زیر را به فایل functions.php پوسته وردپرس خود اضافه کنید.

<?php
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);
}
?>

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

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

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

اگر شما هم در قالب وردپرس خود از تعداد زیادی تصاویر شاخص استفاده می کنید پیشنهاد تیم آموزشی وبمستر 98 به شما عزیزان این است که از اسکریپت Tim Thumb برای نمایش تصاویر شاخص خود در بی نهایت اندازه ی مختلف و تنها با یک دستور استفاده کنید.

برای استفاده از اسکریپت Tim Thumb ابتدا نسخه فعلی را دانلود کرده و سپس محتوای فایل دریافت شده را در ریشه قالب وردپرس خود آپلود کنید و کد زیر را به فایل functions.php پوسته خود اضافه کنید.

<?php
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;
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 می باشد. این افزونه به صورت خودکار تصویر اول هر نوشته را به عنوان تصویر شاخص برای آن قرار می دهد.

برای استفاده از افزونه Auto Post Thumbnail پس از دریافت افزونه از مخزن وردپرس، آن را نصب کرده و سپس با رفتن به منوی کاربری افزونه و کلیک بر روی دکمه Generate Thumbnails برای تمامی نوشته هایی که برای آنها تصویر شاخص انتخاب نشده است، به صورت خودکار تصویر شاخص اضافه کنید.

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

پاینده و پیروز باشید.