Share
Si vous venez de nous rejoindre, nous avons abordé de nombreux sujets de cette série. Nous avons tenté de donner un aperçu complet de l'API Paramètres WordPress ainsi que de ses fonctions associées. Nous avons abordé les paramètres, les options, la navigation et les menus. Nous avons également travaillé à travers des exemples pratiques utilisant chacun des sujets abordés..
Nous avons presque fini. Dans les deux derniers articles de cette série, nous examinerons l’assainissement, la validation et les éléments de base que nous pouvons utiliser dans nos plugins et thèmes WordPress..
Avant de commencer: Cet article suppose que vous avez suivi le reste de la série, qu'une copie de travail de l'exemple de code est installée et que vous êtes maintenant relativement familiarisé avec les options API de thème et thème. Si vous avez des doutes sur ce qui précède, je vous recommande vivement de lire le reste des articles avant de plonger dans ce billet..
Avant de commencer à écrire un code, nous devons comprendre exactement ce que nous allons accomplir - à savoir, la validation et la désinfection. Autrement dit, il s'agit des deux aspects de l'écriture et de la lecture sécurisées de données à partir d'une page d'options WordPress et de la base de données sous-jacente..
Nous allons approfondir la question en examinant chacun des types d'entrées et en examinant des exemples, mais donnons un contexte à ce que nous allons réellement faire:
Le résumé le plus concis est peut-être que la validation doit être effectuée avant l'écriture des données dans la base de données et la désinfection doit être effectuée entre la lecture des données de la base de données et leur envoi au navigateur..
Souvent, la validation est liée à la sauvegarde des données et la désinfection à la récupération des données, mais il est également tout à fait possible de purifier les données une fois la validation validée, afin de s’assurer que seules les données non corrigées sont enregistrées dans la base de données. Lorsque nous travaillons avec notre propre code, c'est plus facile à faire. Cependant, nous ne pouvons pas toujours compter sur d'autres développeurs pour avoir désinfecté leurs données. La responsabilité de la désinfection de toutes les données issues de la base de données nous incombe..
Afin de faciliter la compréhension de la validation et de la désinfection, introduisons un nouvel onglet dans notre page des options. Si vous avez introduit un nouveau menu de niveau supérieur, vous devrez également ajouter un nouvel élément de sous-menu et mettre à jour l'onglet d'affichage des options. Prenons-en soin maintenant.
D'abord, localisez le sandbox_example_theme_menu fonction et ajouter l'élément de sous-menu suivant:
Accentsconagua
add_submenu_page ('sandbox_theme_menu', 'Exemples d'entrée', 'Exemples d'entrée', 'administrator', 'sandbox_theme_input_examples', create_function (null, 'sandbox_theme_display ("input_examples");); Ensuite, nous devons aller de l'avant et créer une fonction qui créera le groupe d'options pour notre nouvel onglet de paramètres. En supposant que vous suiviez la série, cela devrait être facile à suivre:
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'); Enfin, nous devons mettre à jour le sandbox_theme_display fonction pour rendre l'onglet et le sélectionner correctement lors de l'accès via les onglets ou l'élément de sous-menu. Commençons par mettre à jour la condition qui examine la chaîne de requête et les arguments de la fonction. Plus précisément, il doit gérer le cas pour les exemples d'entrée. Mettez à jour le conditionnel pour qu'il ressemble à ceci:
if (isset ($ _GET ['tab']))) $ actif_tab = $ _GET ['tab' ']; else if ($ active_tab == 'options_sociales') $ actif_tab = 'options_sociales'; else if ($ active_tab == 'input_examples') $ active_tab = 'input_examples'; else $ active_tab = 'display_options'; // fin si / sinon
Ensuite, nous devons ajouter un nouvel onglet à la navigation. Mettre à jour le nav-tab-wrapper conteneur pour inclure cette nouvelle ancre:
"> Exemples d'entrée
Enfin, nous devons ajouter une autre condition à l’élément de formulaire responsable de l’affichage des options. Mettez à jour le conditionnel pour qu'il ressemble à ceci:
if ($ active_tab == 'display_options') settings_fields ('sandbox_theme_display_options'); do_settings_sections ('sandbox_theme_display_options'); elseif ($ active_tab == 'options_sociales') 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'); // fin si / sinon En supposant que vous ayez inclus tout le code correctement, votre panneau d'administration devrait maintenant ressembler à ceci:
Nous sommes maintenant prêts à commencer à introduire de nouveaux éléments d'option et les fonctionnalités de validation et de désinfection. Si le code ci-dessus ne vous semble pas clair, veillez à consulter les articles précédents de la série, car les paramètres, les pages de menu et les onglets ont tous été couverts.
Il existe cinq types d'éléments de base que nous pouvons utiliser pour la saisie dans nos pages d'options WordPress. Il s'agit d'entrées, de zones de texte, de cases à cocher, de boutons radio et de cases de sélection. Dans la suite de cet article, nous allons examiner les éléments d'entrée et les zones de texte et passer en revue les trois derniers de l'article final de la série..
Les éléments d'entrée sont idéaux pour les situations dans lesquelles nous devons capturer une petite quantité de texte d'un utilisateur. Cela peut être quelque chose comme leur nom ou leur numéro de téléphone ou quelque chose de légèrement plus complexe comme une URL, leur adresse électronique ou une clé API. En fait, nous utilisons déjà des champs de saisie sur la page "Options sociales" lorsque nous demandons les adresses de profil de réseau social de l'utilisateur..
La validation de la saisie de texte peut être une opération complexe, en particulier si vous souhaitez appliquer certaines contraintes. Par exemple, les numéros de téléphone suivent un format spécifique et si vous demandez à un utilisateur son numéro de téléphone, vous pouvez configurer une fonction qui détermine si le numéro de téléphone respecte le format strict. De toute évidence, nous ne pouvons pas capturer tous ces cas d'utilisation dans nos exemples ici, car il s'agit simplement d'un champ trop vaste..
Au lieu de cela, nous allons nous assurer qu'aucun code malveillant ne soit écrit dans la base de données. Cela signifie que lorsqu'un utilisateur entre du texte dans notre zone de texte, nous allons supprimer toutes les balises HTML et les caractères potentiellement problématiques. Mais avant cela, introduisons une nouvelle option, comprenons le balisage, puis voyons ce qui se passe si nous ne pas appliquer tout type de validation.
Allez-y et présentez la nouvelle section et le nouveau champ en utilisant le sandbox_theme_initialize_input_examples une fonction:
add_settings_section ('input_examples_section', 'Exemples d'entrée', 'sandbox_input_examples_callback', 'sandbox_theme_input_examples'); add_settings_field ('Elément d'entrée', 'Elément d'entrée', 'sandbox_input_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); register_setting ('sandbox_theme_input_examples', 'sandbox_theme_input_examples'); Ensuite, définissez le rappel pour la section:
function sandbox_input_examples_callback () echo 'Fournit des exemples des cinq types d'éléments de base.
';
Enfin, introduisez l’élément d’entrée que nous allons utiliser pour capturer l’entrée:
function sandbox_input_element_callback () $ options = get_option ('sandbox_theme_input_examples'); // Rendre l'écho de sortie ''; Votre page d'options devrait maintenant ressembler à l'image suivante:
Jusqu'à présent, nous avons créé nos éléments d'option et j'ai mentionné que nous discuterions éventuellement de chacun des attributs plus tard dans la série. C’est l’article dans lequel nous commençons à regarder l’importance de la identifiant et prénom les attributs.
Notez qu'au début de la fonction, nous lisons les options pour cet onglet particulier en utilisant WordPress ' get_option une fonction. Cette fonction retournera les options dans un tableau. le identifiant L'attribut de l'élément input identifie la valeur de cet élément dans le tableau. le prénom attribut est le nom du tableau associé à l'ID. Avoir du sens?
Pour être complet, pensez de cette façon:
sandbox_theme_input_examples identifiant attribut. Dans cet exemple, c'est "exemple_entrée"sandbox_theme_input_examples [exemple_entrée] Alors le identifiant de l'élément représente la clé de la valeur dans le tableau d'options, le prénom attribut représente le nom du tableau avec la clé de la valeur dans le tableau.
À ce stade, il est tout à fait possible de commencer à saisir des valeurs dans l’élément d’entrée et de sauvegarder l’option. Allez-y et essayez-le - définissez une valeur, cliquez sur "Enregistrer les modifications" et vous devriez voir l'élément d'entrée afficher la valeur que vous venez de créer. Mais voici le problème: essayez de coller quelque chose comme ceci dans le champ de saisie:
Ensuite, sautez vers index.php et ajoutez le bloc de code suivant:
Actualisez la page d'accueil et vous remarquerez qu'un iframe apparaît au milieu de la page d'accueil de votre thème:
Cela semble être un problème relativement mineur, mais c’est exactement le type de choses que nous devons prévenir. Nous ne voulons pas que les utilisateurs aient ce genre de contrôle sur la base de données, les pages du site, etc. Bien sûr, la sauvegarde d’un simple iframe n’est qu’un exemple mineur: si les utilisateurs peuvent insérer du JavaScript, ils peuvent influencer certains aspects de l’ensemble de votre site. Plus grave encore, si les utilisateurs sont en mesure d'insérer du code SQL malveillant, votre base de données pourrait être compromise..
Introduisons donc une validation. Comme mentionné ci-dessus, nous souhaitons supprimer tous les caractères de balisage et problématiques. Pour ce faire, nous devons d’abord définir un rappel de validation pour notre section d’éléments d’entrée. Pour ce faire, revenons à la register_setting appelez-le et mettez-le à jour pour qu'il ressemble à ceci:
register_setting ('sandbox_theme_input_examples', 'sandbox_theme_input_examples', 'sandbox_theme_validate_input_examples'); Ensuite, définissons cette fonction:
function sandbox_theme_validate_input_examples ($ input) // fin sandbox_theme_validate_input_examples
Notez que cette fonction accepte un seul paramètre que nous avons nommé contribution. Cet argument représente l'ensemble non validé d'options que WordPress envoie à cette fonction à partir de la page d'options que nous venons de sauvegarder. Notez également que lorsque nous ajoutons des éléments d’option supplémentaires, nous utiliserons cette même fonction..
La création d'une fonction de validation suit généralement trois étapes:
Faisons cela maintenant. Examinez l'implémentation suivante en prêtant une attention particulière aux commentaires:
function sandbox_theme_validate_input_examples ($ input) // Créer notre tableau pour stocker les options validées $ output = array (); // Parcourt chacune des options entrantes foreach ($ input as $ key => $ value) // Vérifie si l'option en cours a une valeur. Si oui, traitez-le. if (isset ($ input [$ key])) // Supprime toutes les balises HTML et PHP et gère correctement les chaînes entre guillemets $ output [$ key] = strip_tags (stripslashes ($ input [$ key])); // end if // end foreach // Renvoie au tableau le traitement des fonctions supplémentaires filtrées par cette action return apply_filters ('sandbox_theme_validate_input_examples', $ output, $ input); La plupart du code devrait être relativement simple, mais les deux aspects les plus importants concernent la déclaration à l'intérieur du conditionnel et la déclaration de retour.
strip_tags fonction, qui est native à PHP, pour supprimer toutes les balises HTML et PHPstriplashes function, qui est une autre fonction native PHP, qui gérera correctement les guillemets autour d'une chaîne.Enfin, nous aurions pu simplement renvoyer le $ sortie tableau à la fin de la fonction, mais en renvoyant le résultat de l'appel à apply_filters est une meilleure pratique. Bien qu'elle dépasse le cadre de cet article, il convient de noter que cette instruction appelle toutes les autres fonctions filtrées par cette fonction avant de renvoyer la valeur..
Maintenant, essayez de donner un exemple d’entrée dans l’élément d’entrée. Essayez de fournir une simple chaîne, un numéro de téléphone, une adresse e-mail, une URL, un bloc de HTML, une ligne de JavaScript, etc. Neat, hein?
Enfin, revisitons index.php et fournissez un dernier changement pour montrer comment nous pouvons procéder à la désinfection des sorties. N'oubliez pas que c'est une bonne pratique d'assainir les options même si vous travaillez avec des valeurs qui ne proviennent pas de votre propre travail..
Localisez la ligne qui se lit comme suit:
Et mettez-le à jour pour qu'il se lise:
le sanitize_text_field function est une autre fonction native de WordPress spécialement conçue pour effacer les entrées utilisateur à partir de champs de texte ou de la base de données..
Nous en examinerons davantage tout au long de cet article et du prochain, mais une liste complète de ces fonctions est disponible dans le Codex WordPress..
En regardant les éléments d'entrée, nous avons couvert beaucoup de terrain. Heureusement, bon nombre des mêmes principes s'appliquent non seulement à textareas, mais également au reste des éléments. En tant que tel, nous ne devrions pas avoir à passer autant de temps avec chaque élément. Cela nous permettra de regarder certaines des idiosyncrasies qui accompagnent chacun des types d’éléments..
Pour l'instant, introduisons un élément textarea. Dans notre exemple, cet élément permettra aux utilisateurs de saisir quelques phrases sur eux-mêmes - considérez-le comme une courte biographie. Tout d’abord, ajoutez l’appel suivant au sandbox_theme_initialize_input_examples une fonction:
add_settings_field ('Elément Textarea', 'Elément Textarea', 'sandbox_textarea_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Ensuite, définissons le rappel nécessaire pour le rendu de la zone de texte:
function sandbox_textarea_element_callback () $ options = get_option ('sandbox_theme_input_examples'); // Rendre l'écho de sortie ''; Notez que cet appel est très similaire à l'élément input défini ci-dessus. Plus précisément, nous avons fourni un identifiant attribut pour donner à cette valeur une clé dans le tableau d'options et nous avons spécifié le nom exact et la clé dans l'élément prénom attribut. Nous avons également donné au textarea une taille particulière, bien que ce soit purement arbitraire.
Rappelez-vous que puisque cet élément appartient à la même section que l'élément d'entrée, il est traité à l'aide de la même fonction de validation. En tant que tel, nous obtenons le même niveau de validation gratuitement. Essayez-le - essayez de sauvegarder le balisage, les scripts et d'autres types de code à l'aide de la zone de texte.
Enfin, mettons à jour la page de notre thème destinée au public afin de récupérer cette valeur et de la purifier correctement pour l'afficher. Dans index.php, ajoutez le bloc de code suivant:
Bien que ce soit pratiquement la même chose que le champ de saisie, nous devons nous assurer que notre validation et notre désinfection sont complètes..
Même si nous n’avons examiné que deux types d’éléments, nous avons couvert beaucoup de terrain. En plus d'actualiser notre thème, nous avons également implémenté la validation de base et commencé à explorer les fonctionnalités de désinfection de WordPress..
Dans le dernier article, nous examinerons les trois types d'élément restants et la manière de les gérer à l'aide de la validation et de la désinfection. Entre-temps, testez une partie de ce que nous avons couvert ici et n'oubliez pas de consulter les articles de sources connexes liés au bas de l'article..
get_optionstrip_tagsstriplashes apply_filterssanitize_text_field