Bagaimana cara mengintegrasikan Visual komposer ke dalam Tema WordPress

() translation by (you can also view the original English article)

Visual Composer adalah plugin WordPress yang memungkinkan halaman dibangun menggunakan antarmuka drag-and-drop. Memberikan pengguna kekuatan untuk menyusun halaman dengan mudah, dan memberi kesempatan pada pengembang untuk menambahkan nilai pada tema WordPress mereka. Dalam tutorial ini kita akan melihat implikasi hukum dan teknis mengintegrasikan Visual Composer ke dalam tema, siap dijual.

Visual Composer dilengkapi dengan:

Gabungan front-end dan back-end editor WordPress.
40+ dibangun di elemen konten yang tersedia out of the box dan 200+ add-on, yang dirancang untuk membawa situs Anda ke tingkat berikutnya.
Perpustakaan template yang memberi pengguna WordPress akses ke ratusan template tata letak berkualitas tinggi.
Pembangun skin untuk cepat mengubah tampilan visual tema.
Pembangun grid tingkat lanjut untuk posting, portofolio, media, dan jenis posting kustom.

Jadi itu adalah fitur utama Visual Composer, semuanya terbungkus, termasuk dukungan profesional seharga $34 (lisensi reguler per Desember 2016).

Visual Composer untuk Pengembang Tema

Mari pikirkan sejenak mengapa pengembang tema harus mengintegrasikan atau memperluas Visual Composer, dan apa implikasi lisensinya untuk melakukannya.

Menjual Tema WordPress bisa menjadi bisnis yang menguntungkan, entah Anda jual sendiri atau melalui pasar seperti ThemeForest. Sebagai pencipta tema (Ninzio Themes) kami memahami penghargaannya, namun mengetahui bagaimana pengembangan tema yang sulit, dan apa yang diinginkan masing-masing pengembang dari produknya:

Mengurangi waktu dan biaya pengembangan.
Produk berkualitas tinggi.
Memaksimalkan pendapatan dari penjualan
Mengurangi waktu dukungan
Fokus pada fitur dan pemasaran baru

Dan apakah Anda tahu? Visual Composer dapat membantu Anda mencapai tujuan ini secara langsung atau tidak langsung. Mari saya jelaskan caranya:

Banyak tema WordPress memiliki Page Builders bawaan, dan membangunnya menjadi tren di tahun-tahun sebelumnya, namun saat ini, dengan persaingan yang meningkat, sangat tidak menguntungkan dalam hal biaya dan waktu untuk mengembangkan solusi kustom untuk tema Anda. Sebagai gantinya, Visual Composer dapat diintegrasikan ke dalam tema Anda, dan ditawarkan kepada pembeli Anda secara gratis (bebas menggunakannya hanya dengan tema Anda).

Jika Anda melihat-lihat tema WordPress teratas Themeforest Anda akan melihat bahwa hampir setiap tema memiliki Visual Composer yang terintegrasi di dalamnya, bahkan tema yang memiliki builder khusus bawaan mereka sendiri. Visual Composer adalah produk yang terkenal, diuji ribuan kali oleh lebih dari jutaan pengguna dan pengembang.

ThemeForests top WordPress themes — Tema WordPress teratas di Themeforest

Pada titik ini kami telah menjelaskan mengapa Visual Composer telah menjadi (hampir) pengetahuan yang dibutuhkan untuk para pengembang tema WordPress yang sukses, dan mengapa Anda harus mempertimbangkan untuk mengintegrasikannya ke dalam tema Anda.

Pertanyaan selanjutnya adalah: bagaimana kita mengintegrasikan Visual Composer, dan apakah kita memiliki hak untuk melakukannya?

Integrasi Tema: Panduan Hukum

Jika Anda adalah pengembang tema yang memikirkan untuk menyertakan Visual Composer dalam tema Anda, inilah ringkasan singkat dari apa yang dibutuhkan:

"Pada tanggal 22 Januari 2013 Envato memperbarui lisensi mereka dan tidak mungkin lagi menggunakan item dari pasar di dalam item Anda sendiri yang akan dijual di pasar Envato, tanpa kesepakatan kemitraan antara dua pencipta. Dalam hal ini antara saya (Michael M) dan Anda (penulis tema). " – Michael M

Jadi... jika Anda ingin menyertakan Visual Composer di dalam tema Anda, Anda harus menulis surat kepada Michael? Untungnya, tidak perlu. Proses ini sudah otomatis. Mari kita periksa, selangkah demi selangkah, bagaimana kita bisa benar melisensikan Visual Composer.

