Cara Memperluas Visual Composer dengan Elemen Konten Kustom

Pada tutorial sebelumnya kita melihat Visual Composer untuk pengembang tema; perizinan dan penyiapan teknis. Dalam tutorial ini kita akan membahas lebih jauh dengan memperluas Visual Composer dan mengaturnya untuk membangun halaman.

Fungsi Default Visual Composer

Sebelum kita melihat sebenarnya membangun sebuah halaman, mari kita jalankan beberapa fitur bawaan.

Elemen Konten

Visual Composer hadir dengan sejumlah besar elemen konten bawaan. Selain itu, Visual Composer menawarkan lebih dari 200 add-on, gratis dan berbayar.

Secara default Visual Composer hanya diaktifkan untuk pages, namun Anda juga dapat mengaktifkannya untuk posting dan bahkan jenis posting kustom. Pilihan ini dan lebih banyak dapat dikelola dari dalam Visual Composer Role Manager. Anda juga bisa mengontrol siapa yang bisa menggunakan Visual Composer di admin Anda.

Shortcode Manager memungkinkan Anda menambahkan elemen kustom dengan parameter. Dalam beberapa hal, metode yang berpusat pada pengguna yang setara dengan metode pengembang dalam pemetaan elemen baru.

Advanced Grid Builder

Salah satu alat yang paling menarik bagi pengguna adalah grid builder. Dengannya, pengguna bisa membuat grid apapun, dengan gambar, teks, tombol, posting dan sebagainya, tanpa menyentuh kode. Grid jenis Masonry juga tersedia.

Template Library

Template Library memberi pengguna akses ke template profesional untuk struktur halaman. Contoh khas termasuk tata letak artikel, tata letak halaman arahan, halaman paralaks, portofolio, sebut saja. Sebagai pengembang Anda bahkan dapat membuat sendiri, dan menyertakannya dengan konten demo tema Anda.

Drumroll ..

Dan akhirnya, kita bisa mencapai bagian yang paling penting dari Visual Composer: editor-nya. Ini adalah editor back-end dan front-end, dan dengan itu pengguna bisa membuat halaman tanpa pengetahuan pengkodean.

Dengan editor front-end Anda mengedit dengan tepat apa yang Anda lihat. Ini pasti lebih What You See Is What You Get daripada editor WYSIWYG WordPress default!

Pembangun halaman bekerja dengan sistem baris dan kolom. Setiap elemen yang ditambahkan ke halaman terbungkus dalam kontainer baris. Banyak elemen dapat ditambahkan ke baris yang sama, dalam kolom, atau baris bersarang lainnya. Tangkapan layar di bawah menyoroti bagaimana elemen, baris, kolom, dapat ditambahkan, diedit, dan dihapus.

Setelah membahas fitur dasar yang tersedia, mari kita tidak mengalihkan perhatian kita pada beberapa perkembangan. Kami akan memperluas fungsi default Visual Composer dan menambahkan elemen kustom baru.

Memperluas Visual Composer

Untuk mengganti elemen apapun dalam Visual Composer, Anda harus menyalin file template dari folder plugin Visual Composer (js_composer) > include > template ke folder yourtheme > vc_templates. Dari tutorial sebelumnya Anda mungkin ingat bahwa dalam tema Focuson kita memiliki empat file:

1. vc_column.php
2. vc_column_text.php
3. vc_row.php
4. vc_video.php

Dan seperti yang kita diskusikan, penamaan sangat penting disini. Template ini harus diberi nama persis seperti pada folder plugin VC default.

Setelah menduplikasi file template, Anda siap untuk menimpanya. Mari kita lihat, misalnya, apa yang ada di file pertama vc_columns.php. Jika Anda sudah familiar dengan pembuatan shortcode tidak akan ada yang baru untuk Anda di sini.

Struktur file dapat dibagi menjadi tiga bagian:

1. Mengekstrak atribut shortcode
2. Mempersiapkan pengaturan untuk output
3. Output struktur shortcode

