VII – Administration du thème
Notre thème est utilisable comme tel mais nous pourrions ajouter de nouvelles fonctionnalités ou encore permettre à l’utilisateur de paramétrer certaines fonctions. Nous allons voir dans cette section comment créer une interface d’administration et personnaliser certains des éléments.
1°) Initialisation de l’espace d’administration
Si vous avez déjà développer des extension WordPress, vous trouverez certaines similitudes. Dans le cas contraire pas de panique ! Encore une fois, WordPress va grandement nous faciliter la tâche.
Code de la page functions.php
/**
* Ajoute un menu au bloc de gestion des thèmes
*/
function sldesign_options(){
add_theme_page(__('slDesign settings','sldesign'), __('slDesign settings','sldesign'), 10, 'sldesign-settings', 'sldesign_admin');
}
/**
* Administration slDesign
*/
function sldesign_admin(){
?>
<!-- Administration du thème slDesign -->
<div class="wrap">
<h2 class="alignleft"><?php _e("slDesign theme settings","sldesign");?></h2>
<a class="alignright" style="margin: 20px;" href="http://sldesign.openwab.com/projets/sldesign-wordpress-theme">slDesign Home Page</a>
<!-- Le code de la page -->
</div>
<?php
}
//Initialise la page d'administration et les options
add_action('admin_menu', 'sldesign_options');
Résultat :
Nous pouvons maintenant accéder à notre interface d’administration de notre thème.
Nous allons initialiser des options et permettre aux utilisateurs de modifier certains éléments.
Etape 1 : Initialiser nos options
Nous allons créer un array avec nos différentes options ; dans notre fichier ‘functions.php’ nous allons initialiser nos options sous forme de tableau. Dans cet exemple, j’ai simplement initialiser 3 options :
- Meta : Permet de spécifier des mots clés
- Footer : Permet à l’utilisateur d’ajouter des éléments au footer
- CSS : Permet à l’utilisateur de spécifier ces propres données CSS
Ceci n’est qu’un exemple, vous pouvez ajouter autant d’options que vous souhaitez.
Code du fichier functions.php
//options du thème - Options par défaut $options = array( array( "id" => "sldesign_meta", "default" => "", "type" => "sldesign_meta"), array( "id"=> "sldesign_footer", "default" => "", "type" => "sldesign_footer" ), array( "id" => "sldesign_css", "default" => "", "type" => "sldesign_css") );
Maintenant, dans notre function ‘sldesign_options()’, nous allons initialiser nos options
Code de la fonction sldesign_options() – dans le fichier functions.php
/**
* Function pour la gestion des options
*/
function sldesign_options(){
global $options;
// Initialise les options par défaut - enregistrement en base de données
foreach ($options as $default) {
if(get_option($default['id'])=="") {
update_option($default['id'],$default['default']);
}
}
//Ajoute un lien au menu "apparence"
add_theme_page(__('slDesign settings','sldesign'), __('slDesign settings','sldesign'), 10, 'sldesign-settings', 'sldesign_admin');
}
Si on regarde dans notre base de données, on remarque que les options sont bien présentes :
Fonction utile :
update_option( $option_name, $newvalue ) : Fonction permettant de mettre à jour les options dans la base de données
Etape 2 – Formulaire d’administration des options
Nous allons maintenant créer un formulaire, ce formulaire nous permettra de mettre à jour et de modifier les options de notre thème.
Il s’agit d’un simple formulaire html inclut dans la fonction sldesign_admin();
Code de la fonction sldesign_admin() – dans le fichier functions.php
/**
* Administration slDesign
*/
function sldesign_admin(){
global $options;
?>
<!-- Administration du thème slDesign -->
<div class="wrap">
<h2><?php _e("slDesign theme settings","sldesign");?></h2>
<?php
//vérifie si le formulaire a été soumis dans ce cas on affiche un message
if ( $_REQUEST['sldesign_saved'] ) {
//Ici récupération des données du formulaire et enregistrement
?>
<div id="message" class="updated fade"><p><strong><?php _e('Settings saved.','sldesign'); ?></strong></p></div>
<?php
}else{
//Affiche le formulaire
?>
<div id="poststuff" class="metabox-holder">
<form action="" method="post">
<div class="stuffbox">
<h3><label for="link_url"><?php _e("General","fusion"); ?></label></h3>
<div class="inside">
<table class="form-table" style="width: auto">
<tr>
<th><?php _e('Header Meta', 'sldesign');?> : </th>
<td><input size="60" name="sldesign_meta" value="<?php print get_option('sldesign_meta'); ?>"/></td>
</tr>
</table>
</div>
</div>
<div class="stuffbox">
<h3><label for="link_url"><?php _e("Footer","fusion"); ?></label></h3>
<div class="inside">
<table class="form-table" style="width: auto">
<tr>
<th><?php _e('Footer option', 'sldesign');?> : <br /><?php _e("(HTML allowed)","sldesign"); ?></th>
<td><textarea class="code" rows="4" cols="60" name="sldesign_footer" ><?php print get_option('sldesign_footer'); ?></textarea></td>
</tr>
</table>
</div>
</div>
<div class="stuffbox">
<h3><label for="link_url"><?php _e("Css","fusion"); ?></label></h3>
<div class="inside">
<table class="form-table" style="width: auto">
<tr>
<th><?php _e("Modify anything related to design using simple CSS","sldesign"); ?><br /><br /><span style="color: #ed1f24"><?php _e("Avoid modifying theme files and use this option instead to preserve changes after update","sldesign"); ?></span></th>
<td valign="top">
<label>
<textarea class="code" rows="12" cols="60" name="sldesign_css"><?php print get_option('sldesign_css'); ?></textarea>
</label>
</td>
<td valign="top">
Examples:
<p><em style="color: #5db408">/* Set a fluid page width */</em><br /><code>#page{ width: 95%; }</code></p>
<p><em style="color: #5db408">/* Make links red, without background on mouse over */</em><br /><code>a, a:hover{ color: #ed1f24; }<br />a:hover{ background: none; }</code></p>
<p><em style="color: #5db408">/* Decrease header height to 150 pixels and hide the logo */</em><br /><code>#page-wrap2, #header{ height: 150px; }<br />body{ background-position: left 150px; }<br />a#logo{ display: none; }</code></p>
<p><em style="color: #5db408">/* Increase tag line text size */</em><br /><code>#topnav, #topnav a{ font-size: 130%; }</code></p>
<p><em style="color: #5db408">/* Hide post information bar */</em><br /><code>.postinfo{ display: none; }</code></p>
<p><em style="color: #5db408">/* Make tabs narrower */</em><br /><code>#tabs{ letter-spacing: -0.04em; font-size: 13px; }<br />#tabs a span span{ padding: 4px 0 0 0; }</code></p>
<p><em style="color: #5db408">/* Use Windows Arial style fonts, instead of Mac's Lucida */</em><br /><code>body, input, textarea, select, h3, h4, h5, h6,<br />#sidebar h2.title, #sidebar2 h2.title{ font-family: Arial, Helvetica; }</code></p>
</td>
</tr>
</table>
</div>
</div>
<input name="sldesign_save" type="submit" class="button-primary" value="<?php _e('Save changes','sldesign'); ?>" />
<!-- Simple trigger du formulaire... -->
<input type="hidden" name="sldesign_saved" value="sldesign_save" />
</form>
</div>
<?php
}
?>
</div>
<?php
}
Nous avons maintenant un formulaire
Reste encore à récupérer nos données de formulaire et à mettre à jour nos options. Nous pouvons réaliser cette opération avec la fonction
//Ici récupération des données du formulaire et enregistrement
update_option('sldesign_meta',$_POST['sldesign_meta']);
update_option('sldesign_footer', $_POST['sldesign_footer']);
update_option('sldesign_css', $_POST['sldesign_css']);
Note : Ce code est volontairement simplifié, nous aurions pu effectuer certaines vérifications avant la mise à jour
Si nous modifions les éléments du formulaire et postons les données, les informations seront mises à jour dans la base de données.
Etape 3 – Appliquer les options au thème
Dernière étape, récupérer ces options dans notre thème ; il suffit de récupérer l’option dans la base avec la fonction ‘get_option()’.
Voici le formulaire après mise à jour :
Code du fichier footer.php permettant d’insérer le footer personnalisé.
<?php
if(get_option('sldesign_footer') != ""){
echo get_option('sldesign_footer');
}
?>
Le résultat est le suivant :
#1 by romain on 29 novembre 2010 - 13 h 25 min
Merci pour cet article riche en détails, super boulot et depuis le temps que je cherchais une explication récente de créa de thème wordpress… et en français en plus!