Projelerinizde resimleri figure ve figcaption ile etiketleyin

Projelerinizde resimleri figure ve figcaption ile etiketleyin
56

HTML5 ile birlikte resimleri, çizimleri arama motorlarına belirtmek için figure ve figcaption etiketleri kullanılmaya başlandı. Figure etiketi img, svg (resim, çizim) gibi elemanları belirtmek için kullanılır, Figcaption ise figure etiketinin başlığını tanımlamamızı sağlar, örnek kullanımları aşağıdaki gibidir.

Basit Kullanım

<figure>
   <img src="/macaque.jpg" alt="Macaque in the trees" />
   <figcaption>A cheeky macaque, Lower Kintaganban River, Borneo. Original by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>

Birden fazla resimle kullanım

<figure>
   <img src="/kookaburra.jpg" alt="Kooaburra" />
   <img src="/pelican.jpg" alt="Pelican stood on the beach" />
   <img src="/lorikeet.jpg" alt="Cheeky looking Rainbow Lorikeet" />
   <figcaption>Australian Birds. From left to right, Kookburra, Pelican and Rainbow Lorikeet. Originals by <a href="http://www.flickr.com/photos/rclark/">Richard Clark</a></figcaption>
</figure>

WordPress’te resimlerinizi html5’e uyumlu hale getirelim

Aşağıdaki kodları functions.php dosyasının en altına ekleyin.

function html5_insert_image($html, $id, $caption, $title, $align, $url) {
 $html5 = "<figure id='post-$id media-$id' class='align-$align'>";
 $html5 .= "<img src='$url' alt='$title' />";
 if ($caption) {
 $html5 .= "<figcaption>$caption</figcaption>";
 }
 $html5 .= "</figure>";
 return $html5;
}
add_filter( 'image_send_to_editor', 'html5_insert_image', 10, 9 );

Bu işlemlenden sonra oluşacak kaynak kod aşağıdaki gibidir.

<figure id='post-18838 media-18838' class='align-none'>
   <img src='//youresite.com/wp-content/uploads/2012/10/image.png' alt='Title of image'>
   <figcaption>Caption for image</figcaption>
</figure>

Yorum Yap