WordPress Çift Sütunlu Kategori Bileşeni Yapmak [ÖRNEK KODLAR]

WordPress için tema yaparken en çok karşılaştığımız konu bileşen yapmaktır. Wordpreste dinamik alanları tasarlama konusunda da aklan en çok gelen sidebar ve bileşen yapmaktır. Bileşen yapmak için mantığını kavramanız gerekir aşağıdaki örnek kodu inceleyerek Çift Sütunlu Kategori Bileşeni yapma konusunda bilgi sahibi olacaksınız hemen işe başlayabilirsiniz.

//Bileşen Yapımı (functions.php dosyasında php bitiş etiketi yani ?> dan sonra yazılacak kodlar)

<?php
// ==== Çift Kategori Bileşeni Başlangıç ====
add_action( 'widgets_init', 'kg_kategori_widgets' );
 
function kg_kategori_widgets() {
 register_widget( 'kg_kategori_widget' );
}
 
class kg_kategori_widget extends WP_Widget {
 
function kg_kategori_widget() {
 
 /* Widget settings */
 $widget_ops = array( 'classname' => 'widget_kategori', 'description' => __('Bu bileşen ile Kategorilerinizi ÇİFT sütun olarak gösterebilirsiniz. Teşekkürler kodgunlugum.com', 'kg') );
 
/* Create the widget */
 $this->WP_Widget( 'kg_kategori_widget', __('Çift Kategori Bileşeni', 'kg'), $widget_ops );
 }
 
function widget( $args, $instance ) {
 
 ?> 
 <!-- Bileşen Kodları -->
 <h2 class="widgettitle">Kategoriler</h2>
 	<div class="ciftkategori">
 		<ul>
       <?php wp_list_cats('title_li='); ?>
   </ul>
       </div>
 <?php
 echo $after_widget;
 }
 
function update( $new_instance, $old_instance ) {$instance = array();return $instance;}
 
function form( $instance ) {
 
 $instance = wp_parse_args( (array) $instance, $defaults ); ?>
 
 <p>
 Bileşenin Ayalarını Tema Panelinden Yapınız!
 </p>
  <?php
 }
}
// ##### Çift Kategori Bileşeni BİTİŞ #####
?>

style.css dosyasına eklenecek kodlar

/*çift kategori bileşeni için*/
.ciftkategori{
	float: left;
	width: 270px;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #fff;
	margin-bottom: 20px;
}
.ciftkategori ul li{
	float: left;
	width: 100px;
	padding-left: 27px;
	margin-top: 5px;
	margin-bottom: 5px;
	background: url(img/ok.png) no-repeat;
	background-position: 9px;
}
.ciftkategori ul li a{
	color: #393939;
}

Şimdi yapmanız gereken Görünüm -> Bileşenler sekmesi altından Bileşeninizi sürükleyip bırakmak.
Renk ve arka plan seçenekleri için css eklediğiniz kodları gözden geçirin. ufacık bir css bilgisi ile halledersiniz. sorun yaşarsanız yorumlarınızı bekliyorum.

Bu İçeriğe Puan Verebilirsiniz
[Toplam: 0 Ortalama: 0]

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

This site uses Akismet to reduce spam. Learn how your comment data is processed.