WordPress Visual Composer İçin Eklenti Geliştirmek

WordPress Visual Composer İçin Eklenti Geliştirmek

Merhaba

WordPress tema entegresi yaparken ister istemez çoğu müşterimden Visual Composer eklentisi kullanıyorum. Bu eklentiyi kullanırken de içine ekler yazmak gerekiyor. Bugün size kısaca bundan bahsedicem.

Şimdi örnek kodlarımızı wordpress teması içindeki function.php dosyasına yazmamız gerekmektedir.

Bu dosyayı açtıktan sonra

Bir fonksiyon oluşturuyoruz.

function webnuts_bild() {
    vc_map( array(
        "name" => __( "Eklentimizin adı", "my-text-domain" ),
        "base" => "eklentimizin-sefurl-hali",
        "icon" => "icon-webnuts", //icon belirleyebiliyorsunuz ben genelde standart kullandım.
        'admin_enqueue_css' => array('/wp-content/themes/devdmbootstrap3-child/framework/css/admin-wn.css' ), //Eklenti için bir css dökümanı ben genelde standart olanı kullandım.
        "class" => "wn-bild",
        "category" => __( "Tema Eklentileri", "my-text-domain"),//Burada kategorimizin adı
        "params" => array( //Bir parametre oluşturuyoruz.
			array(
                'type' => 'textfield',//Parametremiz içinde ben textfield özelliğini kullanarak bir yazı alanı oluşturdum.
                'holder' => 'div',
                'class' => '',
                'heading' => __( 'Başlık', 'my-text-domain' ), //Alanımızın adı
                'param_name' => 'title',//Parametre isimi
                'value' => __( '', 'text-domain' ),//İsterseniz otomatik bir değer atayarak başlatabilirsiniz.
                'description' => __( 'Bir başlık belirleyin', 'text-domain' ),//Açıklama kısımı
            )			
        )
    ) );
}

Adını webnuts_bild yaptık. Yukarıda kodlar içinde kısa kısa kullanımlarından bahsettim yinede ayrı ayrı bahsetmekte fayda var.

Vc_map oluşturup “name” kısımına eklentimizin adını yazıyoruz.
“base” yerine eklentimiz için bir sef oluşturuyoruz. Kısaca aslında shortmap
“icon” ikon kısımından isterseniz bu eklenti için bir ikon belirleyebilirsiniz.
“admin_enqueue_css” bu alan içerisinde bir css dokümanı ekleyip kullandığınız eklenti için tasarım oluşturabilirsiniz.
“category” bu kısıma yazdığınız kategori isminin altında gözükür eklentiniz ben genelde “Tema Eklentileri” diye yapıp bu alan altında barındırıyorum kendi eklentilerimi.
“params” altında artık bir dizi oluşturup onun içinde yeni diziler oluşturarak alanlarımızı tanımlıyoruz.
“type” buraya textfield,dropdown,attach_image vs. gibi parametreler yazabiliyorsunuz. Bununla ilgili bir kaç örnek sıralayacağım.
“class” bu alan için bir class atayabilirsiniz.
“heading” alanın başlığı.
“param_name” parametre için bir isim belirliyorsunuz bu önemli çünkü verilerimizi çekerken bu isimle çekeceğiz.
“value” direk bir değer atamamıza yarar boş bırakabilirsiniz.
“description” bir açıklama ekleyerek kullanan kişilere yön verebilirsiniz.

Şimdi geldi bu kodları ekledikten sonra bunların ana ekranda gösterme biçimine öncelikle bu oluşturduğumuz fonksiyonu visual composer içine eklemesini yapıyoruz.

 

add_action( 'vc_before_init', 'webnuts_bild' );

Daha sonrasında ise tasarım kısımında gözükmesini sağlayan kısıma geldi.

function degerleri_oku( $atts ) {
    extract( shortcode_atts( array(
        'title' => 'Başlık'
    ), $atts ) );
	return '
		
	';
}

“degerleri_oku” diye bir fonksiyon yaptık ve içinde “extract” ile yukarıda oluşturduğumuz alanlardan gelen verileri okuyacağız.

Tırnak içinde ‘title’ diye belirttiğim alan yukarıda önemle bahsettiğim param_name ile aynı değerdir ve burada tanımladıktan sonra return içinde bu değeri döndürebilirsiniz veya bir html şablon döndürebilirsiniz. Örnek olarak

function degerleri_oku( $atts ) {
    extract( shortcode_atts( array(
        'title' => 'Başlık'
    ), $atts ) );
	return '
‘.$title.’

‘; }

Burada yukarıda ki başlık değerini dön dermiş olduk. Bu fonksiyonu da yine action olarak oluşturmamız gerekmekte.

add_shortcode( 'yukarıda verdiğimiz basein isimi', 'degerleri_oku' );

Shortcode eklerken ilk önce nereden parametreleri çekeceğiniz belirtiyoruz yani ilk oluşturduğumuz fonksiyonun base name buraya yazıyoruz daha sonrasında yeni oluşturduğumuz fonksiyonun isimini yazıyoruz ve işlem tamamlanmış oluyor artık visual composer içinden eklentimizi oluşturabiliriz.

Diğer örnek olarak oluşturabileceğiniz parametreler

Dropdown

         array(
                'type' => 'dropdown',
                'holder' => 'div',
                'class' => '',
                'heading' => __( 'Dropdown', 'my-text-domain' ),
                'param_name' => 'paramame',
                'value' => array(
					"0" => "İlk değer",
					"1" => "İkinci",
					"2" => "Üçüncü",
					"3" => "Dördüncü"
				)
            )	

Resim

         array(
                "type" => "attach_image",
                "holder" => "img",
                "class" => "",
                "heading" => __( "Resim", "my-text-domain" ),
                "param_name" => "paramname",
                "value" => __( "", "my-text-domain" ),
                "description" => __( ".", "my-text-domain" )
            ),

Yalnız burada ki resim değeri size ön tarafta resmin id değerini dönderir resimin linkini almak için ikinci fonsiyon içinde

$image = wp_get_attachment_url($paramname);

Bu fonksiyonu kullanırsanız resmin artık linkini almış olursunuz.

Takıldığınız yerlerde yorumdan sorarsanız yardımcı olurum.

Vahdet Yavuz

Son Yazılar
Bir cevap bırakın