Merhaba sayın sorbize okuyucuları :) Bu yazımda sizlere yazıların alt alta düzgün ve okunaklı durmasını sağlayan, tasarım için önemli küçük resimlerden bahsedeceğim. Çoğu WordPress temasında “resim” özel alanıyla ve resmin URL adresini girerek küçük resim ekleme özelliği olur. Fakat thumb özelliği olmayanlar “nasıl yapacağım?” diye düşünmesin diye bu yazıyı hazırlamaya karar verdim. Bazen de thumb eklemediğimizde temada hata küçük bir hata ortaya çıakbiliyor. Bunu da çözeceğiz.

Not: Temanızda thumb kodu varsa ve thumb eklemediğinizde IE tarayıcısında resimin yüklenemediğine dair bir hata ikonu görüyorsanız. Aşağıdaki anlatım ile bu sorunu da çözebilirsiniz.

PHP:

WordPress temanızda küçük resim görünmesini istediğiniz tüm dosyalara (index.php, single.php)

<?php the_content();?>

kodundan önce aşağıdaki kodu ekleyin.

<?php $values = get_post_custom_values("resim"); ?>
 <?php if($values==""){?><? }else{ ?> <div class="kucuk-resim"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php $values = get_post_custom_values("resim"); echo $values[0]; ?>" alt="<?php the_title(); ?> /></a></div><?php } ?>

yukarıdaki kod sayesinde eğer küçük resim eklemezsek hiçbir şey görünmeyecek. Eğer siz, thumb eklemediğiniz yazılarınızda “resim yok” gibi bir resim olsun isterseniz aşağıdaki kodu ekleyin:

<?php $values = get_post_custom_values("resim"); ?>
 <?php if($values==""){?><div><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="KLASİK-RESİM-URL-ADRESİ" alt="<?php the_title(); ?> /></a></div><? }else{ ?> <div class="kucuk-resim"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><img src="<?php $values = get_post_custom_values("resim"); echo $values[0]; ?>" alt="<?php the_title(); ?> /></a></div><?php } ?>

KLASİK-RESİM-URL-ADRESİ yazan bölüme resim eklemediğinizde çıkmasını istediğiniz küçük resminizin URL adresini girin.

CSS:

style.css adlı dosyayı açıp aşağıdaki kodu en üst veya en alta ekleyin.

.kucuk-resim {
 float: left;
 padding: 5px;
 border: 1px solid #EAEAEAE;
 border-radius: 5px;
 margin-right: 5px;
 }
 .kucuk-resim a{
 float: left;
 border: 1px solid #EAEAEA;
 padding: 5px;
 }

Kullanımı:

Yeni Yazı panelinden özel alanlar bölümünü bulun ve küçük kutucuğa resim, yanındaki kutucuğa resimin URL adresini girip ekleyin.

Hatanın Önizlemesi:

Eğer kodun “peki ya işimiz acele olursa veya canımız istemez de resim eklemezsek?” bölümünü yazmasaydık aşağıdaki gibi bir görüntü çıkacaktı:

Ama bu yazıdaki kodumuz sayesinde gayet düzgün ve okunaklı görünecek :) İyi çalışmalar diliyorum.

Görüşmek üzere :)