เพิ่มชื่อคลาสเพื่อโพสต์ภาพขนาดย่อ


21

ฉันใช้รูปขนาดย่อโพสต์เพื่อเชื่อมโยงไปยังหน้า

เป็นไปได้หรือไม่ที่จะเพิ่มชื่อคลาสลงในรูปภาพขนาดย่อของโพสต์

<li><a href="<?php the_permalink(); ?>" ><?php the_post_thumbnail(); ?></a></li>

คำตอบ:


42

ใช่ - คุณสามารถผ่านคลาสที่คุณต้องการใช้the_post_thumbnail()เป็นส่วนหนึ่งของอาร์กิวเมนต์ของแอตทริบิวต์ได้<?php the_post_thumbnail('thumbnail', array('class' => 'your-class-name')); ?>

Ref: http://codex.wordpress.org/Function_Reference/the_post_thumbnail#Styling_Post_Thumbnails


5
attachment-$sizeแต่นี้จะลบชั้นเรียน
fuxia

แต่คุณสามารถเพิ่มชั้นเรียน "สิ่งที่แนบมา - $ size my-class-name"
Simon Cooper

@SimonCooper ฉันได้และตอนนี้ชั้นมีสิ่งที่แนบมา - ไม่มีขนาด
Zhianc

นี่เป็นวิธีที่ไม่ดีและไม่ใช่วิธีแก้ปัญหาทั่วไป แม้ไฟล์แนบ hardcoding- $ ขนาดลบการฉีดคลาสในอนาคตที่เป็นไปได้ทั้งหมด
ฟิวชั่น

7

คุณสามารถกรองคลาสเหล่านั้นได้

function alter_attr_wpse_102158($attr) {
  remove_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158');
  $attr['class'] .= ' new-class';
  return $attr;
}
add_filter('wp_get_attachment_image_attributes','alter_attr_wpse_102158'); 

the_post_thumbnailเพิ่มตัวกรองก่อนที่คุณเรียก ตัวกรองจะลบตัวเองโดยอัตโนมัติ

มันเป็นช่วงระยะการเดินทางสั้น ๆ เพื่อไปที่นั่น แต่การthe_post_thumbnailใช้งานget_the_post_thumbnailที่ใช้wp_get_attachment_imageซึ่งใช้ตัวกรองนั้น


ชื่อฟังก์ชัน 'alter_attr_wpse_102158' มีความหมายเฉพาะหรือไม่ฟังก์ชันนี้อาจเรียกว่า myClass - function myClass ($ attr) {
Simon Cooper

ชื่อค่อนข้างเป็นคำอธิบายและคำต่อท้ายอ้างอิงคำถามนี้ มิฉะนั้นไม่มีความหมายเฉพาะ จากในอินสแตนซ์ของคลาส - พูดคลาสปลั๊กอิน - คุณสามารถใช้array($this,'methodname')และคุณสามารถใช้คลาสแบบคงที่พร้อมตัวกรองได้โดยใช้array('ClassName','methodname')
s_ha_dum


1
เหตุใดคุณจึงเพิ่มตัวกรองที่ลบตัวเองออก
AlxVallejo

2
@AlxVallejo: เพื่อที่จะทำงานเพียงครั้งเดียวในสถานการณ์เฉพาะที่คุณต้องการให้มันทำงาน
s_ha_dum

0

แท็กรูปภาพของคุณไม่มีคลาสที่คุณเพิ่งเขียนรหัสนี้ <?php the_post_thumbnail(); ?>แต่แท็กรูปภาพของคุณมีคลาสที่คุณเพิ่งเขียนโค้ดนี้

<?php the_post_thumbnail('thumbnail', array(
'class' => 'class_name'

)); ?>
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.