WordPress Bileşen Yapımı

WordPress Bileşen Yapımı

Merhaba WordPress üzerinde bir çok şey yaptık peki bir bileşen yazmak istesek nasıl olacaktı. Şimdi wordpress üzerinde hızlıca bileşen yapalım.

Öncelikle kendimize bileşen için bir sınıf yaratıyoruz ve bu sınıf 3 fonksiyondan oluşuyor. widget, form, update isimlerinde 3 fonksiyon öncelikle biz sınıfımızı oluşturalım.

class populer_post extends WP_Widget {
function __construct() {
parent::__construct(
populer_post',
__('Popüler Yazılar', 'populer_post'),
array( 'description' => __( 'Popüler yazılarınızı oluşturun.', 'populer_post' ), )
);
}
}

Ben popüler yazılar adında bir bileşen yapacağım. Şimdi dönüp az önce bahsettiğimiz 3 fonksiyonu sırayla içine dahil edip işlemlerine bakalım.

public function widget( $args, $instance ) {
$title = apply_filters( 'widget_title', $instance['title'] ); //Parametre
$post_count = apply_filters( 'widget_post_count', $instance['post_count'] ); //Parametre
echo $args['before_widget'];

include(get_template_directory().'/template/sidebar/populer_blog.php'); //Çekilecek şablon
echo $args['after_widget'];
}

Yukarıda yanlarınada kısaca belirttim aslında ilk iki tanesi diğer fonksiyonlardan gelen veriler. Çekilen şablon ise bileşenimiz çalıştığında ekranda göstereceği kısım. Bu sınıf bileşen çağrıldığında sayfanızın ön yüzünde gözükür.

public function form( $instance ) {
			if ( isset( $instance[ 'title' ] ) ) {
				$title = $instance[ 'title' ];
				$post_count = $instance[ 'post_count' ];
			}else {
				$title = __( 'Başlık', 'populer_post' );
				$post_count = __( '5', 'populer_post' );
			}
			
			echo '
				

					<label for="'.$this->get_field_id( 'title' ).'">'._e( 'Title:' ).'</label> 
					<input class="widefat" id="'.$this->get_field_id( 'title' ).'" name="'.$this->get_field_name( 'title' ).'" type="text" value="'.esc_attr( $title ).'" />
				

				

					<label for="'.$this->get_field_id( 'post_count' ).'">'._e( 'Post Sayısı:' ).'</label> 
					<input class="widefat" id="'.$this->get_field_id( 'post_count' ).'" name="'.$this->get_field_name( 'post_count' ).'" type="text" value="'.esc_attr( $post_count ).'" />
				

			';
		}

Bu fonksiyonumuz ise yönetim paneli tarafında bileşeni alıp bir yere eklediğinizde önünüze gelen formdur. Burada hangi parametreleri alacağını ve inputları belirtiyoruz.

public function update( $new_instance, $old_instance ) {
$instance = array();
$instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : '';
$instance['post_count'] = ( ! empty( $new_instance['post_count'] ) ) ? strip_tags( $new_instance['post_count'] ) : '';
return $instance;
}

Update fonksiyonuda son olarak bileşeninizde güncelleme yapmak istediğiniz yönetim paneli tarafında silip düzenledikleriniz buraya gelir ve güncellenir.

Şimdi birde widget fonksiyonu içinde include yaptığımız php dosyasının içeriğine bakalım.

	
<div class="populer_news top_news">
		
<div class="title">
			
<h3><?php echo $title; ?></h3>

		</div>

		
<div class="news_content">
			<?php $query = new WP_Query( array( 'post_type' => 'post', 'posts_per_page' => 10, 'orderby' => 'date' ) );
				$i = 1;
				while ( $query->have_posts() ) : $query->the_post();
			?>
					
<div class="news">
						<a href="<?php the_permalink(); ?>">
							
<div class="row">
								
<div class="col-sm-2 col-2">
									<span><?php echo $i; ?></span>
								</div>

								
<div class="col-sm-7 col-7">
									

<?php the_title(); ?>

								</div>

								
<div class="col-sm-3 col-3">
									<img src="<?php the_post_thumbnail_url('post-thumbnail'); ?>" class="img-fluid" alt=""/>
								</div>

							</div>

						</a>
					</div>

				<?php $i++; ?>
			<?php endwhile; ?>
		</div>

	</div>

Mesela ben burada ki projemde böyle bir kullanım yapmışım ve gördüğünüz gibi $title ve $post_count değişkenlerimi kullanmam gereken yerlere koyduğumda gayet sağlıklı çalışıyor. Bu konu ile alakalı sormak istedikleriniz olursa yazabilirsiniz. Herkese iyi çalışmalar.

Vahdet Yavuz

Son Yazılar
Bir cevap bırakın