Anasayfa » Wordpress Geliştirme » Eklediğiniz resimleri Otomatik Responsive yapma!

Eklediğiniz resimleri Otomatik Responsive yapma!

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.

İLGİNİZİ ÇEKEBİLİR  Broken Link Checker : Kırık Bağlantı bulucu Eklentisi

Ö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.

İLGİNİZİ ÇEKEBİLİR  Güvenlik için indirdiğiniz temalara dikkat edin!

[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.

İLGİNİZİ ÇEKEBİLİR  Güncelleme uyarılarını kapatmak

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

İyi bloglar.

OKUYUCU YORUMLARI

DUYURU
Yeni başlayan ve WordPress sitelerini geliştirmek isteyen kullanıcıları bir araya getiren WordPress Destek sitemiz açıldı!
WORDPRESS DERSLERİ
CSS DERSLERİ
SON YORUMLAR
  • BAĞLANTILAR
    SON DAKİKA HABERLER