Share
Als u zich nu net bij ons aansluit, hebben we een heleboel onderwerpen in deze serie behandeld - we hebben geprobeerd een compleet overzicht te geven van de WordPress Settings API en de bijbehorende functies. We hebben de instellingen, opties, navigatie en menu's besproken. We hebben ook praktische voorbeelden doorgenomen van elk onderwerp dat we hebben besproken.
We zijn bijna klaar. In de laatste twee artikelen in deze serie gaan we kijken naar sanitization, validation, and the basic input elements die we kunnen gebruiken in onze WordPress plug-ins en thema's.
Voordat we beginnen: In dit artikel wordt ervan uitgegaan 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 de 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.
Voordat we beginnen met het schrijven van een code, moeten we precies weten wat het is dat we gaan bereiken - namelijk validatie en ontsmetting. Simpel gezegd, dit zijn de twee aspecten van veilig schrijven en lezen van gegevens van een WordPress-optiespagina en de onderliggende database.
We gaan hier dieper op in als we naar elk van de invoertypen kijken en de voorbeelden doornemen, maar laten we wat context geven aan wat we eigenlijk gaan doen:
Misschien is de meest beknopte samenvatting dat validatie moet worden uitgevoerd voordat de gegevens naar de database worden geschreven en dat er een sanering moet plaatsvinden tussen het lezen van gegevens uit de database en het verzenden naar de browser..
Vaak is validatie gerelateerd aan het opslaan van gegevens en ontsmetting is gerelateerd aan het ophalen van gegevens, maar het is ook volledig mogelijk om gegevens te zuiveren nadat het de validatie heeft gepasseerd om ervoor te zorgen dat alleen schone gegevens in de database worden opgeslagen. Wanneer we met onze eigen code werken, is het gemakkelijker om dit te doen; We kunnen echter niet altijd afhankelijk zijn van andere ontwikkelaars om hun gegevens te ontsmetten, dus de verantwoordelijkheid voor het ontsmetten van alle gegevens die uit de database komen, valt op ons.
Laten we een nieuw tabblad introduceren op onze optiepagina om het gemakkelijk te maken om validatie en ontsmetting volledig te begrijpen. Als u een nieuw hoofdmenu heeft geïntroduceerd, moet dit ook een nieuw submenu-item toevoegen en het tabblad voor het weergeven van opties updaten. Laten we daar nu voor zorgen.
Zoek eerst de sandbox_example_theme_menu functie en voeg het volgende submenu toe:
Accentsconagua
add_submenu_page ('sandbox_theme_menu', 'Input Examples', 'Input Examples', 'administrator', 'sandbox_theme_input_examples', create_function (null, 'sandbox_theme_display ("input_examples");')); Vervolgens moeten we doorgaan en een functie uitstippelen waarmee de groep met opties voor ons nieuwe tabblad Instellingen wordt gemaakt. Ervan uitgaande dat je de reeks gevolgd hebt, zou dit gemakkelijk te volgen moeten zijn:
function sandbox_theme_initialize_input_examples () if (false == get_option ('sandbox_theme_input_examples')) add_option ('sandbox_theme_input_examples'); // end if // end sandbox_theme_initialize_input_examples add_action ('admin_init', 'sandbox_theme_initialize_input_examples'); Ten slotte moeten we het sandbox_theme_display functie om het tabblad weer te geven en het correct te selecteren wanneer het wordt geopend via de tabbladen of het submenu-item. Laten we eerst de voorwaarden bijwerken die de queryreeks en de argumenten van de functie onderzoeken. In het bijzonder moet het de case voor de invoervoorbeelden behandelen. Werk de voorwaardelijke bij om er zo uit te zien:
if (isset ($ _GET ['tab'])) $ active_tab = $ _GET ['tab']; else if ($ active_tab == 'social_options') $ active_tab = 'social_options'; else if ($ active_tab == 'input_examples') $ active_tab = 'input_examples'; else $ active_tab = 'display_options'; // einde if / else
Vervolgens moeten we een nieuw tabblad aan de navigatie toevoegen. Werk het nav-tab-wrapper container om dit nieuwe anker op te nemen:
"> Invoervoorbeelden
Ten slotte moeten we nog een voorwaarde toevoegen aan het formulierelement dat verantwoordelijk is voor het weergeven van de opties. Werk de voorwaardelijke bij om er zo uit te zien:
if ($ 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'); else settings_fields ('sandbox_theme_input_examples'); do_settings_sections ('sandbox_theme_input_examples'); // einde if / else Ervan uitgaande dat u alle code correct hebt ingevoerd, ziet uw beheerdersvenster er nu als volgt uit:
We zijn nu klaar om te beginnen met het introduceren van nieuwe optie-elementen en de validatie- en ontsmettingsfunctionaliteit. Als de bovenstaande code onduidelijk lijkt, zorg dan dat u eerder in de serie artikelen bekijkt, omdat alle instellingen, menupagina's en tabbladen zijn gedekt.
Er zijn vijf elementaire elemententypes die we kunnen gebruiken voor invoer in onze pagina's met WordPress-opties. Dit zijn ingangen, tekstgebieden, selectievakjes, keuzerondjes en selectievakjes. In de rest van dit artikel gaan we de invoerelementen en tekstgebieden bekijken en bekijken we de laatste drie in het laatste artikel in de serie.
Invoerelementen zijn ideaal voor situaties waarin we een kleine hoeveelheid tekst van een gebruiker moeten vastleggen. Dit kan iets zijn zoals hun naam of telefoonnummer of iets net iets complexer, zoals een URL, hun e-mailadres of een API-sleutel. In feite gebruiken we eigenlijk al invoervelden op de pagina 'Sociale opties' wanneer we de profieladressen van het sociale netwerk van de gebruiker vragen.
Validatie van tekstinvoer kan een complexe bewerking zijn, vooral als u bepaalde beperkingen wilt afdwingen. Telefoonnummers volgen bijvoorbeeld een specifiek formaat en als u een gebruiker om zijn / haar telefoonnummer vraagt, kunt u een functie instellen die bepaalt of het telefoonnummer voldoet aan het strikte formaat. Het is duidelijk dat we niet al deze use-cases in onze voorbeelden kunnen vastleggen, omdat het gewoon een te breed veld is.
Wat we in plaats daarvan doen, is ervoor zorgen dat er geen schadelijke code in de database wordt geschreven. Dit betekent dat wanneer een gebruiker tekst invoert in ons tekstvak, we alle HTML-tags en mogelijk problematische tekens gaan verwijderen. Maar laten we voordat je dat doet eerst een nieuwe optie introduceren, de opmaak begrijpen en vervolgens kijken wat er gebeurt als we dat doen niet doen afdwingen van elk type validatie.
Ga je gang en introduceer de nieuwe sectie en het veld met behulp van de sandbox_theme_initialize_input_examples functie:
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'); Definieer vervolgens de callback voor de sectie:
function sandbox_input_examples_callback () echo 'Biedt voorbeelden van de vijf elementaire elementtypen.
';
Ten slotte, introduceer het daadwerkelijke input-element dat we gaan gebruiken om input vast te leggen:
function sandbox_input_element_callback () $ options = get_option ('sandbox_theme_input_examples'); // Render de output-echo ''; Uw optiespagina moet er nu als volgt uitzien:
Tot nu toe hebben we onze optie-elementen gemaakt en ik heb gezegd dat we uiteindelijk elk van de kenmerken later in de serie zullen bespreken. Dit is het artikel waarin we beginnen te kijken naar de betekenis van de ID kaart en naam attributen.
Merk op dat we aan het begin van de functie de opties voor dit specifieke tabblad lezen met behulp van WordPress ' get_option functie. Met deze functie worden de opties in een array geretourneerd. De ID kaart attribuut van het invoerelement identificeert de waarde van dit element in de array. De naam kenmerk is de naam van de matrix die is gecodeerd met de ID. Logisch?
Om volledig te zijn, denk er zo over na:
sandbox_theme_input_examples ID kaart attribuut. In dit voorbeeld is het "input_example"sandbox_theme_input_examples [input_example] Dus de ID kaart van het element vertegenwoordigt de sleutel van de waarde in de array options, de naam attribuut vertegenwoordigt de naam van de array met de sleutel van de waarde in de array.
Op dit punt is het volledig mogelijk om te beginnen met het invoeren van waarden in het invoerelement en het opslaan van de optie. Ga je gang en probeer het - zet een waarde, klik op "Wijzigingen opslaan" en je zou moeten zien dat het invoerelement de waarde toont die je zojuist hebt gemaakt. Maar hier is het probleem: probeer zoiets in het invoerveld te plakken:
Ga vervolgens naar index.php en voeg het volgende blok code toe:
Vernieuw de startpagina en je zou een iframe moeten zien verschijnen in het midden van de startpagina van je thema:
Het lijkt een relatief klein probleem, maar dit is precies het soort ding dat we moeten voorkomen. We willen niet dat gebruikers dat soort controle hebben over de database, site-pagina's, enzovoort. Het opslaan van een eenvoudige iframe is natuurlijk een klein voorbeeld. Als gebruikers JavaScript kunnen invoegen, kunnen ze bepaalde aspecten van uw hele site beïnvloeden. Nog ernstiger: als gebruikers kwaadwillende SQL kunnen invoegen, kan uw database worden aangetast.
Dus laten we wat validatie introduceren. Zoals hierboven vermeld, willen we markup en problematische karakters verwijderen. Om dit te doen, moeten we eerst een validatie-callback definiëren voor onze invoerelementsectie. Om dit te doen, laten we de register_setting bel en update het zodat het er zo uitziet:
register_setting ('sandbox_theme_input_examples', 'sandbox_theme_input_examples', 'sandbox_theme_validate_input_examples'); Laten we vervolgens die functie definiëren:
function sandbox_theme_validate_input_examples ($ input) // end sandbox_theme_validate_input_examples
Merk op dat deze functie een enkele parameter accepteert die we hebben genoemd invoer. Dit argument vertegenwoordigt de ongeldige set opties die WordPress naar deze functie verzendt via de optiespagina die we zojuist hebben opgeslagen. Merk ook op dat als we extra optie-elementen toevoegen, we dezelfde functie zullen gebruiken.
Het maken van een validatiefunctie verloopt meestal in drie stappen:
Laten we dat nu doen. Bekijk de volgende implementatie en let goed op de opmerkingen:
function sandbox_theme_validate_input_examples ($ input) // Maak onze array voor het opslaan van de gevalideerde opties $ output = array (); // Loop door elk van de inkomende opties voor elk ($ invoer als $ -sleutel => $ waarde) // Controleer of de huidige optie een waarde heeft. Als dit het geval is, verwerk het dan. if (isset ($ input [$ key])) // Strip alle HTML- en PHP-tags en handel op de juiste manier af met geordende strings $ output [$ key] = strip_tags (stripslashes ($ input [$ key])); // end if // end foreach // Zet de arrayverwerking om het even welke aanvullende functies op, gefilterd door deze actie return apply_filters ('sandbox_theme_validate_input_examples', $ output, $ input); Het grootste deel van de code moet relatief eenvoudig zijn, maar de twee belangrijkste aspecten komen bij de verklaring binnen de voorwaardelijke en de retourverklaring.
strip_tags functie, die eigen is aan PHP, voor het verwijderen van alle HTML- en PHP-tagsstripslashes function, wat ook een andere native PHP-functie is, waarmee aanhalingstekens rond een string goed worden afgehandeld.Eindelijk hadden we de $ uitgang array aan het einde van de functie, maar het resultaat van de oproep terugstuurt naar apply_filters is een best practice. Hoewel dit de reikwijdte van dit artikel overschrijdt, is het vermeldenswaard dat deze verklaring in feite alle andere functies aanroept die worden gefilterd door deze specifieke functie voordat de waarde wordt geretourneerd.
Probeer nu wat voorbeeldinvoer in het invoerelement. Probeer een eenvoudige reeks, een telefoonnummer, een e-mailadres, een URL, een HTML-blok, een regel JavaScript, enzovoort. Nette, he?
Tenslotte, laten we nog een keer kijken index.php en geef een laatste wijziging om aan te tonen hoe we de uitvoer kunnen saneren. Denk eraan, het is een goede gewoonte om opties te ontsmetten, zelfs als u werkt met waarden die niet uit uw eigen werk komen.
Zoek de regel die luidt:
En werk het bij zodat het luidt:
De sanitize_text_field function is een andere native-functie van WordPress die specifiek is bedoeld om gebruikersinvoer vanuit tekstvelden of vanuit de database te zuiveren.
We zullen meer in dit artikel en de volgende bekijken, maar er is een volledige lijst van deze functies beschikbaar in de WordPress Codex.
Wanneer we naar invoerelementen kijken, hebben we dit besproken veel van de grond. Gelukkig zijn veel van dezelfde principes van toepassing, niet alleen op tekstgebieden, maar ook op de rest van de elementen. Als zodanig hoeven we niet zo veel tijd met elk element door te brengen. Dit zal ons bevrijden om te kijken naar enkele van de eigenaardigheden die bij elk van de elementtypes horen.
Laten we voorlopig een textarea-element introduceren. In dit voorbeeld kunnen gebruikers met dit specifieke element een paar zinnen over zichzelf invoeren - denk aan het als een korte bio. Voeg eerst de volgende oproep toe aan de sandbox_theme_initialize_input_examples functie:
add_settings_field ('Textarea Element', 'Textarea Element', 'sandbox_textarea_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Laten we vervolgens de callback definiëren die nodig is voor het renderen van het textarea:
function sandbox_textarea_element_callback () $ options = get_option ('sandbox_theme_input_examples'); // Render de output-echo ''; Merk op dat deze oproep zeer vergelijkbaar is met het hierboven gedefinieerde invoerelement. Concreet hebben we een ID kaart attribuut voor het geven van deze waarde een sleutel in de array opties en we hebben de exacte naam opgegeven en de elementen ingevoerd naam attribuut. We hebben het tekstgebied ook een bepaalde grootte gegeven, hoewel dit puur arbitrair is.
Bedenk dat omdat dit element tot dezelfde sectie behoort als het invoerelement, het met dezelfde validatiefunctie wordt verwerkt. Als zodanig krijgen we hetzelfde niveau van gratis validatie. Probeer het - probeer markup, scripts en andere soorten code op te slaan met behulp van het textarea.
Laten we ten slotte de openbaar gerichte pagina van ons thema bijwerken om deze waarde op te halen en deze op de juiste manier te ontsmetten voor weergave. In index.php, voeg het volgende codeblok toe:
Hoewel het praktisch hetzelfde is als het invoerveld, moeten we ervoor zorgen dat we volledig zijn in onze validatie en sanering.
Hoewel we alleen naar twee soorten elementen keken, hebben we veel terrein afgedekt. Naast het up-to-date brengen van ons thema, hebben we ook basisvalidatie geïmplementeerd en zijn we begonnen met het verkennen van de ontsmettingsfuncties van WordPress..
In het laatste artikel zullen we de resterende drie elementtypen bekijken en hoe ze te beheren met behulp van validatie en ontsmetting. Experimenteer ondertussen met een deel van wat we hier bespreken en onthoud om de gerelateerde bronartikelen te bekijken die aan de onderkant van het bericht zijn gelinkt.
get_optionstrip_tagsstripslashes apply_filterssanitize_text_field