Page d’options pour thème WordPress

Modifier functions.php du thème pour ajouter l’enregistrement des options via register_setting( )

// à l'initialisation de l'administration
// on informe WordPress des options de notre thème

add_action( 'admin_init', 'myThemeRegisterSettings' );

function myThemeRegisterSettings( )
{
	register_setting( 'my_theme', 'background_color' ); // couleur de fond
	register_setting( 'my_theme', 'text_color' );       // couleur du texte
}

on créé la page d’admin via la fonction add_menu_page() (2 paramètres supplémentaires permettent de définir une icône, et une position particulière dans le menu)

// la fonction myThemeAdminMenu( ) sera exécutée
// quand WordPress mettra en place le menu d'admin

add_action( 'admin_menu', 'myThemeAdminMenu' );

function myThemeAdminMenu( )
{
	add_menu_page(
		'Options de mon thème', // le titre de la page
		'Mon thème',            // le nom de la page dans le menu d'admin
		'administrator',        // le rôle d'utilisateur requis pour voir cette page
		'my-theme-page',        // un identifiant unique de la page
		'myThemeSettingsPage'   // le nom d'une fonction qui affichera la page
	);
}

function myThemeSettingsPage( )
{
	// affichage de la page
}

Exemple de fonction d’admin du theme:

function myThemeSettingsPage( )
{
?>
	<div class="wrap">
		<h2>Options de mon thème</h2>

		<form method="post" action="options.php">
			<?php
				// cette fonction ajoute plusieurs champs cachés au formulaire
				// pour vous faciliter le travail.
				// elle prend en paramètre le nom du groupe d'options
				// que nous avons défini plus haut.

				settings_fields( 'my_theme' );
			?>

			<table class="form-table">
				<tr valign="top">
					<th scope="row"><!-- label --></th>
					<td><!-- input --></td>
				</tr>
			</table>

			<p class="submit">
				<input type="submit" class="button-primary" value="Mettre à jour" />
			</p>
		</form>
	</div>
<?php
}

il ne nous reste qu’à rajouter les 2 champs qui vont servir à modifier nos options. Nous allons les ajouter dans l’élément table. (récupération des valeurs via la fonction get_option( ) )

<table class="form-table">
	<tr valign="top">
		<th scope="row"><label for="background_color">Couleur de fond</label></th>
		<td><input type="text" id="background_color" name="background_color" class="small-text" value="<?php echo get_option( 'background_color' ); ?>" /></td>
	</tr>

	<tr valign="top">
		<th scope="row"><label for="text_color">Couleur du texte</label></th>
		<td><input type="text" id="text_color" name="text_color" class="small-text" value="<?php echo get_option( 'text_color' ); ?>" /></td>
	</tr>
</table>

ça doit donner un truc comme ça

options

Et pour exploiter les options de cet exemple via wp_head( ) de header.php pour modifier le css

// la fonction myThemeCss( ) sera exécutée à l'appel de wp_head( )

add_action( 'wp_head', 'myThemeCss' );

function myThemeCss( )
{
	// on crée un bloc style qui appliquera nos couleurs à l'élément body
?>
	<style type="text/css">
		body {
			background-color: <?php echo get_option( 'background_color', '#fff' ); ?>;
			color: <?php echo get_option( 'text_color', '#222' ); ?>;
		}
	</style>
<?php
}

 

NB: Le deuxième paramètre de get_option( ) est utilisé par défaut si a valeur n’est pas définie.

 

Source http://www.felix-girault.fr/html/une-page-doptions-pour-votre-theme-wordpress/

Leave a Reply

Your email address will not be published. Required fields are marked *


× quatre = 4

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>