Comment créer une page d'administration personnalisée dans WordPress Dashboard

Article écrit par:
  • Articles en vedette
  • Mise à jour: juin 30, 2013

Lorsque WordPress a dévoilé ce qui était son thème habituel, Kubrick, il y a plusieurs années, il a également pris le voile sur une nouvelle fonctionnalité excitante. Cette fonctionnalité était le panneau d'administration de thème personnalisé, activé en définissant des fonctions et des préférences dans le fichier «functions.php» spécifique au thème. Au cours des années qui ont suivi, la page des options de thème a été malheureusement sous-utilisée par de nombreux concepteurs de thème, mais c'est en réalité un excellent moyen de donner aux utilisateurs le contrôle de l'apparence de leur site sans les obliger à installer un nouveau thème. Des éléments tels que l'image de fond du thème, le nombre de colonnes et même les couleurs de police peuvent tous être modifiés à l'aide de ce panneau d'administration personnalisé.

Le panneau d'administration lui-même est modifié en remplissant le fichier de fonctions du thème avec une série de tableaux PHP définissant des valeurs personnalisées. Ces valeurs sont ensuite incluses dans le modèle et définies dans un panneau d'administration permettant aux utilisateurs de définir leurs préférences d'apparence de manière visuelle. L'ensemble du processus est en fait relativement simple une fois que le concepteur de thème a découvert le fonctionnement d'un PHP et comment il peut exploiter ce code pour permettre une présentation personnalisée dans ses fichiers de modèle.

Le processus en plusieurs étapes commence par la définition de quelques variables couvrant l'ensemble du site et la définition des éléments à personnaliser dans cette nouvelle page d'administration.

Étape 1: création et modification de la page Functions-Specific-Themes.php

Si vous avez développé votre propre thème, il est peu probable que vous ayez créé un fichier functions.php à associer aux fichiers modèles existants. Il s'agit d'options relativement avancées et la plupart des concepteurs l'ignorent tout simplement. Dans ce cas, il est essentiel d'ouvrir le client FTP de votre choix et de le diriger vers l'URL du serveur suivant, où les fichiers du thème se trouvent:

/ public_html / wp-content / themes / VOTRE DOSSIER THÉMATIQUE /

Une fois dans ce dossier, revérifiez pour vous assurer qu’il n’y a pas de fichier «functions.php» présent, puis utilisez votre programme d’édition de texte pour créer un nouveau fichier nommé «functions.php». Ce fichier peut ensuite être enregistré et téléchargé sur le serveur via FTP. Il peut être édité directement sur le serveur, éliminant ainsi le besoin du programme d'édition de texte.

La première étape pour avoir un panneau d'options de thème valide défini dans le fichier «functions.php» consiste à définir deux variables en haut du document. Ces variables seront utilisées pour afficher le nom du thème à l'aide du tableau de bord, ainsi que pour identifier les éléments de formulaire et de sélection dans cette page d'administration. Observez le code ci-dessous, placez-le en haut de votre document «functions.php» et personnalisez-le en fonction des besoins de votre site.

$ longname = “Thème de développement du panneau d’administration”;
$ shortcode = "apdt";

Ces variables ont des objectifs différents. La variable $ longname sera utilisée pour imprimer le nom du thème dans le panneau des options d’administration. Pour cette raison, il est recommandé aux développeurs d'attribuer le nom exact du thème à cette variable afin d'éviter toute confusion entre les utilisateurs de leur thème. La variable $ shortcode doit être constituée de lettres minuscules sans aucune ponctuation, car elle sera utilisée pour identifier les éléments de formulaire dans le code lui-même. Dans l'exemple, un acronyme simple a été utilisé en fonction du nom complet du thème. Cela peut être personnalisé selon les goûts de l'utilisateur.

Étape 2: Définition des préférences personnalisables à l'aide de tableaux PHP

