Làm cách nào để thay đổi / sửa đổi the_post_thumbnail (); đầu ra html?

Tôi đang làm việc để xây dựng một chủ đề tùy chỉnh và đã đấu tranh với chủ đề này một chút. Tôi đang cố gắng sửa đổi đầu ra HTML của the_post_thumbnail();chức năng. Tôi cần phải làm điều này bởi vì tôi đang cố gắng hỗ trợ hình ảnh võng mạc trên trang web của mình và thà nướng chức năng vào chủ đề của tôi hơn là tải một plugin trên phụ trợ.

Theo mặc định, the_post_thumbnail();chỉ đơn giản là các cuộc gọi get_the_post_thumbnail();mà tôi tìm thấy ở đây . Suy nghĩ đầu tiên của tôi là cắm vào bộ lọc ' post_thumbnail_html ', nhưng dường như tôi không thể làm cho nó hoạt động được. Vì thế...

Đây là cách tôi gọi hình thu nhỏ bài đăng của mình trong vòng lặp:

<?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'unique-class-here', 'title' => 'unique-title-here')); ?>

Đây là mã tôi cần đầu ra khi tôi gọi the_post_thumbnail();...

<img src="" alt="" data-src="image.png" data-alt="Alt text" class="retina unique-class-here" />

Và đoạn mã dưới đây là những gì tôi hiện có trong tệp tin.php.

<?php
function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $src = wp_get_attachment_image_src(get_post_thumbnail_id(), $size);
    $html = '<img src="" alt="" data-src="' . $src['0'] . '" data-alt="" class="retina" />';
    return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5);
?>

Một vài điều cần lưu ý. Tôi không chắc chắn làm thế nào để chuyển văn bản siêu dữ liệu phù hợp trong thuộc tính 'data-alt'. Ngoài ra, tôi cần có thể vượt qua kích thước post_thumbnail cụ thể mà tôi cần vì tôi sử dụng kích thước post_thumbnail tùy chỉnh trong suốt chủ đề của mình. Cuối cùng, bạn có thể thấy mảng thuộc tính cần phải vượt qua trong các lớp ngoài lớp 'võng mạc' mặc định cũng như bất kỳ thuộc tính nào khác trong mảng đó.

Cảm ơn trước sự giúp đỡ nào. Thực sự không có nhiều thông tin trực tuyến về chủ đề này và tôi cho rằng câu hỏi của tôi đủ khác để đảm bảo một bài đăng bổ sung cho cộng đồng này. Xin vui lòng cho tôi biết nếu bạn có bất kỳ suy nghĩ, giải pháp và / hoặc cần bất kỳ làm rõ.

Ok, vì vậy tôi nghĩ rằng tôi có thể đã đi đến một giải pháp. Nó có vẻ không hay và dễ như tôi mong muốn, nhưng sau đó một lần nữa sửa đổi lớn đối với chức năng Wordpress mặc định đôi khi đòi hỏi các biện pháp quyết liệt. :)

Đây là giải pháp hoạt động của tôi để viết lại đầu ra HTML cho hình thu nhỏ đăng trên toàn trang web của tôi để hoạt động với plugin Retinise.js . Tất nhiên mã này có thể được điều chỉnh cho các thao tác HTML thu nhỏ bài đăng khác.

Trong tệp tin.php của tôi, tôi đã tạo chức năng này:

<?php
function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $id = get_post_thumbnail_id(); // gets the id of the current post_thumbnail (in the loop)
    $src = wp_get_attachment_image_src($id, $size); // gets the image url specific to the passed in size (aka. custom image size)
    $alt = get_the_title($id); // gets the post thumbnail title
    $class = $attr['class']; // gets classes passed to the post thumbnail, defined here for easier function access

    // Check to see if a 'retina' class exists in the array when calling "the_post_thumbnail()", if so output different <img/> html
    if (strpos($class, 'retina') !== false) {
        $html = '<img src="" alt="" data-src="' . $src[0] . '" data-alt="' . $alt . '" class="' . $class . '" />';
    } else {
        $html = '<img src="' . $src[0] . '" alt="' . $alt . '" class="' . $class . '" />';
    }

    return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5);
?>

Sau đó, bất cứ khi nào tôi gọi the_post_thumbnail();trong một vòng lặp WP, tôi sử dụng mã này:

<?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'retina additional-class')); ?>

Mã này sẽ hoạt động (rõ ràng là có sửa đổi nhỏ) nếu bạn đang hoạt động bên ngoài vòng lặp WP. Hy vọng điều này sẽ giúp người khác tiết kiệm thời gian và thất vọng! Có lẽ khi tôi tiếp cận nó, tôi sẽ đăng một sự khởi đầu hoàn chỉnh để kết thúc Hỏi & Đáp về cách tôi hỗ trợ võng mạc cho chủ đề của mình. Không có plugin nào được sử dụng!

Dưới đây là một vài liên kết để chỉ cho ai đó đi đúng hướng nếu quan tâm!

• Thêm kích thước hình ảnh bổ sung vào WP
• Retinise.js
• Tạo hình ảnh kích thước võng mạc bổ sung

giải pháp hackish:

vì wordpress thêm rất nhiều lớp theo mặc định vào <img>, nếu bạn không thay đổi hành vi đó bằng vũ lực, bạn luôn có thể 'tiêm' thứ gì đó thông qua str numplace trước chuỗi class=. Trong mã:

$image = get_the_post_thumbnail( $post->ID, 'medium', array( 'class' => 'myclass' ) );
$moreattrs = 'data-fullimg= "full.jpg"';

$image = str_replace('class=', $moreattrs.' class=', $image );

Sẽ khá an toàn khi cho rằng nếu một cái gì đó bắt đầu bằng "class =", thì đó là những gì bạn muốn. Tất nhiên, nó có thể bị rối tung bởi những tên tập tin kỳ lạ có chứa điều đó class=, nhưng đặc biệt là với wordpress, điều đó rất khó xảy ra.

bạn cũng có thể tìm kiếm <imgvà thay thế nó; Nghĩ về nó, tôi đoán rằng sẽ an toàn hơn một chút.

Có lẽ bạn có thể móc vào wp_get_attachment_image_attributes:

function my_custom_image_attributes( $attr, $attachment ) {
  remove_filter('wp_get_attachment_image_attributes','my_custom_image_attributes');
  $image = wp_get_attachment_image_src( $attachment->ID, 'full' );
  $attr['data-src'] = $image[0];
  $attr['data-alt'] = $attachment->post_title;
  $attr['class'] .= ' retina';
  return $attr;
}
add_filter('wp_get_attachment_image_attributes','my_custom_image_attributes');

Điều này cần phải được kiểm tra và có thể sửa đổi, tôi đã tìm thấy ý tưởng ở đây Thêm tên lớp để đăng hình thu nhỏ (kiểm tra vwp_get_attachment_imagemã nguồn ở cuối).

Bạn cần thêm hook ngay trước khi gọi the_post_thumbnail()trong chủ đề của bạn.

Ngoài ra, tôi không biết bạn cần sử dụng cái gì data-alt, theo ý kiến ​​của tôi, bạn có thể sử dụng một trường attachementđi qua với bộ lọc (nó có thể là một trường tùy chỉnh).