Làm cách nào để lấy hình ảnh nổi bật theo ID trong WordPress?

Hình ảnh nổi bật ( Hình thu nhỏ của bài đăng ) không là gì ngoài hình ảnh đóng vai trò là hình ảnh chính của một trang cụ thể hoặc một bài đăng trên blog. Đó là tất cả

Đôi khi một hình ảnh nổi bật truyền tải loại thông tin có trên trang. Nhưng, đôi khi nó chỉ ở đó vì mục đích thẩm mỹ

Nếu bạn còn nhớ, trong bài học đầu tiên của mô-đun này, mặc dù chúng ta đã thêm nội dung văn bản cho trang Giới thiệu nhưng chúng ta không thêm hình ảnh nổi bật

Hãy làm điều đó ngay bây giờ

Chuyển đến Bảng điều khiển dành cho quản trị viên -> Trang -> Giới thiệu -> Chỉnh sửa màn hình

Ah. đáng tiếc. Bạn để ý phần Document Options bên tay phải màn hình không có phần Featured Image nào cả

Điều này là do “Hình ảnh nổi bật hay còn gọi là Hình thu nhỏ bài đăng” cũng là một tính năng dành riêng cho chủ đề và chúng tôi cần kích hoạt hỗ trợ cho tính năng này

"Chào. Tôi hiểu rằng Hình ảnh nổi bật giống như Hình thu nhỏ của bài đăng. Bạn không cần phải lặp lại nó mọi lúc. ”

Ồ, cảm ơn 🙂

Dù sao, hãy mở tệp 

ID ), 'large' ); ?>
    

7 và đặt đoạn mã sau vào trong hành động 

ID ), 'large' ); ?>
    

8

// Add Featured Image support
add_theme_support( 'post-thumbnails' );

Bây giờ, hãy quay lại Bảng điều khiển dành cho quản trị viên -> Trang -> Giới thiệu -> Chỉnh sửa màn hình

Và Voila. Giờ đây, bạn có thể đặt Hình ảnh nổi bật cho cả trang và bài đăng trên blog của trang web của chúng tôi

không có gì đáng ngạc nhiên. WordPress chỉ hoạt động như mong đợi.  

Bây giờ, hãy tải lên hình ảnh nổi bật cho trang Giới thiệu. Bạn có thể tìm thấy hình ảnh bên trong tệp 

ID ), 'large' ); ?>
    

0 -> Giới thiệu về nội dung trang

Đừng quên bấm vào nút “cập nhật” để lưu thay đổi.  

Cuối cùng, hãy xuất Ảnh nổi bật trên giao diện người dùng

Cách xuất “Hình ảnh nổi bật”

Bạn đã biết cách xuất ảnh đại diện

Nhớ xuất logo trong Header? .  

Và bây giờ, chúng tôi cũng sẽ sử dụng kỹ thuật và chức năng tương tự để xuất hình ảnh nổi bật

Vì vậy, hãy mở tệp 

ID ), 'large' ); ?>
    

2 và đặt đoạn mã sau vào bên trong

thùng đựng hàng.

ID ), 'large' ); ?>
    

Trước tiên, chúng tôi đang kiểm tra xem trang có hình ảnh nổi bật hay không với sự trợ giúp của hàm 

ID ), 'large' ); ?>
    

3. Hàm này sẽ chỉ trả về true nếu chúng ta đã đặt hình ảnh nổi bật cho một trang cụ thể

Trong trường hợp của chúng ta, hàm 

ID ), 'large' ); ?>
    

3 trả về true. Vì vậy, chúng ta đi vào bên trong điều kiện IF

Và bên trong điều kiện  IF, trước tiên, chúng tôi sẽ nhận thông tin chi tiết về Hình ảnh nổi bật như URL, kích thước, v.v. sử dụng lệnh gọi hàm 

ID ), 'large' ); ?>
    

1 

Nó chấp nhận ba tham số. Chúng tôi chỉ quan tâm đến hai người đầu tiên trong số họ

1) Tham số $post_thumbnail_id

________số 8

Chúng tôi đang lấy ID hình thu nhỏ của bài đăng bằng cách sử dụng hàm 

ID ), 'large' ); ?>
    

6. Chức năng này cần ID bài đăng / ID trang làm tham số. Và, bởi vì chúng tôi đang ở trong vòng lặp, chúng tôi có thể truy cập ID bài đăng / ID trang bằng cách sử dụng biến $

ID ), 'large' ); ?>
    

7 toàn cục hoặc hàm 

ID ), 'large' ); ?>
    

8

Tôi chọn biến $

ID ), 'large' ); ?>
    

7 vì nó dễ nhập. P. Vấn đề thuận tiện bạn biết không?

Bạn không nhớ biến $

wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );

