Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Theme Development
Webdesign

Bagaimana Memperluas Komposer Visual dengan Unsur Kandungan Tersuai

by
Difficulty:IntermediateLength:LongLanguages:

Malay (Melayu) translation by Umar bin Abdul Aziz (you can also view the original English article)

Dalam tutorial sebelumnya, kami melihat Komposer Visual untuk pemaju tema; pelesenan dan penyediaan teknikal. Dalam tutorial ini, kami akan membincangkan lagi dengan memperluas Komposer Visual dan menetapkannya untuk membina laman.

Fungsi Komposer Visual lalai

Sebelum kita melihat sebenarnya membina halaman, mari kita jalankan beberapa ciri lalai.

Unsur Kandungan

Komposer Visual dilengkapi dengan sejumlah besar unsur kandungan lalai. Di samping itu, Komposer Visual menawarkan lebih daripada 200 alat tambahan, percuma dan berbayar.

Secara lalai Visual Composer hanya diaktifkan untuk halaman, tetapi anda juga boleh membolehkannya untuk menyiarkan dan juga mengetik siaran peribadi. Ini dan lebih banyak pilihan boleh diuruskan dari dalam Pengurus Peranan Komposer Visual. Anda juga boleh mengawal siapa yang boleh menggunakan Komposer Visual dalam admin anda.

Pengurus ringkas membolehkan anda menambah elemen tersuai dengan parameter. Dalam sesetengah kes, kaedah berpusatkan pengguna bersamaan dengan kaedah pemaju dalam memetakan elemen baru.

Pembina Grid Lanjutan

Salah satu alat yang paling menarik untuk pengguna ialah pembina grid. Dengan itu, pengguna boleh membuat sebarang grid, dengan imej, teks, butang, jawatan dan sebagainya, tanpa menyentuh kod. Grid jenis mason juga tersedia.

Mmm grids
Grid Mmm

Templat perpustakaan

Perpustakaan Templat memberikan pengguna akses kepada templat profesional untuk struktur halaman. Contoh tipikal termasuk susun atur artikel, susun atur halaman pendaratan, halaman paralaks, portfolios, anda namakannya. Sebagai pemaju, anda juga boleh membuat sendiri, dan masukkannya dengan kandungan demo tema anda.

Drumroll ..

Dan akhirnya, kita dapat mencapai bahagian yang paling penting dari Komposer Visual: editor. Ini adalah editor back-end dan front-end, dan dengan itu pengguna boleh membuat halaman tanpa pengetahuan pengekodan.

Visual Composers back end editor
Editor belakang visual komposer Visual
Visual Composers front-end editor
Penyusun muka depan komposer Visual

Dengan editor front-end anda mengedit apa yang anda lihat. Ini sudah tentu lebih Apa Yang Anda Lihat Apa Yang Anda Dapatkan daripada editor WordPress WYSIWYG lalai!

Pembina halaman berfungsi dengan sistem baris dan lajur. Setiap elemen yang ditambahkan ke halaman dibungkus dalam bekas berturut-turut. Banyak unsur boleh ditambah ke baris yang sama, dalam lajur, atau baris bersarang lain. Petikan di bawah menunjukkan bagaimana elemen, baris, lajur, boleh ditambah, diedit, dan dipadam.

Selepas membincangkan ciri-ciri asas yang ada, janganlah kita menumpukan perhatian kepada beberapa perkembangan. Kami akan memperluaskan fungsi lalai Komposer Visual dan menambah elemen tersuai baru.

Kembangkan Komposer Visual

Untuk menggantikan sebarang elemen dalam Komposer Visual, anda mesti menyalin fail templat dari folder plugin Komposer Visual (js_composer)> termasuk> template ke folder yourtheme> vc_templates . Daripada tutorial sebelumnya, anda mungkin ingat bahawa dalam tema Focuson kami mempunyai empat fail:

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

Dan seperti yang kita bincangkan, penamaan adalah sangat penting di sini. Templat ini mesti dinamakan sama seperti dalam folder plugin VC lalai.

Setelah menduplikasi fail template, anda sudah bersedia untuk menulis ganti. Mari lihat, sebagai contoh, apa yang terdapat dalam fail pertama vc_columns.php. Jika anda sudah biasa dengan membuat kod pendek tidak akan ada yang baru untuk anda di sini.

