arkaplan

WordPress Resimli Son Yazılar Bileşeni Yapımı

5 sene önce

Merhaba arkadaşlar bugün sizlere baharat v1 temasının yapımı sırasında araştırdığım ve yapımını öğrendiğim wordpress resimli son yazılar bileşeni yapımını anlatacağım.Öncelikle son yazılar bileşeni ne işimize yarar bundan bahsedeyim , özellikle tek konu üzerine kurulu sitelerde ziyaretçiler arama motorları üzerinden geleceğinden sitenizde ki daha güncel son yazıları göremeyeceklerdir.Bizde bu durumu önlemek için bugüne kadar sidebarın uygun bir yerine son yazılar bileşenini koyardık fakat zamanla anladığım ve istatistikler ile desteklediğim fikrim sayesinde WordPress'in bize sunduğu son yazılar bileşeninin sadece yazıdan ibaret olduğu için fazla dikkat çekmediğini bunun yerine daha görsel bir bileşen kullanmam gerektiğini anladım.Bu yüzden bende son yazıları gösterebileceğim daha görsel ve ayrıntılı bir bileşen aramaya başladım.Başlangıç için baharat v1 temasında kullanmakta olduğum şekilde bir bileşen yaptım fakat bu bileşeni biraz daha geliştirdim ve ilerleyen temalarımda kullanmayı düşünüyorum.Aşağıda vereceğim kod sayesinde görsel bir son yazılar bileşeni ortaya çıkacaktır başlangıç için bileşende sadece konunun öne çıkarılmış görseli ve konu başlığı yer alıyor.Ben size isteğinize göre bunlara ek olarak konunun okunma sayısı , konuya yapılan yorum sayısı veya konunun kategorisi gibi eklemeler yapmanızı öneririm.

<?php
                            $the_query = new WP_Query('showposts=5&orderby=post_date&order=desc');  
                            while ($the_query->have_posts()) : $the_query->the_post(); ?>
<div class=bilesenicerik>
<div class=sonyaziresim><a href="<?php the_permalink('') ?>" title="<?php the_title(''); ?>"><?php if ( has_post_thumbnail() ) {the_post_thumbnail(array(64,64));} else {}?></a></div>
<div class=sonyaziadi><a href="<?php the_permalink('') ?>" title="<?php the_title(''); ?>"><?php the_title(''); ?></a></div>
</div>
<div class=temizlik></div>
							<?php endwhile; ?>
                            <?php wp_reset_query(); ?>
REKLAM

Yukarıda ki kod sayesinde son yazılarınızı resimli olarak gösterebileceksiniz.Kodu geliştirmek ve görselleştirmek size kalmış.Baharat v1 temasını kullanan arkadaşlarımız zaten bu bileşenden faydalanabiliyorlar kullanmayan arkadaşlar ise yukarıda ki kodu kullanabilirler.Benim verdiğim class değerlerine CSS ile özellikler eklerseniz istediğiniz görünümü elde edebilirsiniz.İsteyen arkadaşlarımız Baharat v1 temasını indirerek bu classların CSS özelliklerine bakabilirler.

Yorumlar (13)

  1. cemil dedi ki:

    eyvallah diğer sitede kurucam

  2. Emre dedi ki:

    KARDEŞ BEN YAPAMADIM ANLAMADIM NASIL OLACAK TEAMWİERDEN YAPABİLİRMSİİN

    BENİ EKLEMRİSİ

    facebook.com/Emre.tzgl

    • Burakisci dedi ki:

      isciburak@gmail.com adresine tam olarak hangi aşama da sorun yaşıyorsanız onu belirten bir mail gönderirseniz hemen yardımcı olabilirim.Diğer yandan zaten benim temamı kullanıyorsunuz zaten benim temam da olan bir özellik bu ;)

  3. Emre dedi ki:

    HOCAM EKLEDİM KABÜL EDERSENİZ SEVİBİRM .

  4. yavuz dedi ki:

    Ya bu kodları hangi sayfaya yapıştıracağımı anlayaadım hocam nasıl olcak?

  5. Tarif dedi ki:

    Paylaşım için teşekkürler süper bir anlatım olmuş.

  6. Parça Kontör dedi ki:

    Güzel Anlatım Teşekkür Ederim..

  7. Lise Puanları dedi ki:

    Güzel anlatmışsın.

  8. Sohbet dedi ki:

    gayet güzel sitemde kullanıcam tşk edrim

  9. jusboxorgukashbozdurma dedi ki:

    Bence cok güzel tşk ederm

  10. ukashbozdurma dedi ki:

    hocam cok tşk ederm cok güzel

  11. sporkulturu dedi ki:

    paylaşım için teşekkürler buradaki bilgiler oldukça işime yaradı sitenizi takipteyim :)