Premièrement, il est important de dire au thème comment s'appelle le panneau d'administration. Ceci sera imprimé au-dessus de tous les paramètres potentiels et aide à favoriser la clarté des objectifs pour les utilisateurs novices. Ceci est fait en ajoutant le tableau suivant à la balise $ settings dans le fichier “functions.php”:

$ settings = array (
array (“name” => $ longname. ”Paramètres d’apparence”,
“Type” => “titre”),

Ensuite, nous devons indiquer que le tableau plein d'options est «ouvert» ou peut être modifié par une entrée utilisateur. Ceci est fait en utilisant un autre tableau simple qui apparaît juste en dessous de la définition du titre de la page. Cela ressemble à ceci:

tableau (“type” => “ouvert”),

Nous sommes maintenant libres de commencer à définir les options d’apparence du thème, chacune d’elles étant créée comme un nouveau tableau. Dans cet exemple, nous allons définir le texte qui est placé dans le pied de page du thème. Par défaut, l'exemple de thème contient un lien vers le site Web du développeur du thème, ainsi que des informations sur la gestion des versions. Cela n’est pas souhaitable pour un grand nombre d’utilisateurs de WordPress qui préféreraient placer leurs propres informations dans le pied de page. Par conséquent, l’activation de ce contrôle personnalisé leur enregistre l’édition manuelle du fichier «footer.php». Voici comment c'est fait.

tableau (
“Name” => “Texte du pied de page du thème personnalisé”,
“Desc” => “Ceci est le texte affiché à la fin de chaque page contenue dans ce thème.”,
“Id” => $ shortcode. ”_ Custom_footer”,
"Type" => "texte",
“Std” => “Thème expérimental v1.0. Développé par John Doe. Plus de thèmes ici. ”),

Le tableau ci-dessus permet à l'utilisateur de déterminer le texte de pied de page standard du thème, mais les balises de tableau doivent être expliquées afin de mieux décrire le fonctionnement de ce processus et ce que chaque partie du tableau définit.

Nom: Ceci fait référence au nom de la zone de texte elle-même et n'est pas présenté aux utilisateurs lorsqu'ils accèdent à la page des options d'administration pour le thème.

desc: Ceci est une courte description qui accompagne le paramètre personnalisé et qui est affichée aux utilisateurs.

ID: Ceci utilise le code abrégé ainsi qu'une identification sur mesure du nom du formulaire afin de présenter et de styliser la zone de texte.

Type: Ceci définit si l'élément de formulaire est une ligne de texte, une zone de texte, un menu déroulant, un bouton radio ou une case à cocher.

MST: Ceci détermine la valeur par défaut de l'élément sélectionné. Pour une zone de texte, cela détermine le texte par défaut entré. Pour les cases à cocher, les boutons radio et les listes déroulantes, cela détermine quelle option est sélectionnée par défaut.

Étape 3: Indiquer à WordPress d'activer l'accès à la nouvelle page d'options

Bien que la page des options ait été définie à l'aide du fichier «functions.php» dans le dossier de départ d'un thème, elle n'a pas encore été reconnue par WordPress ni incluse parmi les nombreuses autres pages de paramètres du tableau de bord WordPress. En effet, la page d'option du thème doit être identifiée dans la page des fonctions et indiquer où aller (en tant qu'élément de la barre latérale indépendante ou dans le groupe "Paramètres"). Ceci est fait en utilisant une fonction relativement simple qui est ajoutée au fichier «functions.php» sous les tableaux de personnalisations potentielles:

fonction experimental_theme_save_values ​​() {
global $ longname, $ shortcode, $ settings;
if ($ _GET ['page'] == nom de base (__ FILE__)) {
if ('save' == $ _REQUEST ['action']) {
foreach ($ paramètres en tant que $ valeur) {
update_option ($ value ['id'], $ _REQUEST [$ value ['id']]); }
foreach ($ paramètres en tant que $ valeur) {
if (isset ($ _REQUEST [$ value ['id']])) {update_option ($ value ['id'], $ _REQUEST [$ value ['id']]); } else {delete_option ($ value ['id']); }}
en-tête («Emplacement: themes.php? page = functions.php & saved = true»);
die;
} else if ('reset' == $ _REQUEST ['action']) {
foreach ($ paramètres en tant que $ valeur) {
delete_option ($ value ['id']); }
en-tête («Emplacement: themes.php? page = functions.php & reset = true»);
die;
}
}
add_menu_page ($ longname. "Paramètres d'apparence", "". $ longname. "Paramètres d'apparence", "edit_themes", nom de base (__ FILE__), "experimental_theme_save_values");

Ce morceau de code fait deux choses. Tout d'abord, il permet de sauvegarder les paramètres du thème via le panneau d'options d'administration. Deuxièmement, il place un bouton indépendant dans la barre latérale du tableau de bord WordPress qui permet à un utilisateur de cliquer dessus et d'accéder directement au panneau d'options de thème. Il s’appelle «Paramètres d’apparence», tout comme la page elle-même. La cohérence est la clé pour éliminer la confusion et orienter les utilisateurs vers la page sans leur indiquer spécifiquement de se rendre dans le panneau des options pour personnaliser l'apparence du thème.

Étape 4: Ajout de messages d'erreur et fermeture du fichier PHP

La dernière étape pour remplir tous les éléments du panneau d'options de thème est de définir les messages d'erreur qu'un utilisateur peut rencontrer, puis de s'assurer que les éléments de formulaire peuvent être présentés dans le style WordPress par défaut dans la page d'options. L'ajout des messages d'erreur se fait en collant ce code dans le fichier de fonctions PHP:

fonction experimental_theme_save_values ​​() {
global $ longname, $ shortcode, $ settings;
if ($ _REQUEST ['saved']) echo '
'. $ nomme' les personnalisations d'apparence ont été enregistrées avec succès.
»;
if ($ _REQUEST ['reset']) echo '
'. $ nomme' les personnalisations d'apparence ont été réinitialisées avec succès.
»;

Sous ces deux lignes de code, la section PHP du fichier functions.php peut être fermée à l’aide de la balise de fin?>. En-dessous, un code XHTML sera placé pour styliser les éléments à l'aide de la feuille de style standard de WordPress Dashboard.

Etape 5: Donner un style à la page Options

Actuellement, les utilisateurs de WordPress Dashboard peuvent voir la nouvelle page d'erreur, mais ils ne peuvent pas en faire grand chose. En effet, les éléments de formulaire et la feuille de style n'ont pas encore été placés dans le fichier functions.php pour pouvoir être utilisés dans l'interface d'administration. Tout est sur le point de changer, car nous incluons les éléments de feuille de style et de formulaire par défaut destinés au nouveau panneau:

<div class = "wrap">
<h2> <? php echo $ longname; ? > Paramètres </ h2>

<méthode de formulaire = "post" action = "options.php">

<? php break; case 'text':? >

<tr>
<td width = "20%" rowspan = "2" valign = "middle"> <strong> <? php echo $ value ['nom']; ? > </ strong> </ td>
<td width = ”80%”> <style d'entrée = ”width: 100%;” name = ”<? php echo $ value ['id']; ? > ”Id =” <? Php echo $ value ['id']; ? > "Type =" <? Php echo $ valeur ['type']; ? > "Valeur =" <? Php if (get_settings ($ value ['id'])! = "") {Echo get_settings ($ value ['id']); } else {echo $ value ['std']; }? > ”/> </ Td>
</ tr>

<tr>
<td> <small> <? php echo $ value ['desc']; ? > </ small> </ td>
</ tr> <tr> <td colspan = "2"> </ td>
</ tr>

<? php break;}? >

<input type = ”submit” value = ”<? php _e ('Enregistrer les paramètres du thème')? > ”/>

Ce code est collé sous la balise de fermeture du fichier de fonctions PHP et peut être personnalisé pour chaque type de formulaire pouvant être inclus dans un panneau d'options de thème. La variable «case» peut être modifiée de «texte» à des éléments tels que zone de texte, case à cocher, sélection et titre. Ces formulaires doivent uniquement être inclus, définis et mis en forme s'ils sont utilisés par le thème. Sinon, leur inclusion n'est pas nécessaire et quitter le fichier de fonctions du thème favorisera l'efficacité et la pureté du code.

Étape 9: Activer l'option personnalisée à afficher sur le thème réel

Vous devez exécuter deux étapes pour vous assurer que les modifications sont visibles sur les modèles publics d'un thème. La première consiste à placer une variable dans le pied de page du thème, qui affichera le texte de copyright et de version défini par l'utilisateur que nous avons activé au cours des étapes précédentes de ce didacticiel. Pour ce faire, placez le code suivant dans la zone des droits de bas de page:

<? php echo $ apdt_custom_footer; ? >

Ce texte appelle le tableau personnalisé pour le texte de pied de page défini précédemment et, selon l'instruction «Echo», imprime ce texte dans le pied de page. Cette balise peut être contenue dans toutes les balises XHTML jugées utiles par l'utilisateur, mais elle ne s'affichera pas sans un morceau de code ajouté à l'en-tête du site.

Dans l'en-tête, le thème doit être chargé de rechercher les options définies par l'utilisateur qui sont définies dans le tableau de bord WordPress. Il doit également connaître les variables définies dans le fichier personnalisé "functions.php" afin qu'il puisse imprimer leur contenu. sur le site. Ceci est fait en plaçant la variable PHP suivante dans l'en-tête du site Web (généralement le fichier “header.php”):

<? php global $ settings;
foreach ($ paramètres en tant que $ valeur) {
if (get_settings ($ value ['id'])) === FALSE) {$$ value ['id'] = $ value ['std']; } else {$$ value ['id'] = get_settings ($ value ['id']); }
}
? >

C'est tout ce qu'on peut en dire. Désormais, chaque option définie dans le fichier functions.php personnalisé peut être reflétée dans l'apparence de la page simplement en incluant une variable PHP personnalisée, dans laquelle les personnalisations et le contenu désignés sont censés prendre effet.

Étape 10: Tester les nouveaux paramètres et la page Options

Aucun effort de développement de WordPress n’est totalement achevé tant qu’il n’a pas été minutieusement testé pour la détection de bugs, d’erreurs et d’erreurs accidentelles dans le code PHP placé dans le fichier «functions.php». Cela dit, il est temps de passer des tests! Connectez-vous au tableau de bord WordPress et, si le thème sur lequel vous avez travaillé n'est pas sélectionné, assurez-vous de naviguer vers la catégorie «Apparence» dans la barre latérale et d'activer le thème approprié.

À partir de là, vérifiez quelques points:

  1. Assurez-vous que le lien de configuration du thème apparaît comme une entité distincte dans la barre latérale située sous l'en-tête de catégorie "Paramètres".
  2. Assurez-vous que l'option de personnalisation du texte de pied de page désigné est accessible dans le panneau de configuration des options personnalisées. modifier le contenu par défaut du pied de page et enregistrer la préférence. Assurez-vous qu'il enregistre sans erreur.
  3. Visitez votre site Web public réel et assurez-vous que les modifications apportées dans le tableau de bord concernant le contenu du pied de page sont affichées.
  4. Si tout fonctionne correctement, respirez et profitez de votre première page du panneau de configuration des options de thème WordPress.

À propos de Jerry Low

Fondateur de WebHostingSecretRevealed.net (WHSR) - une critique d'hébergement approuvée et utilisée par les utilisateurs de 100,000. Plus de 15 ans d'expérience dans l'hébergement web, le marketing d'affiliation et le référencement. Contributeur à ProBlogger.net, Business.com, SocialMediaToday.com, et plus encore.