WordPress Avatarlı Son Yorumlar Yapımı

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.

<?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.