Share
Weet je nog de keren dat we pagina's met opties moesten maken voor onze thema's? Natuurlijk, want we hebben ze nog steeds nodig! Wanneer de Customizer van WordPress tekortschiet in het gebruik van de functionaliteit van uw thema, moet u een extra pagina Opties maken om uw gebruikers een betere ervaring te bieden.
Hoewel het altijd een optie is om deze Options-panelen helemaal zelf te maken, is het beter om de reeds uitgevonden wielen te gebruiken. In dit deel van de "Toolbox van de Smart WordPress Developer" -reeks gaan we door Vafpress, een solide WordPress-framework voor thema-opties voor uw volgende themaproject.
Tijd voor wat controverse: ik denk niet dat de Customizer al klaar is voor thema's.
Ook al geef ik toe dat de Customizer gewoon een is geweldig tool, ik kan ook zien dat het dat gewoon niet is gekwalificeerd om alle functionaliteit van zelfs een eenvoudig multifunctioneel thema te bedienen. Ik weet het, ik weet het, multi-purpose thema's zijn zielloze, kapitalistische thema's die de wereld van WordPress ruïneren ... of zijn ze? Ik bedoel, ik geef toe dat het beter zou zijn als thema's met een enkel doel populairder zouden zijn, maar kunnen we het feit negeren dat multifunctionele thema's de allereerste keuze zijn van de meeste ontwerpbureaus, freelancers en zelfs nieuwe WordPress-gebruikers die willen bouwen een website voor hun bedrijven?
Aan het einde van de dag moeten we ons afvragen wat de noodzaak is van een thematische optie voor de Customizer: WordPress voor WordPress, of WordPress voor de mensen? Hoewel ik WordPress ondersteun, dat steeds meer gestandaardiseerd wordt in verschillende aspecten, denk ik ook dat we de eisen van de gebruikersgemeenschap van WordPress niet kunnen negeren. Immers, als ontwikkelaars de eisen van gebruikers negeerden, zou WordPress niet zo groot geworden zijn als het nu is.
Bovendien denk ik dat de Customizer (nog) ook niet genoeg is voor thema's met een enkel doel. We hebben nog niet eens een gestandaardiseerde en gecentraliseerde manier om content-onderdelen (zoals sliders, menu's en dergelijke) te bouwen, en wat u hier ook tegen zegt, WordPress-gebruikers hebben (en zullen altijd) één enkele interface nodig om hun thema's te beheren.
Ik blijf deze sectie kort houden, omdat het onderwerp Vafpress is als een WordPress-ontwikkelaarstool en ik kan praten over "de Customizer versus themakaders" voor nog eens duizend woorden. Maar laat me er niet voor terugdeinzen om niet te reageren: ik hoor graag wat u ervan vindt!
Onnodig te zeggen op dit punt, maar het is gebruikelijk om elke sectie te openen met een eenvoudige inleiding: Vafpress is een kader voor themaopties. En een hele goeie, zou ik zeggen. Gemaakt door Vafour, een Indonesisch webontwikkelingsteam, beweert Vafpress dat het bouwen van een WordPress-thema was nog nooit zo eenvoudig en sneller.
Download gewoon Vafpress van de officiële downloadpagina of zijn GitHub-repository, en laten we snel naar de goede delen gaan.
Vanaf de dag dat ik deze tutorial aan het schrijven ben, heeft Vafpress 19 besturingsvelden verdeeld in twee categorieën, genaamd "Fields" en "Multifields".
Accentsconagua
tekstvak: Genereert een tekstinvoer.textarea: Genereert een textarea veld-.toggle: Genereert een ja / nee-schakelaar.schuif: Genereert een bereikschuifregelaar.uploaden: Genereert een uploadveld met behulp van WordPress Media Manager.kleur: Genereert een kleurenkiezer.datum: Genereert een datumkiezer.codeeditor: Genereert een code-editor.wpeditor: Genereert een WYSIWYG-editor.fontawesome: Genereert een pictogramkiezer met behulp van Font Awesome.notebox: Genereert een veld dat u kunt gebruiken om de gebruikers van uw thema te informeren.html: Hiermee kunt u aangepaste HTML-code weergeven.kiezen: Genereert een eenvoudig multi-Select: Genereert een meervoudig uitklapmenu.checkbox: Genereert een groep selectievakjes.checkimage: Genereert een groep selecteerbare afbeeldingen, die werken als checkboxes.Radio knop: Genereert een groep keuzerondjes.radioimage: Genereert een groep selecteerbare afbeeldingen, werkend als radiokasten.sorteerder: Genereert een sorteerbaar multiselect-veld.Het zou niet goed voelen als ik deze sectie niet afmaakte zonder een voorbeeld - laten we een enkele eenvoudige doen. De volgende coderegels maken een veld Kleurkiezer:
array (array ('type' => 'color', 'name' => 'example_color_picker', 'label' => 'Color Picker', 'description' => 'Stel hier een kleur in voor uw koppen!', 'standaard '=>' rgba (255,255,255, .75) ',' formaat '=>' hex ',), array (// een ander veld),)?> Dit deel is in het begin misschien lastig, maar het heeft een soepele leercurve.
Het optiescherm dat we met Vafpress kunnen maken, bestaat uit een paar bouwstenen:
Laten we beginnen met de constructie van de "paginabuilder voor opties":
false, // de naam voor de instellingen in de database 'option_key' => 'vpt_option', // de slug van uw optiepagina 'page_slug' => 'vpt_option', // pad naar het sjabloonbestand of de array-sjabloon '=> get_template_directory (). '/options-template.php', // bovenliggende menupagina 'menu_page' => 'themes.php', // beslist of menu's automatisch moeten worden benoemd of niet 'use_auto_group_naming' => true, // show (standaard) of verberg de "Export / Import" pagina 'use_exim_menu' => true, // minimale gebruikersrol om het optiepaneel 'minimum_role' => 'edit_theme_options', // type van de lay-out te bekijken (standaard vastgezet) 'layout' => 'fixed', // titel van de optiepagina 'page_title' => __ ('Thema-opties', 'vp_textdomain'), // titel van het hoofdmenu-item 'menu_label' => __ ('Thema-opties', 'vp_textdomain '),)); // hook it to the after_setup_theme action add_action ('after_setup_theme', 'my_options')?> Een goede zaak bij de "paginabuilder voor opties" is dat u naar een afzonderlijk bestand kunt verwijzen waar u al uw menu's (en secties in de menu's en velden binnen de secties) bewaart. In het bovenstaande voorbeeld hebben we gewezen op een sjabloonbestand met de naam Opties-template.php. Laten we eens kijken waar we dat bestand mee moeten vullen:
__ ('Vafpress Option Panel', 'vp_textdomain'), 'logo' => ", 'menus' => array (array ('title' => __ ('Special Controls', 'vp_textdomain'), 'name' = > 'menu_2', 'icon' => '/icon/special.png', 'controls' => array (// ... verzameling secties en of besturingsvelden ...),),))?> Als je wilt, kun je ook wat "geneste menu's" doen:
__ ('Vafpress Option Panel', 'vp_textdomain'), 'logo' => ", 'menus' => array (array ('title' => __ ('Standaard HTML-besturingselementen', 'vp_textdomain'), 'naam' => 'menu_1', 'icon' => 'font-awesome: icon-magic', 'menus' => array (array ('title' => __ ('Regular', 'vp_textdomain'), 'name' = > 'submenu_1', 'icon' => 'font-awesome: icon-th-large', 'controls' => array (// ... verzameling secties en of besturingsvelden ...),), array ('title' = > __ ('Afbeelding', 'vp_textdomain'), 'naam' => 'submenu_2', 'icon' => 'font-awesome: icon-picture', 'controls' => array (// ... verzameling secties en of besturingsvelden ...),),),),));?> En in de array van de 'Controls' argumenten gebruiken we iets als het volgende:
array (array ('title' => __ ('TextBox and TextArea', 'vp_textdomain'), 'name' => 'section_1', 'description' => __ ('TextBox and TextArea Showcase', 'vp_textdomain'), 'velden' => array (// ... verzameling controlevelden ...),),)?> Nogmaals, dit kan in het begin wat oefenen, maar het is een wandeling in het park als je er eenmaal aan gewend bent.
Al deze functies zouden genoeg moeten zijn voor een raamwerk zoals Vafpress, maar Vafpress stopt daar niet - het heeft nog een paar trucs in petto:
Met Vafpress kun je veel bereiken - meer dan we hier in deze tutorial hebben behandeld. Bekijk de documentatie van Vafpress voor meer informatie.
Wat denk je van Vafpress? Denk je dat je het een kans geeft in je volgende themaproject? Vertel ons wat u denkt in het gedeelte Opmerkingen hieronder. En als je het artikel leuk vond, vergeet dan niet om het met je vrienden te delen!
Tot ziens in het volgende gedeelte waar we het over CMB2 gaan hebben, een metabox, aangepaste velden en formulierenbibliotheek voor WordPress.