Struktur fail boleh dibahagikan kepada tiga bahagian:

  1. Ekstrak sifat atribut ringkas
  2. Sediakan tetapan untuk keluaran
  3. Struktur output ringkas

Tetapi bagaimana jika anda ingin menambah atau memadam atribut shortcode yang ada, bagaimana anda berurusan dengan mereka? Bertemu tiga fungsi baru:

vc_remove_param ();

Fungsi ini membuang kod pendek dari elemen sedia ada atau elemen tersuai. Untuk memadamkan atribut, sasarkan kod ringkas khusus dengan nama, contohnya vc_column dan nama atribut, sebagai contoh el_class .

vc_add_param ();

Fungsi ini menambah parameter baru kepada elemen sedia ada atau adat. Seperti fungsi vc_remove_param() , sasarkan kod pendek khusus dengan nama mereka, contohnya vc_column dan masukkan parameter tatasusunan:

vc_add_params ();

Fungsi ini sama dengan vc_add_param() , tetapi membolehkan anda menambah beberapa parameter kepada satu elemen. Anda boleh mencari senarai semua jenis parameter di sini .

Untuk menambah atau mengalih keluar param baru, dan menambah elemen baru, anda perlu mengedit fail integrasi, yang dalam kes kami adalah ninzio_vc.php.

  1. Kami mula dengan melumpuhkan editor hadapan. Editor front-end adalah ciri yang sangat keren, tetapi unsur khas kami tidak menyokongnya. Terpantas kepada anda, sebagai pemaju tema, sama ada anda mahu menyokong editor akhir dan / atau back-end.
  2. Keluarkan semua parameter yang tidak diperlukan atau tidak disokong daripada elemen yang disasarkan dengan vc_remove_param();
  3. Tambah parameter baru ke elemen sedia ada dengan fungsi vc_add_param(); atau vc_add_params(); .
  4. Kemudian tambahkan elemen baru ...

Cara Tambah Elemen Custom

Menambah unsur-unsur kandungan baru kepada Komposer Visual adalah tentang apabila fail shortcode hadir dalam tema atau tema add-on anda, seperti dalam kes kami, pertama-tama kami perlu menyemak fungsi mereka jika plugin ninzio-addons kami dipasang dan aktif:

Bagaimanakah Visual Composer memahami bahawa elemen baru telah ditambah? . add_action(); .

Kami akan menggunakan tindakan init , memberi kami ini:

Kini kami bersedia untuk menambah unsur baru kami, di mana kami memerlukan satu fungsi baru:

vc_map ();

Fungsi ini memerlukan satu parameter: pelbagai ciri khas yang menggambarkan shortcode anda. Sebagai contoh, kami akan menambah unsur pemisah tersuai:

Itulah banyak sifat! Mari kita menyerlahkan perkara yang paling penting:

  • name memberikan name deskriptif yang unik kepada elemen tertentu anda. Pengguna akan melihatnya dalam tab Komposer Visual.
  • base , tidak kurang penting daripada name , adalah nama tag shortcode. Jika anda digunakan untuk membuat kod pendek tersuai, anda akan mengetahui bahawa semua kod pendek adat mempunyai teg. Sebagai contoh, pemisah tersuai kami mempunyai tag nz_sep . Unsur asas mestilah unik dan mesti dinamakan sama seperti nama shortcode dalam fail shortcodes.php anda (seperti dalam tema Focuson kami):
  • class tidak penting, tetapi merupakan pilihan penting, berfungsi sebagai pengecam unik. Nama mesti deskriptif dan tanpa ruang, gunakan tanda hubung atau garis bawah.
  • show_settings_on_create adalah parameter boolean dan jelas.
  • category sangat penting. Sekiranya anda ingin menyusun elemen tersuai anda dalam satu tab menu tersuai pada menu elemen Komposer Visual, anda mesti menambah kategori tersuai. Sekiranya anda ingin menyertakan elemen dalam kategori sedia ada, gunakan nama tab menu yang ada :
  • icon ini sama dengan class . Kami menambah nama ikon supaya kami dapat memberikan gaya ringkas kepada menu Visual Composer. Sebagai contoh:
  • description menambah description kecil kepada elemen tersuai anda. Pengguna akan melihatnya.
  • js_view adalah parameter yang sangat penting. Jika anda mempunyai elemen yang terdiri daripada komponen ibu bapa dan kanak-kanak (contohnya kotak kandungan, yang mempunyai elemen kontena ibu bapa dan kanak-kanak, di mana unsur ibu bapa dan anak mempunyai atribut yang berasingan) atribut ini mesti mempunyai nilai VcColumnView . Kami akan memeriksa butiran yang lebih rumit dalam beberapa saat.
  • params adalah pelbagai parameter yang akan ditambahkan pada elemen tersuai anda. Ini berfungsi sama seperti fungsi vc_add_params() , tetapi bersarang dalam fungsi vc_map() .

