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]

    Publié à l'origine le : 18 septembre 2010 @ 22 h 15 min

    Pour compléter votre lecture.

    👋 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

    DIVI - THÈME WORDPRESS

    -10%

    👋 Le site ElegantThemes.com propose une réduction de 10% 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.