Design, Wordpress

Créer une page d’options pour vos thèmes WordPress

Une page d’option est l’un des meilleurs moyen pour accroître la facilité d’utilisation d’un thème wordpress compliqué. Cependant, pas évident à mettre en place. Surtout qu’il y a très peut di’nformation à ce sujet sur Google. Nous allons donc vous délivrer les secrets pour réussir à insérer une page d’option à votre thème wordpress.

Dans cet article, nous allons intégrer une page d’option pour le thème wordpress par défaut. La méthode sera ensuite utilisable pour n’importe quel thème.

Avant tout je tiens à remercier l’équipe de l’excellent blog Theme Forest dont cet article est en partie la traduction.

A travers ce tutoriel nous allons vous exliquer comment insérer une message d’accueil dans le header du thème. L’objectif étant que ce message soit éditable via la page d’option du thème.

Page d'options
Page d'options

Par défaut la page d’option n’aura pas de style. Dans ce tutoriel nous partagerons un code qui vous permettra d’utiliser le style de l’admin wordpress. (cf capture)

Le Back-End

Commencez par ouvrir le fichier  functions.php se trouvant ici : /wp-content/themes/classic/. Les deux premières lignes devraient être les suivants:

array( “name” => “Welcome Message”,
“type” => “title”),

array( “type” => “open”),

array( “name” => “Title”,
“desc” => “Enter a title to display for your welcome message.”,
“id” => $shortname.”_welcome_title”,
“std” => “”,
“type” => “text”),

array( “name” => “Message”,
“desc” => “Text to display as welcome message.”,
“id” => $shortname.”_welcome_message”,
“type” => “textarea”),

array( “name” => “Disable Welcome Message?”,
“desc” => “Check this box if you would like to DISABLE the welcome message.”,
“id” => $shortname.”_welcome_disable”,
“type” => “checkbox”,
“std” => “false”),

array( “type” => “close”)

);

Nous venons de créer les options à afficher We are storing each option in an array so that we can insert them into a form later in the code. Nous sommes chaque option de stockage dans un tableau afin que nous puissions les insérer dans une forme plus tard dans le code. Avec cette méthode nous stockons chaque option dans une “array”  pour les utiliser ensuite avec un formulaire. Cela permet d’économiser la duplication de code.

name – Titre de l’option

desc – description

id – Nous allons l’utiliser pour retrouver le nom de l’option. $shortname peut-être remplacé par le shortname choisit (wpc dans notre cas).

std – paramètre par défaut de l’option. Par exemple, sur on veut utiliser les cases à cocher true ou false afin de déterminer si la case est pré-cochée ou non.

type – définit le type d’option. Par exemple texte, textarea, checkbox etc.

Comme vous pouvez le voir, nous commençons avec le titre option. Ensuite, open qui est utilisé exclusivement pour les besoins de la présentation. Il est utilisé pour ouvrir la table des options.

Nous avons ensuite une textbox pour le titre de votre message d’accueil, suivi d’une textarea pour saisir le message. Arrive enfin une checkbox pour désactiver le message d’accueil, suivi de ‘close’ qui ferme les balises créés par ‘open‘.

Le code suivant est un tas de fonctions wordpress pour préciser qu’il s’agit d’une page d’options, nous reviendrons dessus plus tard :

function mytheme_add_admin() {

global $themename, $shortname, $options;

if ( $_GET[‘page’] == basename(__FILE__) ) {

if ( ‘save’ == $_REQUEST[‘action’] ) {

foreach ($options as $value) {
update_option( $value[‘id’], $_REQUEST[ $value[‘id’] ] ); }

foreach ($options as $value) {
if( isset( $_REQUEST[ $value[‘id’] ] ) ) { update_option( $value[‘id’], $_REQUEST[ $value[‘id’] ] ); } else { delete_option( $value[‘id’] ); } }

header(“Location: themes.php?page=functions.php&saved=true”);
die;

} else if( ‘reset’ == $_REQUEST[‘action’] ) {

foreach ($options as $value) {
delete_option( $value[‘id’] ); }

header(“Location: themes.php?page=functions.php&reset=true”);
die;

}
}

add_theme_page($themename.” Options”, “”.$themename.” Options”, ‘edit_themes’, basename(__FILE__), ‘mytheme_admin’);

}

