Murat Çeşmecioğlu

Kişisel Web Sitesi

WordPress Caption Geliştirmesi

Uzun süredir iş-güç derken yazamadığımın farkındayım. Bu yüzden sitenin kodlarını tekrar elden geçirip en azından biraz ilgi göstermeye başlarım diye düşündüm. Bu arada sitenin teması olan Simple5’i bir gece yarısı tekrar elden geçirip Simple 5.1’i hazırlamış bulunuyorum. Daha esnek bir tasarıma sahip, gereksiz javascript, css ve resimlerden arındırılmış bir hale geldi.

Bu süreçte karşılaştığım sorunlardan birisi ise responsive tasarımda yazılara eklediğim resimlerin tarayıcı genişliğine göre büyüyüp küçülmemesi oldu. Bunun sebebi WordPress’in resim eklerken, resmi çevreleyen wp-caption class’ına sahip div’e style etiketiyle css kodu ile genişlik belirtmesiydi. Benim ihtiyacım olan width yerine max-width olmasıydı. Bunun için hemen temanın kodlarına aşağıda paylaştığım kodu ekledim. Böylece WordPress’in caption shortcode’unu yöneten fonksiyonunu kendi isteğime göre şekillendirdim.

function sp5_img_caption_shortcode_filter($val, $attr, $content = null)
 {
 extract(shortcode_atts(array(
 'id' => '',
 'align' => 'aligncenter',
 'width' => '',
 'caption' => '',
 'class' => ''
 ) , $attr));
 if (1 > (int)$width || empty($caption)) {
 return $val;
 }
 if ($id) {
 $id = esc_attr($id);
 }
 $siteclass = trim('wp-caption ' . $align . ' ' . $class);
 return '<div id="' . esc_attr($id) . '" class="' . esc_attr($siteclass) . '"  style="max-width: ' . (0 + (int)$width) . 'px">' . do_shortcode($content) . '<p class="wp-caption-text">' . $caption . '</p></div>';
 }
 add_filter('img_caption_shortcode', 'sp5_img_caption_shortcode_filter', 10, 3);

Yorum Yazın

İsim (gerekli)

E-Posta (gerekli)

İnternet sitesi