Elemen Ibu Bapa dan Anak

Unsur-unsur kontainer dengan elemen kanak-kanak memerlukan konfigurasi tertentu sebelum menambah. Dalam fungsi vc_map() kita perlu menambah beberapa lagi parameter untuk menjadikan elemen kami sebagai bekas, atau kanak-kanak dari unsur lain.

Sebagai contoh, katakan kami ingin menambah elemen baru "Kotak kandungan". Kotak kandungan kami terdiri daripada dua bahagian:

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

Satu kotak kandungan boleh mempunyai unsur kotak anak tanpa had. Oleh itu, kami mempunyai dua masalah untuk diselesaikan:

  1. Entah bagaimana kita perlu memberitahu Komposer Visual bahawa kotak kandungan adalah unsur anak / induk,
  2. maka kotak adalah satu-satunya kanak-kanak yang mungkin dari elemen kotak kandungan induk, dan elemen kotak kandungan adalah satu-satunya ibu bapa yang mungkin untuk elemen kotak kanak-kanak.

Kod Elemen Ibu Bapa

Untuk mengelakkan kekeliruan sebanyak mungkin, mari lihat unsur-unsur. Dalam tema Focuson, kami mempunyai elemen "Kotak kandungan", dengan dua parameter tambahan yang diminta:

ngat fungsi base parameter kami vc_map() ? Di sini, dengan as_parent , kami mendaftarkan elemen nz_content_box sebagai induk hanya untuk elemen kanak-kanak nz_box .

Apabila js_view ditetapkan kepada VcColumnView , Komposer Visual menambah fungsi UI tambahan kepada unsur-unsur dalam editor, jadi kami boleh menambah elemen anak baru.

Anak Elemen Kod

Dalam urat yang sama, nz_box kod elemen kami mempunyai parameter tambahan:

Dengan as_child kami mendaftarkan elemen nz_box sebagai kanak-kanak, tetapi hanya untuk elemen induk nz_content_box .

Memperluas Kelas

Jika anda kini melawat menu Komposer Visual dan klik pada elemen kotak Kandungan yang baru ditambah, anda akan melihat ... ini tidak berfungsi. Tiada fungsi ibu bapa / kanak-kanak ditambah, kerana masih ada satu perkara yang harus dilakukan - kita perlu berkembang ke kelas:

  • WPBakeryShortCodesContainer
  • WPBakeryShortCode

Kelas pertama bertanggungjawab untuk unsur induk, yang kedua bertanggungjawab untuk elemen kanak-kanak. Jadi, sejurus selepas fungsi tindakan menambah:

Seperti yang anda masih ingat, elemen induk kotak kandungan asas adalah nz_content_box , nama ini juga mesti hadir dalam nama kelas yang memanjangkan kelas WPBakeryShortCodesContainer . Dalam kes kami, nama kelas baru ialah WPBakeryShortCode_nz_Content_Box .

Perkara yang sama berlaku kepada elemen kanak-kanak. Nama asas ialah nz_box dan nama kelas baru akan menjadi WPBakeryShortCode_nz_Box .

Apapun nama elemen asas anda, ia mestilah hadir dalam nama kelas baru.

Sekarang, jika anda melihat editor halaman sekali lagi, anda akan melihat bahawa elemen kotak kandungan baru mempunyai fungsi anak / ibu bapa.


Membina Laman dengan Komposer Visual

Selepas kerja keras kita dapat menuai hasil kerja kita. Lihat laman utama Tema Focuson . Mari buat laman utama dengan Komposer Visual.

