Share
În tutorialul anterior ne-am uitat la Visual Composer pentru dezvoltatorii de teme; licențierea și configurarea tehnică. În acest tutorial vom lua lucrurile mai departe, extinzând Visual Composer și stabilindu-l pentru a construi pagini.
Înainte de a ne uita la construirea unei pagini, să trecem prin câteva dintre caracteristicile implicite.
Visual Composer vine cu o gamă largă de elemente de conținut încorporate. În plus, Visual Composer oferă peste 200 de add-on-uri, atât gratuit cât și plătite.
Implicit, Visual Composer este activat numai pentru pagini, dar îl puteți activa și pentru postări și chiar pentru posturile personalizate. Aceste și mai multe opțiuni pot fi gestionate din cadrul Managerului de roluri Visual Composer. Există, de asemenea, posibilitatea de a controla cine poate folosi Visual Composer în adminul tău.
Managerul de coduri scurte vă permite să adăugați elemente personalizate cu parametri. În unele privințe, echivalentul utilizator-centric al metodei dezvoltatorului de cartografiere a elementelor noi.
Unul dintre cele mai atrăgătoare instrumente pentru utilizatori este constructorul de rețele. Cu aceasta, utilizatorii pot crea orice fel de rețea, cu imagini, text, butoane, posturi și așa mai departe, fără a atinge codul. Sunt disponibile și rețele de tip zidărie.
Rețele MmmBiblioteca de șabloane oferă utilizatorilor acces la șabloane profesionale pentru structura paginilor. Printre exemplele tipice se numără aspectul articolului, aspectul paginii de destinație, paginile de parallax, portofolii, numele pe care îl numiți. În calitate de dezvoltator puteți crea chiar și propriul dvs. și includeți-le cu conținutul demo al temei.
Și, în final, ajungem la cea mai importantă parte a Visual Composer: editorul. Acesta este un back-end și un editor de front-end, iar utilizatorii pot construi pagini fără a-și cunoaște cunoștințele.
Editorul de back-end al Visual Composer
Visual Composer editor de front-endCu editorul de front-end editați exact ceea ce vedeți. Este cu siguranță mai mult Ceea ce vezi este ceea ce primești decât editorul WordPress WYSIWYG implicit!
Generatorul de pagini funcționează cu un sistem de coloane și coloane. Fiecare element adăugat la pagină este înfășurat într-un container de rând. Mai multe elemente pot fi adăugate la același rând, în coloane sau în alte rânduri imbricate. Imaginea de mai jos evidențiază modul în care elementele, rândurile, coloanele pot fi adăugate, editate și eliminate.
Având în vedere caracteristicile de bază disponibile, să nu ne îndreptăm atenția asupra dezvoltării. Vom extinde funcționalitatea implicită a Visual Composer și vom adăuga noi elemente personalizate.
Pentru a suprascrie orice element din Visual Composer, trebuie mai întâi să copiați fișierul șablon din dosarul pluginului Visual Composer (js_composer)> includ> șabloane la yourtheme> vc_templates pliant. Din tutorialul anterior ați putea să vă amintiți că în tema noastră Focuson avem patru fișiere:
Și așa cum am discutat, numirea este foarte importantă aici. Aceste șabloane ar trebui să fie numite exact așa cum acestea sunt în folderul implicit VC plugin.
Duplicând fișierul șablon, sunteți pregătit să îl suprascrieți. Să vedem, de exemplu, ce se află în primul fișier vc_columns.php. Dacă sunteți familiarizați cu crearea de coduri scurte, nu veți avea nimic nou pentru dvs. aici.
Structura fișierului poate fi împărțită în trei părți:
Dar dacă doriți să adăugați sau să eliminați atributele de coduri scurte existente, cum ați face acest lucru? Faceți cunoștință cu trei noi funcții:
Această funcție elimină parametrul de cod scurt de la un element existent sau personalizat. Pentru a elimina atributul, vizați, de exemplu, numele scurt cu numele specific vc_column și numele atributului, de exemplu el_class.
Accentsconagua
vc_remove_param ("vc_column", "el_class");Această funcție adaugă noi parametri unui element existent sau personalizat. Ca și în cazul vc_remove_param () funcția, direcționați codul scurt specific cu numele, de exemplu vc_column și include matricea de parametri:
vc_add_param ('vc_column', array ("tip" => "dropdown", "class" => "False" => 'false', 'Adevărat' => 'adevărat')));Această funcție este similară cu vc_add_param (), dar vă permite să adăugați mai mulți parametri la un element. Puteți găsi aici o listă cu toate tipurile de parametri.
Pentru a adăuga sau elimina noi paramuri, precum și a adăuga elemente noi, trebuie să editați fișierul de integrare, care în cazul nostru este ninzio_vc.php.
vc_remove_param (); vc_add_param (); sau vc_add_params (); funcții.Adăugarea de noi elemente de conținut în Visual Composer are loc atunci când un fișier de coduri scurte este prezent în tema sau add-on temă, ca în cazul nostru, deci mai întâi trebuie să verificăm cu funcția dacă pluginul nostru de ninzio-addons este instalat și activ:
dacă (definit ('NINZIO_ADDONS') && file_exists (get_template_directory (). /plugins/ninzio-addons.zip ')) ... codul elementelor noi merge aici ...Cum înțelege Visual Composer că au fost adăugate elemente noi? Cu ADD_ACTION ();.
add_action ('init', 'focuson_ninzio_integrateVC'); funcție focuson_ninzio_integrateVC () ... elemente noiVom folosi acțiunea init, oferindu-ne aceasta:
dacă (definite ('NINZIO_ADDONS') && file_exists (get_template_directory (). /plugins/ninzio-addons.zip ')) add_action (' init ',' focuson_ninzio_integrateVC '); funcția focuson_ninzio_integrateVC () ... elemente noiAcum suntem gata să adăugăm noile noastre elemente, pentru care avem nevoie de o altă funcție nouă:
Această funcție necesită un parametru: o serie de atribute speciale care descriu codul dvs. scurt. Ca exemplu, vom adăuga un element separator personalizat:
"Separator", "base" => "nz_sep", 'class' => 'nz-sep', 'show_settings_on_create' => false, 'category' => esc_html __ (" => 'icon-separator', 'description' => 'Folosiți acest element pentru a separa conținutul', 'js_view' => ',' params '=> array Sunt multe atribute! Să evidențiem cele mai importante:
Nume oferă un nume descriptiv unic elementului personalizat. Utilizatorii o vor vedea în fila Visual Composer.baza, nu mai puțin importantă decât Nume, este numele etichetei de cod scurt. Dacă sunteți familiarizați cu crearea de coduri scurte personalizate, veți ști că toate codurile scurte personalizate au etichete. De exemplu, separatorul nostru personalizat are a nz_sep etichetă. Baza elementelor ar trebui să fie unică și ar trebui să fie denumită exact așa cum numele shortcode este în fișierul shortcodes.php (așa cum avem în tema Focuson):'20', 'bottom' => '20', 'type' => 'solid', 'color' => '#eeeeee', 'align' '=>'), $ atts)); $ stiluri = ""; dacă isset ($ color) &&! empty ($ color)) $ styles. = 'border-bottom-color:'. $ color. ';'; dacă (isset ($ lățime) &&! gol ($ lățime)) $ styles. = 'lățime:'. altfel $ styles. = 'lățime: 100%;'; dacă (isset ($ height) &&! empty ($ height)) $ styles. = 'border-bottom-width:'. dacă (isset ($ type) &&! empty ($ type)) $ styles. = 'border-bottom-style:'. dacă (isset ($ top) &&! empty ($ top)) $ styles. = 'margin-top:'. dacă (isset ($ bottom) &&! empty ($ jos)) $ styles. = 'margin-bottom:'. $ output = '„; returnați outputul $; add_shortcode ('nz_sep', 'nz_sep'); ?>
clasă nu este critică, ci o opțiune importantă, servind ca un identificator non-unic. Denumirea trebuie să fie descriptivă și fără spații, să folosească liniuțe sau subliniere.show_settings_on_create este un parametru boolean și auto-descriptiv.categorie este foarte important. Dacă doriți să grupați elementele personalizate într-o fila de meniu personalizată din meniul Elemente Visual Composer, trebuie să adăugați o categorie personalizată. Dacă doriți să includeți elemente într-un existent categoria folosiți numele fișierului meniu existent: 
icoană este similar cu clasă. Adăugăm un nume de pictogramă, astfel încât să putem modela codul scurt în meniul Visual Composer. De exemplu:i.icon-separator, .nz-sep .vc_element-pictogramă background-image: url (... /images/shortcodes/sep.png)!important;
Descriere adaugă o mică descriere elementului personalizat. Utilizatorii vor vedea acest lucru.js_view este un parametru foarte important. Când aveți elemente care cuprind componente părinte și copil (de exemplu, cutii de conținut, care au un element parent principal pentru container și elemente cutie pentru copii, unde elementele părinte și copil au atribute separate), acest atribut ar trebui să aibă valoarea VcColumnView. Vom examina detaliile mai complexe într-un moment.params este o serie de parametri care urmează să fie adăugați elementului personalizat. Se comportă în mod similar cu vc_add_params () funcție, dar imbricate în vc_map () funcţie.Elementele de containere cu elemente copil necesită o anumită configurație specifică înainte de adăugare. În vc_map () trebuie să adăugăm încă câțiva parametri pentru a face ca elementele noastre fie să fie un container, fie copilul altui element.
De exemplu, spunem că dorim să adăugăm un nou element "Cutii de conținut". Elementul cutie de conținut cuprinde două părți:
O casetă de conținut poate avea elemente cutie de copii nelimitate. Deci avem două probleme de rezolvat:
Pentru a evita confuzia cât mai mult posibil, să aruncăm o privire asupra unui element existent. În tema noastră Focuson avem un element "Cutii de conținut", cu doi parametri suplimentari de interes deosebit:
"as_parent" => array ('numai' => 'nz_box')Amintiți-vă baza parametru al nostru vc_map () funcţie? Aici, cu as_parent, înregistrăm nz_content_box element ca părinte numai Pentru o nz_box copil element.
"js_view" => 'VcColumnView'
Cand js_view este setat sa VcColumnView Visual Composer adaugă funcționalitate UI suplimentară elementului din editor, astfel încât să putem adăuga un nou element copil.
În același sens, și al nostru nz_box elementul de cod are un parametru suplimentar:
"as_child" => array ('numai' => 'nz_content_box'),Cu as_child înregistrăm nz_box element ca un copil, dar numai Pentru o nz_content_box element parental.
Dacă vizitați acum meniul Visual Composer și faceți clic pe nou adăugat Cutie de conținut element, veți vedea ... nu funcționează. Nu a fost adăugată nici o funcționalitate părinte / copil, deoarece există încă un lucru pe care trebuie să-l facem - trebuie extins la clase:
WPBakeryShortCodesContainerWPBakeryShortCodePrima clasă este responsabilă de elementele părintești, cea de-a doua este responsabilă de elementele copilului. Deci, imediat după funcția de acțiune adăugați:
dacă (class_exists ('WPBakeryShortCodesContainer')) clasa WPBakeryShortCode_nz_Content_Box extinde WPBakeryShortCodesContainer După cum vă amintiți, baza elementului element parental de conținut a fost nz_content_box, acest nume ar trebui să fie prezent și în numele clasei care extinde WPBakeryShortCodesContainer clasă. În cazul nostru, este noul nume al clasei WPBakeryShortCode_nz_Content_Box.
dacă (class_exists ('WPBakeryShortCode')) clasa WPBakeryShortCode_nz_Box extinde WPBakeryShortCode Același lucru este valabil și pentru elementul copil. Numele de bază a fost nz_box iar noul nume de clasă va fi WPBakeryShortCode_nz_Box.
Oricare ar fi numele elementului dvs. de bază ar trebui să fie prezent în noul nume de clasă.
Acum, dacă aruncați o privire la editorul de pagină încă o dată, veți vedea că noul element al cutiei de conținut are funcționalitate copil / părinte.
După muncă grea, putem culege roadele muncii noastre. Aruncați o privire la pagina principală Focuson Theme. Să construim acea pagină de pornire cu Visual Composer.
Structura poate fi împărțită în mai multe secțiuni:
Refacerea acestui lucru este doar munca unui moment cu Visual Composer.
Vom înfășura fiecare bloc în interiorul elementului separat "Row" cu cel puțin un element "Column". După cum am discutat, aceasta este structura necesară și minimă a paginilor Visual Composer.
Tema Focuson a integrat Sliderul Revoluției. Glisorul nu este adăugat cu Visual Composer, cu toate acestea, odată ce ați instala Revolution Slider și Visual Composer, veți observa un element nou "Glisorul de revoluție". Acesta este un add-on gratuit de la cursorul Revolution, iar cu acest element puteți plasa un cursor în pagină, chiar dacă tema dvs. nu este integrată cu Visual Composer.
Amintiți-vă de exemplu elementul "Cutii de conținut"? Putem construi cutii de conținut uimitoare cu elementul nostru personalizat:
În această secțiune vom folosi
Aproape toate elementele de aici sunt personalizate adăugate.
Pentru contoare am folosit opțiuni de fundal de rând (imagine și culoare) pentru estetică. Toate aceste opțiuni sunt personalizate adăugate de Ninzio. Am pus elementul personalizat în interiorul acelui rând cu stil.
Cu coloanele Visual Composer putem adăuga conținut cu două coloane:
Aproape toate aceste elemente sunt personalizate adăugate, numai elementul "Custom Heading" vine ca implicit cu Visual Composer. În editorul de back-end apare asimetric, dar pe front-end veți vedea o structură frumoasă. Gestionarea conținutului nu are legătură doar cu umplerea paginilor, ci și cu un proces logic și creativ. Trebuie să țineți cont de dimensiunile imaginilor și textului și să vă gândiți cum arată acestea pe diferite dispozitive. Uneori este nevoie de corecții receptive. Din fericire, Visual Composer dispune de instrumentele necesare. În opțiunile de editare a coloanelor, puteți găsi Opțiuni responsabile unde puteți ajusta dimensiunea coloanei în funcție de grupurile de dispozitive.
Acesta nu este altceva decât un rând cu o imagine de fundal și un efect de parallax, o cantitate mică de conținut în el cu un buton, titlu și butoane.
Acesta este un element suplimentar de la Ninzio; un carusel de membri ai echipei.
Din nou, nu este nimic neobișnuit aici; un element rând rând cu două coloane, fiecare conținând conținut.
Dar aici trucul este că imaginea din dreapta nu este localizată în cea de-a doua coloană, este de fapt setată ca o imagine de fundal rând, deci coloana din dreapta aici este goală.
De asemenea, am creat un element personalizat pentru a adăuga mărturii. Din nou, nimic neobișnuit aici.
Și ultima secțiune este logo-urile sponsorilor. Este un carusel de logo-uri într-un rând cu o culoare de fundal gri. Acest element este de asemenea adăugat personalizat.
Asta e! Acum știi tot ce este necesar pentru a integra Visual Composer cu Tema și pentru a crea pagini rapid și ușor. Ca o resursă pentru studii suplimentare, vă sugerăm să aruncați o privire la pagina oficială a Wiki pentru Visual Composer. Dacă aveți întrebări, vă rugăm să lăsați un comentariu mai jos!
