Lấy URL post thumbnail trong WordPress
Giới thiệu về Post Thumbnail trong WordPress
Post Thumbnail, hay còn gọi là Featured Image, là một hình ảnh đại diện cho một bài viết hoặc trang trong WordPress. Nó thường được hiển thị trên trang chủ, trang lưu trữ, hoặc trong các phần khác của website để thu hút sự chú ý của người đọc và cung cấp một cái nhìn tổng quan về nội dung của bài viết.
Việc sử dụng Post Thumbnail mang lại nhiều lợi ích, bao gồm:
- Cải thiện tính thẩm mỹ của website
- Tăng tỷ lệ nhấp (CTR)
- Giúp người đọc dễ dàng nhận biết nội dung bài viết
- Hỗ trợ SEO bằng cách cung cấp thêm thông tin cho công cụ tìm kiếm
Bài viết này sẽ hướng dẫn bạn cách lấy URL của Post Thumbnail trong WordPress bằng nhiều phương pháp khác nhau, từ đơn giản đến phức tạp, để bạn có thể sử dụng chúng một cách linh hoạt trong các dự án của mình.
Kiểm tra Post Thumbnail đã được thiết lập hay chưa
Trước khi tìm cách lấy URL của Post Thumbnail, bạn cần đảm bảo rằng bài viết hoặc trang bạn đang làm việc thực sự có Post Thumbnail được thiết lập. Bạn có thể kiểm tra bằng đoạn code sau:
<?php
if ( has_post_thumbnail() ) {
echo 'Bài viết này có Post Thumbnail.';
} else {
echo 'Bài viết này không có Post Thumbnail.';
}
?>
Đoạn code này sử dụng hàm has_post_thumbnail() để kiểm tra xem bài viết hiện tại có Post Thumbnail hay không. Nếu có, nó sẽ in ra thông báo “Bài viết này có Post Thumbnail.”, ngược lại sẽ in ra “Bài viết này không có Post Thumbnail.”.
Sử dụng hàm get_the_post_thumbnail_url()
Hàm get_the_post_thumbnail_url() là cách đơn giản nhất để lấy URL của Post Thumbnail. Hàm này trả về một chuỗi chứa URL của hình ảnh.
Cú pháp của hàm:
<?php
$thumbnail_url = get_the_post_thumbnail_url( $post_id, $size );
?>
$post_id(tùy chọn): ID của bài viết hoặc trang. Nếu không được cung cấp, hàm sẽ sử dụng ID của bài viết hiện tại trong vòng lặp.$size(tùy chọn): Kích thước của hình ảnh. Có thể là ‘thumbnail’, ‘medium’, ‘large’, ‘full’, hoặc một kích thước tùy chỉnh đã được đăng ký. Nếu không được cung cấp, hàm sẽ sử dụng kích thước ‘post-thumbnail’ được định nghĩa trong theme.
Ví dụ:
<?php
// Lấy URL của Post Thumbnail với kích thước 'full'
$thumbnail_url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
// Hiển thị hình ảnh
echo '<img src="' . esc_url( $thumbnail_url ) . '" alt="' . get_the_title() . '">';
?>
Trong ví dụ này, chúng ta sử dụng get_the_ID() để lấy ID của bài viết hiện tại và 'full' để yêu cầu hình ảnh với kích thước đầy đủ. Sau đó, chúng ta sử dụng hàm esc_url() để đảm bảo URL được an toàn trước khi hiển thị nó trong thẻ <img>.
Sử dụng hàm wp_get_attachment_image_src()
Hàm wp_get_attachment_image_src() cung cấp nhiều thông tin hơn về hình ảnh, bao gồm URL, chiều rộng và chiều cao. Hàm này trả về một mảng chứa các thông tin này.
Cú pháp của hàm:
<?php
$image_data = wp_get_attachment_image_src( $attachment_id, $size, $icon );
?>
$attachment_id: ID của hình ảnh.$size(tùy chọn): Kích thước của hình ảnh. Tương tự như hàmget_the_post_thumbnail_url().$icon(tùy chọn): Có nên trả về một biểu tượng nếu tệp đính kèm là một hình ảnh hay không. Mặc định là false.
Ví dụ:
<?php
// Lấy ID của Post Thumbnail
$thumbnail_id = get_post_thumbnail_id( get_the_ID() );
// Lấy thông tin về hình ảnh
$image_data = wp_get_attachment_image_src( $thumbnail_id, 'medium' );
// Kiểm tra xem có dữ liệu hình ảnh hay không
if ( $image_data ) {
$thumbnail_url = $image_data[0]; // URL của hình ảnh
$thumbnail_width = $image_data[1]; // Chiều rộng của hình ảnh
$thumbnail_height = $image_data[2]; // Chiều cao của hình ảnh
// Hiển thị hình ảnh
echo '<img src="' . esc_url( $thumbnail_url ) . '" alt="' . get_the_title() . '" width="' . $thumbnail_width . '" height="' . $thumbnail_height . '">';
}
?>
Trong ví dụ này, chúng ta sử dụng get_post_thumbnail_id() để lấy ID của Post Thumbnail. Sau đó, chúng ta sử dụng wp_get_attachment_image_src() để lấy thông tin về hình ảnh với kích thước ‘medium’. Cuối cùng, chúng ta truy cập các phần tử trong mảng $image_data để lấy URL, chiều rộng và chiều cao của hình ảnh và hiển thị chúng trong thẻ <img>.
Sử dụng hàm get_the_post_thumbnail() và lọc (filter) post_thumbnail_html
Hàm get_the_post_thumbnail() trả về một chuỗi HTML chứa thẻ <img> của Post Thumbnail. Tuy nhiên, bạn có thể sử dụng filter post_thumbnail_html để chỉnh sửa chuỗi HTML này trước khi nó được trả về.
Ví dụ:
<?php
// Hàm để lấy URL từ thẻ img
function get_thumbnail_url_from_html( $html ) {
preg_match_all( '/<img.+src=['"]([^'"]+)['"].*>/i', $html, $matches );
if ( isset( $matches[1][0] ) ) {
return $matches[1][0];
}
return '';
}
// Thêm filter vào post_thumbnail_html
add_filter( 'post_thumbnail_html', 'get_thumbnail_url_from_html' );
// Lấy URL của Post Thumbnail
$thumbnail_url = get_the_post_thumbnail();
// Gỡ bỏ filter
remove_filter( 'post_thumbnail_html', 'get_thumbnail_url_from_html' );
// Hiển thị URL
echo esc_url( $thumbnail_url );
?>
Trong ví dụ này, chúng ta tạo một hàm get_thumbnail_url_from_html() để trích xuất URL từ chuỗi HTML chứa thẻ <img>. Chúng ta sử dụng biểu thức chính quy (regular expression) để tìm kiếm thẻ <img> và lấy giá trị của thuộc tính src. Sau đó, chúng ta thêm hàm này làm filter cho post_thumbnail_html. Khi chúng ta gọi get_the_post_thumbnail(), filter sẽ được áp dụng và hàm của chúng ta sẽ trả về URL của hình ảnh thay vì toàn bộ thẻ <img>. Cuối cùng, chúng ta gỡ bỏ filter để không ảnh hưởng đến các phần khác của website.
Lấy URL của Post Thumbnail cho một bài viết cụ thể (không phải bài viết hiện tại)
Tất cả các phương pháp trên đều hoạt động cho bài viết hiện tại trong vòng lặp. Nếu bạn muốn lấy URL của Post Thumbnail cho một bài viết cụ thể (không phải bài viết hiện tại), bạn cần cung cấp ID của bài viết đó cho các hàm.
Ví dụ:
<?php
// ID của bài viết
$post_id = 123; // Thay đổi thành ID thực tế của bài viết
// Sử dụng get_the_post_thumbnail_url()
$thumbnail_url = get_the_post_thumbnail_url( $post_id, 'full' );
// Hiển thị hình ảnh
echo '<img src="' . esc_url( $thumbnail_url ) . '" alt="' . get_the_title( $post_id ) . '">';
?>
Trong ví dụ này, chúng ta chỉ cần cung cấp ID của bài viết ($post_id) cho hàm get_the_post_thumbnail_url(). Tương tự, bạn có thể sử dụng ID này với các hàm khác như get_post_thumbnail_id() và wp_get_attachment_image_src().
Các kích thước hình ảnh phổ biến trong WordPress
Khi lấy URL của Post Thumbnail, bạn cần chỉ định kích thước của hình ảnh. WordPress cung cấp một số kích thước hình ảnh mặc định:
thumbnail: Kích thước nhỏ, thường là 150×150 pixels.medium: Kích thước trung bình, thường là 300×300 pixels.large: Kích thước lớn, thường là 1024×1024 pixels.full: Kích thước đầy đủ, là kích thước gốc của hình ảnh.post-thumbnail: Kích thước mặc định cho Post Thumbnail, được định nghĩa trong theme.
Ngoài ra, bạn cũng có thể đăng ký các kích thước hình ảnh tùy chỉnh trong file functions.php của theme bằng cách sử dụng hàm add_image_size().
Lời khuyên và lưu ý
- Luôn kiểm tra xem bài viết có Post Thumbnail hay không trước khi cố gắng lấy URL của nó.
- Sử dụng hàm
esc_url()để đảm bảo URL được an toàn trước khi hiển thị nó trong HTML. - Chọn kích thước hình ảnh phù hợp với mục đích sử dụng để tối ưu hóa hiệu suất của website.
- Nếu bạn sử dụng cache, hãy đảm bảo rằng cache được làm mới khi bạn thay đổi Post Thumbnail.
Hy vọng bài viết này đã cung cấp cho bạn những thông tin cần thiết để lấy URL của Post Thumbnail trong WordPress một cách hiệu quả. Chúc bạn thành công!
