Share
Op dit punt in de serie hebben we alles besproken, van waarom de Theme Customizer nuttig is voor diegenen onder ons die ontwerpers en ontwikkelaars zijn, hoe ze in ons thema kunnen worden geïmplementeerd en hoe de relatie tussen secties, instellingen en besturingselementen te begrijpen is.
We hebben ook een kijkje genomen bij het implementeren van onze eigen instelling en besturing in een van de vooraf gedefinieerde secties van WordPress.
In dit artikel gaan we kijken wat er nodig is om onze eigen sectie en een verscheidenheid aan instellingen en besturingselementen te introduceren. Dit artikel behandelt een methodologie die kan worden gevolgd voor het implementeren van nieuwe instellingen en bedieningselementen, en hoe deze methodologie kan worden toegepast voor het introduceren van een nieuwe sectie, instelling en controle.
We zullen dit onderwerp in het tweede deel van dit artikel bespreken door extra besturingselementen te introduceren. Maar laten we voor nu eens kijken naar de methodologie en laten we een nieuwe instelling introduceren in de Thema-aanpasser.
Voordat we ons thema gaan bijwerken, laten we eerst praten over wat nodig is om een nieuwe sectie, een nieuwe instelling en een nieuw besturingselement te introduceren. Merk op dat we op dit punt aannemen dat we altijd het postMessage vervoer voor live updates, dus we gaan er in de toekomst hetzelfde mee uit.
Dat gezegd hebbende, het hebben van een methodologie voor het introduceren van nieuwe opties is altijd veel handiger dan iets blind ingaan, dus laten we eens kijken naar wat nodig is om secties, instellingen en besturingselementen op hoog niveau te implementeren:
Accentsconagua
get_theme_mod Niets is te gecompliceerd, toch? Natuurlijk spreken acties meer dan woorden, dus laten we beginnen met precies dit te doen.
Om de methodologie te volgen die we hierboven hebben geschetst, gaan we werken met dezelfde functies, sjablonen en JavaScript-bestanden die we in eerdere artikelen hebben gedefinieerd, dus als je het nog niet hebt ingehaald, tijd.
Met dat gezegd, laten we beginnen.
In de tcx_register_theme_customizer functie, we gaan een sectie implementeren genaamd Weergaveopties, en we zorgen ervoor dat dit helemaal onderaan de lijst met secties in de Thema-aanpasser wordt geplaatst. Dit wordt gedaan door het instellen van prioriteit eigendom van de add_section.
$ wp_customize-> add_section ('tcx_display_options', array ('title' => 'Weergaveopties', 'priority' => 200)); Bovenstaande opmerking, we hebben twee argumenten gedefinieerd:
Als u uw werk nu opslaat en probeert de customizer opnieuw te laden, ziet u de Weergaveopties sectie. Dat komt omdat er nog geen opties zijn om weer te geven.
Om het gedeelte weer te geven, moeten we een instelling introduceren die de gebruiker kan aanpassen. Om dit te doen, introduceren we een optie waarmee de gebruiker de zichtbaarheid van een header kan wijzigen.
Het eerste dat we moeten doen is bellen naar add_setting die de instelling identificeert en die de standaardwaarde en de transportmethode bepaalt.
Dit alles zou relatief eenvoudig moeten zijn als je het vorige artikel hebt bijgehouden. Dus net onder de oproep tot add_section, voeg de volgende oproep toe:
$ wp_customize-> add_setting ('tcx_display_header', array ('default' => 'true', 'transport' => 'postMessage')); Concreet hebben we een nieuwe instelling gemaakt met de naam tcx_display_header die we zullen gebruiken om de weergave van de header te schakelen met beide get_theme_mod en met behulp van JavaScript.
Maar dit is niet genoeg om de gebruiker de mogelijkheid te geven de zichtbaarheid van de koptekst te wijzigen - we moeten nu een besturingselement implementeren.
Voor deze specifieke instelling introduceren we een selectievakje waarmee gebruikers de zichtbaarheid van de instelling kunnen wijzigen.
Eerst moeten we de besturing definiëren. Hiertoe voegt u de volgende code toe onder de oproep aan add_setting die we hierboven hebben gedefinieerd:
$ wp_customize-> add_control ('tcx_display_header', array ('section' => 'tcx_display_options', 'label' => 'Display Header?', 'type' => 'checkbox')); In deze aanroep binden we de controle aan de tcx_display_header zo ingesteld dat deze weet welke informatie moet worden weergegeven. In de array geven we de ID van de sectie waaraan deze instelling en controle zijn gebonden. Vervolgens geven we het label dat naast het besturingselement wordt weergegeven en ten slotte definiëren we het type besturingselement. Het is duidelijk dat we een selectievakje definiëren.
Op dit punt zou je je werk moeten kunnen opslaan, de thema-aanpasser kunnen vernieuwen en dan iets als dit kunnen zien:
Dit is goed - het betekent dat alles correct is aangesloten voor wat betreft de Theme Customizer, maar merk op dat klikken op het selectievakje niet echt werkt do iets.
Dit is het moment om de Theme Customizer aan te sluiten op het actuele thema.
Ten eerste willen we openen theme-customizer.js. Als u meegegaan bent, bevindt deze zich in de js map die we eerder in de reeks hebben gedefinieerd.
Vervolgens moeten we de volgende code toevoegen:
wp.customize ('tcx_display_header', function (value) value.bind (function (to) false === to? $ ('#header') .hide (): $ ('#header') .show ( ););); Merk op dat het de ID van de instelling die we hebben gemaakt in beslag neemt en vervolgens de volgende logica uitvoert: Als naar is gelijk aan vals, dan verbergen we het header-element; anders tonen we het header-element.
Vernieuw de pagina op dit punt en je zou moeten opmerken dat de kop verdwijnt (of opnieuw verschijnt) terwijl je het selectievakje inschakelt.
Maar wanneer u uw werk bewaart, gebeurt er niets. Dit komt omdat de geserialiseerde waarde niet wordt gelezen. Het laatste dat we moeten doen is gebruik maken van get_theme_mod voor de instellingen.
get_theme_mod Ten slotte is het laatste deel van de methodologie dat nodig is voor het implementeren van onze eigen instelling, ervoor te zorgen dat de waarde die wordt opgeslagen via het transport wordt gelezen wanneer de pagina wordt geladen.
Hiertoe gaat u naar tcx_customizer_css functie en voeg dan de volgende code toe tussen de stijl blok:
#header display: none;
Dit leest kortweg de themawaarde voor de ID van de displaywaarde van de koptekst die we hebben opgeslagen. Als het op false is ingesteld, verbergt het het header-element; anders wordt de CSS nooit weergegeven.
Op dit punt moet u een volledig werkende implementatie hebben van het selectievakje dat de koptekst dynamisch schakelt wanneer de gebruiker met de aanpasser werkt, en die gebruikmaakt van de geserialiseerde waarde wanneer de instelling wordt opgeslagen, en updates van de gebruiker wanneer deze wordt weergegeven laad het thema op.
Nu we een methode hebben gedefinieerd voor het implementeren van secties, instellingen en besturingselementen, kunnen we beginnen te werken met verschillende andere besturingselementen, evenals.
In het volgende artikel zullen we de resterende basisbesturingselementen bekijken, en daarna zullen we enkele van de meer geavanceerde besturingselementen bekijken die WordPress biedt in de Thema-aanpasser..
Net als bij eerdere versies van het thema kun je versie 0.4.0 downloaden van GitHub om de code te bekijken, ermee te spelen en je voor te bereiden op de volgende reeks besturingselementen die we in het volgende artikel zullen introduceren.
