WordPress Temaya Özel Bileşen Yapımı

12 yıl önce

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.

Yorumlar (18)

  1. Emrah dedi ki:

    Merhaba bileşen yapımı dışında videolu ders çekme ihtimalin var mı ? Bende senin temayı kullanıyorum bir çok yerini değiştirdim kendime göre ama şuan yeni bir tema çiziyorum başarabilirsem html css’e döküp entegre etmeye çalışacağım html css dökerken zorlanacağım baya bi.. :)
    Eline sağlık paylaşımlarında senin gibi güzel ilk yorumumdu umarım devamı gelir başarılarının kolay gelsin.
    ” Değerli bir katkısı olmuştur bileşen yapımın “

  2. Mehmet dedi ki:

    Temanın görselliğinin yanında işlevleri de önemli. WordPress altyapısında işlev demek bileşen demek. Mesela senin Burakişci V3 teman görselliğinin yanında bileşen desteğinden dolayı harika. Tema yaratıcılarına harika bir kaynak :)

  3. Şükrü dedi ki:

    sipsi teman acaba ne zaman çıkacak dört gözle onu bekliyorum ;)

  4. Taner AKSOY dedi ki:

    Eline sağlık Burakcım. Sen eklenti kullanmayı sevmessen herşeyi bileşenler hallediyorsun helal olsun valla.

  5. nega dedi ki:

    Teşekkürler. Bu konuda Tr kaynak yoktu. Emeğine sağlık.

  6. avşa dedi ki:

    Şu wordpressi çok seviyorum kodlaması ve bi çok şeyi harika. Ama nedense bir tek ben verim alamıyorum. O yüzden sistem yazmak zorunda kalıyorum. Bu arada Burak alexa globalde daha iyiye gidiyosun Tr de gerilemişssin bilgin olsun.

  7. kadircan dedi ki:

    hocam temada sorun mu var :D

  8. Chat dedi ki:

    Tesekkurler Super…

  9. onur dedi ki:

    Hiç yorum yazma gibi bir alışkanlığım yoktur ancak bu konuya yazmadan geçemeyeceğim. Çok yararlı bir konu, paylaşımın için teşekkürler.

  10. Alperen dedi ki:

    sağol, bunu arıyordum :) hatasız ve detaylı bir anlatım :)