Share
In de vorige tutorial hebben we gekeken naar Visual Composer voor thema-ontwikkelaars; licenties en technische instellingen. In deze tutorial gaan we verder, Visual Composer uitbreiden en het instellen van pagina's maken.
Voordat we kijken naar het daadwerkelijk bouwen van een pagina, laten we enkele van de standaardfuncties doornemen.
Visual Composer wordt geleverd met een breed scala aan ingebouwde inhoudselementen. Daarnaast biedt Visual Composer meer dan 200 add-ons, zowel gratis als betaald.
Visual Composer is standaard alleen ingeschakeld voor pagina's, maar u kunt dit ook inschakelen voor berichten en zelfs aangepaste berichttypen. Deze en meer opties kunnen worden beheerd vanuit de Visual Composer Role Manager. Daar kun je ook bepalen wie Visual Composer kan gebruiken in je admin.
Met Shortcode Manager kunt u aangepaste elementen met parameters toevoegen. In sommige opzichten het op de gebruiker gerichte equivalent van de ontwikkelaarsmethode voor het in kaart brengen van nieuwe elementen.
Een van de meest aansprekende tools voor gebruikers is de netbouwer. Hiermee kunnen gebruikers elk soort raster maken, met afbeeldingen, tekst, knoppen, berichten enzovoort, zonder code aan te raken. Roosters van het type metselwerk zijn ook beschikbaar.
Mmm-rastersDe sjabloonbibliotheek geeft gebruikers toegang tot professionele sjablonen voor de paginastructuur. Typische voorbeelden zijn artikellay-outs, lay-outs van bestemmingspagina's, parallax-pagina's, portfolio's, noem maar op. Als ontwikkelaar kunt u zelfs uw eigen ontwikkelaar maken en deze opnemen met de demohoeveelheid van uw thema.
En ten slotte bereiken we wat misschien wel het belangrijkste onderdeel is van Visual Composer: de editor. Dit is een back-end en een front-end editor, en daarmee kunnen gebruikers pagina's bouwen zonder kennis te coderen.
Back-end-editor van Visual Composer
Front-end editor van Visual ComposerMet de front-endeditor bewerkt u precies wat u ziet. Het is zeker meer Wat je ziet is wat je krijgt dan de standaard WordPress WYSIWYG-editor!
Paginabuilder werkt met een rij- en kolomsysteem. Elk element dat aan de pagina is toegevoegd, is verpakt in een rijcontainer. Meerdere elementen kunnen aan dezelfde rij, in kolommen of verder geneste rijen worden toegevoegd. De onderstaande schermafbeelding laat zien hoe elementen, rijen, kolommen kunnen worden toegevoegd, bewerkt en verwijderd.
Na de basisfuncties die beschikbaar zijn besproken te hebben, laten we onze aandacht niet richten op enige ontwikkeling. We gaan de standaardfunctionaliteit van Visual Composer uitbreiden en nieuwe aangepaste elementen toevoegen.
Als u een element in Visual Composer wilt overschrijven, moet u eerst het sjabloonbestand kopiëren vanuit de map Visual Composer-plug-in (js_composer)> include> sjablonen naar de yourtheme> vc_templates map. Van de vorige zelfstudie weet je misschien dat we in ons Focuson-thema vier bestanden hebben:
En zoals we hebben besproken, is naamgeving hier erg belangrijk. Deze sjablonen moeten exact dezelfde naam hebben als de standaard VC-invoegtoepassingsmap.
Als u het sjabloonbestand hebt gedupliceerd, bent u klaar om het te overschrijven. Laten we eens kijken wat er in het eerste bestand vc_columns.php staat. Als u bekend bent met het maken van shortcodes, is er hier niets nieuws voor u.
De bestandsstructuur kan in drie delen worden verdeeld:
Maar wat als u bestaande shortcode-attributen wilt toevoegen of verwijderen, hoe zou u daarmee omgaan? Maak kennis met drie nieuwe functies:
Met deze functie wordt de shortcode-parameter verwijderd uit een bestaand of aangepast element. Als u het attribuut wilt verwijderen, richt u op de specifieke shortcode met de naam, bijvoorbeeld vc_column en de attribuutnaam, bijvoorbeeld el_class.
Accentsconagua
vc_remove_param ("vc_column", "el_class");Deze functie voegt nieuwe parameters toe aan een bestaand of aangepast element. Zoals met de vc_remove_param () functie, richt u op de specifieke shortcode met zijn naam, bijvoorbeeld vc_column en voeg de parameterarray toe:
vc_add_param ('vc_column', array ("type" => "dropdown", "class" => "", "heading" => "Animate", "param_name" => "animeren", "waarde" => array ( "False" => 'false', "True" => 'true')));Deze functie is vergelijkbaar met vc_add_param (), maar het staat je toe om meerdere parameters aan één element toe te voegen. U kunt hier een lijst met alle parametertypen vinden.
Om nieuwe params toe te voegen of te verwijderen, en om nieuwe elementen toe te voegen, moet je het integratiebestand bewerken, wat in ons geval ninzio_vc.php is.
vc_remove_param (); vc_add_param (); of vc_add_params (); functies.Het toevoegen van nieuwe inhoudselementen aan Visual Composer komt tot stand wanneer een shortcodes-bestand aanwezig is in uw thema- of thema-add-on, zoals in ons geval, dus eerst moeten we controleren met de functie of onze ninzio-addons-plug-in geïnstalleerd en actief is:
if (define ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/plugins/ninzio-addons.zip')) ... nieuwe elementencode komt hier ...Hoe begrijpt Visual Composer dat er nieuwe elementen zijn toegevoegd? Met add_action ();.
add_action ('init', 'focuson_ninzio_integrateVC'); function focuson_ninzio_integrateVC () ... nieuwe elementenWe zullen de actie gebruiken in het, ons dit geven:
if (defined ('NINZIO_ADDONS') && file_exists (get_template_directory (). '/plugins/ninzio-addons.zip')) add_action ('init', 'focuson_ninzio_integrateVC'); function focuson_ninzio_integrateVC () ... nieuwe elementenNu zijn we klaar om onze nieuwe elementen toe te voegen, waarvoor we nog een nieuwe functie nodig hebben:
Voor deze functie is één parameter vereist: een reeks speciale kenmerken die uw shortcode beschrijven. Als voorbeeld voegen we een aangepast scheidingselement toe:
"Separator", 'base' => "nz_sep", 'class' => 'nz-sep', 'show_settings_on_create' => false, 'category' => esc_html __ ("Ninzio", 'focuson'), 'pictogram' => 'icon-separator', 'description' => 'Gebruik dit element om inhoud te scheiden', 'js_view' => ", 'params' => array (... Dat zijn veel attributen! Laten we het belangrijkste markeren:
naam geeft een unieke beschrijvende naam aan uw aangepaste element. Gebruikers zien het op het tabblad Visual Composer.baseren, niet minder belangrijk dan naam, is de naam van het shortcodetag. Als u bekend bent met het maken van aangepaste shortcodes, weet u dat alle aangepaste shortcodes tags bevatten. Ons aangepaste scheidingsteken heeft bijvoorbeeld een nz_sep label. De elementbasis moet uniek zijn en deze moet exact worden genoemd als de korte-codenaam in uw shortcodes.php-bestand (zoals we hebben in ons Focuson-thema):'20', 'bottom' => '20', 'type' => 'solid', 'color' => '#eeeeee', 'align' => 'left', 'width' => ", 'height '=> "), $ atts)); $ styles = ""; if (isset ($ color) &&! empty ($ color)) $ styles. = 'border-bottom-color:'. $ color. ';'; if (isset ($ width) &&! empty ($ width)) $ styles. = 'width:'. absint ($ width). 'px;'; else $ styles. = 'width: 100%;'; if (isset ($ height) &&! empty ($ height)) $ styles. = 'border-bottom-width:'. absint ($ height). 'px;'; if (isset ($ type) &&! empty ($ type)) $ styles. = 'border-bottom-style:'. $ type. ';'; if (isset ($ top) &&! empty ($ top)) $ styles. = 'margin-top:'. absint ($ top). 'px;'; if (isset ($ bottom) &&! empty ($ bottom)) $ styles. = 'margin-bottom:'. absint ($ bottom). 'px;'; $ output = ''; return $ output; add_shortcode ('nz_sep', 'nz_sep'); ?>
klasse is niet kritisch, maar een belangrijke optie, die dient als een niet-unieke identificatie. De naamgeving moet beschrijvend zijn en zonder spaties, streepjes of onderstrepingstekens gebruiken.show_settings_on_create is een Booleaanse parameter en zelfbeschrijvend.categorie is zeer belangrijk. Als u uw aangepaste elementen wilt groeperen binnen één aangepast menutabblad in het menu van Visual Composer-elementen, moet u een aangepaste categorie toevoegen. Als u elementen wilt opnemen in een bestaand categorie gebruik de naam van die bestaande menutab: 
icoon is gelijkaardig aan klasse. We voegen een pictogramnaam toe zodat we de shortcode in het Visual Composer-menu kunnen stylen. Bijvoorbeeld:i.icon-separator, .nz-sep .vc_element-icon background-image: url (... /images/shortcodes/sep.png)! belangrijk;
Omschrijving voegt een kleine beschrijving toe aan uw aangepaste element. Gebruikers zullen dit zien.js_view is een zeer belangrijke parameter. Wanneer u elementen hebt die ouder- en kindcomponenten bevatten (bijvoorbeeld inhoudsvakken, die een hoofdcontainernouder- en -kindvakelementen hebben, waarbij bovenliggende en onderliggende elementen afzonderlijke attributen hebben), zou dit attribuut de waarde moeten hebben VcColumnView. We zullen de meer complexe details in een oogwenk onderzoeken.params is de reeks parameters die aan uw aangepast element moet worden toegevoegd. Het gedraagt zich vergelijkbaar met de vc_add_params () functie, maar genest in de vc_map () functie.Containerelementen met onderliggende elementen vereisen enige specifieke configuratie voordat ze worden toegevoegd. In de vc_map () functie moeten we nog een paar parameters toevoegen om onze elementen een container te maken, of het kind van een ander element.
Stel dat we bijvoorbeeld een nieuw element "Inhoudsvakken" willen toevoegen. Ons inhoudvakelement bestaat uit twee delen:
Eén inhoudsvak kan onbeperkte elementen voor de kinderbox bevatten. Dus we moeten twee problemen oplossen:
Om verwarring zoveel mogelijk te voorkomen, laten we een bestaand element bekijken. In ons Focuson-thema hebben we een element 'Inhoudsvakken', met twee extra parameters die van bijzonder belang zijn:
"as_parent" => array ('only' => 'nz_box')Herinner de baseren parameter van onze vc_map () functie? Hier, met as_parent, we registreren het nz_content_box element als ouder enkel en alleen voor een nz_box kind element.
"js_view" => 'VcColumnView'
Wanneer js_view ingesteld op VcColumnView Visual Composer voegt extra UI-functionaliteit toe aan het element in de editor, zodat we een nieuw onderliggende element kunnen toevoegen.
In dezelfde lijn, onze nz_box elementcode heeft een extra parameter:
"as_child" => array ('only' => 'nz_content_box'),Met as_child we registreren het nz_box element als een kind, maar enkel en alleen voor een nz_content_box ouder element.
Als u nu naar het Visual Composer-menu gaat en op de nieuw toegevoegde klikt Inhoudsvak element, je zult zien ... het werkt niet. Er is geen ouder / kind-functionaliteit toegevoegd, want er is nog één ding dat we moeten doen: we moeten uitbreiden naar klassen:
WPBakeryShortCodesContainerWPBakeryShortCodeDe eerste klas is verantwoordelijk voor bovenliggende elementen, de tweede is verantwoordelijk voor onderliggende elementen. Dus voeg direct na de actiefunctie toe:
if (class_exists ('WPBakeryShortCodesContainer')) class WPBakeryShortCode_nz_Content_Box breidt WPBakeryShortCodesContainer uit Zoals u zich herinnert, was de basis van het hoofdvakelement van de inhoudsbox nz_content_box, deze naam moet ook aanwezig zijn in de klassenaam waarmee de extensie wordt uitgebreid WPBakeryShortCodesContainer klasse. In ons geval is de nieuwe klassennaam WPBakeryShortCode_nz_Content_Box.
if (class_exists ('WPBakeryShortCode')) class WPBakeryShortCode_nz_Box breidt WPBakeryShortCode uit Hetzelfde geldt voor het onderliggende element. De basisnaam was nz_box en de nieuwe klassenaam zal zijn WPBakeryShortCode_nz_Box.
Wat u ook uw elementbasis noemt, deze moet aanwezig zijn in de nieuwe klassenaam.
Als u nu nog eens naar de pagina-editor kijkt, ziet u dat het nieuwe inhoudsvakelement over onderliggende / onderliggende functies beschikt.
Na hard werken kunnen we de vruchten plukken van onze arbeid. Neem een kijkje op de hoofdpagina van het hoofdthema van Focuson. Laten we die startpagina samenstellen met Visual Composer.
De structuur kan in verschillende secties worden verdeeld:
Dit opnieuw maken is maar het werk van een moment met Visual Composer.
We zullen elk blok binnen het afzonderlijke "Rij" -element wikkelen met minstens één "Kolom" -element. Zoals we hebben besproken, is dit de vereiste en minimale structuur van Visual Composer-pagina's.
Het Focuson-thema heeft de Revolution Slider geïntegreerd. De schuifregelaar is niet toegevoegd met Visual Composer, maar zodra u Revolution Slider en Visual Composer installeert, zult u een nieuw element "Revolution slider" opmerken. Dit is een gratis add-on van de Revolution-schuifregelaar en met dat element kunt u een schuifregelaar in de pagina plaatsen, zelfs als uw thema niet is geïntegreerd met Visual Composer.
Denk aan het voorbeeld "Content boxes" -element? We kunnen geweldige inhoudsvakken bouwen met ons aangepaste element:
In deze sectie gebruiken we
Bijna alle elementen hier zijn op maat toegevoegd.
Voor de tellers hebben we rij-achtergrondopties (afbeelding en kleur) gebruikt voor esthetiek. Al deze opties zijn op maat toegevoegd vanuit Ninzio. We plaatsen het aangepaste item van de teller in die gestileerde rij.
Met Visual Composer-kolommen kunnen we inhoud met twee kolommen toevoegen:
Bijna al deze elementen worden op maat toegevoegd, alleen het element "Aangepaste heading" komt standaard met Visual Composer. In de back-end-editor lijkt het asymmetrisch, maar aan de voorkant ziet u een mooi uitziende structuur. Contentbeheer gaat niet alleen over het vullen van pagina's, het is ook een logisch en creatief proces. Je moet rekening houden met de afmetingen van afbeeldingen en tekst en nadenken over hoe ze er uit zien op verschillende apparaten. Soms zijn ook responsieve correcties nodig. Gelukkig heeft Visual Composer de benodigde tools. In bewerkingsopties voor kolommen kunt u de Responsieve opties tabblad waar u de kolomgrootte kunt aanpassen, afhankelijk van apparaatgroepen.
Dit is niets meer dan een rij met een achtergrondafbeelding en parallax-effect, een kleine hoeveelheid inhoud erin met een tooltip, titel en knoppen.
Dit is een extra element van Ninzio; een carrousel van teamleden.
Ook hier is niets ongewoons; een gewoon rijelement met twee kolommen, elk met inhoud.
Maar hier is de truc dat de afbeelding aan de rechterkant zich niet in de tweede kolom bevindt, maar deze is eigenlijk ingesteld als achtergrondafbeelding, dus de rechterkolom hier is leeg.
We hebben ook een aangepast element gemaakt om testimonials toe te voegen. Nogmaals, hier is niets ongewoons aan de hand.
En de laatste sectie is sponsorlogo. Het is een carrousel van logo's binnen een rij met een grijze achtergrondkleur. Dit element is ook op maat toegevoegd.
Dat is het! Nu weet u alles wat nodig is om Visual Composer met uw thema te integreren en pagina's snel en eenvoudig te maken. Als een bron voor verdere studie, stel ik voor dat je een kijkje neemt op de officiële wiki-pagina voor Visual Composer. Als u vragen heeft, kunt u hieronder een reactie achterlaten!
