Wordpress Resimli Popüler

WordPress resimli püpüler konuların kodlarını paylaşmak istiyorum css ile düzenleyerek en iyi duruma getirebilirsiniz. İsterseniz aşağıdaki kodu wordpress inizin footer kısmında yeriniz varsa oraya da ekleyebilirsiniz. Ama genelde sidebar da yer almaktadır bu kod eklenmektedir. Çünkü ul ve li kodları footer e eklediğiniz zaman kodlar yeniden yazmak zorunda kalabilirsiniz. Neyse uzatmadan kodlarıma geçelim kod hemen aşağıdadır.

<div class='widget-contents'>	  
<ul><?php $biryoo = new WP_Query("showposts=5&orderby=comment_count"); while($biryoo->have_posts()) : $biryoo->the_post();?>
 <li> <img src="<?php echo resimgoster(); ?>" alt="resim"  class="sidebar-thumbnails" width="68px" height="68px" /> <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
 <p><span class="clock"> Tarih:
 <?php the_time('j/F/Y'); ?>
</span></p>
</li>
<?php endwhile; ?>
</ul>	  
</div>

Not: İlk php kodunda showposts=5 mevcut buradan 5 sayısı kac adet poüler konu göstereceğidir.

Yukarıdaki kod’da clas olarak benim sitemde sidebar-thumbnails olarak verilmiştir verdim. Ve bu clas’a da css ile düzenlemek gerekiyor. Sidebara eklerseniz normal de olan ul ve li ve üst class da cssleri eklemelisiniz. Eklidir zaten büyük ihtimalle. Ama yinde footer kısmına eklerseniz sidebar daki ekli html ve css kodları kullanabilirsiniz. class isimleri değiştirilerek. Ben sadece bu popüler konunun css kodlarınıda vericem sadece küçük resim için hazırlanmış kod.

.sidebar-thumbnails {
    float: left;
    height: 65px;
    margin-bottom: 20px;
    margin-right: 20px;
    margin-top: 3px;
    width: 65px;
}

Ve widget-contents içinde sadece margin:10px kodu yer almaktadır. diğer kodları sidebar class ım olduğu için sidebar kodları yer almaktadir hepsi içinde ul li a vb. kodlar.

.widget-contents {
    margin: 10px;
}

not: clock olarak verilen tarih için kod css içinde float:right olarak verilmiştir.

.clock {
    float: right;
}

İlk resmi çekeceği için function’s kodları.

// Yazıdaki ilk resmi alma ve gösterme
function resimgoster() {
    error_reporting(0);
    global $post, $posts;
    $resimbir = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $resimbir = $matches [1] [0];
     if(empty($resimbir)){ //Eğer resim eklememişseniz
         $resimbir = '//www.biryoo.com/wp-content/uploads/2015/08/latest.png';
     }
    return $resimbir;
}
function resimgoster_by_post($post) {
    error_reporting(0);
    $resimbir = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $resimbir = $matches [1] [0];
    if(empty($resimbir)){ //Eğer resim eklememişseniz
        $resimbir = '//www.biryoo.com/wp-content/uploads/2015/08/latest.png';
    }
    return $resimbir;
}

Bu Sayfa İçin Etiketler ?

Bir Yorum Yazın







XHTML: Bu etiketleri kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>