تگ نمایش تصویر شاخص یک پست وردپرس
یکی از نیاز های اساسی یک وبسایت وردپرسی استفاده از تصاویر شاخص برای ارائه بهتر مطالب و زیبایی هرچه بیشتر سایت است در مقاله زیر قصد داریم تا شما را با نحوه فعال سازی ،آموزش کار و کد های گلچین نمایش تصویر شاخص آشنا کنیم پس با ما همراه باشیدتوضیحات
تصویر شاخصی را که در صفحه نگارش و ویرایش نوشته های وردپرس برای یک پست وردپرس تعیین کرده اید نمایش خواهد داد.
نکته : این تگ وردپرس حتما باید درون حلقه نوشته ها استفاده شود و تصویر شاخص پست جاری را نمایش خواهد داد در صورتی که احتیاج به نمایش تصویر شاخص یک نوشته خاص در بخشی از پوسته خود دارید از تگ get_the_post_thumbnail استفاده نموده جهت نمایش تصویر مورد نظر از تگ echo استفاده نمایید.
برای بررسی اینکه آیا پست مورد نظر وردپرس دارای تصویر شاخص است یا خیر از تگ has_post_thumbnail و جهت تعیین اندازه های تصویر شاخص از تگ set_post_thumbnail_size استفاده نمایید.
جهت نمایش تصویر شاخص نوشته های وردپرس می بایست این ویژگی را برای پوسته مورد نظر با افزودن کد خط زیر به فایل functions.php پوسته فعال نمایید.
1
|
add_theme_support(‘post-thumbnails’);
|
نحوه استفاده
1
|
<?php the_post_thumbnail( $size, $attr ); ?>
|
پارامترها
size : این پارامتر اندازه تصویر شاخص را جهت نمایش تعیین خواهد کرد . این اندازه می تواند به صورت یک عبارت رزرو شده مانند (thumbnail, medium, large, full) یا به صورت اندازه سفارشی تعیین شده توسط تابع add_image_size و یا به صورت یک آرایه تک بعدی با 2 پارامتر به شکل array(32,32) باشد که این پارامترهای بر حسب پیکسل به ترتیب عرض و ارتفاع تصویر شاخص را تعیین خواهد کرد . در حالت پیش فرض post-thumbnail جایگذاری خواهد شد که اندازه استاندارد تصویر شاخص تنظیم شده برای پوسته فعال وردپرس خواهد بود.
attr : آرایه ای حاوی مشخصات و المان ها نمایش دهنده تصویر مورد نظر خواهد بود . جهت دستیابی به جزییات این المان ها به تگ wp_get_attachment_image مراجعه نمایید .
به عنون مثال :
1
2
3
4
5
|
$default_attr = array(
‘src’ => $src,
‘class’ => “attachment-$size”,
‘alt’ => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )),
);
|
مثال ها
1
2
3
4
5
6
|
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail();
}
?>
<?php the_content(); ?>
|
نکته : جهت دریافت تصویر شاخص به جای نمایش آن می بایست از تگ get_the_post_thumbnail استفاده نمایید.
اندازه های تصویر شاخص
اندازه های استاندارد برای تصاویری که از طریق بارگذاری کننده رسانه ها و کتابخانه رسانه دانلود می شوند عبارتند از : تصویر بند انگشتی ، میانه،بزرگ و تصویر کامل جهت بازخوانی تصاویر در این سایزهای استاندارد به شکل زیر عمل نمایید :
1
2
3
4
5
6
7
8
|
the_post_thumbnail(); //بدون پارامتر که تصویر بند انگشتی را نمایش خواهد دارد
the_post_thumbnail(‘thumbnail’); // تصویر بند انگشتی (default 150px x 150px max)
the_post_thumbnail(‘medium’); // میانه (default 300px x 300px max)
the_post_thumbnail(‘large’); // بزرگ (default 640px x 640px max)
the_post_thumbnail(‘full’); // کامل (original size uploaded)
the_post_thumbnail( array(100,100) ); // اندازه دلخواه
|
جهت تعیین اندازه جدید تصویر از تگ add_image_size و برای تغییر اندازههای استاندارد از تگ set_post_thumbnail_size استفاده نمایید.
تصویر شاخص به همراه لینک به پیوند یکتای نوشته
جهت لینک تصویر شاخص به پیوند یکتای یک نوشته در حلقه نوشته ها کد زیر را وارد نمایید :
1
2
3
4
5
|
<?php if ( has_post_thumbnail()) : ?>
<a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>” >
<?php the_post_thumbnail(); ?>
</a>
<?php endif; ?>
|
اما در صورت نیاز به لینک تمام تصاویر شاخص به پیوندهای یکتای نوشته کد زیر را به فایل functions.php پوسته خود بیافزاییدک
1
2
3
4
5
6
|
add_filter( ‘post_thumbnail_html’, ‘my_post_image_html’, 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id ) {
$html = ‘<a href=”‘ . get_permalink( $post_id ) . ‘” title=”‘ . esc_attr( get_the_title( $post_id ) ) . ‘”>’ . $html . ‘</a>’;
return $html;
|
تصویر شاخص لینک شده به اندازه بزرگ تصویر
در این مثال تصویر شاخص نوشته به جای پیوند یکتا به اندازه بزرگ همان تصویر لینک داده می شود این کد باید داخل حلقه نوشته ها استفاده شود:
1
2
3
4
5
6
7
8
|
<?php
if ( has_post_thumbnail()) {
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), ‘large’);
echo ‘<a href=”‘ . $large_image_url[0] . ‘” title=”‘ . the_title_attribute(‘echo=0’) . ‘” >’;
the_post_thumbnail(‘thumbnail’);
echo ‘</a>’;
}
?>
|
قالب بندی تصاویر شاخص جهت نمایش در پست ها
تصاویر شاخص در هنگام جایگذاری در صفحات و نوشته ها کلاس wp-post-image را به خود اختصاص می دهند البته این تصاویر شاخص بسته به اندازه آن ها یکی از کلاس ها زیر را نیز به خود اختصاص خواهند داد که با افزودن این کلاس به شیوه نامه پوسته می توانید نحوه نمایش تصاویر شاخص را ویرایش نمایید:
1
2
3
4
5
|
img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full
|
همچنین می توانید کلاس های سفارشی را به تصاویر شاخص اختصاص دهید :
1
|
<?php the_post_thumbnail(‘thumbnail’, array(‘class’ => ‘alignleft’)); ?>
|
فایل منبع
تگ the_post_thumbnail در آدرس wp-includes/post-thumbnail-template.php جایگذاری شده است.
مطالب زیر را حتما بخوانید:
قوانین ارسال دیدگاه در سایت
- چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
- چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
- چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
- چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
- چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.
نظرات کاربران