Visual Composer Elemanı Oluşturmak

August 3, 2017

WordPress geliştirme yaparken genellikle tüm yapıyı (sayfa şablonları, tasarım aktarımı vb.) kendim kurmayı seviyorum ve yapıyordum ancak son dönemde dahil olduğum takım ve işler genellikle Visual Composer eklentisi ile yürütülüyor. Eklentiyi pek sevmedim ancak özellikle son kullanıcı için oldukça güzel faydaları olduğu söylenebilir.

Bu yazımda bazı özel istekler için kendi elemanımızı oluşturmak için çok basit bir giriş hakkında olacak.

Yazdığımız elemanları derli toplu tutmak için alt bir dizin kullanmak oldukça faydalı olacaktır. Ben genellikle “vc-elements” isminde bir dizin oluşturuyorum ve elemanlarımızın her biri için ayrı php sınıfları oluşturuyorum. Sınıfımızı oluşturmadan önce yapmamız gereken bir şey var; eklentinin “vc_before_init” action’ını hook ederek elemanımızın sınıfını çağırmalıyız. Bu işlemi functions.php dosyamızda şu şekilde yapabiliriz:

function vc_before_init_actions() {
  require_once( get_template_directory() . '/vc-elements/ilk-vc-elemanim.php' );    
}
add_action( 'vc_before_init', 'vc_before_init_actions' );

Şimdi vc-elements dizini altında sınıfımızı oluşturabiliriz:

class HelloWorld extends WPBakeryShortCode {
  function __construct() {
    add_action( 'init', array(  $this, 'vc_hello_world_mapping' ) );
    add_shortcode( 'vc_hello_world', array( $this, 'vc_hello_world_html' ) );
  }

  public function vc_hello_world_mapping() {
    vc_map(
      array(
        'name' => __( 'Hello World Element', 'theme' ),
        'base' => 'vc_hello_world',
      )
    );
  }

  public function vc_hello_world_html( ) {
    return "Hello World";        
  }

}

new HelloWorld();

visual-composer

Sınıfımızdaki kodlardan bahsetmek gerekirse;

  • construct altında init action’ını vc_hello_world_mapping methodu ile hook edip, eklenti’nin bir fonksiyonu olan vc_map ile temel elemanımızı oluşturuyoruz.
  • Yine construct altındaki ikinci satırda ise VC’nin kullanacağı shortcode tanımlamasını yapıyoruz, vc elemanlarımız temelde bu shortcode’u kullanıyor olacak.
  • İlk satırda belirttiğim gibi vc_hello_world_mapping içerisinde vc_map kullanarak temel elemanı oluşturuyoruz, parametre olarak gönderdiğimiz array’in içerisindeki base değerinde shortcode’umuzu belirtiyoruz. Çok daha detaylı parametreler alan bir eleman oluşturmak isterseniz bu sayfayı inceleyebilirsiniz.
  • Son olarak vc_hello_world_html methodunda ise ekrana basacak değerleri döndürüyoruz.

visual-composer

En basit anlamda bir visual composer elemani oluşturmak bu şekilde, çok daha detaylı geliştirmeler yapmak için eklentinin kendi wikisinden yararlanmak en doğrusu olacaktır.

Comments

comments powered by Disqus