Chức năng hình ảnh nổi bật của WordPress

Trước đây được gọi là “Hình thu nhỏ của bài đăng” trước phiên bản 3.0, chức năng Hình ảnh nổi bật của WordPress cho phép bạn chọn hình ảnh đại diện cho Bài đăng, Trang hoặc Loại bài đăng tùy chỉnh. Nói một cách đơn giản, đó là mục nhập của bạn - bất cứ điều gì có thể là (trang, bài đăng, loại bài đăng tùy chỉnh, v.v.) - đại sứ. Người đại diện của bạn.Codex WordPress gợi ý rằng chức năng khá hữu ích của nó đối với các chủ đề “kiểu tạp chí” nhưng tính năng này là vô giá đối với tất cả các loại chủ đề. Nó hiển thị ở đâu và như thế nào trong một chủ đề là đặc quyền của bạn với tư cách là người thiết kế và hy vọng sẽ là nguồn cung cấp cho các giải pháp sáng tạo.

Bật tính năng

Trước khi có thể sử dụng tính năng này, bạn cần phải khai báo rõ ràng chức năng trong chủ đề của mình. Để làm như vậy, hãy mở crack và bao gồm những thứ sau:functions.php
add_theme_support( 'post-thumbnails' );
Sau khi thực hiện điều đó, trong màn hình Chỉnh sửa cho bài đăng, trang và các loại bài đăng tùy chỉnh của bạn, bây giờ bạn sẽ thấy giao diện để chọn Hình ảnh nổi bật.

Sử dụng chức năng Hình ảnh Nổi bật

Để chỉ hiển thị Hình ảnh nổi bật trên giao diện người dùng, ví dụ như trong danh sách chỉ mục của các bài đăng trên blog, chúng tôi chỉ cần đưa hình ảnh này vào mẫu có liên quan.

Giả sử rằng trong ngữ cảnh của chủ đề của chúng tôi, chúng tôi hiển thị hình ảnh nổi bật ngay phía trên tiêu đề bài đăng. Sau khi đã chia vòng lặp của chúng tôi thành nhiều phần, chúng tôi mở ví dụ: mẫu và chèn mã sau:content.php

if ( has_post_thumbnail() ) {
  the_post_thumbnail();
}

Đầu tiên, chúng tôi kiểm tra xem bài đăng đã cho có chỉ định hình thu nhỏ hay không và nếu có, chúng tôi tiếp tục và hiển thị nó.

Liên kết nó lại

Thông thường, bạn sẽ muốn hình ảnh nổi bật liên kết đến chế độ xem bài đăng duy nhất. Để đạt được điều đó, bạn sẽ cần phải bọc một phần tử liên kết.the_post_thumbnail()

Một cách tiếp cận dễ dàng là thay thế đoạn mã trên bằng đoạn mã sau:

<?php if ( has_post_thumbnail()) : ?>
  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
    <?php the_post_thumbnail(); ?>
  </a>
<?php endif; ?>

Chúng tôi vẫn đang kiểm tra để đảm bảo hình ảnh nổi bật tồn tại và sau đó chúng tôi sẽ gói nó trong một liên kết.

Có một chức năng cho điều đó

Với số lần lệnh gọi cho một hình ảnh nổi bật sẽ được sử dụng, sẽ không tốt nếu chúng ta có thể KHÔ mã trong mẫu một chút phải không? May mắn thay, WordPress cung cấp cho chúng tôi ít nhất 2 phương pháp để xử lý điều này.

Chúng tôi sẽ làm theo cách tiếp cận trực quan và phổ biến để xử lý các hình ảnh nổi bật. tức là trên trang chỉ mục, chúng tôi sẽ gói hình ảnh nổi bật trong một liên kết trong khi gói hình ảnh tương tự trong một phần tử hình trong chế độ xem bài đăng duy nhất.

Crack mở và tạo một chức năng kiểm tra xem chúng ta có đang ở trong một chế độ xem hay không.functions.php

function butter_featured_image() {
  if ( is_singular() ) : ?>
    
    // wrap the_post_thumbnail() in a figure element
    <figure class="featured-image">
      <?php the_post_thumbnail(); ?>
    </figure>
  
  <?php else : ?>
    
    // wrap the_post_thumbnail() in a link
    <a class="featured-image" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
      <?php the_post_thumbnail(); ?>
    </a>

  <?php endif;
}

Với điều đó, tất cả những gì chúng ta phải làm bây giờ trong các mẫu là gọi hàm của chúng ta . Vì vậy, ví dụ, chúng tôi sẽ crack mở và nơi chúng tôi có những thứ sau:butter_featured_image()content.php

<?php if ( has_post_thumbnail()) : ?>
  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
    <?php the_post_thumbnail(); ?>
  </a>
<?php endif; ?>

chỉ cần thay thế mã đó bằng một lệnh gọi đến hàm mới của chúng tôi như sau:

<?php butter_featured_image(); ?>

Chức năng này hiện đảm nhận việc kiểm tra có điều kiện xem chúng ta đang ở chế độ xem nào (chỉ mục hoặc đơn) và xuất hình ảnh nổi bật trong phần đánh dấu có liên quan.