BLACK FRIDAY
😊Hello, -25% sur le Thème WordPress DIVI d'ElegantThemes.com 🔥

Créer une page d’options pour son thème WordPress !

WordPress est très modulable et permet ainsi aux extensions et thèmes WordPress de créer des pages d’options avancées ou très simple pour ainsi rendre un peu plus dynamique et optimisé le thème de votre blog WordPress. De nombreux tutoriels sont disponibles pour créer une page d’options, mais cela peut éventuellement être beaucoup plus complexe lorsque la lecture est dans une langue étrangère. Nous allons essayer de vous expliquer comment en créer une, en toute simplicité et sans grande connaissance.

Créer une page d’options pour son thème WordPress !

L’introduction

Tout d’abord et pour commencer, nous allons essayer de décrire l’utilité d’une page d’options. Cette page, accessible depuis le panel d’administration de votre blog vous permet, tout simplement, d’éditer n’importe quel contenu de votre blog, dynamiquement. Nous allons tout simplement mettre en place un formulaire de saisie de données, dans une page et bien évidemment créer un nouveau menu pour accéder à votre page d’options.

Soyons clairs, la première partie de ce tutoriel est très basique. Nous allons définir un texte à afficher. Parfait pour les débutants qui souhaitent connaître l’utilisation des informations pour développer par la suite quelque chose de plus complexe. Cependant, nous allons aller un peu plus loin à l’étape 5.

La préparation

Il faut en fait éditer le fichier « functions.php », présent ou à créer dans le dossier de votre thème WordPress. Ensuite, il faut créer un dossier « functions » (par exemple) qui contiendra le ou les fichier(s) d’administration de vos données. Voici le schéma que nous allons obtenir.

  • lights (nom de votre thème)
  • — functions.php
  • — functions (dossier)
  • —- index.php

Partie 1 – Développement des premières fonctions.

Tout d’abord, vous devez créer un dossier « functions » (ou autre) vous vous devez placer dans le dossier de votre thème WordPress. Dans ce dossier, vous devez créer un fichier. Nous allons le nommer « index.php ». Il contiendra les fonctions principales de votre page d’options et permettra par la suite d’ajouter d’autre page d’options.

Dans le fichier « index.php » du dossier « functions » que vous venez de créer, nous allons lui ordonner de créer un menu et nous allons renseigner les paramètres de bases de votre page d’options. Coller les lignes ci-dessous dans le fichier.

[code]
add_action(‘admin_menu’, ‘GkMenu’);