Tapi bagaimana jika Anda ingin menambahkan atau menghapus atribut shortcode yang ada, bagaimana Anda menghadapinya? Temui tiga fungsi baru:

vc_remove_param();

Fungsi ini menghapus shortcode dari elemen yang ada atau elemen kustom. Untuk menghapus atributnya, targetkan shortcode spesifik dengan nama, misalnya vc_column dan nama atributnya, misalnya el_class.

1

vc_remove_param( "vc_column", "el_class" );

vc_add_param();

Fungsi ini menambahkan parameter baru ke elemen yang ada atau yang kustom. Seperti fungsi vc_remove_param(), targetkan shortcode spesifik dengan namanya, misalnya vc_column dan sertakan parameter array:

1

vc_add_param('vc_column', array(

2

    "type"       => "dropdown",

3

    "class"      => "",

4

    "heading"    => "Animate",

5

    "param_name" => "animate",

6

    "value"      => array(

7

    "False"  => 'false',

8

    "True"   => 'true'

9

    )

10

));

vc_add_params();

Fungsi ini mirip dengan vc_add_param(), namun memungkinkan Anda menambahkan beberapa parameter ke satu elemen. Anda dapat menemukan daftar semua jenis parameter di sini.

Untuk menambahkan atau menghapus param baru, serta menambahkan elemen baru, Anda perlu mengedit file integrasi, yang dalam kasus kami adalah ninzio_vc.php.

1. Kita mulai dengan menonaktifkan editor front-end. Editor front-end adalah fitur yang sangat keren, namun elemen khusus kami tidak mendukungnya. Terserah Anda, sebagai pengembang tema, apakah Anda ingin mendukung editor front-end dan/atau back-end.
2. Hapus semua parameter yang tidak diperlukan atau tidak didukung dari elemen yang ditargetkan dengan vc_remove_param();
3. Tambahkan parameter baru ke elemen yang ada dengan fungsi vc_add_param(); atau vc_add_params();.
4. Lalu tambahkan elemen baru..

Cara Menambahkan Elemen-elemen Kustom

Menambahkan elemen konten baru ke Visual Composer adalah tentang kapan file shortcode hadir di tema atau add-on tema Anda, seperti dalam kasus kami, pertama-tama kami perlu memeriksa fungsinya jika plugin ninzio-addons kami terinstal dan aktif:

1

if (defined( 'NINZIO_ADDONS' ) && file_exists( get_template_directory() . '/plugins/ninzio-addons.zip' ) ) {

2

    … new elements code goes here...

3

}

Bagaimana Visual Composer memahami bahwa elemen baru telah ditambahkan? Dengan add_action();.

1

add_action( 'init', 'focuson_ninzio_integrateVC');

2

3

function focuson_ninzio_integrateVC() {... new elements}

Kita akan menggunakan tindakan init, memberi kita ini:

1

if (defined( 'NINZIO_ADDONS' ) && file_exists( get_template_directory() . '/plugins/ninzio-addons.zip' ) ) {

2

3

    add_action( 'init', 'focuson_ninzio_integrateVC');

4

5

    function focuson_ninzio_integrateVC() {... new elements}

6

7

}

Sekarang kita siap untuk menambahkan elemen baru kita, dimana kita membutuhkan fungsi baru lagi:

vc_map();

Fungsi ini membutuhkan satu parameter: sebuah array dari atribut khusus yang mendeskripsikan shortcode Anda. Sebagai contoh, kami akan menambahkan elemen pemisah kustom:

1

<?php 

2

3

/*  SEPARATOR            (CONTENT)

4

/*-------------------------------*/

5