Membeli Lisensi diperpanjang

Pertama, Anda perlu membeli lisensi diperpanjang Visual Composer dari CodeCanyon. Pada saat penulisan harga untuk lisensi diperpanjang adalah $170.

Visual Composers extended license from CodeCanyon — Lisensi diperpanjang Visual Composer dari CodeCanyon

Apa itu "Extended License"?

Lisensi diperpanjang memungkinkan penggunaan plugin, oleh Anda atau satu klien, dalam satu produk tunggal yang dapat dikenai biaya kepada pengguna akhir. Harga total termasuk harga item dan biaya pembeli.

Intinya, Anda membeli lisensi pengembang untuk menggunakan Visual Composer dengan salah satu tema Anda. Klien yang membeli tema tersebut tidak diharuskan untuk membeli lisensi reguler Visual Composer.

Apa yang Tidak Dicakup?

Anda tidak dapat menggunakan satu lisensi diperpanjang untuk berbagai tema, Anda juga tidak dapat membagikan lisensi diperpanjang dengan orang lain. Anda tidak perlu berbagi kunci lisensi dengan klien Anda, dan klien Anda tidak perlu mengaktifkan Visual Composer (salinan yang disertakan dengan tema Anda).

Bagaimana dengan Pembaruan Visual Composer?

Salah satu pertanyaan paling umum yang kami dengar di Ninzio Themes adalah: "Saya tidak dapat memperbarui Visual Composer". Hal ini tidak dilakukan dari klien; setiap pembaruan Visual Composer harus diuji dan disertakan dalam pembaruan tema.

"In-Stock License"

Tapi tunggu sebentar–WPBakery mengatakan "tidak mungkin lagi menggunakan item dari pasar di dalam item Anda sendiri yang akan dijual di pasar Envato". Jadi, bagaimana Anda bisa menyertakan Visual Composer di tema Anda untuk dijual di ThemeForest jika lisensi diperpanjang Anda tidak mengizinkannya? Di sinilah "kesepakatan" khusus antara Anda dan Michael M (Pencipta Plugin Visual Composer) ikut berperan: "In-Stock License".

Setelah Anda membeli lisensi diperpanjang dari CodeCanyon, buka portal dukungan WPBakery dan login dengan login Envato Anda.

Popup dengan pesan Authorize WPBakery Support Portal untuk terhubung dengan akun Anda? akan muncul; klik Approve. Selanjutnya, jika Anda telah membeli lisensi diperpanjang, WPBakery secara otomatis menunjukkan lisensi Anda yang baru dibeli di dashboard, jadi pilih lisensinya, masukkan nama tema, dan tekan Submit. Lisensi diperpanjang Anda akan berubah menjadi "In-Stock License". ThemeForest tahu, WPbakery tahu, Anda tahu–semuanya berlisensi, jadi Anda bisa memasukkan Visual Composer ke dalam tema Anda dan menjual tema di ThemeForest.

Pada titik ini, kita telah selesai melihat aspek hukum dari integrasi Visual Composer, sekarang saatnya untuk memeriksa sisi teknisnya.

Integrasi Tema: Panduan Teknis

Tidak terlalu banyak terlibat dengan mengintegrasikan Visual Composer dengan tema Anda. Kami akan menjelaskan prosesnya dengan menggunakan salah satu tema kami, Focuson, sebagai contohnya.

Membuat Lingkungan yang Diperlukan

Kami membutuhkan hal-hal berikut:

File php dengan elemen kustom (shortcode tema Anda). Dalam kasus kami, ini disebut "shortcodes.php" yang terletak di plugin "ninzio-addons" (sebuah plugin dengan fungsionalitas kustom tema). "shortcodes.php" bertanggung jawab atas hasil akhir shortcode. Untuk panduan tentang cara membuat shortcode WordPress, lihatlah tutorial Rohan Mehta Memulai dengan Shortcode WordPress.
File php untuk mengintegrasikan Visual Composer. File ini berisi opsi elemen kustom Anda, ditampilkan di menu dashboard Visual Composer. Dalam kasus kami ini disebut "ninzio_vc.php" dan terletak di folder tema > includes.
Folder template Visual Composer, yang berisi file php dari elemen default Visual Composer, jika Anda perlu menimpa mereka. Folder ini harus diberi nama "vc_templates", dan semua file yang berada di dalam folder itu harus diberi nama persis seperti folder Visual Composer "vc_templates". Dalam kasus kami, kami memiliki empat file yang diperluas dengan struktur dan fungsionalitas kustom: "vc_column.php", "vc_column_text.php", "vc_row.php", dan "vc_video.php". Folder "vc_templates" harus diletakkan langsung di dalam folder root folder tema Anda > vc_templates.

