WordPress Özel Alan İle Yazıya Küçük Resim Eklemek

WordPress sitelerimizde yazılarımızın estetik açıdan daha güzel gözükmesi için yazının yanına konu ile ilgili küçük resim koyabiliriz. Bunu yaparken de her zaman tek tek uğraşmak bizi sıkar bunun içinde temamızın içine bu sistemi entegre ederek işlerimizi kolaylaştırırız. Bu sayede ister sitemizden istersek de başka adreslerden resmi çekere kullanabiliriz. İlk olarak Wp panelimizden yeni yazı ekleme kısmına giriyoruz. Aşağıda bulunan özel alanlar kısmına kucukresim adında bir alan ekliyoruz ve değerine de resmimizin adresini yazıyoruz.
özelalan
Resimde ki gibi yaptığımıza göre şimdi sıra kodlama işlemlerine geldi.
İlk olarak temamızın wp-content\themes\inove\index.php dosyamızı açıyoruz. Ve şu kodları the_content fonsiyonun üzerine ekliyoruz.

[ad#orta]

 
<!-- Özel Alan Baslangic -->
		<?php $resim=get_post_custom_values('kucukresim'); $resim=$resim[0]; if($resim!=""){?>
        <a href="<?php the_permalink() ?>"><img src="<?php echo $resim;?>" class="oa_kucukresim" alt="<?php the_title(); ?>"/></a><?php }?>
        <!-- Özel Alan Bitis -->
<?php the_content(__('Read more...', 'inove')); ?>//Gördüğünüz gibi kodum the_content fonksiyonun hemen üstünde. Sizin bu satırı almanıza gerek yoktur.

1-get_post_custom_values ile özel alanları çağırmamızı sağlayan fonksiyondur ve bunu bir diziye atar.
2-the_permalink ile de yazının linkini çekeriz. Böylelikle resme tıklayınca da yazının devamı single.php sayfasında açılacaktır.
3-the_title fonksiyonu ile de yazının başlığını resmin alt bilgisine yazdırdım. Böylelikle resim görmek istemeyenler veya göremeyenler yazının başlığını göreceklerdir.
4-class=”oa_kucukresim” yani özel alanımıza style verilmesi için bu alan kullanılmaktadır. style.css dosyasını düzenlerken burayıda açıklayacağım.
5-Resim varsa resim gözükecektir. Eğer özel alana hiç bir değer girilmemiş ise yazımızın normal hali gözükecektir.
index.php dosyamızı bu şekilde düzenledikten sonra sıra aynı yoldaki single.php dosyamızı düzenlemekte.
wp-content\themes\inove\single.php

 
<!-- Özel Alan Baslangic -->
		<?php $resim=get_post_custom_values('kucukresim'); $resim=$resim[0]; if($resim!=""){?>
        <a href="<?php the_permalink() ?>"><img src="<?php echo $resim;?>" class="oa_kucukresim" alt="<?php the_title(); ?>"/></a><?php }?>
        <!-- Özel Alan Bitis -->
			<?php the_content(); ?>//Bu fonksiyonun hemen üstüne kodumuzu ekliyoruz.

Aynı şekilde fonksiyonumuzu da dediğimiz yer olan the_content fonksiyonu üzerine yerleştirdik.
Şimdi ise style.css dosyamızı düzenlemeye başlayacağız.
wp-content\themes\inove\style.css dosyamızı açalım ve altına şu css kodlarını ekleyelim.

/*Ozel alan baslangic*/
.oa_kucukresim{
float:left;
padding:2px;
border:1px solid #e2e2e2;
margin:0 8px 8px 0;
width:133px;
height:100px;
}

Bu css düzenlemesini yaptıktan sonrada dosyalarımızı (index.php,single.php,style.css) tekrardan servere yükleyelim.
Artık bizlerinde kullanabileceği bir özel alanımız oldu. Sizde temalarınıza bu yolla özel alanlar ekleyebilirsiniz.
İşte sonuç…sonuç
Hayırlı kullanımlar…

Hasan Huseyin İŞLER hakkında

Lise yıllarında programlama ile tanışan ve Q-Basic, Pascal, C başlangıç seviyesinde öğrenenir. Üniversite de TEF-BSÖ okurken diğer dillerin yanı sıra PHP'de kendini geliştirmeye devam ederek bunların yanında CSS, JS ve Wordpress sistemiyle ilgilenir. www.phpsorunu.com'un da yöneticisi ve yazarlarındandır.
Bu yazı Wordpress kategorisine gönderilmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.

WordPress Özel Alan İle Yazıya Küçük Resim Eklemek için 28 cevap

  1. rasitozkardes der ki:

    Oldukça yararlı bir bilgi. Teşekkürler.

  2. veysel der ki:

    Bu bilgilendirici yazı için teşekürler..

  3. cenazem der ki:

    teşekkürler 😀

  4. Emre der ki:

    hocam bunun üzerine saydan bir resim daha eklemek istiyorum. Yani Kücük resme efekt vermek istiyorum nasıl yaparım bunu ?

  5. Batu Ş. der ki:

    Teşekkürler Deneyeceğim

  6. Hamza der ki:

    kardeş ben yaptım olduda.

    sorun. ana sayfada düzgün oldu tamam .

    ama konunun içine girince resim büyüyor ?

    lütfn yardm edermsn

    msn adresim : msn@impeccablecrush.com ( buna mail atmayn )

    weya mail: pointcrushh@gmail.com

    ?? cvp beqliyorm sitenizi takip eden biriym.

  7. WordPress kullandğın tema sayfasının içinde aynı bu makalede anlattıgım yerde kısacası single.php olacaktı bu yaptığımız işlemlerin aynısını o sayfasının içinde de yaparsan sorunu halletmiş olursun. Ben bu şekilde yaparak kullanıyorum. İnş. sorunuz bu yolla çözülür….

  8. Hamza der ki:

    Dediğinden Hiç Bişey Anlamadım. Lütfen Açık Bi Şekilde Anlatırmısınz.

    Gösterdiklerinin aynısını yaptım . dediğim gibi konuyu açınca resim büyüyor.

    acil yardıma ihtiyacım var.

  9. Hamza der ki:

    sorunu çözdüm. single.php yi yeniden yaptım oldu tm saol tşk ettm güzel bi eklenti allaha emanet ol grşz hakkını helal bay bay

  10. cengiz der ki:

    konu içeriğini yazdıktan sonra özel alanı seçip resim adresini giriyorum sonra güncelleye basınca sayfa yenileniyor ve konu içeriği boşalıyor tekrardan taslaklara bakıp gerekli konuyu bulmam gerekiyor

  11. aska_surgun der ki:

    anlatım için teşekkürler süper oldu

  12. kadir der ki:

    Slm arkadaslar googlede aratmalarim fayda etmedi yapamadim, yardimi dokunacak biri varsa yazarsa sevinirim.
    Sorunum konulara resim ekleyemiyorum yani öne cikan görselmi ne onu ayarlayamiyorum belkide özel alandan ama adimlari tek tek yampmama ramen hala resimler gözükmüyor.
    daha ayrintili anlatayim belki anlamadiniz,
    ( http://www.screenr.com/VD0 )bu linkte gösteriyor ne kadar kolay ve basit ama ben yapiyorum olmuyor benim sayfada resimler KIRIK gösteriyor ( http://imageshack.us/f/59/salon44.jpg/ )bu likte bakarsaniz anlarsiniz umarim. lütfen yardim

    • hsnhsynisler der ki:

      Hocam iletişime geçerseniz size yardımcı olabilirim.

      • kadir der ki:

        sizi dinlemekteyim bu hafta baya yogunum ondan cvp gec yazabilirim ama aksamlari muhakkak bakarim ilgileniginiz icin simdiden tesekkürler, bir aydir ariyorum nasil yapacagim diye

  13. yns53 der ki:

    hocam çok teşekkür ederim

  14. Faruk der ki:

    teşekkür ederim, vermiş olduğunuz bilgilerden yararlandım, emeğinize sağlık.

  15. herbalife der ki:

    Paylaşım için teşekkür ederim.

  16. Sesli Sohbet der ki:

    Hocam emekleriniz için teşekkür ederim. Başarılı bir çalışım eyvallah

  17. musicasyon der ki:

    çok başarılı olmuş tşklerr

  18. ssaasa der ki:

    süper başarılı

  19. SanalAlemci der ki:

    Bu güzel paylaşımınız için çok teşekkürler üstadım..Farklı sitelerde anlatılanları yaptım fakat hep hata verdi..Buradaki anlatılanları yaptım çok şükür sorunsuz kullanıyorum sayenizde..

    Eklemek istediğim iki şey var;

    1.Etiketlerde ve arşiv sayfalarında da küçük resim görünsün istiyorsanız, Yukarıdaki kodları archive.php dosyasına da ekleyin.
    2.Küçük resim boyutunu değiştirmek isterseniz,yukarıdaki style.css dosyasına eklenen kodlardaki width:133px ve height:100px olan yerleri düzenleyin.Örneğin ben şöyle yaptım; width:200px height:150px kolay gelsin.

  20. feyz der ki:

    hocam merhaba oldu ama bu sefer yazılar 2 defa yazıyo ana sayfada o niye öyle oldu 🙂

  21. feyz der ki:

    yok hocam <?php the_content(); ?>//Bu fonksiyonun hemen üstüne kodumuzu ekliyoruz. yazmışınya bende onu bir daha almışım düzelttim sağol 🙂

  22. Sedat der ki:

    Teşekkürler çok işime yaradı .

  23. Can Murat Demir der ki:

    Hocam bir sıkıntım var thumnail resimlerimi bir türlü fikseleyemedim. Örneğin şu anda web sayfamda yüklü olan diğer resimlerde ve küçük resimlerde sıkıntı yok fakat yeni bir post eklediğimde orta ve küçük resim değerlerini kafasına göre bastırıyor sayfa. Bunun nedeni nedir? Daha önce böyle bir sorun yoktu. Eski yazılarımda thumbnail sorunu yok, belli bir tarihten sonra bu sıkıntı çıktı. Bunun sebebi nedir?

  24. apk oyun indir der ki:

    hocam ben yaptım fakat olmadı diğer sayfalarda çıkıyor ama anasayfada çıkmıyor, kullandığım tema sahifa v5

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir