Share
Vi har nått den slutliga artikeln i serien. I det sista inlägget tog vi en titt på att införa validering, sanering och ett par grundläggande inmatningselement som vi kan dra nytta av när vi bygger sidor med alternativ.
I den här artikeln ska vi titta på den sista uppsättningen av tre alternativ och hur man kopplar upp dem till temas främre ände.
Innan vi börjar: Precis som i de senaste åren antar den här artikeln att du har följt med resten av serien, har en fungerande kopia av provkoden installerad, och är nu relativt bekant med inställnings API och tematillval. Om du är osäker på något av ovanstående rekommenderar jag starkt att läsa resten av artiklarna innan du dyker in i det här inlägget.
Tidigare i denna serie lade vi till kryssrutor. Vi kunde gå tillbaka och återkomma, men låt oss hålla överens med vad vi har gjort fram till den här tiden och presentera nya alternativ. När vi är färdiga kan du återgå koden vi lade till i början av serien för granskning.
Låt oss först introducera kryssrutan elementet till sandbox_theme_initialize_input_examples fungera:
Accentsconagua
add_settings_field ('Checkbox Element', 'Checkbox Element', 'sandbox_checkbox_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Därefter måste vi gå vidare och definiera återuppringningen som vi har angett ovan. Lägg till följande funktion för ditt projekt:
funktion sandbox_checkbox_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = ''; echo $ html; // slut sandbox_checkbox_element_callback Vi kommer att ompröva denna funktion tillfälligt men först märka att jag har lagt till ett etikettelement bredvid kryssrutan. Kryssrutor har ofta ett element som är associerat med dem som också ger möjlighet att klickas för att utlösa kryssrutan. Det gör det lättare för användarna att byta till ett alternativ utan att behöva klicka exakt i kryssrutan.
För att associera en etikett med en kryssruta måste du ge etiketten för ange värdet av ID attributet till kryssrutan som den är bunden till. Lätt nog, höger?
Uppdatera nu din options sida och du bör se det nya elementet synligt på din options sida. Men för närvarande sparar det faktiskt inte eller hämtar ett värde. Låt oss först introducera en värde attribut på kryssrutan. Detta är något godtyckligt men det är en vanlig praxis att ge ett kontrollerat element ett värde av '1.' Låt oss göra det nu:
$ html = '';
Låt oss sedan tänka igenom exakt vad som behöver hända när vi sparar ett värde. Helst:
Relativt tydligt, eller hur? I stället för att läsa alternativet, skapa en villkorlig och kontrollera att det finns ett värde eller inte, kan vi dra nytta av WordPress ' kontrollerade fungera.
Funktionen accepterar tre argument, endast den första som krävs:
kolla = "kontrollerat" till webbläsarenSå låt oss uppdatera vår kod för att använda den här funktionen:
$ html = '';
Uppdatera sidan och kolla alternativet, spara och upprepa.
Om något av detta ser lite förvirrande ut, granska den föregående artikeln där vi täcker betydelsen av varje attribut på ett alternativelement.
Slutligen, låt oss uppdatera temans främre del för att kontrollera det här alternativet och göra en sträng text baserat på om alternativet har kontrollerats. Minns att när vi skapade elementet gav vi det värdet av "1'. Det betyder att när kryssrutan är markerad och seriell, kommer den att bibehålla ett värde på en. Enkelt uttryckt, vi måste skriva en villkorlig som kontrollerar värdet av alternativet och gör sedan texten korrekt. I index.php, lägg till det här kvarteret:
Kryssrutan har kontrollerats.
Kryssrutan har inte kontrollerats.
Gå nu tillbaka till din inställningssida, välj kryssrutan och uppdatera sidan.
Som vi nämnde i början av det här avsnittet, se tillbaka på de visningsalternativ som vi introducerade tidigare i serien och se om det är mycket tydligare nu att vi har undersökt hur man introducerar och hanterar kryssrutan.
Radio Knappar är element som är användbara i grupper - du kommer aldrig att använda en enda radioknapp. Saken med radioelement är att de ger ett sätt att låta användare välja en utesluten uppsättning alternativ.
Av en eller annan anledning är radioknappar ofta en utmaning för WordPress-utvecklare. Förhoppningsvis gör vi det så enkelt som möjligt att ta med i våra projekt. Som med de övriga exemplen i denna serie, detaljera vad vi ska göra:
Verkar tillräckligt tydligt - låt oss gå vidare och lägga till fältelementet på vår options sida:
add_settings_field ("Radio Button Elements", "Radio Button Elements", "sandbox_radio_element_callback", "sandbox_theme_input_examples", "input_examples_section"); Och låt oss genomföra radioelementets återuppringning. Först ska vi ange koden, så granskar vi den:
funktion sandbox_radio_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = ''; $ html. = ''; $ html. = ''; echo $ html; // slut sandbox_radio_element_callback Det första du märker när du arbetar med radioknappar är att de gör det inte följ de typiska exemplen på hur du ställer in ID och namn attribut. Observera att ID attributet är unikt och har inget samband med resten av attributen på elementet. Observera också att varje elements tillhörande etikett använder ID för dess för attribut. Detta binder etiketten till radioknappen så att användare kan klicka på etiketten för att välja radion.
Lägg märke till att namn Attributen är desamma för varje radioelement men värden är olika. Det här gör det möjligt för radioknappar att exkludera varandra - varje radioelement måste ha samma namn men värdena måste vara unika.
Slutligen kan vi skapa en förutsättning för hemsidan genom att kontrollera elementets värde. I ditt tema functions.php, lägg till följande kodkod:
Det första alternativet valdes.
Det andra alternativet valdes.
Ladda ditt temas hemsida, välj alternativen och uppdatera. Du bör se de två meningarna som ändras baserat på värdet av alternativelementen.
Det sista elementet som vi ska granska är väljelementet. Detta element ger användarna en rullgardinsmeny med alternativ för att välja. Låt oss planera exakt vad vi behöver presentera för detta element:
Vid denna tidpunkt i serien bör detta vara ganska rutinmässigt. Låt oss komma igång - först presenterar vi inställningsfältet:
add_settings_field ('Select Element', 'Select Element', 'sandbox_select_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Därefter definierar vi återuppringningsfunktionen. Granska koden och sedan diskuterar vi det efter exemplet:
funktion sandbox_select_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; echo $ html; // slut sandbox_radio_element_callback Först uppdatera din optionssida för att se till att väljelementet visas. Om vi antar att det gör det, låt oss granska koden ovan.
När vi har definierat väljelementet har vi gett det ett ID attribut och a namn attribut mycket som vi gör med resten av de element som vi har demonstrerat. Därefter har varje alternativ ett unikt värde och text som motsvarar värdet. Även om du inte behöver göra det, har jag vanligtvis funnit det bra när du arbetar i mina projekt. Slutligen har vi utnyttjat vald hjälpen som WordPress erbjuder. Det här är ungefär som kontrollerade funktion som vi har använt i tidigare exempel förutom att det är inriktat på valda alternativ.
Det sista steget kommer att vara att uppdatera tematets främre del så att det kontrollerar värdet av väljelementet efter det att det har sparats. Lägg till följande block av kod till din index.php:
Visa aldrig detta. Något ironiskt att ens visa detta.
Visas ibland detta.
Visa alltid detta.
Ändra startsidan för ditt tema, ändra alternativen och uppdatera sedan sidan - du bör lägga märke till textuppdateringen baserat på det alternativ du har valt.
Med det når vi äntligen slutet på den här serien. Inställnings API är en kraftfull funktion av WordPress och ger oss möjligheten att implementera väl utformade, säkra sidor, men det kräver att vi använder det ordentligt. Tyvärr är detta förmodligen en av de mest ignorerade funktionerna på plattformen av många utvecklare.
I slutändan var mitt mål att gå utvecklare via API från början av att förstå varför det är viktigt, inställningar, menysidor, fliknavigering och hur man arbetar med alla elementtyper.
Slutligen kom ihåg att du kan hitta exempelkoden på GitHub. När du fortsätter att arbeta med inställnings API eller hitta en funktion som är oklart, vänligen bidra. Jag skulle älska för den här serien och exemplet koden för att fortsätta att ge en utbildningskälla för WordPress-samhället.
kontrolleradevald