Tôi có thể tìm hình ảnh nổi bật trong WordPress ở đâu?

Hình ảnh nổi bật là ấn tượng đầu tiên mà khách truy cập sẽ nhận được khi truy cập trang hoặc bài đăng trên WordPress. Chúng đã là trụ cột của WordPress ngay từ đầu và thường được sử dụng ở đầu các bài đăng trên blog, trang và dưới dạng hình ảnh OG chia sẻ trên mạng xã hội

Trong hướng dẫn dành cho nhà phát triển này, chúng tôi sẽ giới thiệu các phương pháp mà bạn có thể sử dụng để lấy và hiển thị hình ảnh nổi bật trong WordPress. Chúng tôi sẽ bao gồm một số đoạn mã PHP mẫu mà bạn có thể triển khai trong plugin tùy chỉnh, nhóm hoặc trình tạo trang hỗ trợ PHP

Hiển thị hình ảnh nổi bật trong WP

Hiển thị hình ảnh nổi bật của bài đăng WordPress được thực hiện dễ dàng với PHP bằng cách sử dụng hàm trợ giúp. get_the_post_thumbnail(). Điều này sẽ nhận ba đối số, ý tưởng của hình ảnh, kích thước của hình ảnh (lấy từ các kích thước phương tiện đã đăng ký trong WordPress hoặc một mảng các số nguyên chiều cao và chiều rộng) và bất kỳ thuộc tính bổ sung nào bạn muốn gán

Mỗi đối số là tùy chọn và việc đặt hàm trần trong một mẫu cho một bài đăng sẽ hiển thị hình ảnh nổi bật trong WordPress

Trả lại URL hình ảnh nổi bật

Nếu bạn đang muốn lấy URL của một hình ảnh nổi bật trong WordPress và không xuất thẻ hình ảnh ngay lập tức, thì đây là cách để làm điều đó

Khi bạn có URL, bạn có thể chèn nó vào thẻ hình ảnh của riêng mình, sử dụng làm nền CSS hoặc làm bất kỳ điều gì khác với nó. Các đối số tương tự được áp dụng, bạn có thể chỉ định ID bài đăng cụ thể và đặt kích thước. Vì điều này chỉ trả về URL hình ảnh nổi bật dưới dạng chuỗi, nên bạn không thể chỉ định thuộc tính

Một điều khác cần lưu ý là nếu bạn đang xây dựng một chủ đề tùy chỉnh, các hình ảnh nổi bật có thể không được bật theo mặc định. Bạn sẽ có thể dễ dàng tìm ra điều này bằng cách vào trình chỉnh sửa Gutenberg. Nếu trường hình ảnh nổi bật hiển thị, bạn đã sẵn sàng. Nếu không, bạn sẽ cần kích hoạt nó

Để kích hoạt tính năng này, hãy bao gồm đoạn mã sau trong Hàm của bạn. tập tin PHP

Điều này thường chỉ xảy ra nếu bạn đang xây dựng tùy chỉnh, vì hầu như mọi chủ đề WordPress đều đã bật tùy chọn này

Chúng tôi hy vọng rằng tài liệu tham khảo này đã giúp bạn lấy và hiển thị hình ảnh nổi bật của bài đăng hoặc trang WordPress cho nhóm tùy chỉnh, mẫu PHP hoặc plugin của bạn. Nếu bạn có thêm bất kỳ câu hỏi nào, vui lòng để lại chúng trong phần bình luận bên dưới

Hình ảnh nổi bật (đôi khi còn được gọi là Hình thu nhỏ bài đăng) là hình ảnh đại diện cho một Bài đăng, Trang hoặc Loại bài đăng tùy chỉnh riêng lẻ. Khi bạn tạo Chủ đề của mình, bạn có thể xuất hình ảnh nổi bật theo một số cách khác nhau, chẳng hạn như trên trang lưu trữ, trong tiêu đề của bạn hoặc phía trên một bài đăng

Chủ đề phải khai báo hỗ trợ chức năng Ảnh nổi bật thì giao diện Ảnh nổi bật mới xuất hiện trên màn hình Chỉnh sửa. Hỗ trợ được khai báo bằng cách đặt phần sau vào các chức năng của chủ đề của bạn. tập tin php

add_theme_support( 'post-thumbnails' );

Ghi chú. Để chỉ bật Hình ảnh nổi bật cho các loại bài đăng cụ thể, hãy xem add_theme_support()