Strukturnya boleh dibahagikan kepada beberapa bahagian:

  • Slider Persembahan
  • Kotak kandungan
  • Projek utama
  • Kaunter
  • Maklumat tambahan, seperti "Kenapa pilih kami" yang terdiri daripada dua lajur
  • Banner
  • Ahli pasukan
  • Satu lagi blok maklumat dua lajur
  • Testimoni Pelanggan
  • Logo penaja

Menambah semula ini hanyalah kerja seketika dengan Komposer Visual.

Kami akan membungkus setiap blok dalam elemen "Row" berasingan dengan sekurang-kurangnya satu elemen "Ruang". Seperti yang telah dibincangkan, ini adalah struktur minimum dan keperluan halaman Komposer Visual.

Slider Persembahan

Tema Focuson telah mengintegrasikan Slider Revolusi . Slider tidak ditambah kepada Komposer Visual, tetapi apabila anda memasang Revolution Slider dan Komposer Visual, anda akan melihat unsur baru "slider Revolusi". Ini adalah tambahan percuma dari slider Revolusi, dan dengan elemen itu anda boleh meletakkan slider pada halaman, walaupun tema anda tidak diintegrasikan dengan Komposer Visual.

Peti Kandungan

Ingat contoh unsur "Kotak Kandungan"? Kami boleh membuat kotak kandungan hebat dengan elemen tersuai kami:

Projek yang dipilih

Dalam seksyen ini kita gunakan

  1. sebuah text_column
  2. unsur jurang, untuk menambah jarak
  3. satu imej di tengah (yang berfungsi sebagai pembahagi garis yang baik)
  4. jurang lain
  5. dan "projek-projek terkini" elemen

Hampir semua elemen di sini ditambah adat.

Kaunter

Untuk kaunter, kami menggunakan pilihan latar belakang baris (imej dan warna) untuk estetika. Semua pilihan ini ditambahkan secara khusus dari Ninzio. Kami meletakkan elemen kaunter adat dalam barisan yang bergaya.

Maklumat Blok "Kenapa pilih kami"

Dengan lajur Visual Komposer kita boleh menambah kandungan dua lajur:

Hampir semua elemen ini ditambah adat, hanya elemen "Custom Heading" yang disertakan dengan Komposer Visual lalai. Dalam editor back-end ia kelihatan asimetris, tetapi pada bahagian hadapan anda akan melihat struktur yang kelihatan baik. Pengurusan kandungan bukan hanya tentang mengisi halaman, tetapi juga merupakan proses logik dan kreatif. Anda harus mempertimbangkan dimensi imej dan teks, dan pertimbangkan bagaimana mereka melihat pada peranti yang berbeza. Kadangkala pembetulan responsif juga diperlukan. Nasib baik, Komposer Visual mempunyai alat yang diperlukan. Dalam pilihan kolum edit, anda boleh menemui tab Pilihan Responsif di mana anda boleh melaraskan saiz lajur bergantung pada kumpulan peranti.

Banner

Ini tidak lebih daripada garis dengan imej latar belakang dan kesan paralaks, sedikit kandungan di dalamnya dengan tooltip, tajuk dan butang.

Ahli Pasukan

Ini adalah elemen tambahan Ninzio; ahli pasukan karusel.

Maklumat Blok "Penyelesaian Kreatif"

Sekali lagi tidak ada yang aneh di sini; elemen baris tetap dengan dua lajur, masing-masing mengandungi kandungan.

Tetapi di sini silap mata adalah bahawa imej di sebelah kanan tidak terletak di lajur kedua, sebenarnya ditetapkan sebagai imej latar belakang dari baris, jadi lajur kanan di sini kosong.

Testimoni Pelanggan

Kami juga telah mencipta elemen tersuai untuk menambah testimoni. Sekali lagi, tiada apa yang istimewa di sini.

Logo Penaja

Dan bahagian terakhir adalah logo penaja. Ini adalah karusel logo dalam satu baris dengan latar belakang kelabu. Elemen tersuai ini juga ditambah.

Kesimpulannya

Itu sahaja! Sekarang anda tahu semua perkara yang diperlukan untuk mengintegrasikan Visual Composer dengan Tema anda dan membuat halaman dengan cepat dan mudah. Sebagai sumber untuk kajian lanjut, saya cadangkan anda melihat halaman wiki rasmi untuk Visual Composer . Jika anda mempunyai soalan, sila tinggalkan komen di bawah!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.