function mytheme_admin() {

global $themename, $shortname, $options;

if ( $_REQUEST[‘saved’] ) echo ‘<div id=”message” class=”updated fade”><p><strong>’.$themename.’ settings saved.</strong></p></div>’;
if ( $_REQUEST[‘reset’] ) echo ‘<div id=”message” class=”updated fade”><p><strong>’.$themename.’ settings reset.</strong></p></div>’;

?>
<div class=”wrap”>
<h2><?php echo $themename; ?> settings</h2>

<form method=”post”>

<?php foreach ($options as $value) {

La suite du code va permettre de préciser le ‘type’ d’option utilisé (titre, open, close, text, textarea, checkbox etc.)

switch ( $value[‘type’] ) {
case “open”:

?>

<table width=”100%” border=”0″ style=”background-color:#eef5fb; padding:10px;”>
<?php break;
case “close”:

?>
</table><br />
<?php break;
case “title”:

?>

<table width=”100%” border=”0″ style=”background-color:#dceefc; padding:5px 10px;”><tr>

<td colspan=”2″><h3 style=”font-family:Georgia,’Times New Roman’,Times,serif;”><?php echo $value[‘name’]; ?></h3></td>

</tr>
<?php break;
case ‘text’:

?>
<tr>

<td width=”20%” rowspan=”2″ valign=”middle”><strong><?php echo $value[‘name’]; ?></strong></td>

<td width=”80%”><input style=”width:400px;” name=”<?php echo $value[‘id’]; ?>” id=”<?php echo $value[‘id’]; ?>” type=”<?php echo $value[‘type’]; ?>” value=”<?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″ style=”margin-bottom:5px;border-bottom:1px dotted #000000;”>&nbsp;</td></tr><tr><td colspan=”2″>&nbsp;</td></tr>
<?php

break;
case ‘textarea’:

?>
<tr>

<td width=”20%” rowspan=”2″ valign=”middle”><strong><?php echo $value[‘name’]; ?></strong></td>

<td width=”80%”><textarea name=”<?php echo $value[‘id’]; ?>” style=”width:400px; height:200px;” type=”<?php echo $value[‘type’]; ?>” cols=”” rows=””><?php if ( get_settings( $value[‘id’] ) != “”) { echo get_settings( $value[‘id’] ); } else { echo $value[‘std’]; } ?></textarea></td>
</tr>
<tr>

<td><small><?php echo $value[‘desc’]; ?></small></td>

</tr><tr><td colspan=”2″ style=”margin-bottom:5px;border-bottom:1px dotted #000000;”>&nbsp;</td></tr><tr><td colspan=”2″>&nbsp;</td></tr>
<?php

break;
case ‘select’:

?>

<tr>

<td width=”20%” rowspan=”2″ valign=”middle”><strong><?php echo $value[‘name’]; ?></strong></td>

<td width=”80%”><select style=”width:240px;” name=”<?php echo $value[‘id’]; ?>” id=”<?php echo $value[‘id’]; ?>”><?php foreach ($value[‘options’] as $option) { ?><option<?php if ( get_settings( $value[‘id’] ) == $option) { echo ‘ selected=”selected”‘; } elseif ($option == $value[‘std’]) { echo ‘ selected=”selected”‘; } ?>><?php echo $option; ?></option><?php } ?></select></td>

</tr>
<tr>

<td><small><?php echo $value[‘desc’]; ?></small></td>

</tr><tr><td colspan=”2″ style=”margin-bottom:5px;border-bottom:1px dotted #000000;”>&nbsp;</td></tr><tr><td colspan=”2″>&nbsp;</td></tr>
<?php

break;
case “checkbox”:

?>

<tr>

<td width=”20%” rowspan=”2″ valign=”middle”><strong><?php echo $value[‘name’]; ?></strong></td>

<td width=”80%”><? if(get_settings($value[‘id’])){ $checked = “checked=\”checked\””; }else{ $checked = “”; } ?>

<input type=”checkbox” name=”<?php echo $value[‘id’]; ?>” id=”<?php echo $value[‘id’]; ?>” value=”true” <?php echo $checked; ?> />

</td>

</tr>
<tr>

<td><small><?php echo $value[‘desc’]; ?></small></td>

</tr><tr><td colspan=”2″ style=”margin-bottom:5px;border-bottom:1px dotted #000000;”>&nbsp;</td></tr><tr><td colspan=”2″>&nbsp;</td></tr>
<?php break;
}

}

?>

En fait, si le ‘type’ est un texte, on affiche une textbox (boîte de texte) avec le titre et les balises desc à côté. Il en va de même pour chacun des autres.

Notez que nous utilisons des tableaux, plus simple pour la compatibilité entre navigateurs (pas besoin de ce soucis du référencement ici)

Next is the final piece of code for the options page. It displays ‘Submit’ and ‘Reset’ buttons. At the end is the final code to tell WordPress to add this as a page in the Admin Dashboard.

La suite est la dernière partie du code pour la page d’option. Il permet d’afficher les boutons ‘Submit’ et ‘Reset’. Tout à la fin, un code permet pour dire à wordpress d’ajouter cette page au panneau d’administration.

<p class=”submit”>
<input name=”save” type=”submit” value=”Save changes” />
<input type=”hidden” name=”action” value=”save” />
</p>
</form>
<form method=”post”>
<p class=”submit”>
<input name=”reset” type=”submit” value=”Reset” />
<input type=”hidden” name=”action” value=”reset” />
</p>
</form>

<?php
}

