Share
Om du just nu går med oss har vi täckt många ämnen i den här serien - vi har försökt att ge en fullständig översikt över WordPress Settings API och dess relaterade funktioner. Vi har diskuterat inställningar, alternativ, navigering och menyer. Vi har också arbetat med praktiska exempel som använder alla de ämnen vi diskuterat.
Vi är nästan färdiga. I de två sista artiklarna i denna serie ska vi titta på sanering, validering och de grundläggande inmatningselementen som vi kan använda i våra WordPress-plugins och teman.
Innan vi börjar: Den här artikeln förutsätter 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.
Innan vi börjar skriva någon kod måste vi förstå exakt vad det är att vi ska utföra - nämligen validering och sanering. Enkelt sagt, det här är de två aspekterna av att skriva och läsa data säkert från en WordPress-options sida och den underliggande databasen.
Vi kommer att dyka mycket djupare in i detta eftersom vi tittar på var och en av inmatningstyperna och arbetar igenom exemplen, men låt oss ge något sammanhang till vad vi faktiskt ska göra:
Kanske är den mest kortfattade sammanfattningen att validering bör göras innan data skrivs till databasen och sanering bör göras mellan läsning av data från databasen och sändning till webbläsaren.
Ofta är validering relaterad till att spara data och sanering relaterar till att hämta data, men det är också helt möjligt att sanitera data efter det att den har godkänts för att se till att endast rena data sparas i databasen. När vi arbetar med vår egen kod är det lättare att göra detta. Vi kan emellertid inte alltid bero på att andra utvecklare har sanitiserat sina uppgifter, så ansvaret att sanitera all data som kommer ut ur databasen faller på oss.
För att göra det lätt att fullt ut förstå validering och sanering, låt oss introducera en ny flik i vår options sida. Om du har introducerat en ny menyn på toppnivå, kommer det också att kräva att vi lägger till lägg till ett nytt undermenyobjekt och uppdatera fliken Alternativ. Låt oss ta hand om det nu.
Hitta först sandbox_example_theme_menu funktionen och lägg till följande undermenyobjekt:
Accentsconagua
add_submenu_page ("sandbox_theme_menu", "Input Examples", "Input Examples", "administrator", "sandbox_theme_input_examples", create_function (null, "sandbox_theme_display (" input_examples "); Därefter måste vi fortsätta och stubba ut en funktion som skapar gruppen av alternativ för vår nya inställningsflik. Förutsatt att du har följt med serien bör det vara lätt att följa:
funktion sandbox_theme_initialize_input_examples () if (false == get_option ('sandbox_theme_input_examples')) add_option ('sandbox_theme_input_examples'); // slutet om // avsluta sandbox_theme_initialize_input_examples add_action ('admin_init', 'sandbox_theme_initialize_input_examples'); Slutligen måste vi uppdatera sandbox_theme_display funktionen för att göra fliken och korrekt markera den när du öppnas antingen via flikarna eller undermenyobjektet. Låt oss först uppdatera det villkorliga som granskar frågesträngen och funktionsens argument. Specifikt behöver den hantera fallet för inmatningsexemplen. Uppdatera villkoret att se så här ut:
om (isset ($ _GET ['flik'])) $ active_tab = $ _GET ['flik']; annars om ($ active_tab == 'social_options') $ active_tab = 'social_options'; annars om ($ active_tab == 'input_examples') $ active_tab = 'input_examples'; else $ active_tab = 'display_options'; // slut om / annat
Därefter måste vi lägga till en ny flik i navigeringen. Uppdatera nav-tab-wrapper behållare för att inkludera detta nya ankar:
"> Inmatningsexempel
Slutligen måste vi lägga till ytterligare ett villkor för det formelement som är ansvarigt för att visa alternativen. Uppdatera villkoret att se så här ut:
om ($ active_tab == 'display_options') settings_fields ('sandbox_theme_display_options'); do_settings_sections ("sandbox_theme_display_options"); elseif ($ active_tab == 'social_options') settings_fields ('sandbox_theme_social_options'); do_settings_sections ("sandbox_theme_social_options"); annars settings_fields ('sandbox_theme_input_examples'); do_settings_sections ("sandbox_theme_input_examples"); // slut om / annat Om du antar att du har inkluderat all kod korrekt måste din administratörspanel nu se ut så här:
Vi är nu redo att börja introducera nya alternativelement och validerings- och saneringsfunktionen. Om ovanstående kod verkar oklart, var noga med att kolla in artiklar tidigare i serien som inställningar, menysidor och flikar har alla blivit täckta.
Det finns fem grundläggande elementtyper som vi kan använda för inmatning på våra WordPress-sidor. Dessa är ingångar, textområden, kryssrutor, radioknappar och välj rutor. I återstoden av den här artikeln ska vi titta på inmatningselement och textområden och vi granskar de sista tre i slutartikeln i serien.
Inmatningselement är idealiska för situationer där vi behöver fånga en liten mängd text från en användare. Detta kan vara något som deras namn eller telefonnummer eller något bara lite mer komplext som en URL, deras e-postadress eller en API-nyckel. Faktum är att vi faktiskt redan använder inmatningsfält på sidan "Sociala alternativ" när vi frågar efter användarens adresser för sociala nätverksprofiler.
Validering av textinmatning kan vara en komplex operation, särskilt om du vill genomdriva vissa begränsningar. Till exempel följer telefonnummer ett visst format och om du frågar en användare för hans / hennes telefonnummer kan du konfigurera en funktion som bestämmer om telefonnumret följer det strikta formatet. Självklart kan vi inte fånga alla dessa användningsfall i våra exempel här, eftersom det bara är för stort ett fält.
I stället ska vi se till att ingen skadlig kod skrivs in i databasen. Det betyder att när en användare matar in text i vår textruta kommer vi att ta bort alla HTML-taggar och eventuellt problematiska tecken. Men innan du gör det, låt oss introducera ett nytt alternativ, förstå markeringen och se vad som händer om vi inte genomdriva valfri typ av validering.
Gå vidare och introducera den nya sektionen och fältet med hjälp av sandbox_theme_initialize_input_examples fungera:
add_settings_section ('input_examples_section', 'Input Examples', 'sandbox_input_examples_callback', 'sandbox_theme_input_examples'); add_settings_field ('Input Element', 'Input Element', 'sandbox_input_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); register_setting ('sandbox_theme_input_examples', 'sandbox_theme_input_examples'); Definiera sedan återuppringningen för avsnittet:
funktion sandbox_input_examples_callback () echo 'Ger exempel på de fem grundläggande elementtyperna.
';
Slutligen, introducera det faktiska inmatningselementet som vi ska använda för att fånga in input:
funktion sandbox_input_element_callback () $ options = get_option ('sandbox_theme_input_examples'); // Återställ output echo ''; Din options sida ska nu se ut som följande bild:
Fram till den här tiden har vi skapat våra alternativelement och jag har nämnt att vi så småningom skulle diskutera var och en av attributen senare i serien. Det här är den artikel där vi börjar titta på betydelsen av id och namn attribut.
Observera att vi i början av funktionen läser alternativen för den här fliken med WordPress ' get_option fungera. Denna funktion kommer att returnera alternativen i en array. De id attributet för inmatningselementet identifierar detta elements värde i matrisen. De namn attributet är namnet på den matris som är märkt med ID-numret. Vettigt?
För att vara komplett, tänk på det så här:
sandbox_theme_input_examples id attribut. I det här exemplet är det "input_example"sandbox_theme_input_examples [input_example] Så, den id av elementet representerar nyckeln till värdet i alternativmatrisen, namn attributet representerar namnet på matrisen med nyckeln till värdet i matrisen.
Vid denna tidpunkt är det helt möjligt att börja skriva in värden i inmatningselementet och spara alternativet. Fortsätt och försök - sätt på ett värde, klicka på "Spara ändringar" och du bör se inmatningselementet visa det värde du just skapat. Men här är problemet: försök klistra in något som detta i inmatningsfältet:
Hoppa sedan vidare till index.php och lägg till följande kodkod:
Uppdatera hemsidan och du bör märka en iframe som dyker upp mitt på temat hemsida:
Verkar som en relativt liten fråga, men det är precis den typ av sak som vi behöver förhindra. Vi vill inte att användarna ska ha den typen av kontroll över databasen, sidorna och så vidare. Att spara en enkel iframe är naturligtvis ett mindre exempel - om användarna kan infoga JavaScript, kan de påverka vissa aspekter på hela din webbplats. Ännu allvarligare, om användarna kan införa skadlig SQL kan din databas kompromissa.
Så låt oss introducera någon validering. Som nämnts ovan vill vi ta bort eventuella markup- och problematiska tecken. För att göra detta måste vi först definiera en valideringsåterkallelse för vårt inmatningselement. För att göra det, låt oss återkomma register_setting ring och uppdatera det så att det ser ut så här:
register_setting ('sandbox_theme_input_examples', 'sandbox_theme_input_examples', 'sandbox_theme_validate_input_examples'); Låt oss nu definiera den funktionen:
funktion sandbox_theme_validate_input_examples ($ input) // slut sandbox_theme_validate_input_examples
Observera att den här funktionen accepterar en enda parameter som vi har namngett inmatning. Detta argument representerar den ovalificerade uppsättningen alternativ som WordPress skickar till den här funktionen från alternativsidan som vi just sparade. Observera också att när vi lägger till ytterligare alternativelement använder vi samma funktion.
Att skapa en valideringsfunktion följer vanligtvis tre steg:
Låt oss göra det nu. Ta en titt på följande genomförande med stor uppmärksamhet på kommentarerna:
funktion sandbox_theme_validate_input_examples ($ input) // Skapa vår array för att lagra de validerade alternativen $ output = array (); // Loop genom varje inkommande alternativ föreach ($ input som $ key => $ värde) // Kontrollera om det aktuella alternativet har ett värde. Om så är fallet, bearbeta det. om isset ($ input [$ key])) // Stripa alla HTML- och PHP-taggar och hantera korrekt citerade strängar $ output [$ key] = strip_tags (stripslashes ($ input [$ key])); // end if // end foreach // Återgå array bearbetning eventuella ytterligare funktioner som filtreras av denna åtgärdsruta apply_filters ('sandbox_theme_validate_input_examples', $ output, $ input); Huvuddelen av koden ska vara relativt rakt framåt, men de två viktigaste aspekterna kommer på uttalandet inuti det villkorliga och returförklaringen.
strip_tags funktion, som är inbyggd i PHP, för att ta bort alla HTML- och PHP-taggarstripslashes funktion, vilket är en annan inbyggd PHP-funktion, som korrekt hanterar citattecken runt en sträng.Slutligen kunde vi bara ha returnerat $ utgång array i slutet av funktionen, men returnerar resultatet av samtalet till apply_filters är en bra praxis. Även om det överstiger omfattningen av denna artikel är det värt att notera att detta uttalande i princip kallar alla andra funktioner som filtreras av den här funktionen innan de returnerar värdet.
Försök nu ge några provingångar till inmatningselementet. Prova att ge en enkel sträng, ett telefonnummer, en e-postadress, en URL, ett block med HTML, en rad JavaScript, och så vidare. Snyggt, va?
Slutligen, låt oss återkomma index.php och tillhandahålla en sista förändring för att visa hur vi kan utföra avgasrening. Kom ihåg att det är bra att sanitera alternativ även om du arbetar med värderingar som inte kommer från ditt eget arbete.
Leta upp linjen som läser:
Och uppdatera det så att det läser:
De sanitize_text_field funktionen är en annan inbyggd WordPress-funktion som specifikt är avsedd att sanitera användarinmatning från textfält eller från databasen.
Vi ska titta på mer i hela den här artikeln och den andra, men det finns en fullständig lista över de funktioner som finns tillgängliga i WordPress Codex.
När vi tittat på inmatningselement vi täckte mycket av marken. Lyckligtvis gäller många av samma principer för inte bara textområden, utan också resten av elementen. Som sådan borde vi inte behöva spendera så mycket tid med varje element. Detta kommer att frigöra oss för att titta på några av de idiosynkraser som följer med var och en av elementtyperna.
För nu, låt oss introducera ett textarea element. I vårt exempel kan det här elementet tillåta användare att skriva in några meningar om sig själva - tänk på det som en kort biografi. Först lägg till följande samtal till sandbox_theme_initialize_input_examples fungera:
add_settings_field ('Textarea Element', 'Textarea Element', 'sandbox_textarea_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Låt oss nu definiera den återuppringning som krävs för att göra textområdet:
funktion sandbox_textarea_element_callback () $ options = get_option ('sandbox_theme_input_examples'); // Återställ output echo ''; Observera att det här samtalet är mycket likt det ingående elementet som definierats ovan. Specifikt har vi levererat en id attribut för att ge detta värde en nyckel i alternativmatrisen och vi har angett det exakta namnet och nyckeln i elementets namn attribut. Vi har också gett textarean en viss storlek, även om detta är rent godtyckligt.
Kom ihåg att eftersom det här elementet hör till samma avsnitt som inmatningselementet, bearbetas det med samma valideringsfunktion. Som sådan får vi samma nivå för validering gratis. Prova det - försök att spara markup, skript och andra typer av kod med textområdet.
Till sist, låt oss uppdatera den sida som publiceras på sidan av vårt tema för att hämta det här värdet och sanera det på rätt sätt för visning. I index.php, lägg till följande kodkod:
Även om det är praktiskt taget samma sak som inmatningsfältet, måste vi se till att vi är kompletta i vår validering och sanering.
Även om vi bara tittat på två typer av element täckte vi mycket mark. Förutom att vi har uppdaterat vårt tema har vi också genomfört grundläggande validering och har börjat utforska reningsfunktionerna i WordPress.
I den slutliga artikeln tar vi en titt på de återstående tre elementtyperna och hur man hanterar dem med hjälp av validering och sanering. Under tiden experimenterar du med några av vad vi täckte här och kom ihåg att granska de relaterade källartiklarna kopplade längst ner i inlägget.
get_optionstrip_tagsstripslashes apply_filterssanitize_text_field