Người Viết : ViKiMi Editor

Hướng dẫn lấy hình ảnh đính kèm của Bài Post với Function wp _ get _ attachment _ image ,
Cũng sự quan trọng khi sử dụng hình ảnh của thiết kế Website, nên việc chỉ sử dụng duy nhất một hình ảnh đại diện là chưa đủ. Nếu muốn một Website hiệu quả thì chắc chắn rồi, phải có nhiều hình ảnh hơn nữa! Tư duy trực quan của con người là nhận biết bằng hình ảnh.
Ngoài ra, nếu một Website luôn sử lý một cách tĩnh thì điều đó thật thiếu hiệu quả. Nên yêu cầu của Website càng nhiều xử lý động càng tốt. Nhờ các xử lý động mà trang Website của bạn càng thu hút được nhiều người. Nếu cứ mỗi khi cần xử lý với khối hình ảnh lên tới n hình ảnh mà luôn phải thao tác bằng tay thì thật khó khăn. Vậy nên các dòng code làm nên một Website động là luôn quan trọng.
Với xử lý hình ảnh lần này chúng ta sẽ lấy về tất cả các hình ảnh đính kèm của một Bài Post của WordPress, mà không cần nghĩ rằng chỉ lấy hình đại diện Post Thumbnail thôi. Nhờ tất cả các hình lấy về được, chúng ta có nhiều hình ảnh hiển thị hơn.
Function nhắc tới là wp_get_attachment_image để lấy về các hình ảnh.
Định nghĩa Function wp_get_attachment_image như sau :
wp_get_attachment_image( int $attachment_id, string|int[] $size = ‘thumbnail’, bool $icon = false, string|array $attr = ” ): string
Ø Nhận về thẻ img HTML của tệp hình ảnh đính kèm, Nếu thất bại khi lấy hình ảnh đính kèm thì nhận về một chuỗi rỗng.
TIPS : Mặc dù $size của hình ảnh đính kèm nhận về có thể sử dụng như một Array, nhưng cách tốt nhất là hãy đăng kí một kích thước với Function add_image_size để có một hình ảnh đã cắt; Thay vì WordPress phải tìm hình ảnh có kích thước gần nhât và sau đó trình duyệt sẽ thực hiện thu nhỏ theo kích thước yêu cầu. Nhờ vậy tốc độ xử lý sẽ nhanh hơn.
Nhưng cũng tuỳ thuộc vào việc lợi ích SEO nữa! Vì mỗi người có một cách riêng.
Nếu chúng ta không định nghĩa kích thước hình ảnh thì có thể sử dụng mặc định là ‘thumbnail’ . Tương tự như các cách lấy hình ảnh được đề cập tới.
Chúng ta có một mẫu dùng là :
wp_get_attachment_image( $attachment_id, $size, $icon, $attr );
Để hiển thị các hình ảnh đính kèm chúng ta có thể như sau :
<ul> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post();
$atts = get_posts( array( /* * Lấy về dữ liệu đính kèm của Post */ ‘post_type’ => ‘attachment’, /* * Lấy toàn bộ dữ liệu */ ‘posts_per_page’ => -1, ‘post_status’ => ‘Publish’, /* * Lấy các thông tin liên quan $post->ID */ ‘post_parent’ => $post->ID ) );
if ( !empty($atts) ) { foreach ( $atts as $att ): ?> <li><?php echo wp_get_attachment_image( $att->ID, ‘large’ ); ?> <p><?php echo apply_filters( ‘the_title’, $att->post_title ); ?></p> </li>
<?php endforeach; ?> <?php } endwhile; ?> <?php else:?> <!– Xử lý nếu không có bài Posts –> <?php endif; ?> </ul>
|
Với đoạn xử lý trên chúng ta sử dụng các thành phần :
+ Function get_posts($arr) : Để lấy toàn bộ các tệp đính kèm của một
$post->ID. Thông thường đây sẽ là ID của một Bài Post được truyền vào.
Nếu bạn muốn lặp cho nhiều Posts trong một vòng lặp While thì vẫn được.
+ Function wp_get_attachment_image để lấy về hình ảnh hiển thị img HTML lên nội dung hiển thị Website .
Hình ảnh trả về có thể hiểu là dạng như sau :
<img width=”200″ height=”200″ src=”https://www.imagesmagazine.com/wp-content/uploads/2017/11/image-lose-200×200.jpg;” class=”attachment-thumbnail size-thumbnail” alt=””
srcset=”https://www.imagesmagazine.com/wp-content/uploads/2017/11/image-lose-200×200.jpg 200w, http://example.com/wp-content/uploads/2017/11/image-lose-50×50.jpg 50w”
sizes=”(max-width: 200px) 200vw, 200px” />
|
+ Nếu bạn muốn xem chi tiết các thông tin trả về của attachments thì có thể dùng đoạn code sau để kiểm tra :
print_r($attachments);
Nội Dung Trả Về :
Array ( [0] => stdClass Object ( [ID] => 66 [post_author] => 05 [post_date] => 2020-09-09 12:22:31 [post_date_gmt] => 2020-09-09 12:22:31 [post_content] => <a href=”… [post_title] => New IMG Site [post_excerpt] => [post_status] => publish [comment_status] => open [ping_status] => open [post_password] => [post_name] => our-own-site [to_ping] => [pinged] => [post_modified] => 2020-09-09 12:22:31 [post_modified_gmt] => 2020-09-09 [post_content_filtered] => [post_parent] => 0 [guid] => http://localhost/wordpress/?p=66 [menu_order] => 0 [post_type] => post [post_mime_type] => [comment_count] => 1 [filter] => raw ) )
|
Khi có các thông tin cần xem chắc hẳn sẽ dễ dàng xử lý một cách mong muốn nhất. Cũng dễ dàng hơn khi cần tìm các thông tin cần thiết.