ارزدیجیتال
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

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

آموزش ها , مقالات,آموزش,ترفند , وردپرس

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

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

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

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

<?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'); ?>

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

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

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

<?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'); ?>

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

<?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 می باشد که پس از دریافت افزونه از مخزن وردپرس و نصب آن میتوانید با رفتن به منوی کاربری افزونه و کلیک بر روی دکمه Generate Thumbnails برای تمامی نوشته هایی که برای آنها تصویر شاخص انتخاب نشده است بصورت خودکار تصویر بند انگشتی اضافه کنید این عمل به این صورت انجام میگیرد که افزونه به صورت خودکار تصویر اول از هر نوشته را به عنوان تصویر شاخص برای آن نوشته قرار می دهد.

 

موفق باشید

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 1 آموزش ها , مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=17058
کلمات کلیدی پست :
مطالب مرتبط
15,353اسکریپت دایرکتوری کسب و کار و ثبت آگهی Directoryapp تاریخ : 2017/12/21
11,492طرح آبی برای فرم ورود وردپرس + آموزش تاریخ : 2014/08/1
14,221اسکریپت راه اندازی بازارچه اینترنتی Kagao نسخه 3.0 تاریخ : 2016/06/9
39,370اسکریپت خبر خوان فارسی My RSS تاریخ : 2014/05/18
14,076افزونه نمایش ویترین لوگوها برای وردپرس تاریخ : 2016/09/11
9,508کد نمایش تعداد نظرات در وردپرس تاریخ : 2018/11/1
6,664ویرایش دسته جمعی نوشته ها در وردپرس تاریخ : 2019/08/10
14,016اسکریپت فارسی وضعیت آب و هوای ایران تاریخ : 2014/04/4
25,009افزونه وردپرس سیستم عضویت حرفه ای ARMember تاریخ : 2020/11/6
11,767اسکریپت اشتراک گذاری و ایجاد شبکه اجتماعی ویدئو وایب تاریخ : 2014/01/13
29,995افزونه تغییر بک گراند پوسته های وردپرس تاریخ : 2013/12/29
14,630ساخت منوهای واکنشگرا در وردپرس با افزونه Responsive Menu Pro تاریخ : 2019/04/4
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file