Làm thế nào để thêm một chú thích hình ảnh nổi bật trong Wordpress

Question

Tôi hy vọng một người nào đó có thể giúp tôi với một vấn đề. Tôi đang xây dựng một trang web tin tức cho một người bạn của tôi. Trang web đang bắt đầu đến với nhau, nhưng tôi không thể tìm hiểu cách thêm chú thích vào hình ảnh nổi bật. Tôi đã tìm kiếm trên tất cả các trang web ngày hôm nay, có rất nhiều cách để làm điều đó bằng cách thêm mã vào tờ php, nhưng tôi không chắc chắn những gì tôi đang làm.

Tôi đã thêm mã như vậy vào mã functions.php, nhưng mọi thứ đều ghép hình.

Tôi đang giữ ngón tay của mình vượt qua, ai đó sẽ có thể giúp tôi bằng cách nhập cho tôi thông qua những việc cần làm.

Cảm ơn bạn trước sự giúp đỡ của bạn.

Kind coi

John

Answer 1

Trước tiên, bạn sẽ cần phải thả các đoạn mã sau vào file functions.php của bạn:

function the_post_thumbnail_caption() { 
    global $post; 

    $thumbnail_id = get_post_thumbnail_id($post->ID); 
    $thumbnail_image = get_posts(array('p' => $thumbnail_id, 'post_type' => 'attachment')); 

    if ($thumbnail_image && isset($thumbnail_image[0])) { 
    echo '<span>'.$thumbnail_image[0]->post_excerpt.'</span>'; 
    } 
} 

Dán nó ngay trước thẻ đóng PHP trong đó tệp, nếu không có thẻ PHP đóng thì hãy đảm bảo không có dòng trống bên dưới mã bạn dán vì điều đó có thể gây ra sự cố.

Sau đó, nơi bạn muốn chú thích sẽ được hiển thị, bạn sẽ cần phải gọi nó với điều này:

<?php the_post_thumbnail_caption(); ?>

Nếu bạn không chắc chắn nơi để đặt cuộc gọi trong file mẫu của bạn , bạn sẽ cần phải tìm nơi <?php the_post_thumbnail(); ?> đang được gọi. Chỉ cần tìm dòng đó trong tệp mẫu của bạn và đặt lệnh gọi hàm gần nó, nơi bạn muốn chú thích hiển thị ở đó. Hàm kết thúc tự động chú thích trong thẻ span để bạn có thể nhắm mục tiêu nó bằng CSS, nhưng bạn cũng có thể bọc cuộc gọi hàm trong bất kỳ thẻ nào bạn muốn.

Vì vậy, ví dụ, nếu tập tin mẫu của bạn đang kêu gọi các hình ảnh đặc trưng với điều này hoặc cái gì đó rất tương tự:

<?php 
    if (has_post_thumbnail()) { 
     the_post_thumbnail(); 
} ?> 

Bạn muốn thêm các cuộc gọi chú thích để nó như thế này:

<?php 
    if (has_post_thumbnail()) { 
     the_post_thumbnail(); 
} ?> 
<?php the_post_thumbnail_caption(); ?> 

Hãy cho tôi biết nếu bạn cần làm rõ thêm.

Answer 2

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('large');   // Large resolution (default 640px x 640px max) 
the_post_thumbnail('full');   // Original image resolution (unmodified) 

the_post_thumbnail(array(100,100)); // Other resolutions 

Answer 3

Tôi biết đây là câu hỏi cũ, nhưng tôi muốn cung cấp một giải pháp khác mà người khác thích, nếu bạn muốn xử lý dữ liệu đã có sẵn (ít cơ sở dữ liệu hơn) trong khi sử dụng các trường đã có sẵn trong WordPress .

Vì đầu ra của get_the_post_thumbnail() trả về toàn bộ thẻ img dưới dạng chuỗi có thẻ alt được điền sẵn từ trường chú thích, bạn có thể chỉ cần trích xuất thẻ alt của thẻ hình ảnh bằng cách sử dụng trình phân tích cú pháp xml hoặc regex.

Tôi đã làm điều này:

<?php 
    if ($featured = get_the_post_thumbnail(get_the_ID())): 

     echo $featured; 
     preg_match('/alt="(.*)"/i', $featured, $caption); 

     if ($caption) { 
      echo wpautop(array_pop($caption)); 
     } 
    endif; 
    ?> 

Nếu bạn muốn nó trong một chức năng giống như câu trả lời ban đầu được chấp nhận, bạn vượt qua các thẻ img trực tiếp đến chức năng của bạn:

function get_the_post_thumbnail_caption($img_tag) { 
     preg_match('/alt="(.*)"/i', $img_tag, $caption); 
     return array_pop($caption); 
    } 

Và trong mẫu:

$img = get_the_post_thumbnail(get_the_ID()); // or any id 
    echo wpautop(get_the_post_thumbnail_caption($img)); 

Lưu ý rằng nếu bạn điền trường 'văn bản thay thế', trường sẽ ghi đè dữ liệu trường chú thích khi xuất ra thẻ img. Bạn có thể ghi đè hành vi đó bằng các bộ lọc nếu cần.