Share
We hebben het laatste artikel van de serie bereikt. In het laatste bericht hebben we gekeken naar de invoering van validatie, sanering en een aantal basisinvoerelementen waar we gebruik van kunnen maken bij het bouwen van optiepagina's..
In dit artikel gaan we de laatste set van drie opties bekijken en hoe ze aan de voorkant van het thema kunnen worden gekoppeld.
Voordat we beginnen: Net als bij de laatste paar gaat dit artikel ervan uit dat je de rest van de serie hebt gevolgd, een werkkopie van de voorbeeldcode hebt geïnstalleerd en nu relatief bekend bent met de instellingen-API en thema-opties. Als je niet zeker bent van bovenstaande, raad ik je aan de rest van de artikelen te lezen voordat je in deze post duikt.
Eerder in deze reeks hebben we selectievakjes toegevoegd. We kunnen teruggaan en die opnieuw bezoeken, maar laten we consistent blijven met wat we tot nu toe hebben gedaan en nieuwe opties introduceren. Zodra we klaar zijn, kunt u de code die we aan het begin van de serie hebben toegevoegd, opnieuw bekijken.
Laten we eerst het checkbox-element introduceren in de sandbox_theme_initialize_input_examples functie:
Accentsconagua
add_settings_field ('Checkbox Element', 'Checkbox Element', 'sandbox_checkbox_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Vervolgens moeten we doorgaan en de callback definiëren die we hierboven hebben gespecificeerd. Voeg de volgende functie toe aan uw project:
function sandbox_checkbox_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = ''; echo $ html; // end sandbox_checkbox_element_callback We zullen deze functie kortstondig opnieuw bekijken, maar eerst merken dat ik een labelelement naast het selectievakje heb toegevoegd. Selectievakjes hebben vaak een gekoppeld element dat ook de mogelijkheid biedt om te klikken om het selectievakje te activeren. Dit maakt het gemakkelijker voor gebruikers om een optie te wisselen zonder precies in het selectievakje te hoeven klikken.
Om een label te koppelen aan een selectievakje, moet je de labels vermelden voor attribuut de waarde van de ID kaart kenmerk van het selectievakje waaraan het is gebonden. Makkelijk genoeg, toch?
Vernieuw nu uw optiespagina en u zou het nieuwe element zichtbaar moeten zien op uw optiespagina. Maar voor nu wordt er geen waarde opgeslagen of opgehaald. Laten we eerst een introduceren waarde attribuut op het selectievakje. Dit is enigszins willekeurig, maar het is gebruikelijk om een gecontroleerd element de waarde '1' te geven. Laten we dat nu doen:
$ html = '';
Laten we vervolgens eens nadenken over wat er moet gebeuren als we een waarde opslaan. Ideaal:
Relatief duidelijk, toch? In plaats van het lezen van de optie, het instellen van een voorwaardelijke en controleren op de aanwezigheid of afwezigheid van een waarde, kunnen we profiteren van WordPress ' gecontroleerd functie.
De functie accepteert drie argumenten, waarvan alleen de eerste vereist is:
check = "gecontroleerde" naar de browserDus laten we onze code updaten om deze functie te gebruiken:
$ html = '';
Ververs de pagina en vink de optie aan, bewaar en herhaal.
Als een van deze een beetje verwarrend lijkt, bekijk dan het vorige artikel waarin we de significantie van elk attribuut op een optie-element behandelen.
Laten we ten slotte de voorkant van het thema bijwerken om deze optie aan te vinken en een tekenreeks weer te geven op basis van of de optie is gecontroleerd. Herinner dat toen we het element creëerden, we het de waarde gaven van '1'. Dit betekent dat wanneer het selectievakje is aangevinkt en geserialiseerd, het een waarde van één zal behouden. Eenvoudig gezegd, we moeten een voorwaardelijke schrijven die de waarde van de optie controleert en vervolgens de tekst op de juiste manier weergeeft. In index.php, voeg dit blok code toe:
Het selectievakje is gecontroleerd.
Het selectievakje is niet gecontroleerd.
Ga nu terug naar uw instellingenpagina, schakel het selectievakje uit en ververs uw pagina.
Zoals vermeld aan het begin van dit gedeelte, kijk eens naar de 'Weergaveopties' die we eerder in deze serie hebben geïntroduceerd en kijk of het veel duidelijker is nu we hebben onderzocht hoe checkbox-elementen kunnen worden geïntroduceerd en beheerd..
Radio-knoppen zijn elementen die nuttig zijn in groepen - je gaat immers nooit een enkel keuzerondje gebruiken. Het ding over radio-elementen is dat ze een manier bieden om gebruikers in staat te stellen een uit een wederzijds exclusieve set van opties te kiezen.
Om de een of andere reden zijn keuzerondjes vaak een uitdaging voor WordPress-ontwikkelaars. Hopelijk maken we het u zo gemakkelijk mogelijk om onze projecten binnen te halen. Zoals met de rest van de voorbeelden in deze serie, detailleer wat we gaan doen:
Lijkt duidelijk genoeg - laten we beginnen en het veldelement toevoegen aan onze optiespagina:
add_settings_field ('Keuzelijstelementen', 'Keuzelijstelementen', 'sandbox_radio_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); En laten we het terugbellen van het radio-element implementeren. Eerst geven we de code op, waarna we deze beoordelen:
function sandbox_radio_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = ''; $ html. = ''; $ html. = ''; echo $ html; // einde sandbox_radio_element_callback Het eerste dat opvalt bij het werken met keuzerondjes, is dat ze dat wel doen niet volg de typische voorbeelden van het instellen van de ID kaart en naam attributen. Merk op dat de ID kaart attribuut is uniek en heeft geen relatie met de rest van de attributen op het element. Merk ook op dat het bijbehorende label van elk element de ID kaart want het is voor attribuut. Dit bindt het label aan het keuzerondje, zodat gebruikers op het label kunnen klikken om het radio-element te selecteren.
Merk vervolgens op dat het naam attributen zijn hetzelfde voor elk radio-element maar de waarden zijn verschillend. Dit is wat maakt dat radioknoppen elkaar uitsluiten - elk radio-element moet hetzelfde hebben naam maar de waarden moeten uniek zijn.
Ten slotte kunnen we een voorwaarde voor de startpagina instellen door de waarde van het element te controleren. In je thema's functions.php, voeg het volgende codeblok toe:
De eerste optie is geselecteerd.
De tweede optie is geselecteerd.
Laad de startpagina van uw thema, schakel de opties in en ververs. Je zou de twee zinnen moeten zien veranderen op basis van de waarde van de optie-elementen.
Het laatste element dat we gaan beoordelen, is het select element. Dit element geeft gebruikers een vervolgkeuzemenu met opties waaruit ze kunnen kiezen. Laten we precies plannen wat we voor dit element moeten introduceren:
Op dit punt in de serie zou dit nogal routinematig moeten zijn. Laten we aan de slag gaan - eerst introduceren we het veld met instellingen:
add_settings_field ('Select Element', 'Select Element', 'sandbox_select_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Vervolgens definiëren we de callback-functie. Bekijk de code en dan bespreken we deze na het voorbeeld:
function sandbox_select_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; echo $ html; // einde sandbox_radio_element_callback Vernieuw eerst je optiespagina om ervoor te zorgen dat het geselecteerde element wordt weergegeven. Ervan uitgaande dat dit het geval is, laten we de code hierboven bekijken.
Bij het definiëren van het select element, hebben we het een gegeven ID kaart attribuut en a naam attributen zoals we doen met de rest van de elementen die we hebben gedemonstreerd. Vervolgens heeft elke optie een unieke waarde en tekst die overeenkomt met de waarde. Hoewel je dit niet hoeft te doen, heb ik het meestal nuttig gevonden als ik in mijn projecten werk. Ten slotte hebben we gebruik gemaakt van de gekozen hulp die WordPress biedt. Dit lijkt veel op de gecontroleerd functie die we in het vorige voorbeeld hebben gebruikt, behalve dat het is gericht op het selecteren van opties.
De laatste stap is om de voorkant van het thema bij te werken zodat het de waarde van het geselecteerde element controleert nadat het is opgeslagen. Voeg het volgende blok code toe aan uw index.php:
Nooit dit weergeven. Enigszins ironisch om dit zelfs te laten zien.
Soms geeft dit weer.
Geef dit altijd weer.
Herlees de startpagina van uw thema, wijzig de opties en ververs de pagina - u zou de tekstupdate moeten zien op basis van de optie die u heeft geselecteerd.
Daarmee komen we eindelijk aan het einde van deze serie. De Settings API is een krachtige functie van WordPress en biedt ons de mogelijkheid om goed ontworpen, beveiligde optiepagina's te implementeren, maar het vereist dat we het goed gebruiken. Helaas is dit waarschijnlijk een van de meest genegeerde functies van het platform door veel ontwikkelaars.
Uiteindelijk was het mijn doel om ontwikkelaars door de API te loodsen vanaf het begin van het begrijpen waarom het belangrijk is, naar instellingen, van menupagina's tot navigatie met tabbladen en hoe met elk van de elementtypen te werken..
Vergeet tot slot niet dat u de voorbeeldcode op GitHub kunt vinden. Blijf meewerken aan de configuratie-API of zoek een functie die onduidelijk is. Ik zou graag zien dat deze serie en de voorbeeldcode een bron van educatie blijven bieden voor de WordPress-gemeenschap.
gecontroleerdgekozen