0? .  

2) Tham số $image_size

ID ), 'large' ); ?>
    

6

Như tôi đã nói trước đây, WordPress tự động tạo các kích thước hình thu nhỏ khác nhau cho mỗi hình ảnh được tải lên. Hình ảnh nổi bật không phải là một ngoại lệ. Vì vậy, chúng tôi cần chỉ định kích thước hình ảnh mà chúng tôi quan tâm. Theo mặc định, nếu chúng tôi không chỉ định kích thước hình ảnh, WordPress sẽ cung cấp cho chúng tôi dữ liệu hình ảnh cho phiên bản hình thu nhỏ của hình ảnh được tải lên thực tế

Và đây là danh sách đầy đủ các kích thước hình ảnh mặc định mà WordPress tạo ra

1. nhỏ – hình thu nhỏ nhỏ hơn với 100x100px
2. hình thu nhỏ – 150x150px ( Hình vuông )
3. trung bình – 300x300px (chiều rộng hoặc chiều cao tối đa là 300px)
4. lớn – hình thu nhỏ lớn hơn (chiều rộng hoặc chiều cao tối đa là 1024px)
5. đầy đủ – hình ảnh gốc với kích thước thực tế

Khi nói đến Hình ảnh nổi bật, tùy thuộc vào thiết kế trang, đôi khi chúng ta cần hiển thị phiên bản thu nhỏ của hình ảnh và đôi khi là phiên bản đầy đủ.  

Chúng tôi thường hiển thị phiên bản thu nhỏ của hình ảnh bên trong các trang lưu trữ. Bạn sẽ tìm hiểu về các trang lưu trữ khi chúng tôi xây dựng blog

Trong trường hợp của chúng tôi, chúng tôi sẽ sử dụng phiên bản đầy đủ của hình ảnh bằng cách lưu ý đến bố cục đáp ứng cho các thiết bị nhỏ hơn

Giờ đây, có một số cách tốt hơn và kỹ thuật nâng cao để xử lý hình ảnh phản hồi. Vào cuối ngày, tất cả phụ thuộc vào số tiền khách hàng có ngân sách.  

Bất kể ngân sách là bao nhiêu, hãy luôn nén hình ảnh và cố gắng giữ kích thước hình ảnh có chiều rộng và chiều cao dưới 1000px

Sau khi lệnh gọi hàm 

ID ), 'large' ); ?>
    

1 trả về một mảng có tất cả các chi tiết hình ảnh nổi bật như kích thước, URL, v.v. Chúng tôi đang lưu trữ mảng bên trong biến $

wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );

4.  

ID ), 'large' ); ?>
    

9

Mục đầu tiên bên trong mảng $

wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );

5 là URL hình ảnh mà chúng tôi cần.  

Vì vậy, cuối cùng chúng tôi đã xuất URL Hình ảnh nổi bật bên trong thuộc tính nguồn của Thẻ hình ảnh

ID ), 'large' ); ?>
    

1

Đó là tất cả. Đây là kỹ thuật bạn sẽ sử dụng để xuất một hình ảnh nổi bật thuộc về bất kỳ loại bài đăng nào trong WordPress. Rất có thể cho phần còn lại của sự nghiệp WordPress của bạn

Đây là mã cuối cùng cho Vòng lặp của tệp 

ID ), 'large' ); ?>
    

2

ID ), 'large' ); ?>
    

3

Đây là đầu ra trong trình duyệt

Tôi biết, hiện tại, nó không giống như Mô hình.  

Để khắc phục sự cố này, hãy thêm CSS sau vào cuối tệp 

wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large' );

7

ID ), 'large' ); ?>
    

5

Đây là đầu ra cuối cùng của Trang Giới thiệu

“Này, nó hơi khác so với mô hình. Dòng trên cùng in nghiêng phải lớn hơn ở cỡ chữ và ở giữa trang, phải không?”

Chuẩn rồi. Chính xác. Đó là bài tập của bạn.  

Một bài tập đơn giản

Bạn có thể khắc phục sự cố bằng cách sử dụng trường tùy chỉnh dựa trên ACF chẳng hạn

Bạn đã biết cách sử dụng ACF. Bạn phải sử dụng cùng một kỹ thuật mà bạn đã sử dụng cho Trang chủ

Dù sao đi nữa, nếu bây giờ bạn tiếp tục và xem các trang nội bộ khác của trang web, tất cả chúng sẽ trông giống như trang Giới thiệu.  

Đây là sức mạnh của các tệp mẫu mặc định trong WordPress. Từ giờ trở đi, nếu chúng ta không thiết lập mẫu tùy chỉnh cho một trang, thì WordPress sẽ sử dụng tệp 

ID ), 'large' ); ?>
    

2 để hiển thị trang tĩnh