با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره جامع آموزش ساخت قالب وردپرس در خدمت شما هستیم.
در این جلسه قصد داریم به آموزش کار با تصاویر در وردپرس بپردازیم.
مقدمه
در ادامه نحوه مدیریت و کار با تصاویر داخل کتابخانه رسانه (Media Library) را توضیح می‌دهیم.
دریافت کد تصاویر
از تابع ()wp_get_attachment_image برای نمایش تصاویر کتابخانه رسانه استفاده می‌کنیم.
مثال :
| echo wp_get_attachment_image( $attachment->ID, 'thumbnail' ); |
پس از اجرای کد بالا، شما خروجی HTML زیر را با اندازه thumbnail دریافت خواهید کرد.
مثال :
| <img width="150" height="150" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample-150x150.jpg" class="attachment-thumbnail size-thumbnail" ... /> |
می‌توانید اندازه های دیگر مانند full, medium, large و small را برای نمایش مشخص کنید.
همچنین با استفاده از تابع ()add_image_size و همچنین ارسال طول و عرض به صورت آرایه نیز می‌توانید اندازه تصویر را مشخص کنید.
مثال :
| echo wp_get_attachment_image( $attachment->ID, Array(640, 480) ); |
دریافت آدرس تصاویر
از تابع ()wp_get_attachment_image_src برای دریافت آدرس تصاویر استفاده می‌شود.
این تابع یک آرایه برمی‌گرداند که شامل url، عرض، طول و مقدار is_intermediate است.
اگر تصویر وجود نداشته باشد، false برمی‌گرداند.
مثال :
| $image_attributes = wp_get_attachment_image_src( $attachment->ID ); if ( $image_attributes ) : ?> <img src="<?php echo $image_attributes[0]; ?>" width="<?php echo $image_attributes[1]; ?>" height="<?php echo $image_attributes[2]; ?>" /> <?php endif; ?> |
چیدمان تصاویر
هنگام اضافه کردن تصاویر به سایت، می‌توانید چیدمان آن ها را نیز مشخص کنید. (چپ، راست، وسط یا بدون چیدمان)
هسته وردپرس به صورت خودکار کلاس های css را برای اضافه چیدمان تصویر اضافه می‌کند.
- alignright
- alignleft
- aligncenter
- alignnone
خروجی نمونه وقتی چیدمان وسط باشد:
مثال :
| <img class="aligncenter size-full wp-image-131" src= ... /> |
برای استفاده از مزایای این کلاس های css، قالب شما باید این استایل ها را در یک فایل stylesheet یا css مانند style.css وارد کند.
توضیحات
اگر یک کپشن برای یک تصویر در کتابخانه رسانه مشخص شده باشد، المان img توسط شورت کد [caption] و [caption/] محصور خواهد شد.
مثال :
| <div class="mceTemp"><dl id="attachment_133" class="wp-caption aligncenter" style="width: 1210px"><dt class="wp-caption-dt"><img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" /></dt><dd class="wp-caption-dd">Sun set over the sea</dd></dl></div> |
و به عنوان تگ figure رندر می‌شود:
مثال :
| <figure id="attachment_133" style="width: 1200px" class="wp-caption aligncenter"> <img class="size-full wp-image-133" src="http://example.com/wordpress/wp-content/uploads/2016/11/sample.jpg" alt="sun set" width="1200" height="400" srcset= ... /> <figcaption class="wp-caption-text">Sun set over the sea</figcaption> </figure> |
برای استفاده از کلاس های css کپشن ها نیز کلاس های زیر را به فایل style.css اضافه کنید.
- wp-caption
- wp-caption-text
جلسه آموزش کار با تصاویر در وردپرس نیز به پایان رسید.
در جلسه بعد به آموزش ساخت گالری در وردپرس خواهیم پرداخت. با ما همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