Sau khi bạn thêm hỗ trợ cho Hình ảnh nổi bật, hộp meta Hình ảnh nổi bật sẽ hiển thị trên màn hình Chỉnh sửa của mục nội dung thích hợp. Nếu người dùng không thể nhìn thấy nó, họ có thể kích hoạt nó trong tùy chọn màn hình của họ

Theo mặc định, hộp meta Hình ảnh nổi bật được hiển thị trong thanh bên của màn hình Chỉnh sửa bài đăng và Chỉnh sửa trang

the_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' ); // Medium-large resolution (default 768px x no height limit max)
the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width)

the_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' ); // Medium-large resolution (default 768px x no height limit max)
the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width)

the_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' ); // Medium-large resolution (default 768px x no height limit max)
the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width)

the_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' ); // Medium-large resolution (default 768px x no height limit max)
the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width)

the_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' ); // Medium-large resolution (default 768px x no height limit max)
the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width)

the_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' ); // Medium-large resolution (default 768px x no height limit max)
the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width)

Kích thước hình ảnh mặc định của WordPress là “Hình thu nhỏ”, “Trung bình”, “Lớn” và “Kích thước đầy đủ” (kích thước gốc của hình ảnh bạn đã tải lên). Các kích thước hình ảnh này có thể được định cấu hình trong bảng Phương tiện quản trị WordPress trong> Cài đặt> Phương tiện. Bạn cũng có thể xác định kích thước hình ảnh của riêng mình bằng cách chuyển một mảng có kích thước hình ảnh của bạn

the_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' ); // Medium-large resolution (default 768px x no height limit max)
the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width)

Ngoài việc xác định kích thước hình ảnh riêng lẻ bằng cách sử dụng

bạn có thể tạo kích thước hình ảnh nổi bật tùy chỉnh trong tệp chức năng của chủ đề mà sau đó có thể được gọi trong tệp mẫu của chủ đề

add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height)

Dưới đây là ví dụ về cách tạo kích thước Hình ảnh nổi bật tùy chỉnh trong tệp

the_post_thumbnail( array(  ,  ) );

if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 150, 150, true ); // default Featured Image dimensions (cropped)

    // additional image sizes
    // delete the next line if you do not need additional image sizes
    add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height)
}

Được sử dụng trong các chức năng của Chủ đề hiện tại. tập tin php
Bạn có thể sử dụng

the_post_thumbnail( array(  ,  ) );

set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode

Đặt kích thước Ảnh nổi bật mặc định bằng cách cắt ảnh (từ hai bên hoặc từ trên xuống dưới)

set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, crop mode

Hình ảnh nổi bật được cung cấp một lớp “wp-post-image”. Họ cũng nhận được một lớp tùy thuộc vào kích thước của hình thu nhỏ được hiển thị. Bạn có thể định kiểu đầu ra bằng các bộ chọn CSS này

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

Bạn cũng có thể cung cấp cho Ảnh nổi bật các lớp riêng của chúng bằng cách sử dụng tham số thuộc tính trong the_post_thumbnail()
Hiển thị Ảnh nổi bật với lớp “alignleft”

the_post_thumbnail( 'thumbnail', array( 'class' => 'alignleft' ) );

// check if the post or page has a Featured Image assigned to it.
if ( has_post_thumbnail() ) {
    the_post_thumbnail();
}

the_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' ); // Medium-large resolution (default 768px x no height limit max)
the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width)

Báo động. Không sử dụng hai ví dụ này cùng nhau trong cùng một Chủ đề

ví dụ 1. Để liên kết Hình thu nhỏ của bài đăng với Permalink của bài đăng trong một vòng lặp cụ thể, hãy sử dụng thông tin sau trong các tệp mẫu của Chủ đề của bạn

the_post_thumbnail(); // Without parameter ->; Thumbnail
the_post_thumbnail( 'thumbnail' ); // Thumbnail (default 150px x 150px max)
the_post_thumbnail( 'medium' ); // Medium resolution (default 300px x 300px max)
the_post_thumbnail( 'medium_large' ); // Medium-large resolution (default 768px x no height limit max)
the_post_thumbnail( 'large' ); // Large resolution (default 1024px x 1024px max)
the_post_thumbnail( 'full' ); // Original image resolution (unmodified)
the_post_thumbnail( array( 100, 100 ) ); // Other resolutions (height, width)

ví dụ 2. Để liên kết tất cả các Hình thu nhỏ của Bài đăng trên trang web của bạn với Liên kết cố định của Bài đăng, hãy đặt phần này vào các chức năng của Chủ đề hiện tại. tập tin php