function GkMenu() {
add_menu_page(‘Paramètres du blog’, ‘Paramètres’, ‘administrator’, ‘Blog’, ‘GkLtextes’, ‘https://www.geekeries.fr/gk.png’, ‘3’);
add_action( ‘admin_init’, ‘register_mysettings’ );
}

function register_mysettings() {

//Paramètres de la page
register_setting( ‘gkltextes’, ‘txt1’ );
register_setting( ‘gkltextes’, ‘txt2’ );

}
[/code]

  • « Gk.png »
  • est en fait l’icône de votre menu. Il vous suffit de modifier l’adresse pour afficher vôtre icône. La taille doit être de 16×16.

  • « txt1 »
  • est essentiel et doit être unique ! Elle permet d’enregistrer, récupérer et d’afficher la valeur envoyé et enregistrée depuis la page d’options.

  • « Blog »
  • permet de définir l’adresse de la page d’option, vous pouvez la modifier.

  • « 3 »
  • définie le positionnement du nouveau menu. Dans notre cas, il sera placé en dessous du module « Tableau de bord », juste avant le séparateur.

  • « GkLtextes« 
  • est le nom de la fonction qui regroupe les informations de la page d’options.

Partie 2 – Création de la page d’options.

En espèrent que cela est compréhensible, passons à la suite. Toujours dans le même fichier ‘index.php » du dossier « functions » et à la suite du code précédemment cité, il faut maintenant définir notre fonction qui contiendra la page d’option. À la suite du code, coller l’ensemble des lignes suivantes.

[code]
function GkLtextes() {
if ( $_REQUEST[‘updated’] )
echo ‘

C’est sauvegardé :)

‘;
?>

Les options du blog

Accueil
< ?php settings_fields( 'gkltextes' ); ?>
< ?php settings_fields( 'gkltextes' ); ?>
formulaires. Dans l’attribut « value » (formulaire) et « name« . Cela permet d’enregistrer le texte que vous avez renseigné dans le formulaire.

  • « updated »
  • est en fait l’attribut qui permet d’afficher un message de confirmation si l’ensemble de vos données, lors de la saisie et l’envoi des données textes.

    Nous avons maintenant une page d’options dynamique, très simple d’utilisation. Vous pouvez facilement dupliquer les formulaires d’envoie de nouvelles données pour cela il faudra bien faire attention à ne pas oublier d’ajout votre nouvelle valeur dans le haut de votre fichier « index.php » du dossier « functions« . Il vous suffit d’ajouter cette ligne à la suite logique de la fonction « register_setting« .
    [code]
    register_setting( ‘gkltextes’, ‘nouveau_texte’ );
    [/code]

    Vous pouvez maintenant dupliquer le formulaire d’envoie convenablement et sans erreur. Voici ce que vous devez copier et coller. Vous pouvez bien évidemment respecter la structure du tableau pour créer une page d’options parfaite.
    Pour cela rendez-vous à la partie 4.

    [code]

    < ?php settings_fields( 'gkltextes' ); ?>
    Accueil Colonne Articles Commentaires
    < ?php settings_fields( 'gkltextes' ); ?>
    < ?php settings_fields( 'gkltextes' ); ?>
    < ?php settings_fields( 'gkltextes' ); ?>
    < ?php settings_fields( 'gkltextes' ); ?>

    C’est sauvegardé :)

    ‘;

    ?>

    Les autres options du blog

    < ?php settings_fields( 'gk_autres' ); ?>
     » title »< ?php the_title(); ?>« >
    < ?php the_title(); ?>

    < ?php endwhile; else: endif; //Reset Query wp_reset_query(); ?>
    [/code]

    Partie 9 – Les éléments graphiques (icône, tableau)

    Étant dans le panel d’administration de WordPress, vous pouvez bien évidemment utiliser son style graphique. Nous avions utilisés une icône personnalisée pour le menu, maintenant nous pouvons utiliser les icônes par défauts de WordPress, le tableau de base comme dans nos exemples ou encore les boutons stylisée.

    Tout d’abord, nous devons appeler la balise principale.
    Elle permet d’avoir une bonne structure pour notre page d’options.

    [code]

    Le contenu de notre page d’options.

    [/code]

    Les boutons :
    [code]
    //Bouton principal

    Texte

    //Autre bouton

    [/code]

    Insérer un tableau vierge :

    [code]

    Menu Un autre menu Encore un Le dernier
    Le texte 1 Le texte 2 Le texte 3 Le texte 4

    [/code]

    Partager sur facebook
    Facebook
    Partager sur whatsapp
    WhatsApp
    Partager sur linkedin
    LinkedIn
    Partager sur twitter
    Twitter

    Allez plus loins

    12 réponses

        1. Je ne suis pas assez fort pour repartir de zéro. J’ai bien tenté de supprimer les fonctions du thème qui me paraissaient superflues mais je me retrouvais avec de belles erreurs qui me paraissaient incompréhensibles (les fichiers du thème qui appellaient les fonctions etc…). Alors du coup, j’y vais petit à petit.

    1. Merci pour cet excellent article :)

      J’ai juste eu à modifier la partie formulaire, en effet dans le tuto, avec deux form et un submit plus bas, il ne se passé rien, j’ai mis un seul form au début de la page et un submit tout en bas, je ne sais pas si c’est très bien (au niveau des champs cachés des formulaires) mais cela fonctionne :)

      1. Salut !
        En fait, pour avoir plusieurs formulaire c’est comme ça que ça marche. Avoir plusieurs champs dans la balise « form » et un bout « envoyer ». Je vais vérifier si le code fonctionne bien.

    2. Bonsoir, merci pour ce tutoriel même si j’ai remarquer plusieurs erreurs.
      En localhost xa marche parfaitement mais une fois heberger j’ai ces deux erreurs:

      Warning: Cannot modify header information – headers already sent by (output started at /homepages/33/d198550640/htdocs/steve/wp-content/themes/bombax/functions/index.php:1) in /homepages/33/d198550640/htdocs/steve/wp-includes/functions.php on line 830

      Warning: Cannot modify header information – headers already sent by (output started at /homepages/33/d198550640/htdocs/steve/wp-content/themes/bombax/functions/index.php:1) in /homepages/33/d198550640/htdocs/steve/wp-includes/functions.php on line 831

      Je demande votre assistance

      Merci d’avance.

    3. j’oubliais le problème se situe a cette ligne

      require_once (TEMPLATEPATH . ‘/functions/index.php’);

      Il me fais comprendre que cette fonction a déjà été utilisée une fois. J’ai essayer include() et require() ou require ». même résultat

    4. J’ai une question. J’ai réussi à rendre cette page accessible à mon contributeur, mais comment les autoriser à enregistrer ? Quand ils veulent valider les changements, ça leur met une erreur du style « Ca n’est pas permis ;) » enfin c’est un petit message d’erreur humoristique mais je ne sais plus lequel exactement.

    Laisser un commentaire

    Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

    👋 Hello,

    Bienvenue sur BlogInfos.com !

    Vous allez bientôt être redirigé vers notre partenaire ElegantThemes.com

    Si vous ne souhaitez pas être redirigé vers notre partenaire et accéder à l’article, cliquez sur Fermer Maintenant.

    FERMER MAINTENANT

    BLACK FRIDAY

    DIVI - THÈME WORDPRESS

    -25%

    👋 Le site ElegantThemes.com propose une réduction de 25% et elle ne sera disponible que pendant quelques temps. Ne manquez pas ça !

    En cliquant sur le lien « Fermer Maintenant » vous acceptez d’aider ce site et d’être redirigé vers notre partenaire ElegantThemes.