Share
I den forrige opplæringen så vi på Visual Composer for temautviklere; lisensiering og teknisk oppsett. I denne opplæringen tar vi ting videre, utvider Visual Composer og setter den opp for å bygge sider.
Før vi ser på å faktisk bygge en side, la oss kjøre gjennom noen av standardfunksjonene.
Visual Composer kommer med et stort utvalg av innebygde innholdselementer. I tillegg tilbyr Visual Composer over 200 tillegg, både gratis og betalt.
Som standard er Visual Composer bare aktivert for sider, men du kan også aktivere det for innlegg og til og med egendefinerte innleggstyper. Disse og flere alternativer kan administreres fra Visual Composer Roll Manager. Der kan du også kontrollere hvem som kan bruke Visual Composer i administrasjonen din.
Shortcode Manager lar deg legge til egendefinerte elementer med parametere. På noen måter bruker-sentriske ekvivalent av utvikler metode for å kartlegge nye elementer.
Et av de mest tiltalende verktøyene for brukere er nettverksbyggeren. Med det kan brukerne lage alle slags nett, med bilder, tekst, knapper, innlegg og så videre, uten å berøre kode. Masonry-grid er også tilgjengelig.
Mmm gridsMalerbiblioteket gir brukerne tilgang til profesjonelle maler for sidestruktur. Typiske eksempler er artikkeloppsett, destinasjonssideoppsett, parallax-sider, porteføljer, du nevner det. Som utvikler kan du selv lage din egen, og inkludere dem med temaets demoinnhold.
Og til slutt når vi det som uten tvil er den viktigste delen av Visual Composer: redaktøren. Dette er en back-end og en frontend editor, og med det kan brukerne bygge sider uten kodingskunnskap.
Visual Composer's back-end editor
Visual Composer's front-end editorMed frontend editoren redigerer du akkurat det du ser. Det er absolutt mer Det du ser er hva du får enn standard WordPress WYSIWYG editor!
Sidebyggeren arbeider med et rad- og kolonnesystem. Hvert element lagt til siden er pakket inn i en radbeholder. Flere elementer kan legges til i samme rad, i kolonner eller ytterligere nestede rader. Skjermbildet nedenfor understreker hvordan elementer, rader, kolonner, kan legges til, redigeres og fjernes.
Etter å ha dekket de grunnleggende funksjonene som er tilgjengelige, la oss ikke gjøre oppmerksom på noen utvikling. Vi skal utvide Visual Composer's standardfunksjonalitet og legge til nye egendefinerte elementer.
For å overstyre et element i Visual Composer må du først kopiere malfilen fra mappen Visual Composer plugin (js_composer)> inkludere> maler til yourtheme> vc_templates mappe. Fra den forrige veiledningen kan du huske at i vårt Focuson-tema har vi fire filer:
Og som vi diskuterte, er navngiving veldig viktig her. Disse malene skal navngis nøyaktig som de er i standard VC plugin-mappe.
Etter å ha duplisert malfilen er du klar til å overskrive den. La oss se, for eksempel, hva som er i den første filen vc_columns.php. Hvis du er kjent med kortkodeopprettelse, blir det ikke noe nytt for deg her.
Filstrukturen kan deles i tre deler:
Men hva om du vil legge til eller fjerne eksisterende shortcode attributter, hvordan ville du håndtere det? Møt tre nye funksjoner:
Denne funksjonen fjerner shortcode-parameteren fra et eksisterende eller egendefinert element. For å fjerne attributtet må du målrette den spesifikke kortnummeret med navnet, for eksempel vc_column og attributtnavnet, for eksempel el_class.
Accentsconagua
vc_remove_param ("vc_column", "el_class");Denne funksjonen legger til nye parametere til et eksisterende eller egendefinert element. Som med vc_remove_param () funksjon, målrett den spesifikke koden med navnet, for eksempel vc_column og inkluderer parameterarrayen:
vc_add_param ('vc_column', array ("type" => "dropdown", "class" => "", "overskrift" => "Animate", "param_name" => "animere", "value" => array "False" => 'false', 'True' => 'true'))));Denne funksjonen ligner på vc_add_param (), men det tillater deg å legge til flere parametere til ett element. Du finner en liste over alle parametertyper her.
For å legge til eller fjerne nye paramenter, samt legge til nye elementer, må du redigere integrasjonsfilen, som i vårt tilfelle er ninzio_vc.php.
vc_remove_param (); vc_add_param (); eller vc_add_params (); funksjoner.Hvis du legger til nye innholdselementer i Visual Composer, kommer det til en kortfilerfil som er til stede i temaet eller tema-tillegget, som i vårt tilfelle. Først må vi sjekke funksjonen om pluginet vårt er installert og aktivt: ninzio-addons
hvis (definert ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/plugins/ninzio-addons.zip')) ... nye elementskode går her ...Hvordan forstår Visual Composer at nye elementer har blitt lagt til? Med ADD_ACTION ();.
add_action ('init', 'focuson_ninzio_integrateVC'); funksjon focuson_ninzio_integrateVC () ... nye elementerVi vil bruke handlingen i det, gir oss dette:
hvis (definert ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/plugins/ninzio-addons.zip')) add_action ('init', 'focuson_ninzio_integrateVC'); funksjon focuson_ninzio_integrateVC () ... nye elementerNå er vi klare til å legge til våre nye elementer, som vi trenger en ny funksjon for:
Denne funksjonen krever en parameter: En rekke spesielle attributter som beskriver kortnummeret ditt. Som et eksempel vil vi legge til et egendefinert separatorelement:
"Separator", "base" => "nz_sep", 'class' => 'nz-sep', 'show_settings_on_create' => false, 'kategori' => esc_html __ ("Ninzio", 'fokuson'), 'ikon' => 'icon-separator', 'description' => 'Bruk dette elementet til å skille innhold', 'js_view' => ", 'params' => array (... Det er mange attributter! La oss markere det viktigste:
Navn gir et unikt beskrivende navn til ditt egendefinerte element. Brukere vil se det i kategorien Visual Composer.utgangspunkt, ikke mindre viktig enn Navn, er kortkodenavnet. Hvis du er kjent med tilpasset kortkodeopprettelse, vet du at alle egendefinerte kortkoder har tagger. For eksempel har vår tilpassede separator en nz_sep stikkord. Elementbasen bør være unik, og den bør navnetes nøyaktig som kortnummernavnet er i shortcodes.php-filen din (som vi har i vårt Focuson-tema):'20', 'bottom' => '20', 'type' => 'solid', 'color' => '#eeeeee', 'align' => 'left' '=> "), $ atts)); $ styles = ""; hvis (isset ($ color) &&! tom ($ color)) $ styles. = 'border-bottom-color:'. $ color. ';'; hvis (isset ($ bredde) &&! tom ($ bredde)) $ styles. = 'width:'. absint ($ width). 'px;'; ellers $ styles. = 'width: 100%;'; hvis (isset ($ høyde) &&! tom ($ høyde)) $ styles. = 'border-bottom-width:'. absint ($ høyde). 'px;'; hvis (isset ($ type) &&! tom ($ type)) $ styles. = 'border-bottom-style:'. $ type. ';'; hvis (isset ($ topp) &&! tom ($ topp)) $ styles. = 'margin-top:'. absint ($ top). 'px;'; hvis (isset ($ bunn) &&! tomt ($ bunn)) $ styles. = 'margin-bottom:'. absint ($ bunn). 'px;'; $ output = ''; returnere $ output; add_shortcode ('nz_sep', 'nz_sep'); ?>
klasse er ikke kritisk, men et viktig alternativ, som fungerer som en ikke-unik identifikator. Navngivningen skal være beskrivende og uten mellomrom, bruk bindestreker eller understreker.show_settings_on_create er en boolsk parameter og selvbeskrivende.kategori er veldig viktig. Hvis du vil gruppere dine egendefinerte elementer i en egendefinert menyfan i menyen Visual Composer-elementer, bør du legge til en egendefinert kategori. Hvis du vil inkludere elementer i en eksisterende kategori bruker navnet på den eksisterende menyfanen: 
ikon den er lik klasse. Vi legger til et ikonnavn slik at vi kan stile kortnummeret i Visual Composer-menyen. For eksempel:i.icon-separator, .nz-sep .vc_element-icon bakgrunnsbilde: url (... /images/shortcodes/sep.png)!important;
beskrivelse legger til en liten beskrivelse av det egendefinerte elementet. Brukere vil se dette.js_view er en svært viktig parameter. Når du har elementer som består av foreldre og barnekomponenter (for eksempel innholdskasser, som har hovedbeholderforeldre og barnekasseelementer, hvor foreldre og barnelementer har separate attributter), må denne attributtet ha verdien VcColumnView. Vi vil undersøke de mer komplekse detaljene i et øyeblikk.params Er det en rekke parametere som skal legges til ditt egendefinerte element. Det oppfører seg på samme måte som vc_add_params () funksjon, men nestet i vc_map () funksjon.Beholderelementer med barnelementer krever noen spesifikk konfigurasjon før de legges til. I vc_map () funksjon vi må legge til et par flere parametere for å gjøre elementene våre til en beholder eller et annet elementets barn.
For eksempel, si at vi vil legge til et nytt element "Innholdskasser". Vårt innholds bokselement består av to deler:
En innholdsrute kan ha ubegrenset barneelementer. Så vi har to problemer å løse:
For å unngå forvirring så mye som mulig, la oss se på et eksisterende element. I vårt Focuson-tema har vi et "Content boxes" -element, med to ekstra parametere av spesiell interesse:
"as_parent" => array ('only' => 'nz_box')Husk utgangspunkt parameter av vår vc_map () funksjon? Her med as_parent, vi registrerer nz_content_box element som foreldre bare for en nz_box barnelement.
"js_view" => 'VcColumnView'
Når js_view er satt til VcColumnView Visual Composer legger til flere brukergrensesnittfunksjoner til elementet i redigeringsprogrammet, slik at vi kan legge til et nytt barnelement.
I samme vene, vår nz_box elementskoden har en ekstra parameter:
"as_child" => array ('only' => 'nz_content_box'),Med as_child vi registrerer nz_box element som barn, men bare for en nz_content_box foreldreelement.
Hvis du nå besøker Visual Composer-menyen og klikker på den nylig lagt til Innholds boks element, du vil se ... det virker ikke. Ingen foreldre / barn funksjonalitet har blitt lagt til, fordi det fortsatt er en ting vi må gjøre - vi må utvide til klasser:
WPBakeryShortCodesContainerWPBakeryShortCodeFørste klasse er ansvarlig for foreldreelementer, den andre er ansvarlig for barnets elementer. Så, rett etter at handlingsfunksjonen legger til:
hvis (class_exists ('WPBakeryShortCodesContainer')) klasse WPBakeryShortCode_nz_Content_Box utvider WPBakeryShortCodesContainer Som du husker, var basen av innholdsruten overordnet element nz_content_box, dette navnet skal også være til stede i klassenavnet som strekker seg ut WPBakeryShortCodesContainer klasse. I vårt tilfelle er det nye klassenavnet WPBakeryShortCode_nz_Content_Box.
hvis (class_exists ('WPBakeryShortCode')) klasse WPBakeryShortCode_nz_Box utvider WPBakeryShortCode Det samme gjelder for barnelementet. Basenavnet var nz_box og det nye klassenavnet vil bli WPBakeryShortCode_nz_Box.
Uansett hva du heter din elementbase, bør den være til stede i det nye klassenavnet.
Nå, hvis du tar en titt på sideditoren en gang til, ser du at det nye innholdsruten elementet har barn / foreldre funksjonalitet.
Etter hardt arbeid kan vi høste fruktene av vårt arbeid. Ta en titt på Focuson Theme-hovedsiden. La oss bygge den hjemmesiden med Visual Composer.
Strukturen kan deles inn i flere seksjoner:
Å gjenopprette dette er bare et øyeblikk med Visual Composer.
Vi vil pakke hver blokk inn i det separate "Row" -elementet med minst ett "Kolonne" -element. Som vi diskuterte, er dette den nødvendige og minste strukturen av Visual Composer-sider.
Focuson tema har integrert Revolusjon Slider. Skyvekontrollen er ikke lagt til med Visual Composer, men når du installerer Revolution Slider og Visual Composer, vil du legge merke til et nytt element "Revolution Slider". Dette er et gratis tillegg fra Revolution-glidebryteren, og med det elementet kan du plassere en glidebryter inn på siden, selv om temaet ditt ikke er integrert med Visual Composer.
Husk eksempelet "Innholds bokser" -element? Vi kan bygge fantastiske innholds bokser med vårt egendefinerte element:
I denne delen bruker vi
Nesten alle elementene her er tilpasset lagt til.
For tellerne brukte vi røde bakgrunnsalternativer (bilde og farge) for estetikk. Alle disse alternativene er tilpasset lagt fra Ninzio. Vi setter telleren tilpasset elementet inne i den stilige raden.
Med Visual Composer-kolonnene kan vi legge til to kolonneinnhold:
Nesten alle disse elementene er tilpasset, bare elementet "Tilpasset overskrift" kommer som standard med Visual Composer. I backendeditoren virker det asymmetrisk, men i forkant ser du en fin struktur. Innholdsstyring handler ikke bare om å fylle sider, det er også en logisk og kreativ prosess. Du må ta hensyn til dimensjonene til bilder og tekst og vurdere hvordan de ser på forskjellige enheter. Noen ganger er responsive rettelser også nødvendig. Heldigvis har Visual Composer de nødvendige verktøyene. I kolonner rediger alternativer kan du finne Responsive Options fanen hvor du kan justere kolonnestørrelsen, avhengig av enhetsgrupper.
Dette er ikke noe mer enn en rad med bakgrunnsbilde og parallax-effekt, en liten mengde innhold i det med et verktøytips, tittel og knapper.
Dette er et ekstra element fra Ninzio; en karusell av lagmedlemmer.
Igjen er det ikke noe uvanlig her; et vanlig radelement med to kolonner, hver inneholdende innhold.
Men her er trikset at bildet til høyre ikke er plassert i den andre kolonnen, det er faktisk satt som rad bakgrunnsbilde, så høyre kolonne her er tom.
Vi har også opprettet et egendefinert element for å legge til anbefalinger. Igjen, ingenting uvanlig å spille her.
Og den siste delen er sponsorlogoer. Det er en karusell av logoer på en rad med en grå bakgrunnsfarge. Dette elementet er også tilpasset lagt til.
Det er det! Nå vet du alt som trengs for å integrere Visual Composer med temaet ditt og lage sider raskt og enkelt. Som en ressurs for videre studier, foreslår jeg at du tar en titt på den offisielle wikisiden for Visual Composer. Hvis du har spørsmål, vær så snill å legge igjen en kommentar nedenfor!
