WordPress ile Otomatik Resim Küçültme - WordPress Türkiye İletişim

WordPress Css ile Resim Küçültme

Bugün R10′da gördüğüm bir konu ilgimi çekti… Tam eklentisini yazacakken, aklıma güzel bir fikir geldi :) Neden eklenti kullanıp, boÅŸ yere iÅŸlemciyi yoruyoruz ki ? :|

Aslında olay tam olarak ÅŸu: kopyala yapıştır yapılan resimlerin boyutu büyük geliyor ve siz bunu ayarlayamıyorsunuz… Bunun sonucunda resimler sidebar kısmına taşıyor ve kötü bir görüntü meydana geliyor…

1. Yöntem Anlatımı

Åžimdi eklentisiz çözüm yöntemini takibin kolay olması açısından WordPress Default tema üzerinden anlatacağım…

1. Öncelikle “wp-content/themes/default” dizinine giriyoruz ve index.php dosyamızı bir metin editörü yardımıyla açıyoruz. (Ben Dreameaver kullandım)

2. index.php içerisinde:

<?php the_content('Yazının kalanını okuyun &raquo;'); ?>

araması yapıyoruz. Eğer farklı bir tema kullanıyorsanız direk olarak; the_content için arama yapın. Hala bulamamışsanız, the_excerpt için yeniden arayın.

WordPress Default Tema Index Dosyası

WordPress Default Tema Index Dosyası

3. Aradığımız satırı bulduğumuzu farzediyoruz. Özellikle şu alanı işaretledim:

<div class="entry">
<?php the_content('Yazının kalanını okuyun &amp;raquo;'); ?>
</div>

Bunun sebebi ise üstteki div katmanının işimize en çok yarayacak şey olması :)
Farklı temalar kullanan arkadaşların ise, 2. adımda aradığımız satırı bulduktan sonra; o satırın üstündeki ilk div katmanını bulmaları gerekiyor.
4. Katmanı bulduktan sonra hemen id veya class tanımlanmış mı diye bakıyoruz. ÖrneÄŸimizde class=”entry” olarak belirlenmiÅŸ. Tanımlı class bulamayanlar, yani sadece <div> ile karşılaÅŸanlar, o katmanı örneÄŸimizdeki gibi düzenlesin.
5. Katmanımızı da bulduktan sonra, index.php içerisindeki işimiz bitiyor ve bu dosyayı kapatıyor.
6. Şimdi yine default tema içerisindeki (yada sizin kullandığınız tema içerisindeki) style.css dosyasını bir metin editörü yardımıyla açıyoruz.
7. Dosyanın en alt satırına iniyoruz. Ve bir iki satır boşluk bırakıyoruz. Buraya bir kod ekleyeceğiz ama öncelikle belirtmem gereken yerler var.

  • AÅŸağıda yazacağım kodda, “.entry img {” olarak belirlenmiÅŸ alana siz, 4. adımda bulduÄŸunuz katman ismini yazacaksınız. Yani şöyle: “.katmanismi img {”
  • uzunluk ve yükseklik diye belirttiÄŸim yerlere sadece sayı yazacaksınız.

8. Kodumuzu eklemeye başlayalım. Ekleyeceğimiz kod:

.katmanismi img {
max-width: <strong>uzunluk</strong>px;
width: expression(this.width > <strong>uzunluk</strong> ? <strong>uzunluk</strong>: true);
max-height: <strong>yükseklik</strong>px;
height: expression(this.height > <strong>yükseklik</strong> ? <strong>yükseklik</strong>: true);
}

Örneğin ben resimin olması gereken maksimum uzunluğu 500px, maksimum yüksekliği ise 300px olsun istiyorum. Yani default temada bu kod şu şekilde olacak:

.entry img {
max-width: 500px;
width: expression(this.width > 500 ? 500: true);
max-height:300px;
height: expression(this.height > 500 ? 500: true);
}

2. Bir örnek ile inceleyelim

Şimdi sitemizde deneyeceğiz, bu yöntemi deneyeceğiz.
Eklediğimiz Küçültülecek Resim
Evet resmimizin boyutu bizim istediğimiz (500px) boyuttan büyük. Bakın şimdi aşağıdaki resime :)
wallpaper
Şimdi de sitedeki haline bakalım:
032
Notlar: Resimlerin burada boyutu küçük görünebilir ancak, default temada denenmiÅŸtir. Bu tema üzerinde css dosyalarıyla oynamadığım için, resimler küçültülmüştür… ;)

Benzer Yazilar


“WordPress Css ile Resim Küçültme” için 12 Yorum var

  1. XuBi diyor ki:

    Çok TEÅžEKKÜRLER… Denedim ve Oldu…

  2. wpfan diyor ki:

    bu şekilde gönderilen postlar küçültülüp mü yerleştiriliyor yoksa sayfadamı küçük gözüküyor? serverdaki dosyalar orjinal boyutundamı?
    sormamın iki nedeni var birisi sayfanın içinde küçültmek bozulmalara neden olabiliyor ikincisi servera yük biniyormu?

  3. LeYFeaR diyor ki:

    şimdi senin sitendeki bu sistemmi semih abi eğer öleyse çok işime yarıyacak

  4. Saglik diyor ki:

    Gercekten cok ihtiyacim vardi..

    Paylasim icin tesekkurler

  5. harew diyor ki:

    eywallah iÅŸe yaradı tÅŸk…

  6. Semih diyor ki:

    Benim sitede sistem yok :) Ben manuel küçültme yapıyorum :) Genelde temaların yazı kısmını hep 600px bıraktığımdan, her tema için düzenlemem gerekmiyor…

  7. Semih diyor ki:

    Sayfada küçük gözüküyor. Ne yazık ki bozulmalara neden olabiliyor dediğiniz gibi :(
    Sunucuya yük bindirmez, alt tarafı css :)

Kendimi Şanslı Hissediyorum

Şansını denemek istiyorsan, yukarıya tıkla :)

Duyuru

WordPress'inizi yeni özellikler için ve olası güvenlik açıklarına karşın 3.0 sürüme yükseltmeniz tavsiye edilir.

Yükleme Sayfası

Bağış

Bağlantılar

  • Lida turunç filizleri ile üretilmektedir
  • Biber Hapı Meksika Biber Kapsülü.