Terakhir tapi bukan yang terburuk, karena Visual Composer adalah plugin eksternal, kita perlu menyertakannya dengan paket unduhan tema. Di sini kita memiliki dua pilihan:

Menyertakan file "js_composer.zip" di dalam paket unduhan dan mintalah pembeli Anda untuk menginstalnya secara manual.
Gunakan TGM Plugin Activator untuk mengotomatisasi proses ini.

Kami menemukan pilihan kedua adalah cara terbaik untuk meminta dan merekomendasikan plugin untuk tema WordPress. Untuk melakukannya, buatlah folder "plugins" di dalam folder root tema Anda dan taruh file "js_composer.zip" (file Visual Composer yang diinstal, yang telah Anda unduh setelah pembelian) di dalamnya. Untuk mempelajari lebih lanjut tentang TGM Plugin Activator, lihat tutorial Barış Ünver Menggunakan Perpustakaan TGM Plugin Activation di Tema Anda.

WordPress Theme Check

WordPress Theme Check tidak menyukainya saat tema menyertakan plugin yang dikemas. Ini akan memberi peringatan seperti:

REQUIRED: Zip file found. Plugins are not allowed in themes. The zip file found was js_composer.zip

Sayangnya, untuk situasi ini tidak ada instruksi resmi. Karena menyertakan folder plugin di server Anda bertentangan dengan lisensi Plugins in Themes - Theme Check Issue tidak ada cara lain yang lebih baik untuk menyertakan plugin dengan tema.

Atur Napas Anda

Jadi, untuk saat ini kita sudah...

...menyertakan js_composer.zip di dalam tema (fucoson > plugins > js_composer.zip)
...membuat file php elemen kustom (ninzio-addons > shortcodes > shortcodes.php). Ingatlah bahwa kita memiliki plugin ninzio-addons dengan semua fungsi kustom di dalamnya, dan dilengkapi dengan temanya.
...membuat file integrasi Visual Composer (focuson > includes > ninzio_vc.php)
...dan membuat folder "vc_templates" yang berisi elemen Visual Composer default untuk diperluas dengan fungsionalitas kustom.

Menyertakan Komponen yang Diperlukan

Sekarang mari kita selesaikan integrasi dengan memasukkan komponen yang diperlukan. Buka file "functions.php" tema Anda dan, dengan TGM Plugin Activator, tambahkan Visual Composer ke daftar plugin yang dibutuhkan:

    $plugins = array(
    
        array(
            'name'  				=> esc_html__('WPBakery Visual Composer', 'focuson'),
        	'slug'					=> 'js_composer',
        	'source'				=> get_template_directory() . '/plugins/js_composer.zip',
        	'required'				=> true,
        	'force_activation'		=> false,
        	'force_deactivation'	=> false,
        	'external_url'			=> ''
        )
    
    );

Sekarang sertakan file "shortcodes.php". Seperti dalam kasus tema Focuson, file ini terletak di dalam plugin "ninzio-addons", ini sudah disertakan saat plugin ninzio-addons diinstal.

Selanjutnya, sertakan file integrasi "ninzio_vc.php". Bagian ini sangat penting, karena kita perlu memastikan bahwa file Visual Composer yang dapat diinstal "js_composer.zip" ada di dalam folder plugin dan plugin Visual Composer berhasil diinstal dan aktif:

1	if (defined( 'WPB_VC_VERSION' ) && file_exists( get_template_directory() . '/plugins/js_composer.zip' ) ) {
2	require_once(get_template_directory() . '/includes/ninzio_vc.php' );
3	}

Baru setelah itu kita memerlukan file integrasi "ninzio_vc.php".

1	require_once(get_template_directory() . '/includes/ninzio_vc.php' );

Kesimpulan

Itu saja! Visual Composer terintegrasi dengan tema kami dan kami memiliki semua yang dibutuhkan untuk memperpanjangnya. Pada tutorial selanjutnya kita akan melihat cara memperluas dan membangun dengan Visual Composer. Sampai jumpa!