6

    vc_map(array(

7

  	'name'                    => "Separator",

8

		'base'                    => "nz_sep",

9

		'class'                   => 'nz-sep',

10

		'show_settings_on_create' => false,

11

		'category'                => esc_html__("Ninzio",'focuson'),

12

		'icon'                    => 'icon-separator',

13

		'description'             => 'Use this element to separate content',

14

		'js_view'                 => '',

15

		'params'                  => array(

16

17

            ...

Itu banyak sekali atribut! Mari sorot yang paling penting:

• name memberikan nama deskriptif yang unik ke elemen khusus Anda. Pengguna akan melihatnya di tab Visual Composer.
• base, tak kalah pentingnya dari name, adalah nama tag shortcode. Jika Anda terbiasa dengan pembuatan shortcode kustom, Anda akan tahu bahwa semua shortcode kustom memiliki tag. Misalnya, pemisah kustom kami memiliki tag nz_sep. Basis elemen harus unik dan harus diberi nama persis seperti nama shortcode yang ada di file shortcodes.php Anda (seperti yang ada pada tema Focuson kami):

1

<?php 

2

3

/*  SEPARATOR SHORTCODE

4

/*===================*/

5

6

	function nz_sep($atts, $content = null) {

7

8

		extract(shortcode_atts(

9

			array(

10

				'top'    => '20',

11

				'bottom' => '20',

12

				'type'   => 'solid',

13

				'color'  => '#eeeeee',

14

				'align'  => 'left',

15

				'width'  => '',

16

				'height' => ''

17

			), $atts)

18

		);

19

20

		$styles = "";

21

22

		if (isset($color) && !empty($color)) {

23

			$styles .= 'border-bottom-color:'.$color.';';

24

		}

25

26

		if (isset($width) && !empty($width)) {

27

			$styles .= 'width:'.absint($width).'px;';

28

		} else {

29

			$styles .= 'width:100%;';

30

		}

31

32

		if (isset($height) && !empty($height)) {

33

			$styles .= 'border-bottom-width:'.absint($height).'px;';

34

		}

35

36

		if (isset($type) && !empty($type)) {

37

			$styles .= 'border-bottom-style:'.$type.';';

38

		}

39

40

		if (isset($top) && !empty($top)) {

41

			$styles .= 'margin-top:'.absint($top).'px;';

42

		}

43

44

		if (isset($bottom) && !empty($bottom)) {

45

			$styles .= 'margin-bottom:'.absint($bottom).'px;';

46

		}

47

48

		$output = '<div class="sep-wrap '.sanitize_html_class($align).' nz-clearfix"><div class="nz-separator '.sanitize_html_class($type).'" style="'.esc_attr($styles).'">&nbsp;</div></div>';

49

		return $output;

50

	}

51

	add_shortcode('nz_sep', 'nz_sep');

52

53

?>

• class tidak penting, namun merupakan pilihan penting, berfungsi sebagai pengenal non-unik. Penamaannya harus deskriptif dan tanpa spasi, gunakan tanda hubung atau garis bawah.
• show_settings_on_create adalah parameter boolean dan sudah jelas.
• category sangat penting. Jika Anda ingin mengelompokkan elemen kustom Anda dalam satu tab menu kustom pada menu elemen Visual Composer, Anda harus menambahkan kategori kustom. Jika Anda ingin memasukkan elemen dalam kategori yang ada gunakan nama tab menu yang ada:

• icon ini mirip dengan class. Kami menambahkan nama ikon sehingga kita bisa memberi gaya shortcode pada menu Visual Composer. Sebagai contoh:

1

i.icon-separator,.nz-sep .vc_element-icon {background-image:url(../images/shortcodes/sep.png)!important;}

• description menambahkan deskripsi kecil ke elemen kustom Anda. Pengguna akan melihat ini.
• js_view adalah parameter yang sangat penting. Bila Anda memiliki elemen yang terdiri dari komponen induk dan anak (misalnya kotak konten, yang memiliki elemen kontainer induk dan anak, dimana elemen induk dan anak memiliki atribut terpisah) atribut ini harus memiliki nilai VcColumnView. Kami akan memeriksa detail yang lebih kompleks beberapa saat lagi.
• params adalah array parameter yang akan ditambahkan ke elemen kustom Anda. Ini berperilaku sama dengan fungsi vc_add_params(), namun bersarang di fungsi vc_map().

Elemen Induk dan Anak

Elemen kontainer dengan elemen anak memerlukan beberapa konfigurasi spesifik sebelum menambahkan. Dalam fungsi vc_map() kita perlu menambahkan beberapa parameter lagi untuk membuat elemen kita berupa kontainer, atau anak dari elemen lain.

Misalnya, katakanlah kita ingin menambahkan elemen baru "Content boxes". Kotak konten kami terdiri dari dua bagian:

1. elemen induk dengan atributnya
2. dan elemen kotak anak, masing-masing dengan atributnya.

Satu kotak konten bisa memiliki elemen kotak anak tak terbatas. Jadi kita punya dua masalah untuk dipecahkan:

1. Entah bagaimana kita perlu memberi tahu Visual Composer bahwa kotak konten adalah elemen anak/induk,
2. kemudian kotak itu adalah satu-satunya anak yang mungkin dari elemen kotak konten induk, dan sebuah elemen kotak konten itu adalah satu-satunya kemungkinan induk untuk elemen kotak anak.

Kode Elemen Induk

Untuk menghindari kebingungan sebisa mungkin, mari kita lihat elemen yang ada. Dalam tema Focuson, kami memiliki elemen "Content boxes", dengan dua parameter tambahan yang diminati:

1

"as_parent" => array('only' => 'nz_box')

Ingat parameter base fungsi vc_map() kita? Di sini, dengan as_parent, kami mendaftarkan elemen nz_content_box sebagai induk hanya untuk elemen anak nz_box.

1

"js_view" => 'VcColumnView'

Saat js_view diatur ke VcColumnView, Visual Composer menambahkan fungsionalitas UI tambahan ke elemen di editor, jadi kami dapat menambahkan elemen anak baru.

Kode Elemen Anak

Dengan nada yang sama, kode elemen nz_box kami memiliki parameter tambahan:

1

"as_child" => array('only' => 'nz_content_box'),

Dengan as_child kami mendaftarkan elemen nz_box sebagai anak, tapi hanya untuk elemen induk nz_content_box.

Memperluas Kelas

Jika Anda sekarang mengunjungi menu Visual Composer dan klik pada elemen kotak Content yang baru ditambahkan, Anda akan melihat… ini tidak berfungsi. Tidak ada fungsi induk/anak yang ditambahkan, karena masih ada satu hal yang perlu dilakukan–kita perlu memperluas ke kelas:

• WPBakeryShortCodesContainer
• WPBakeryShortCode

Kelas pertama bertanggung jawab untuk elemen induk, yang kedua bertanggung jawab atas elemen anak. Jadi, tepat setelah fungsi tindakan tambahkan:

1

if ( class_exists( 'WPBakeryShortCodesContainer' ) ) {

2

    class WPBakeryShortCode_nz_Content_Box extends WPBakeryShortCodesContainer {}

3

}

Seperti yang Anda ingat, dasar elemen induk kotak konten adalah nz_content_box, nama ini juga harus hadir dalam nama kelas yang memperluas kelas WPBakeryShortCodesContainer. Dalam kasus kami, nama kelas baru adalah WPBakeryShortCode_nz_Content_Box.

1

if ( class_exists( 'WPBakeryShortCode' ) ) {

2

3

    class WPBakeryShortCode_nz_Box extends WPBakeryShortCode {}

4

5

}

Hal yang sama berlaku untuk elemen anak. Nama dasarnya adalah nz_box dan nama kelas baru akan WPBakeryShortCode_nz_Box.

Apapun nama elemen dasar Anda, itu harus hadir dalam nama kelas baru.

Sekarang, jika Anda melihat editor halaman sekali lagi, Anda akan melihat bahwa elemen kotak konten yang baru memiliki fungsi anak/induk.

Membangun Halaman dengan Visual Composer

Setelah kerja keras kita bisa menuai hasil karya kita. Lihatlah halaman beranda Tema Focuson. Mari membangun beranda tersebut dengan Visual Composer.

Strukturnya dapat dibagi menjadi beberapa bagian:

• Slider Presentasi
• Kotak konten
• Proyek unggulan
• Counter
• Info tambahan, seperti "Why choose us" yang terdiri dari dua kolom
• Banner
• Anggota tim
• Satu lagi blok informasi tambahan dengan dua kolom
• Testimonial klien
• Logo sponsor

Menciptakan kembali ini hanyalah hasil kerja sesaat dengan Visual Composer.

Kita akan membungkus setiap blok di dalam elemen "Row" terpisah dengan setidaknya satu elemen "Column". Seperti yang telah kita bahas, ini adalah dibutuhkan dan struktur minimum dari halaman Visual Composer.

Slider Presentasi

Tema Focuson telah mengintegrasikan Revolution Slider. Slider tidak ditambahkan dengan Visual Composer, namun begitu Anda menginstal Revolution Slider dan Visual Composer, Anda akan melihat elemen baru "Revolution slider". Ini adalah add-on gratis dari Revolution slider, dan dengan elemen itu Anda dapat menempatkan slider ke halaman, bahkan jika tema Anda tidak terintegrasi dengan Visual Composer.

Kotak Konten

Ingat contoh elemen "Content Boxes"? Kita dapat membuat kotak konten yang menakjubkan dengan elemen kustom kita:

Proyek Unggulan

Pada bagian ini kita menggunakan

1. sebuah text_column
2. elemen celah, untuk menambahkan jarak
3. sebuah gambar tunggal di tengah (yang berfungsi sebagai pembagi garis yang bagus)
4. celah lain
5. dan elemen "Recent projects"

Hampir semua elemen disini ditambahkan secara kustom.

Counter

Untuk counter kami menggunakan opsi latar belakang baris (gambar, dan warna) untuk estetika. Semua pilihan ini ditambahkan khusus dari Ninzio. Kami menempatkan elemen kustom counter di dalam baris yang bergaya itu.

Blok Info "Why choose us"

Dengan kolom Visual Composer kita dapat menambahkan konten dual-kolom:

Hampir semua elemen ini ditambahkan secara custom, hanya elemen "Custom Heading" yang hadir dengan Visual Composer default. Pada editor back-end itu tampak asimetris, namun pada bagian front-end Anda akan melihat struktur yang tampak bagus. Manajemen konten bukan tentang hanya mengisi halaman, ini juga merupakan proses yang logis dan kreatif.Anda harus mempertimbangkan dimensi gambar dan teks, dan mempertimbangkan bagaimana penampilan mereka pada perangkat yang berbeda. Terkadang koreksi responsif juga diperlukan. Untungnya, Visual Composer memiliki alat yang dibutuhkan. Pada opsi edit kolom, Anda dapat menemukan tab Responsive Options dimana Anda dapat menyesuaikan ukuran kolom tergantung pada grup perangkat.

Banner

Ini tidak lebih dari sebuah baris dengan gambar latar belakang dan efek paralaks, sejumlah kecil konten di dalamnya dengan tooltip, judul dan tombol.

Anggota Tim

Ini adalah elemen tambahan dari Ninzio; sebuah carousel anggota tim.

Blok Info "Creative Solutions"

Sekali lagi tidak ada yang aneh di sini; elemen baris biasa dengan dua kolom, masing-masing berisi konten.

Tapi di sini triknya adalah agar gambar di sebelah kanan tidak terletak di kolom kedua, sebenarnya diset sebagai gambar latar belakang dari baris, jadi kolom kanan disini kosong.

Testimonial Klien

Kami juga telah membuat elemen kustom untuk menambahkan testimonial. Sekali lagi, tidak ada yang khusus di sini.

Logo Sponsor

Dan bagian terakhir adalah logo sponsor. Ini adalah carousel logo dalam satu baris dengan warna latar abu-abu. Elemen kustom ini juga ditambahkan.

Kesimpulan

Itu saja! Sekarang Anda tahu semua hal yang diperlukan untuk mengintegrasikan Visual Composer dengan Tema Anda dan membuat halaman dengan cepat dan mudah. Sebagai sumber untuk studi lebih lanjut, saya sarankan Anda melihat halaman wiki resmi untuk Visual Composer. Jika Anda memiliki pertanyaan, silakan memberikan komentar di bawah ini!