WordPress’e Özel Alan İle Thumb Eklemek

WordPress’e Özel Alan İle Thumb Eklemek

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 :)

11 Yorum

  1. Sinem 21 Ağustos 2011
  2. Aycan Doğanlar 21 Ağustos 2011
  3. 2part.org 22 Ağustos 2011
  4. Tamer SAY 24 Ağustos 2011
  5. Görkem KARA 06 Eylül 2011
  6. Hihi 13 Eylül 2011
  7. Mustafa Bedir 18 Eylül 2011
  8. Sosyal Medya 20 Eylül 2011
  9. Nurettin Tekin 13 Aralık 2011
  10. suit 19 Nisan 2012
  11. Sesli 14 Kasım 2012

Yorum Yaz