arkaplan

WordPress Avatarlı Son Yorumlar Yapımı

5 sene önce

Merhaba arkadaşlar biliyorsunuz ki avatarlı son yorumlar bileşeni Burakisci V3 temasının içinde sizlere sunuluyor ancak bazı arkadaşlar kendi temalarında da bu bileşeni kullanmak istediklerini belirten mesajlar gönderdikten sonra , bu bileşeni nasıl yapacağınızı anlatan bir konu hazırlamaya karar verdim.

Öncelikle arkadaşlar functions.php dosyamızı açıyoruz ve aşağıda vereceğim kodu bu dosyanın en üstüne yapıştırıp kaydediyoruz.

REKLAM

<?php
/*
 * Plugin Name: Resimli Son Yorumlar Bileşeni
 * Plugin URI: http://burakisci.com
 * Description: Bu bileşen son üç yorumu yorumu olarak listelemenizi sağlar.
 * Version: 1.0
 * Author: Burak İşci
 * Author URI: http://burakisci.com
 */

add_action( 'widgets_init', 'bi3_sonyorum_widgets' );

function bi3_sonyorum_widgets() {
	register_widget( 'bi3_sonyorum_widget' );
}

class bi3_sonyorum_widget extends WP_Widget {

function bi3_sonyorum_widget() {
	
		/* Widget settings */
		$widget_ops = array( 'classname' => 'widget_sonyorum', 'description' => __('Bu bileşen son üç yorumu resimli olarak listelemenizi sağlar.', 'bi3') );

		/* Create the widget */
		$this->WP_Widget( 'bi3_sonyorum_widget', __('Resimli Son Yorumlar Bileşeni', 'bi3'), $widget_ops );
	}
	
function widget( $args, $instance ) {
			
	?>
		<div class="sonyorumlar">
        	<div class="bilesenbaslik">Son Yorumlar</div>
            <div class="s-yorumlar">
				<?php $comments = get_comments('status=approve&number=3'); ?> 
<?php foreach ($comments as $comment) { ?> 
<div class="sonyorumlar"><?php 
$title = get_the_title($comment->comment_post_ID); 
echo '<div class="yorumresim">' . get_avatar( $comment, '40' ) . '</div>'; 
echo '<div class="yorumisim">' . ($comment->comment_author) . '</div>'; 
?><div class="yorumyorum"><a href="<?php echo get_permalink($comment->comment_post_ID); ?>#comment-<?php comment_ID() ?>" rel="external nofollow" title="<?php echo $title; ?>"><?php echo wp_html_excerpt( $comment->comment_content, 80 ); ?></a></div><div class="temizlik"></div>
</div> 
<?php }    ?> 
            </div>
        </div>       
        <?php
		echo $after_widget;
	}
	
function update( $new_instance, $old_instance ) {}

	function form( $instance ) {
	
		$instance = wp_parse_args( (array) $instance, $defaults ); ?>
		
		<p>
			Bileşenin Ayalarını Tema Panelinden Yapınız!
		</p>
		
	<?php
	}
}

?>

Şimdi kodlarımızı ekledik , peki ya ne değişti.Değişikliği görmek için bileşenler sayfamıza giriyoruz ve listelenen bileşenlerin arasında "Resimli Son Yorumlar Bileşeni" isimli bir bileşen görüyorsunuz.İşte bu bileşeni ister sidebar da isterseniz de footer da kullanabilirsiniz.Ancak kullanmaya başladığınızda bileşende bir şekilsizlik göreceksinizdir.Bunu da çözmek için bileşenimizi biraz CSS kodları ile şekillendirelim.

.sonyorumlar {margin-bottom:20px;}
.s-yorumlar {padding:10px;border:1px solid #eee;}
.yorumresim {width:40px;height:40px;float:left;margin-top:10px;margin-left:10px;}
.yorumresim img {width:40px;height:40px;}
.yorumisim {margin-left:15px;float:left;width:200px;font-weight:bold;font-size:11px;margin-top:10px;color:#605e5e;}
.yorumyorum {float:left;width:200px;margin-left:15px;font-size:10px;color:#aaa;line-height:130%;}
.yorumyorum a {color:#aaa;}
.temizlik {clear:both;}

Bu kodları da CSS dosyanıza ekledikten sonra artık bu bileşeni rahat rahat kullanabilirsiniz.

Yorumlar (10)

  1. Uğur Sağlam dedi ki:

    Çoğu kişi Gravatar kullanmadığı için hep ıssız adam çıkacak. Ama aradığım bir şeydi.

  2. fatih dedi ki:

    Merhaba Burak Bey,

    Bende Son yazılar bölümünüzün kodlarını merak ediyorum :)

    Şu ana kadar gördüğüm en iyi görsele sahip San yazılar bölümü bu.

    Selamlar…

    • Burak İşci dedi ki:

      Onu da yarın akşam paylaşırım dostum.

      • fatih dedi ki:

        Tamam teşekkür ederim. Ama ben bu kodları functions.php dosyasına değilde sidebar’a koymam gerekiyor. Çünkü kullandığım temeda aynı alanda 3 tab ile bunlar görünecek. Yani 1. Tab Son yazılar, 2. Son Yorumlar ve 3. Tab Tags ler. İsteyen istediğine tıklar bakar. :)

        ama bunları oraya eklemek acaba sorun teşkil eder mi?

        • Burak İşci dedi ki:

          O zaman sadece aşağıda ki kodları ekleyin ve kullanın ;

          <div class="sonyorumlar">
                      <div class="bilesenbaslik">Son Yorumlar</div>
                      <div class="s-yorumlar">
                          <?php $comments = get_comments('status=approve&number=3'); ?> 
          <?php foreach ($comments as $comment) { ?> 
          <div class="sonyorumlar"><?php 
          $title = get_the_title($comment->comment_post_ID); 
          echo '<div class="yorumresim">' . get_avatar( $comment, '40' ) . '</div>'; 
          echo '<div class="yorumisim">' . ($comment->comment_author) . '</div>'; 
          ?><div class="yorumyorum"><a href="<?php echo get_permalink($comment->comment_post_ID); ?>#comment-<?php comment_ID() ?>" rel="external nofollow" title="<?php echo $title; ?>"><?php echo wp_html_excerpt( $comment->comment_content, 80 ); ?></a></div><div class="temizlik"></div>
          </div> 
          <?php }    ?> 
                      </div>
                  </div>
  3. ilhan öztürk dedi ki:

    çok teşekkür ederim çok işimi gördü fakat şöyle bir sıkıntım var resimlerde alt etiketi olmuyor. alt=”avatar” bunu eklediğimde $comment, ’40’ bunun arkadasına hata alıyorum nasıl yapabilirim?

  4. Kerim Potuk dedi ki:

    Burak hocam kodları düzgünce yerleştirip siteme göre görselini ayarladım çok teşekkür ederim ancak size bir sorum olacaktı. Alt etiket olmayan resimler için kodun hangi kısmında değişiklik yapmamız gerekiyor. Uygun yeri bulamadım ben bir türlü.