Eklediğiniz resimleri Otomatik Responsive yapma!

Gelişen teknolojilerin getirdiği yenilikleri takip etmek adına sizde eski arayüze sahip sitelerinizde resimlerinizi responsive olarak ziyaretçilerinize sunmak ister misiniz? Bu düzenleme daha önce eklediğiniz resimleri için malesef yeterli olmamaktadır. Ancak düzenlemeden sonra ekleyeceğiniz içeriklerde resimleriniz mobil tarayıcılarda daha uyumlu gözükecektir. Öncelike yine düzenleme yapacağınız dosyaları yedeklemenizi öneriyoruz. Temanızın functions.php ve style.css dosyalarını yedekledikten sonra düzenlemeye geçebiliriz.

Öncelike temamızın functions.php dosyasuna aşağıda ki kodu ekleyerek kendimize bir kısa kod oluşturuyoruz.

function blogizma_responsive_images($atts, $content = null) {
     return '<div class="blogizma-responsive-image">' . $content .'</div>';
}
add_shortcode('imageresponsive', 'blogizma_responsive_images');

Daha sonra temamızın style.css dosyasını açarak aşağıda ki css kodları ile tarayıcı genişliği tanımladıktan sonra resim boyutunu ve yüksekliğini belirtiyoruz.

[css] @media only screen and (max-width:767px) {
.blogizma-responsive-image {
width:100%;
height:auto;
}
}
[/css]

Gerekli düzenlemeleri yaptıktan sonra yeni bir içerik ekleyerek düzenlememizi test edelim. Test aşamasında içerik alanında eklediğimiz görselin HTML kodunu oluşturduğumuz kısa kodun içine yazmamız gerek. Aşağıda ki örnek kod sayesinde içeriklerinize eklediğiniz resimleri responsive olacaktır. Dilerseniz bunu yazı editöründe buton halinede getirebilirsiniz. Bu konuyuda bir başka WordPress geliştirme konumuzda işleyeceğiz.

[sourcecode][imageresponsive]<img src="image_url" alt="alt" title="title" />[/imageresponsive][/sourcecode]

İyi bloglar.