WordPress’e Özel Alan İle Thumb Eklemek

Tarih: 18 Ağustos 2011   Yazar: editor  |  3.460 kez okundu
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 :)


    Bu yazı için 8 yorum yapılmış.
  1. Sinem dedi ki:

    Yazı içine nasıl yapacağız bunu

  2. Aycan Doğanlar dedi ki:

    bahsettiğim PHP kodları single.php dosyasına eklemelisiniz :)

  3. 2part.org dedi ki:

    Bu kadar açıklayıcı anlatım yaptığınız için teşekkürler. Yararlı bir döküman olmuş ;)

  4. Tamer SAY dedi ki:

    Teşekkürler.Bazı temalarda özellik olarak sunuluyor galiba bu…

  5. Görkem KARA dedi ki:

    Yararlı bir yazı olmuş. Kendi temamda da kullanıyorum bunu.

  6. Hihi dedi ki:

    Temadaki Thumb kaldırmak istiyom. o zaman ne yapmak lazım :(

  7. Mustafa Bedir dedi ki:

    bilgilendirme için teşekkür ederim

  8. Sosyal Medya dedi ki:

    @hihi ; yukarıdaki kodlar veya benzeri kodları silmeyi dene :).


Yorum yazmak istermisiniz?

Sorbize RSS Beslemesi    Sorbize E-Posta Aboneliği    Sorbize'yi Facebooktan Takip Edin    Sorbize'yi Twitter'dan Takip Edin    Abone

Yazılar E-Posta'na Gelsin:

Lazım Olabilir
  • Webmaster Portalı
  • Url Kısaltma Servisi
  • Sorbize.com bir çok kategoride güzel ve özgün makaleler okuyabileceğiniz güncel web 2.0 bir blogdur.
    © Tüm Hakları Saklıdır.
    Bu websitesi DMCA Protection ile lisanslanmıştır. Yazılar kaynak belirtilmeden kullanılamaz.