Share
Nous avons atteint le dernier article de la série. Dans le dernier post, nous avons examiné l'introduction de la validation, de la désinfection et de quelques éléments de base dont nous pouvons tirer parti lors de la création de pages d'options..
Dans cet article, nous allons jeter un coup d'œil à la dernière série de trois options et à la manière de les associer à l'interface du thème..
Avant de commencer: Comme dans les derniers cas, 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 maîtrisez désormais bien les options de l'API de configuration et du 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..
Plus tôt dans cette série, nous avons ajouté des cases à cocher. Nous pourrions revenir en arrière et les revoir, mais restons cohérents avec ce que nous avons fait jusqu'à présent et présentons de nouvelles options. Une fois que nous avons terminé, vous pouvez revoir le code que nous avons ajouté au début de la série pour révision..
Tout d’abord, introduisons l’élément checkbox à la sandbox_theme_initialize_input_examples une fonction:
Accentsconagua
add_settings_field ('Elément de case à cocher', 'Elément de case à cocher', 'sandbox_checkbox_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Ensuite, nous devons définir le rappel que nous avons spécifié ci-dessus. Ajoutez la fonction suivante à votre projet:
function sandbox_checkbox_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = ''; echo $ html; // end sandbox_checkbox_element_callback Nous reviendrons sur cette fonction dans un instant, mais notons tout d'abord que j'ai ajouté un élément label à côté de la case à cocher. Les cases à cocher sont souvent associées à un élément qui permet également de cliquer pour déclencher la case à cocher. Cela permet aux utilisateurs de choisir plus facilement une option sans avoir à cliquer avec précision dans la case à cocher.
Pour associer une étiquette à une case à cocher, vous devez donner à l'étiquette pour attribuer la valeur de la ID attribut de la case à cocher à laquelle il est lié. Assez facile, à droite?
Maintenant, actualisez votre page d'options et vous devriez voir le nouvel élément visible sur votre page d'options. Mais, pour le moment, cela ne sauvegarde ni ne récupère aucune valeur. Tout d’abord, introduisons un valeur attribut sur la case à cocher. C'est quelque peu arbitraire, mais c'est une pratique courante de donner à un élément vérifié la valeur '1'. Faisons cela maintenant:
$ html = '';
Ensuite, réfléchissons exactement à ce qui doit se passer lorsque nous sauvegardons une valeur. Idéalement:
Relativement clair, non? Plutôt que de lire l'option, de définir une condition et de vérifier la présence ou l'absence d'une valeur, nous pouvons tirer parti de WordPress ' vérifié une fonction.
La fonction accepte trois arguments, seul le premier est requis:
check = "vérifié" au navigateurAlors mettons à jour notre code pour utiliser cette fonction:
$ html = '';
Actualisez la page et cochez l'option, enregistrez et répétez.
Si cela vous semble un peu déroutant, consultez l’article précédent dans lequel nous couvrons les significations de chaque attribut sur un élément option..
Pour finir, mettons à jour le front-end du thème pour cocher cette option et restituer une chaîne de texte en fonction de l'option cochée. Rappelez-vous que lorsque nous avons créé l'élément, nous lui avons attribué la valeur '1'. Cela signifie que lorsque la case à cocher est cochée et sérialisée, elle conserve une valeur de un. En termes simples, nous devons écrire une condition qui vérifie la valeur de l’option et restitue le texte de manière appropriée. Dans index.php, ajoutez ce bloc de code:
La case à cocher a été cochée.
La case à cocher n'a pas été cochée.
Maintenant, retournez à votre page de paramètres, cochez la case et actualisez votre page.
Comme mentionné au début de cette section, revenez sur les "Options d'affichage" que nous avons présentées plus tôt dans cette série et voyez s'il est beaucoup plus clair maintenant que nous avons examiné comment introduire et gérer les éléments de case à cocher..
Les boutons radio sont des éléments utiles dans les groupes. Après tout, vous n’allez jamais utiliser un seul bouton radio. La particularité des éléments radio est qu’ils permettent aux utilisateurs de choisir l’un des éléments qui s’excluent mutuellement..
Pour une raison ou une autre, les boutons radio sont souvent un défi pour les développeurs WordPress. Espérons que nous ferons en sorte que ce soit aussi facile que possible d'intégrer nos projets. Comme pour le reste des exemples de cette série, détaillez ce que nous allons faire:
Cela semble assez clair - allons de l'avant et ajoutons l'élément de champ à notre page d'options:
add_settings_field ('Eléments de bouton radio', 'Eléments de bouton radio', 'sandbox_radio_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Et implémentons le rappel de l'élément radio. Tout d'abord, nous allons spécifier le code, puis nous l'examinerons:
function sandbox_radio_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; $ html. = ''; $ html. = ''; $ html. = ''; echo $ html; // end sandbox_radio_element_callback La première chose à noter lorsque vous travaillez avec des boutons radio est qu’ils le font. ne pas suivez les exemples typiques de la définition de la ID et prénom les attributs. Notez que le ID attribut est unique et n'a aucun lien avec le reste des attributs de l'élément. Notez également que l’étiquette associée à chaque élément utilise la ID pour son pour attribut. Cela lie l’étiquette au bouton radio afin que les utilisateurs puissent cliquer sur l’étiquette pour sélectionner l’élément radio..
Ensuite, notez que le prénom les attributs sont les mêmes pour chaque élément radio, mais le valeurs sont différents. C’est ce qui rend les boutons radio mutuellement exclusifs - chaque élément radio doit avoir le même prénom mais les valeurs doivent être uniques.
Enfin, nous pouvons définir une condition sur la page d'accueil en vérifiant la valeur de l'élément. Dans votre thème functions.php, ajoutez le bloc de code suivant:
La première option a été sélectionnée.
La deuxième option a été sélectionnée.
Chargez la page d'accueil de votre thème, basculez les options et actualisez-vous. Vous devriez voir les deux phrases changer en fonction de la valeur des éléments d'option.
Le dernier élément que nous allons examiner est l'élément select. Cet élément offre aux utilisateurs un menu déroulant d'options parmi lesquelles choisir. Planifions exactement ce que nous devons introduire pour cet élément:
À ce stade de la série, cela devrait être assez courant. Commençons - nous allons d'abord introduire le champ des paramètres:
add_settings_field ('Select Element', 'Select Element', 'sandbox_select_element_callback', 'sandbox_theme_input_examples', 'input_examples_section'); Ensuite, nous définirons la fonction de rappel. Passez en revue le code et nous en discuterons après l'exemple:
function sandbox_select_element_callback () $ options = get_option ('sandbox_theme_input_examples'); $ html = ''; echo $ html; // end sandbox_radio_element_callback Tout d'abord, actualisez votre page d'options pour vous assurer que l'élément sélectionné apparaît. En supposant que ce soit le cas, passons en revue le code ci-dessus.
Lors de la définition de l'élément select, nous lui avons donné une ID attribut et un prénom attribuer autant que nous le faisons avec le reste des éléments que nous avons démontrés. Ensuite, chaque option a une valeur unique et un texte correspondant à la valeur. Bien que vous n'ayez pas à le faire, je trouve généralement cela utile lorsque je travaille dans mes projets. Enfin, nous avons profité de la choisi aide que propose WordPress. Cela ressemble beaucoup à la vérifié fonction que nous avons utilisée dans l'exemple précédent, sauf qu'elle est orientée vers les options de sélection.
La dernière étape consistera à mettre à jour le début du thème afin qu'il vérifie la valeur de l'élément sélectionné après son enregistrement. Ajoutez le bloc de code suivant à votre index.php:
Ne jamais afficher ceci. Un peu ironique de même montrer cela.
Affiche parfois cette.
Toujours afficher cette.
Revenez sur la page d'accueil de votre thème, changez les options, puis actualisez la page. Notez que le texte est mis à jour en fonction de l'option sélectionnée..
Avec cela, nous arrivons enfin à la fin de cette série. L’API Paramètres est une fonctionnalité puissante de WordPress qui nous permet d’implémenter des pages d’option sécurisées et bien conçues, mais elle nécessite que nous l’utilisions correctement. Malheureusement, il s’agit probablement de l’une des fonctionnalités les plus ignorées de la plate-forme par de nombreux développeurs..
En fin de compte, mon objectif était de guider les développeurs dans l'API dès le début pour comprendre pourquoi il était important de choisir des paramètres, des pages de menu à la navigation par onglets, en passant par la gestion de chaque type d'élément..
Enfin, rappelez-vous que vous pouvez trouver l'exemple de code sur GitHub. Si vous continuez à utiliser l'API des paramètres ou à rechercher une fonctionnalité incertain, contribuez-en. J'adorerais que cette série et l'exemple de code continuent à fournir une source d'éducation pour la communauté WordPress.
vérifiéchoisi