Share
Lorsqu'il s'agit de développer des thèmes et des plugins WordPress, les développeurs créent leurs menus, leurs options et leurs fonctionnalités de validation de différentes manières. Le problème, c’est qu’il n’ya qu’une façon de le faire correctement dans WordPress: l’API Paramètres..
Cette série a pour objectif d’être le guide ultime sur la manière de tirer parti de l’API Paramètres WordPress afin que vous disposiez d’un point de référence unique pour développer correctement vos thèmes et vos plugins..
Dans le premier article de cette série, nous avons examiné en détail l'API Settings et son importance. Ici, nous allons commencer à plonger dans l’API et à tirer parti de tout ce qu’elle offre..
Nous allons examiner les unités de base des options WordPress - sections, champs et paramètres - et comment les inclure dans le tableau de bord WordPress natif..
Avant de commencer à écrire du code, il est important de comprendre les trois composants principaux de l'API Paramètres WordPress..
À ce stade, ne vous inquiétez pas si vous ne connaissez toujours pas l’un des composants principaux. Nous allons examiner en détail chaque composant avec un exemple de code source le liant.
Afin de commencer à programmer avec l'API Settings, configurons un thème de base pouvant être utilisé tout au long de cet article et du reste de la série. Tout le code source est également disponible sur GitHub.
Dans votre installation locale de WordPress, accédez au répertoire "themes", créez un nouveau répertoire vide et appelez-le "WordPress-Settings-Sandbox". Ajoutez les trois fichiers suivants:
Ajoutez le code suivant à style.css:
/ * Nom du thème: Paramètres WordPress Sandbox URI du thème: VOTRE URI Description: Un thème simple utilisé pour présenter l'API Paramètres WordPress. Auteur: VOTRE NOM Auteur URI du auteur: VOTRE SITE WEB Version: 0.1 Licence: Copyright 2012 VOTRE NOM (VOTRE ADRESSE E-MAIL) Ce programme est un logiciel libre; vous pouvez le redistribuer et / ou le modifier selon les termes de la licence publique générale GNU, version 2, telle que publiée par la Free Software Foundation. Ce programme est distribué dans l'espoir qu'il sera utile, mais SANS AUCUNE GARANTIE; sans même la garantie implicite de QUALITÉ MARCHANDE ou d'ADÉQUATION À UN USAGE PARTICULIER. Voir la licence publique générale GNU pour plus de détails. Vous devriez avoir reçu une copie de la licence publique générale GNU avec ce programme; sinon, écrivez à la Free Software Foundation, Inc., 51 Franklin St, cinquième étage, Boston, MA 02110-1301 USA * /
Ensuite, ajoutez le code suivant à index.php:
Le guide complet de l'API Settings | Thème Sandbox En-tête Sandbox
Ceci est le contenu du thème.
© Tous les droits sont réservés.
Notez que le balisage ci-dessus est extrêmement simple et je le fais ne pas recommande d'utiliser ceci comme base pour le développement de thèmes. Il est adapté à cette série d'articles et fournit simplement le moyen par lequel nous lirons les valeurs de l'API Settings..
dans le Des thèmes écran d'administration, actualisez la page et vous devriez voir apparaître le nouveau thème Sandbox. Allez-y et activez-le.
À ce stade, nous sommes prêts à commencer.
Notez que dans le modèle d'index ci-dessus, nous avons défini trois régions de contenu spécifiques: en-tête, contenu et pied de page. À l'aide de l'API de configuration, créons une section "Général" contenant trois champs, chacun correspondant à l'une des régions de contenu spécifiques que nous venons de définir..
Avant d'écrire un code, je trouve toujours utile de lister exactement ce que je dois faire. Dans ce cas, nous devons procéder comme suit:
Pour éviter des blocs de code massifs et nous assurer que nous couvrons toutes nos bases, nous allons examiner chacun des éléments ci-dessus point par point..
Afin de trouver notre section d'options "Général", nous allons devoir utiliser la fonction add_settings_section de l'API Settings. Selon le codex WordPress, add_settings_section nécessite trois arguments:
Sur ce, poursuivons et définissons notre section. Regardez le code commenté suivant. Nous ajoutons ceci à notre fichier functions.php.
Un mot sur les extraits de code de cette série: ne copiez pas simplement ce code et ne le collez pas. Prenez le temps de lire chaque ligne, de voir comment les arguments correspondent à chaque fonction de l'API que nous couvrons et suivez les commentaires correspondants pour vous assurer de bien comprendre ce que nous faisons:
Sélectionnez les zones de contenu que vous souhaitez afficher.'; // end sandbox_general_options_callback?>
Avoir un sens? De manière générale, cela ne ressemble pas beaucoup mais naviguez vers votre Réglages menu et cliquez sur Général. Faites défiler vers le bas de la page et vous devriez voir votre nouvelle section d'options.
Vous pouvez ajouter cette section à l’une des pages situées sous le Réglages menu. Dans l'exemple ci-dessus, nous avons passé "general" en tant que dernier paramètre à la section add_settings_section, mais si vous souhaitez l'ajouter à une autre page, vous pouvez fournir un titre différent. Voici une référence pour chacun des Réglages pages et leur clé correspondante:
Maintenant que nous avons défini une section, nous pouvons introduire quelques options. Rappelez-vous que dans notre modèle d'index, nous avons défini trois éléments de conteneur spécifiques: en-tête, contenu et pied de page..
Bien que nous introduisions plus d'options au cours de cette série, nous allons aujourd'hui présenter un moyen de basculer la visibilité de chacun des éléments ci-dessus..
Semblable à ce que nous avons fait avec la section des paramètres, j'aime énumérer exactement ce que nous devons faire avant d'écrire du code. Puisque nous allons basculer chacune des zones de contenu…
À ce stade, nous sommes prêts à introduire le premier champ de paramètres. Pour ce faire, nous utiliserons la fonction add_settings_field. Cette fonction prend six paramètres (quatre obligatoires, deux facultatifs). Ils sont comme suit:
Cela dit, allons de l'avant et définissons notre premier champ de réglage. Plus précisément, nous allons introduire une option pour basculer la visibilité de l'en-tête.
Tout d'abord, nous appelons add_settings_field juste en dessous de l'appel de la fonction add_settings_section dans la fonction d'initialisation que nous avons écrite dans la première partie du didacticiel. Passez en revue chaque ligne et les commentaires de chaque option:
Accentsconagua
// Ensuite, nous introduirons les champs permettant de basculer la visibilité des éléments de contenu. add_settings_field ('show_header', // ID utilisé pour identifier le champ dans le thème 'En-tête', // Libellé situé à gauche de l'élément d'interface d'option 'sandbox_toggle_header_callback', // Nom de la fonction responsable du rendu de l'interface. 'general', // La page sur laquelle cette option sera affichée 'general_settings_section', // Le nom de la section à laquelle ce champ appartient array (// Le tableau d'arguments à transmettre au rappel. Dans ce cas, une description. 'Activez ce paramètre pour afficher l'en-tête.')); Ensuite, nous définissons le rappel mentionné dans la fonction ci-dessus. Ce rappel sert à afficher la case à cocher et la description sur la page d'administration:
/ ** * Cette fonction rend les éléments d'interface permettant de basculer la visibilité de l'élément d'en-tête. * * Il accepte un tableau d'arguments et s'attend à ce que le premier élément du tableau soit la description * à afficher à côté de la case à cocher. * / function sandbox_toggle_header_callback ($ args) // Notez que l'ID et l'attribut name de l'élément doivent correspondre à ceux de l'ID dans l'appel à add_settings_field $ html = ''; // Ici, nous allons prendre le premier argument du tableau et l'ajouter à une étiquette à côté de la case à cocher $ html. = ''; echo $ html; // end sandbox_toggle_header_callback
En ce qui concerne la case à cocher, faites attention aux commentaires, mais ne vous inquiétez pas trop de certains attributs que vous ne reconnaissez pas (comme un appel à la fonction selected ()). Plus loin dans cette série, nous allons examiner chaque élément d’entrée et les fonctions d’aide correspondantes..
A ce stade, votre fichier functions.php devrait ressembler à ceci:
Sélectionnez les zones de contenu que vous souhaitez afficher.'; // end sandbox_general_options_callback / * ----------------------------------------------- ----------------------------- * * Rappels de champs * ---------------- -------------------------------------------------- ------ * / / ** * Cette fonction rend les éléments d'interface permettant de basculer la visibilité de l'élément d'en-tête. * * Il accepte un tableau d'arguments et s'attend à ce que le premier élément du tableau soit la description * à afficher à côté de la case à cocher. * / function sandbox_toggle_header_callback ($ args) // Notez que l'ID et l'attribut name de l'élément correspondent à ceux de l'ID dans l'appel à add_settings_field $ html = ''; // Ici, nous allons prendre le premier argument du tableau et l'ajouter à une étiquette à côté de la case à cocher $ html. = ''; echo $ html; // end sandbox_toggle_header_callback?>
À ce stade, actualisez la réglages généraux page. Vous devriez voir votre case à cocher avec l'étiquette "En-tête" et une description à côté de la case à cocher.
Malheureusement, la valeur n'est pas encore sauvegardée dans la base de données..
Pour que nos champs soient réellement sauvegardés dans la base de données, nous devons les enregistrer avec WordPress. Faire cela est relativement facile - il suffit de tirer parti de la fonction register_setting.
Cette fonction accepte trois arguments (deux obligatoires, un facultatif):
À ce stade, enregistrons le paramètre que nous venons de créer. Regardez le code ci-dessous. Ajoutez cette ligne de code directement sous l'appel de add_settings_field dans la fonction d'initialisation définie précédemment dans l'article. C'est sans doute le plus facile à suivre parmi tous les extraits de cet article:
// Enfin, nous enregistrons les champs avec WordPress register_setting ('general', 'show_header'); Essayez-le - cochez la case, cliquez sur "Enregistrer les modifications" et notez que lorsque la page s'actualise, l'option a changé. Décochez la case, enregistrez et regardez-la enregistrez.
Assez facile, à droite?
Nous devons encore introduire les options permettant de basculer la visibilité de la zone de contenu et du pied de page. C'est presque exactement la même chose que la façon dont nous avons configuré l'option pour basculer l'en-tête.
Tout d’abord, définissons le champ d’affichage de la zone de contenu. Cela passera sous le premier appel à add_settings_field:
add_settings_field ('show_content', 'Content', 'sandbox_toggle_content_callback', 'general', 'general_settings_section', array ('Activez ce paramètre pour afficher le contenu.')); Et configurons la fonction de rappel:
function sandbox_toggle_content_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_content_callback
Ensuite, définissons le champ pour afficher la zone de pied de page:
add_settings_field ('show_footer', 'Footer', 'sandbox_toggle_footer_callback', 'general', 'general_settings_section', array ('Activez ce paramètre pour afficher le pied de page.')); Et configurez le rappel pour ce champ également:
function sandbox_toggle_footer_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_footer_callback
Enfin, enregistrons ces deux nouveaux champs avec WordPress. Ces deux appels de fonction sont situés au bas de la fonction d’initialisation définie précédemment dans l’article..
register_setting ('général', 'show_content'); register_setting ('général', 'show_footer'); La version finale de functions.php devrait ressembler à ceci:
Sélectionnez les zones de contenu que vous souhaitez afficher.'; // end sandbox_general_options_callback / * ----------------------------------------------- ----------------------------- * * Rappels de champs * ---------------- -------------------------------------------------- ------ * / / ** * Cette fonction rend les éléments d'interface permettant de basculer la visibilité de l'élément d'en-tête. * * Il accepte un tableau d'arguments et s'attend à ce que le premier élément du tableau soit la description * à afficher à côté de la case à cocher. * / function sandbox_toggle_header_callback ($ args) // Notez que l'ID et l'attribut name de l'élément correspondent à ceux de l'ID dans l'appel à add_settings_field $ html = ''; // Ici, nous allons prendre le premier argument du tableau et l'ajouter à une étiquette à côté de la case à cocher $ html. = ''; echo $ html; // fin de la fonction sandbox_toggle_header_callback fonction sandbox_toggle_content_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // fin de la fonction sandbox_toggle_content_callback fonction sandbox_toggle_footer_callback ($ args) $ html = ''; $ html. = ''; echo $ html; // end sandbox_toggle_footer_callback?>
Maintenant rafraîchissez le réglages généraux page et notez que vous avez les trois cases à cocher entièrement fonctionnelles.
A quoi servent les options si nous ne pouvons pas en tirer parti à travers notre thème ou notre plugin? Nous devons être capables de lire les valeurs afin de gérer correctement nos nouvelles options.
Pour ce faire, nous devons utiliser la fonction get_option. Cette fonction accepte deux arguments (un obligatoire et un facultatif):
Tout d'abord, essayons de basculer la visibilité de l'en-tête. Dans le modèle d'index que nous avons créé précédemment dans cet article, localisez l'élément avec l'ID d'en-tête. Ça devrait ressembler à ça:
En-tête Sandbox
Ensuite, appelons get_option dans le contexte d’une condition. Si la condition est évaluée à true (c’est-à-dire que l’option a été cochée sur le réglages généraux page), l’élément sera affiché; sinon, l'élément ne s'affichera pas.
En-tête Sandbox
Après cela, espérons que le réglages généraux page, cochez l'option permettant de masquer l'élément d'en-tête et actualisez votre page d'accueil. L'élément d'en-tête ne devrait plus apparaître.
À ce stade, il est simple de répéter le processus pour les éléments de contenu et de pied de page également. Nous devons envelopper les éléments de contenu et de pied de page avec des conditions qui évaluent le résultat des appels à get_option..
Regarde:
Ceci est le contenu du thème.
© Tous les droits sont réservés.
Revisiter le réglages généraux page, cochez chaque case et actualisez la page du thème. Vos éléments doivent chacun basculer indépendamment les uns des autres.
C'est tout pour le moment! Nous avons examiné toutes les fonctions requises pour introduire de nouveaux sections, champs et paramètres dans WordPress. Bien sûr, il y a beaucoup plus à couvrir.
Dans le prochain article, nous verrons comment ajouter des éléments de menu personnalisés au menu WordPress et comment introduire nos propres pages dans le tableau de bord WordPress..
Nous avons couvert beaucoup de matériel dans cet article. Voici une référence pour tout ce que nous avons utilisé tout au long de cet article.
