Hình ảnh nổi bật mặc định cho các bài đăng & sản phẩm

Tìm hiểu cách hiển thị hình ảnh nổi bật mặc định cho các bài đăng, sản phẩm, trang WordPress và bất kỳ nội dung nào khác không có bộ hình ảnh nổi bật. Mặc dù bạn có thể làm điều này với một plugin, chúng tôi sẽ chỉ thêm một vài đoạn mã đơn giản vào chủ đề của chúng tôi. Điều này giúp chúng tôi giảm số lượng plugin mà chúng tôi đang dựa vào và nó giúp giảm số lượng lệnh gọi cơ sở dữ liệu - điều này giúp trang web của chúng tôi hoạt động tốt và nhanh chóng. Đây là một ví dụ dựa trên hướng dẫn về Plugin WordPress Post Grid của chúng tôi.

Để làm theo hướng dẫn này, bạn cần sử dụng một chủ đề con tùy chỉnh để có thể chỉnh sửa tệp functions.php của mình. Bạn cũng sẽ muốn một hình ảnh sử dụng làm hình ảnh dự phòng / mặc định của mình. Chúng tôi sẽ giữ mã của chúng tôi trong một tệp PHP riêng biệt để chúng tôi có thể sử dụng nó trong các dự án khác và giữ cho tệp functions.php của chúng tôi sạch sẽ.

Tìm bộ lọc WordPress phù hợp

Nếu bạn không quan tâm đến các chi tiết kỹ thuật về cách chúng tôi tìm ra bộ lọc nào cần được nối, chỉ cần chuyển tới mã và bắt đầu sao chép và dán.

Hàm get_post_thumbnail_id () là một hàm cốt lõi của WordPress trả về ID phương tiện cho một bài đăng, trang, sản phẩm, bất cứ thứ gì. Nếu bạn xem tài liệu về hàm này, bạn sẽ thấy rằng nó sử dụng hàm get_most_meta (), sau đó gọi hàm get_metadata (). Vì vậy, khi WordPress cố gắng hiển thị hình ảnh nổi bật của bài đăng (kích thước đầy đủ hoặc hình thu nhỏ), nó sẽ gọi một loạt các hàm trong một chuỗi, cuối cùng gọi get_metadata_raw (). Nếu một bài đăng không có hình thu nhỏ, nó sẽ tiếp tục gọi get_metadata_default (), kiểm tra xem có ID hình ảnh dự phòng hay không.

Vì vậy… những gì chúng ta cần làm là hook một cái gì đó bên trong get_metadata_default () để chúng ta có thể “đưa” phản hồi của chính mình vào nếu chúng ta nghĩ rằng chúng ta có thể hỗ trợ một ID hình ảnh mặc định. Tất cả điều này đều thuộc về một bộ lọc WordPress duy nhất. Nhưng có một điều khác mà chúng ta cần lưu ý ở đây…

Thông thường, trước khi một chủ đề hoặc mẫu gọi một hàm như the_post_thumbnail (), nó sẽ kiểm tra xem liệu có thực sự có hình thu nhỏ ở vị trí đầu tiên hay không, bằng cách gọi has_post_thumbnail (), vì vậy nếu chúng tôi tìm thấy một bài đăng không có hình thu nhỏ , nhưng chúng tôi có một ID hình ảnh nổi bật mặc định, chúng tôi phải đảm bảo has_post_thumbnail () trả về true.

Vì vậy, bây giờ chúng tôi biết chúng tôi phải thêm hai trình xử lý bộ lọc…

Hãy viết một số mã

Trong thư mục của chủ đề con tùy chỉnh của bạn, hãy tạo một tệp mới có tên là functions-thiếu-tính năng-image.php và dán phần sau vào đó.
/**
 * For posts/pages/products, enable fallback default image IDs, specified by
 * post_type.
 *
 * Just include this file from your theme's functions.php file, and then
 * define HW_MISSING_FEATURED_IMAGE_IDS in your functions.php like this:
 *
 * define('HW_MISSING_FEATURED_IMAGE_IDS', array(
 *    'post' => 123,
 *    'page' => 456,
 *    'product' => 789,
 *    'my_custom_post_Type' => 361,
 * ));
 */
// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
/**
 * Always return true for has_post_thumbnail() if the post-type has a fallback
 * default image ID.
 */
function custom_has_post_thumbnail($has_thumbnail, $post, $thumbnail_id) {
   if (is_admin() || defined('DOING_CRON')) {
      // Only filter $has_thumbnail if we're in the front-end.
   } elseif ($has_thumbnail) {
      // We already know this post has a thumbnail.
   } elseif (!defined('HW_MISSING_FEATURED_IMAGE_IDS')) {
      // We don't have any default emdia IDs.
   } elseif (empty($post_type = get_post_type($post))) {
      // This post doesn't have a post-type?
   } elseif (!array_key_exists($post_type, HW_MISSING_FEATURED_IMAGE_IDS)) {
      // We don't have a default medai ID for this post type.
   } else {
      $has_thumbnail = true;
   }
   return $has_thumbnail;
}
add_filter('has_post_thumbnail', 'custom_has_post_thumbnail', 10, 3);
/**
 * If our post's post_type has a default image image in
 * HW_MISSING_FEATURED_IMAGE_IDS then return it now.
 */
function custom_default_post_metadata($value, $object_id, $meta_key, $single, $meta_type) {
   if (is_admin() || defined('DOING_CRON')) {
      // Only return a fallback thumbnail ID if we're in the front-end.
   } elseif ($meta_key != '_thumbnail_id') {
      // We're not looking for a featured image.
   } elseif (!defined('HW_MISSING_FEATURED_IMAGE_IDS')) {
      // We don't have any default emdia IDs.
   } elseif (empty($post_type = get_post_type($object_id))) {
      // This post doesn't have a post-type?
   } elseif (!array_key_exists($post_type, HW_MISSING_FEATURED_IMAGE_IDS)) {
      // We don't have a default medai ID for this post type.
   } else {
      $value = HW_MISSING_FEATURED_IMAGE_IDS[$post_type];
   }
   return $value;
}
add_filter("default_post_metadata", 'custom_default_post_metadata', 10, 5);
Bạn có thể thấy 2 trình xử lý bộ lọc của chúng tôi ở đây khá nhỏ - chúng chỉ làm một việc đơn giản và chúng cần thực thi rất nhanh, vì vậy chúng tôi không muốn có nhiều mã trong đó.

Bây giờ chúng tôi chỉ cần tham chiếu tệp mới này từ tệp functions.php của chủ đề của bạn và chỉ định ID phương tiện, như sau:

// Media/Image IDs for when a post_type doesn't have a featured image.
define('HW_MISSING_FEATURED_IMAGE_IDS', array(
   'post' => 2113,  // Picture of a question mark in the media library.
));
require_once 'functions-missing-featured-image.php';

Trong ví dụ này, chúng tôi chỉ xác định hình ảnh cho các Bài đăng không có hình ảnh nổi bật. Nếu bạn đang sử dụng WooCommerce thì bạn chỉ có thể mở rộng mã trên như thế này:

// Media/Image IDs for when a post_type doesn't have a featured image.
define('HW_MISSING_FEATURED_IMAGE_IDS', array(
   'post' => 2113,  // Picture of a question mark in the media library.
   'product' => 2114,  // Picture of a missing product.
));
require_once 'functions-missing-featured-image.php';

Đó là nó. Hình ảnh mặc định dự phòng của bạn bây giờ sẽ được hiển thị trên các trang lưu trữ bài đăng và các trang bài đăng đơn lẻ, tất cả mà không cần phải cài đặt thêm một plugin khác. Tôi nghĩ đó là một sự cải tiến nhỏ cho bất kỳ trang web WordPress nào.

Chúc bạn viết mã vui vẻ!