Share
I den tidigare handledningen såg vi på Visual Composer för temat utvecklare; licensiering och teknisk installation. I denna handledning tar vi saker vidare, förlänger Visual Composer och ställer in den för att bygga sidor.
Innan vi tittar på att faktiskt bygga en sida, låt oss köra igenom några av standardfunktionerna.
Visual Composer kommer med ett brett utbud av inbyggda innehållselement. Dessutom erbjuder Visual Composer över 200 tillägg, både gratis och betalda.
Som standard är Visual Composer endast aktiverat för sidor, men du kan också aktivera det för inlägg och till och med anpassade posttyper. Dessa och flera alternativ kan hanteras inom Visual Composer Role Manager. Där kan du också styra vem som kan använda Visual Composer i din admin.
Med Shortcode Manager kan du lägga till anpassade element med parametrar. På något sätt användarcentrerande ekvivalenten av utvecklarmetoden för att kartlägga nya element.
Ett av de mest tilltalande verktygen för användare är nätverksbyggaren. Med det kan användare skapa alla typer av nät, med bilder, text, knappar, inlägg och så vidare, utan att röra kod. Masonry-typnät finns också.
Mmm gridsMallbiblioteket ger användarna tillgång till professionella mallar för sidstruktur. Typiska exempel är artikellayouter, målsidans layouter, parallax sidor, portföljer, du heter det. Som utvecklare kan du till och med skapa din egen och inkludera dem med ditt temas demoinnehåll.
Och äntligen når vi vad som förmodligen är den viktigaste delen av Visual Composer: redaktören. Detta är ett back-end och en front-end editor, och med det kan användarna bygga sidor utan kodande kunskap.
Visual Composer's back-end editor
Visual Composers främre redaktörMed den främre änden redigerar du exakt vad du ser. Det är säkert mer Vad du ser är vad du får än standardversionen av WordPress WYSIWYG!
Sidbyggare fungerar med ett rad och kolumnsystem. Varje element som läggs till sidan är inslaget i en radbehållare. Flera element kan läggas till i samma rad, i kolumner eller ytterligare kapslingsrader. Skärmbilden nedan belyser hur element, rader, kolumner, kan läggas till, redigeras och tas bort.
Efter att ha täckt de grundläggande funktionerna, låt oss inte vända vår uppmärksamhet åt någon utveckling. Vi kommer att förlänga Visual Composers standardfunktionalitet och lägga till nya anpassade element.
För att åsidosätta något element i Visual Composer behöver du först kopiera mallfilen från mappen Visual Composer plugin (js_composer)> inkludera> mallar till yourtheme> vc_templates mapp. Från den tidigare handledningen kan du komma ihåg att vi i vårt Focuson-tema har fyra filer:
Och som vi diskuterade är namngivning väldigt viktigt här. Dessa mallar ska namnges exakt som de är i standard VC plugin mapp.
Efter att du har duplicerat mallfilen är du redo att skriva över den. Låt oss se, till exempel, vad som finns i den första filen vc_columns.php. Om du är bekant med kortnummer skapande kommer det inte vara något nytt för dig här.
Filstrukturen kan delas upp i tre delar:
Men vad händer om du vill lägga till eller ta bort befintliga shortcode-attribut, hur skulle du hantera det? Träffa tre nya funktioner:
Den här funktionen tar bort kortkodsparametern från ett befintligt eller anpassat element. För att ta bort attributet, rikta in den specifika kortkoden med namnet, till exempel vc_column och attributnamnet, till exempel el_class.
Accentsconagua
vc_remove_param ("vc_column", "el_class");Denna funktion lägger till nya parametrar till ett befintligt eller anpassat element. Som med vc_remove_param () funktion, rikta in specifika kortnummer med namnet, till exempel vc_column och inkludera parametervärdet:
vc_add_param ("vc_column", array ("type" => "dropdown", "class" => "", "rubrik" => "Animate", "param_name" => "animera", "value" => array "False" => 'false', 'True' => 'true'))));Denna funktion liknar vc_add_param (), men det låter dig lägga till flera parametrar till ett element. Du hittar en lista över alla parametortyper här.
För att lägga till eller ta bort nya parametrar, liksom lägga till nya element, måste du redigera integrationsfilen, som i vårt fall är ninzio_vc.php.
vc_remove_param (); vc_add_param (); eller vc_add_params (); funktioner.Lägga till nya innehållselement till Visual Composer uppstår när en kortnummerfil finns i ditt tema eller tematillägg, som i vårt fall, så först måste vi kolla med funktionen om vår plugin för ninzio-addons är installerad och aktiv:
om (definierad ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/plugins/ninzio-addons.zip')) ... nya elementskod går här ...Hur förstår Visual Composer att nya element har lagts till? Med add_action ();.
add_action ('init', 'focuson_ninzio_integrateVC'); funktion focuson_ninzio_integrateVC () ... nya elementVi kommer att använda åtgärden i det, ger oss detta:
om (definierad ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/plugins/ninzio-addons.zip')) add_action ('init', 'focuson_ninzio_integrateVC'); funktion focuson_ninzio_integrateVC () ... nya elementNu är vi redo att lägga till våra nya element, för vilka vi behöver en ny funktion:
Den här funktionen kräver en parameter: en rad specialfunktioner som beskriver din kortnummer. Som exempel lägger vi till ett anpassat separatorelement:
"Separator", "base" => "nz_sep", "class" => 'nz-sep', 'show_settings_on_create' => falskt, 'category' => esc_html __ ("Ninzio" => 'icon-separator', 'description' => 'Använd det här elementet för att skilja innehållet', 'js_view' => ", 'params' => array (... Det är många attribut! Låt oss lyfta fram det viktigaste:
namn ger ett unikt beskrivande namn till ditt anpassade element. Användarna kommer att se den på fliken Visual Composer.bas, inte mindre viktigt än namn, är kortkodsnamnet. Om du är bekant med anpassad kortkodstillverkning vet du att alla anpassade kortkoder har taggar. Till exempel har vår anpassade separator en nz_sep märka. Elementbasen ska vara unik och den ska namnges exakt som kortnummernamnet finns i din shortcodes.php-fil (som vi har i vårt Focuson-tema):'20', 'bottom' => '20', 'typ' => 'fast', 'färg' => '#eeeeee', 'align' => 'left' '=> "), $ atts)); $ styles = ""; om (isset ($ color) &&! tom ($ color)) $ styles. = 'border-bottom-color:'. $ color. ';'; om (isset ($ bredd) &&! tom ($ bredd)) $ styles. = 'width:'. absint ($ width). 'px;'; else $ styles. = 'width: 100%;'; om (isset ($ höjd) &&! tom ($ höjd)) $ styles. = 'border-bottom-width:'. absint ($ höjd). 'px;'; om (isset ($ typ) &&! tom ($ typ)) $ styles. = 'border-bottom-style:'. $ typ. ';'; om (isset ($ top) &&! tom ($ top)) $ styles. = 'margin-top:'. absint ($ top). 'px;'; if (isset ($ bottom) &&! tom ($ bottom)) $ styles. = 'margin-bottom:'. absint ($ bottom). 'px;'; $ output = ''; returnera $ output; add_shortcode ('nz_sep', 'nz_sep'); ?>
klass är inte kritisk, men ett viktigt alternativ, som fungerar som en icke-unik identifierare. Namnet ska vara beskrivande och utan mellanslag, använda streck eller understreck.show_settings_on_create är en booleskt parameter och självbeskrivande.kategori är väldigt viktigt. Om du vill gruppera dina anpassade element i en anpassad menyfliken i menyn Visual Composer elements, ska du lägga till en anpassad kategori. Om du vill inkludera element i en existerande kategori använder namnet på den befintliga menyfliken: 
ikon liknar klass. Vi lägger till ett ikonnamn så att vi kan ställa in kortkoden i menyn Visual Composer. Till exempel:I.icon-separator, .nz-sep .vc_element-icon background-image: url (... /images/shortcodes/sep.png)! viktigt;
beskrivning lägger till en liten beskrivning av ditt anpassade element. Användare kommer att se detta.js_view är en mycket viktig parameter. När du har element som består av föräldra- och barnkomponenter (till exempel innehållslådor, som har en huvudbehållare föräldra- och barnlådans element, där föräldra- och barnelement har separata attribut) ska detta attribut ha värdet VcColumnView. Vi kommer att undersöka de mer komplexa detaljerna i ett ögonblick.params är en rad parametrar som ska läggas till i ditt anpassade element. Det beter sig på samma sätt som vc_add_params () funktion, men nestad i vc_map () fungera.Behållarelement med barnelement kräver viss specifik konfiguration innan de läggs till. I vc_map () funktion vi behöver lägga till ett par fler parametrar för att göra våra element antingen en behållare eller ett annat barns barn.
Till exempel, säg att vi vill lägga till ett nytt element "Innehållsrutor". Vårt innehållsruta består av två delar:
En innehållslåda kan ha obegränsat barnlådans element. Så vi har två problem att lösa:
För att undvika förvirring så mycket som möjligt, låt oss ta en titt på ett befintligt element. I vårt Focuson-tema har vi ett "Content boxes" -element, med två extra parametrar av särskilt intresse:
"as_parent" => array ('only' => 'nz_box')Kom ihåg det bas parameter för vår vc_map () fungera? Här med as_parent, vi registrerar nz_content_box element som förälder endast för en nz_box barnelement.
"js_view" => 'VcColumnView'
När js_view är satt till VcColumnView Visual Composer lägger till ytterligare användargränssnittfunktioner till elementet i redigeraren, så vi kan lägga till ett nytt barnelement.
På samma sätt, vår nz_box elementskoden har en ytterligare parameter:
"as_child" => array ('only' => 'nz_content_box'),Med as_child vi registrerar nz_box element som ett barn, men endast för en nz_content_box moderelementet.
Om du nu besöker menyn Visual Composer och klickar på den nyligen tillagda Innehållsruta element, du kommer att se ... det fungerar inte. Ingen föräldra- / barnfunktionalitet har lagts till, för det finns fortfarande en sak vi behöver göra - vi måste sträcka sig till klasserna:
WPBakeryShortCodesContainerWPBakeryShortCodeDen första klassen är ansvarig för moderelement, den andra ansvarar för barnelement. Så, direkt efter att åtgärdsfunktionen lägger till:
om (class_exists ('WPBakeryShortCodesContainer')) class WPBakeryShortCode_nz_Content_Box utökar WPBakeryShortCodesContainer Som du kommer ihåg var basen av innehållsruta föräldraelementet nz_content_box, detta namn ska också finnas närvarande i klassnamnet som utökar WPBakeryShortCodesContainer klass. I vårt fall är det nya klassnamnet WPBakeryShortCode_nz_Content_Box.
om (class_exists ('WPBakeryShortCode')) class WPBakeryShortCode_nz_Box utökar WPBakeryShortCode Detsamma gäller för barnelementet. Basnamnet var nz_box och det nya klassnamnet kommer att vara WPBakeryShortCode_nz_Box.
Vad du än heter din elementbas ska den vara närvarande i det nya klassnamnet.
Om du nu tittar på sidredigeraren en gång till ser du att det nya innehållsruta-elementet har barn / föräldrafunktionalitet.
Efter hårt arbete kan vi skörda frukterna av vårt arbete. Ta en titt på Focuson Theme-hemsidan. Låt oss bygga den här hemsidan med Visual Composer.
Strukturen kan delas upp i flera sektioner:
Att återskapa detta är bara ett ögonblick med Visual Composer.
Vi lägger in varje block i det separata "Row" -elementet med minst ett "Column" -element. Som vi diskuterade är detta den nödvändiga och minsta strukturen för Visual Composer-sidor.
Focuson-tema har integrerat Revolution Slider. Skjutreglaget läggs inte till med Visual Composer, men när du installerar Revolution Slider och Visual Composer kommer du att märka ett nytt element "Revolution slider". Det här är en gratis tillägg från reglerventilen, och med det här elementet kan du placera en skjutreglage i sidan, även om ditt tema inte är integrerat med Visual Composer.
Kom ihåg exemplet "Innehållslådor" -elementet? Vi kan skapa fantastiska innehållslådor med vårt anpassade element:
I det här avsnittet använder vi
Nästan alla element här är anpassade tillagda.
För diskarna använde vi rad bakgrundsalternativ (bild och färg) för estetik. Alla dessa alternativ är anpassade tillägg från Ninzio. Vi sätter räknaren anpassad element inuti den stilade raden.
Med kolumnerna Visual Composer kan vi lägga till innehåll med dubbla kolumner:
Nästan alla dessa element är anpassade till, bara elementet "Custom Heading" kommer som standard med Visual Composer. I backendredigeraren visas asymmetrisk, men i framsidan ser du en snygg struktur. Innehållshantering handlar inte om att bara fylla i sidor, det är också en logisk och kreativ process. Du måste ta hänsyn till måtten på bilder och text och överväga hur de ser på olika enheter. Ibland behövs också korrekta korrigeringar. Lyckligtvis har Visual Composer de nödvändiga verktygen. I kolumner redigerar du alternativen du kan hitta Responsive Options fliken där du kan justera kolumnstorleken beroende på enhetsgrupper.
Det här är inget annat än en rad med bakgrundsbild och parallaxeffekt, en liten mängd innehåll i det med ett verktygstips, titel och knappar.
Detta är ett extra element från Ninzio; en karusell av lagmedlemmar.
Återigen finns det inget ovanligt här; ett vanligt radelement med två kolumner, innehållande innehåll.
Men här är tricket att bilden till höger inte finns inne i den andra kolumnen, den är faktiskt inställd som rad bakgrundsbild, så den högra kolumnen här är tom.
Vi har också skapat ett anpassat element för att lägga till vittnesmål. Igen, inget ovanligt att spela här.
Och det sista avsnittet är sponsorlogotyper. Det är en karusell av logotyper i en rad med en grå bakgrundsfärg. Detta element är också anpassat till.
Det är allt! Nu vet du allt som behövs för att integrera Visual Composer med ditt tema och skapa sidor snabbt och enkelt. Som resurs för vidare studier föreslår jag att du tittar på den officiella wikisidan för Visual Composer. Om du har några frågor, var god och lämna en kommentar nedan!