add_action(‘admin_menu’, ‘mytheme_add_admin’); ?>

La page d’option est maintenant terminée. Testé là en commençant par activer le thème Classic, puis allez dans : Apparence (Design) -> WordPress Classic Options.

Utiliser les options

Maintenant que nous avons fait dans la page des options, nous avons besoin d’utiliser ces options dans le thème. Pour ce faire, ouvrez header.php.

Ce que nous allons faire :

  1. Récupérer les options.
  2. Vérifiez si la case désactiver est cochée. Si elle ne l’est pas, nous …
  3. Vérifions qu”un titre a été saisi. Si c’est le cas, nous l’affichons.
  4. Sinon, nous affichons un titre générique “Bienvenue!”.
  5. Vérifier si un message a été saisi. Si c’est le cas, nous l’affichons.
  6. Sinon, un message générique est utilisé.
  7. Enfin, si la case est cochée, on n’affiche rien.

1. Récupérer les options

A la fin du fichier header.php page, ajoutez ce code :

<?
global $options;
foreach ($options as $value) {
if (get_settings( $value[‘id’] ) === FALSE) { $$value[‘id’] = $value[‘std’]; } else { $$value[‘id’] = get_settings( $value[‘id’] ); }
}
?>

Le code ci-dessus extrait les options et les places dans une variable de référence. Les options sont désormais disponibles en tant que:

  • $wpc_welcome_disable
  • $wpc_welcome_title
  • $wpc_welcome_message

2. Vérifier la case de désactivation

<?
if ($wpc_welcome_disable == “false”) { ?>

La checkbox va renvoyer “false” si elle n’est pas cochée et “true” si elle est cochée. Le code suivant ne sera utilisé que si la chekbox renvoie “false” (non cochée).

3. Vérifier si un titre a été saisi puis l’afficher

<?
if ($wpc_welcome_title) { ?>
<h4><? echo $wpc_welcome_title; ?></h4>

Ici nous vérifions que quelque chose a été saisi dans Titre. Puis nous l’affichons (echo) dans une balise <h4>.

4. Sinon, afficher un texte générique

<? } else { ?>
<h4>Welcome!</h4>
<? } ?>

S’il n’y a pas de titre (else). Nous affichons un titre générique : “Welcome!”.

5 & 6. Vérifier si un texte a été saisi, puis l’afficher. Sinon, afficher un texte générique

<? if ($wpc_welcome_message) { ?>
<p><? echo $wpc_welcome_message; ?></p>
<? } else { ?>
<p>Hello and welcome to our site. We hope you enjoy your stay!</p>
<? } ?>

Le code ci-dessus utilise les mêmes méthodes que dans les étapes précédentes, mais avec wpc_welcome_message $.

7. Si la case est cochée ne rien afficher

<? } else { ?>

<!– You could insert something here which will display when the box IS checked. –>

<? } ?>

Si la case est cochée,  juste un commentaire HTML qui n’apparaitera pas sur le blog.

Conclusion

Les options que nous avons utilisées sont très basique, vous pouvez aller plus loin en proposant des options beaucoup plus compliqués. Voici par exemple la page d’option utilisé sur le thème Premium GamePress :

Page d'options - GamePress
Page d'options - GamePress

ABONNEZ-VOUS à la mailing list, c'est GRATUIT !

Abonnez-vous à la mailing list et recevez plein d'infos intéressantes !

2 Comments

  1. Ping : Bookmarks : hacks wordpress | Paille’On the Web
  2. Ce code présente quand même un très gros problème.
    essaye de rentrer un texte comportant une apostrophe, par exemple “l’oiseau” et valide.
    le résultat est “L\’oiseau”.
    Si tu valides de nouveau (parce que tu as fait des changements) ça deviendra “L\\\’oiseau” et si tu valides encore ce sera “L\\\\\\\’oiseau”
    etc etc…
    C’est très embêtant. Tu ne t’en ai pas aperçu en faisant tes essais ?

    Quelle solution as-tu utilisée pour remedier à ça ?

  3. Ping : Les liens de Paille » Bookmark » [Bookmarks] : hacks wordpress

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Avant de partir

Abonnez-vous à la mailing list et recevez plein d'infos intéressantes !