Kategori: Wordpress

Burakisci V3 ile birlikte yapımını öğrendiğim ve hakkında Türkçe kaynak bulamadığım wordpress temaya özel bileşen yapımını göstereceğim size arkadaşlar.Öncelikle arkadaşlar temaya özel bileşen yapımı oldukça kolay bir işlemdir , birazdan vereceğim kodlarda dikkat etmeniz birkaç yer bulunuyor onun dışında sizi zorlayacak pek yer yok.Kolaylıkla sizde kendi bileşenlerinizi yapabileceksiniz.

Öncelikle arkadaşlar temamızın functions.php dosyasını açıyoruz ve dosyanın en başında bulunan aşağıda ki kodu buluyoruz.

<?php

Daha sonra aşağıda vereceğim kodu , yukarıda ki koddan önce functions.php dosyanıza ekliyorsunuz.

<?php
/*
 * Plugin Name: Sosyal Alan Bileşeni
 * Plugin URI: http://burakisci.com
 * Description: Bu bileşen ile sosyal profillerinizi yayınlayabilirsiniz.
 * Version: 1.0
 * Author: Burak İşci
 * Author URI: http://burakisci.com
 */

add_action( 'widgets_init', 'bi3_sosyal_widgets' );

function bi3_sosyal_widgets() {
 register_widget( 'bi3_sosyal_widget' );
}

class bi3_sosyal_widget extends WP_Widget {

function bi3_sosyal_widget() {

 /* Widget settings */
 $widget_ops = array( 'classname' => 'widget_sosyal', 'description' => __('Bu Bileşen ile sosyal pforillerinizi yayınlayabilirsiniz.', 'bi3') );

/* Create the widget */
 $this->WP_Widget( 'bi3_sosyal_widget', __('Sosyal Alan Bileşeni', 'bi3'), $widget_ops );
 }

function widget( $args, $instance ) {

 ?>
     KODLAR BURAYA
 <?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 bileşenimiz hazır ancak düzenlememiz gereken bazı bölümler bulunuyor.Düzenlemeye aşağıda ki koddan başlayalım;

/*
 * Plugin Name: Sosyal Alan Bileşeni
 * Plugin URI: http://burakisci.com
 * Description: Bu bileşen ile sosyal profillerinizi yayınlayabilirsiniz.
 * Version: 1.0
 * Author: Burak İşci
 * Author URI: http://burakisci.com
 */

Yukarıda kodda ki düzenlemeleri kendinize göre yapınız.Ardından aşağıda ki kod grubunda ki düzenlemeleri de yapmayı unutmayın.

function bi3_sosyal_widget() {
	
		/* Widget settings */
		$widget_ops = array( 'classname' => 'widget_sosyal', 'description' => __('Bu Bileşen ile sosyal pforillerinizi yayınlayabilirsiniz.', 'bi3') );

		/* Create the widget */
		$this->WP_Widget( 'bi3_sosyal_widget', __('Sosyal Alan Bileşeni', 'bi3'), $widget_ops );
	}

Yukarıda ki kodda yapacağınız düzenlemeler bileşenler sayfasında gözükecek olan bileşenin isim ve açıklamasını gösterecek.

Son olarak arkadaşlar “bi3_sosyal_widget” ve “bi3_sosyal_widgets” değerlerini de kendinize göre değiştirin, eğer temanıza birkaç tane bileşen ekleyecekseniz ekleyeceğiniz her bileşen için bu değerleri farklı farklı girmelisiniz yoksa tema hata verecektir.

Bu düzenlemeleri de yaptıktan sonra geriye tek bir şey kalıyor o da bileşeniniz de göstermek istediğiniz kodları “KODLAR BURAYA” yazısının yerine yazmak , ardından bileşeninizi rahat rahat kullanabilirsiniz.Bileşeninizi kullanmak için bileşenler sayfasına girin ve belirlediğiniz isimde ki bileşeni aktif edin.

Merhaba arkadaşlar özellikle yeni temalar da sık sık kullanılmaya başlanan bir fonksiyondan bahsedeceğim sizlere.Artık gelişen blog sektöründe yapacağınız ufak değişimler bile sizleri rakiplerinizin önüne geçirebilir.Bildiğimiz gibi çoğu WordPress temasında tarihler "22 Aralık 2012" şeklinde gösterilmektedir , ancak biz bu sıradan tarih kullanımını kullanacağımız bir dizi kod ile "3 gün önce yazıldı" , "21 dakika önce yazıldı" ,  "7 ay önce yazıldı" şeklinde değiştireceğiz.Güzel bir fonksiyon olduğunu düşündüğümden bu kodu sizlerle paylaşmak istedim.Aşağıda ki adımları uyguladıktan sonra oluşacak görüntü aşağıda ki gibi olacaktır.

Öncelikle arkadaşlar functions.php dosyanızı açın ve sayfaya aşağıda ki kodları ekleyin.

 function human_time() {
$time = human_time_diff(get_the_time('U'), current_time('timestamp'));
if ($time >= 365) {
$time = round($time/365);
return $time.' yıl önce';
} else if ($time >= 30) {
$time = round($time/30);
return $time.' ay önce';
} else if ($time >= 7) {
$time = round($time/7);
return $time.' hafta önce';
} else {
return $time.' önce';
}
}
 

Ardından single.php , index.php , page.php gibi tarihlerin gösterildiği sayfaları açın ve aşağıda ki kodu bulun.

<?php the_time('j F Y'); ?>

Bulduğunuz bu kodu da aşağıda ki kod ile değiştirin.

<?php echo human_time(); ?>

İşte bu kadar , hayırlı kullanımlar ;)

Merhaba arkadaşlar bildiğiniz gibi tüm dağıttığım temalar da öne çıkarılmış görsel özelliği var , bazı arkadaşlarımız ise bugüne kadar özel alan ile çalıştıklarından dolayı öne çıkarılmış görsel kullanımı hakkında pek bilgileri yok.Ben de hem bu arkadaşlar için hem de genel olarak tüm WordPress kullanan arkadaşlar için öne çıkarılmış görsel kullanımını anlatacağım.Öncelikle öne çıkarılmış görselin ne olduğundan biraz bahsedelim , öne çıkarılmış görsel ya da İngilizce ismi ile thumbnail anasayfa, kategori sayfaları , arşiv sayfaları ve etiket sayfaları gibi sayfalarda yazılarımızın genellikle yazılarımızın sol taraflarında gösterilen görsellere denir.Kullanımı oldukça kolay olmakla beraber emin olun size özel alan kullanımından daha basit gelecektir.Şimdi öne çıkarılmış görselin kullanımına gelelim.

Öncelikle arkadaşlar yazı düzenleme veya yazı ekleme sayfanızın sağ alt köşesinde bulunan "Öne çıkarılmış görseli belirle" linkine tıklayın ve açılan pencereden öne çıkarılmış görsel olarak kullanmak istediğiniz görseli sunucunuza yükleyin.

Öne çıkarılmış görsel olarak kullanmak istediğiniz resmi sunucunuza yükledikten sonra karşınıza bu şekilde bir pencere çıkacaktır.Karşınıza çıkan bu pencereden "Öne çıkarılmış görsel olarak kullan" linkine tıklamanız yeterli.Daha sonra da bu pencereyi kapatıp sayfayı kaydedin , hepsi bu kadar.

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.