Hướng Dẫn Lấy Ảnh Đại Diện Của Page Theo ID Page Trong WordPress

Việc lấy ảnh đại diện (featured image) của một page trong WordPress theo ID là một yêu cầu phổ biến khi bạn muốn hiển thị hình ảnh đại diện động trên các trang khác nhau. Bài viết này sẽ hướng dẫn bạn cách thực hiện điều đó một cách chi tiết và hiệu quả.

1. Ảnh Đại Diện (Featured Image) Là Gì?

Ảnh đại diện là một tính năng quan trọng trong WordPress, cho phép bạn đặt một hình ảnh đại diện cho từng bài viết hoặc trang. Hình ảnh này thường được sử dụng để:

Hiển thị trong danh sách bài viết/trang.
Làm hình ảnh chính khi chia sẻ nội dung lên mạng xã hội.
Tăng tính thẩm mỹ và thu hút cho nội dung.

2. Cách Lấy Ảnh Đại Diện Theo ID Page

Để lấy ảnh đại diện của một page theo ID trong WordPress, bạn có thể sử dụng hàm tích hợp sẵn get_the_post_thumbnail_url() hoặc get_post_thumbnail_id() để lấy URL hoặc ID ảnh.

Các bước thực hiện

Bước 1: Sử Dụng `get_the_post_thumbnail_url()`

Hàm này trả về URL của ảnh đại diện của page dựa trên ID.

<?php
// ID của page bạn muốn lấy ảnh đại diện
$page_id = 123; // Thay 123 bằng ID thực tế của page.

// Lấy URL của ảnh đại diện
$thumbnail_url = get_the_post_thumbnail_url($page_id, ‘full’);

// Kiểm tra và hiển thị
if ($thumbnail_url) {
echo ‘<img src=”‘ . esc_url($thumbnail_url) . ‘” alt=”Ảnh đại diện của page”>’;
} else {
echo ‘Page này chưa có ảnh đại diện.’;
}
?>

Giải thích:

$page_id: ID của page bạn muốn lấy ảnh.
'full': Kích thước ảnh cần lấy. Bạn có thể thay đổi thành 'thumbnail', 'medium', hoặc 'large' tùy nhu cầu.

Bước 2: Sử Dụng `get_post_thumbnail_id()`

Hàm này trả về ID của ảnh đại diện, sau đó bạn có thể sử dụng thêm hàm wp_get_attachment_image_url() để lấy URL.

<?php
// ID của page bạn muốn lấy ảnh đại diện
$page_id = 123;

// Lấy ID ảnh đại diện
$thumbnail_id = get_post_thumbnail_id($page_id);

// Kiểm tra nếu có ID ảnh đại diện
if ($thumbnail_id) {
// Lấy URL của ảnh đại diện từ ID
$thumbnail_url = wp_get_attachment_image_url($thumbnail_id, ‘full’);

// Hiển thị ảnh đại diện
echo ‘<img src=”‘ . esc_url($thumbnail_url) . ‘” alt=”Ảnh đại diện của page”>’;
} else {
echo ‘Page này chưa có ảnh đại diện.’;
}
?>

Giải thích:

get_post_thumbnail_id($page_id): Lấy ID của ảnh đại diện từ page.
wp_get_attachment_image_url($thumbnail_id, 'full'): Lấy URL của ảnh từ ID ảnh đại diện.

Bước 3: Kết Hợp Với Vòng Lặp (Loop)

Nếu bạn muốn lấy ảnh đại diện cho một danh sách các page

<?php
// Lấy danh sách các page
$pages = get_posts(array(
‘post_type’ => ‘page’,
‘posts_per_page’ => -1,
));

if (!empty($pages)) {
foreach ($pages as $page) {
$thumbnail_url = get_the_post_thumbnail_url($page->ID, ‘medium’);

echo ‘<div class=”page-item”>’;
echo ‘<h2>’ . esc_html($page->post_title) . ‘</h2>’;
if ($thumbnail_url) {
echo ‘<img src=”‘ . esc_url($thumbnail_url) . ‘” alt=”Ảnh đại diện”>’;
} else {
echo ‘<p>Không có ảnh đại diện.</p>’;
}
echo ‘</div>’;
}
} else {
echo ‘<p>Không có page nào để hiển thị.</p>’;
}
?>

Giải thích:

get_posts(): Lấy danh sách các page.
foreach(): Lặp qua từng page để lấy ảnh đại diện và tiêu đề.

3. Tùy Chỉnh Kích Thước Ảnh

Bạn có thể đăng ký các kích thước ảnh tùy chỉnh trong file functions.php:

<?php
function custom_image_sizes() {
add_image_size(‘custom-size’, 300, 200, true); // 300×200 cắt theo tỷ lệ.
}
add_action(‘after_setup_theme’, ‘custom_image_sizes’);
?>

Sau đó, thay 'full' hoặc 'medium' bằng 'custom-size' trong các hàm lấy ảnh.

4. Khi Nào Nên Sử Dụng Dịch Vụ Này?

Dịch vụ lấy ảnh đại diện page theo ID hữu ích trong các trường hợp:

Xây dựng các danh mục hiển thị trang nổi bật.
Tạo giao diện tùy chỉnh cho từng page.
Tăng tính thẩm mỹ và đồng bộ hình ảnh trên website.

5. Kết Luận

Việc lấy ảnh đại diện của page theo ID giúp bạn tùy chỉnh giao diện website dễ dàng hơn và tối ưu trải nghiệm người dùng. Với các hàm cơ bản của WordPress như get_the_post_thumbnail_url() và get_post_thumbnail_id(), bạn có thể lấy và hiển thị ảnh đại diện một cách chuyên nghiệp.

Nếu bạn gặp khó khăn trong quá trình thực hiện hoặc cần phát triển tính năng nâng cao, hãy liên hệ: