Bien que nous soyons un grand fan du personnalisateur WordPress pour ajouter des options de thème, certaines personnes préfèrent un panneau d’administration simple pour leur thème ou cherchent à incorporer un panneau d’administration de base en plus du personnalisateur. Dans cet article, je vais vous montrer comment créer facilement votre propre panneau d’administration à l’aide de l’API des paramètres natifs de WordPress via une classe simple qui peut être facilement étendue pour ajouter plus d’options. Ce n’est pas tant un didacticiel mais plutôt un code de démarrage que vous pouvez utiliser pour créer votre panneau d’administration.Vous devez donc vous familiariser avec le code avant de commencer 😉

Création du panneau d’options du thème

Vous trouverez ci-dessous une classe que vous pouvez utiliser pour créer votre panneau d’administration. La classe ajoutera un nouveau panneau d’options de thème avec 3 paramètres différents pour un exemple (case à cocher, saisie et sélection). Insérez simplement le code suivant directement dans votre fichier functions.php tout en bas ou créez un nouveau fichier puis utilisez la fonction require_once pour l’appeler dans votre fichier functions.php (préférable).

Capture d’écran de la page d’administration du thème

Avant de vous montrer le code que je voulais partager avec vous, une capture d’écran de ce à quoi ressemblera le panneau d’administration que vous allez créer.

Le code d’écran administrateur

Voici le code dont vous avez besoin pour créer le panneau d’administration et inclure la fonction d’assistance pour obtenir les valeurs de n’importe quel paramètre:

<?php
/**
 * Create A Simple Theme Options Panel
 *
 */

// Exit if accessed directly
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

// Start Class
if ( ! class_exists( 'WPEX_Theme_Options' ) ) {

    class WPEX_Theme_Options {

        /**
         * Start things up
         *
         * @since 1.0.0
         */
        public function __construct() {

            // We only need to register the admin panel on the back-end
            if ( is_admin() ) {
                add_action( 'admin_menu', array( 'WPEX_Theme_Options', 'add_admin_menu' ) );
                add_action( 'admin_init', array( 'WPEX_Theme_Options', 'register_settings' ) );
            }

        }

        /**
         * Returns all theme options
         *
         * @since 1.0.0
         */
        public static function get_theme_options() {
            return get_option( 'theme_options' );
        }

        /**
         * Returns single theme option
         *
         * @since 1.0.0
         */
        public static function get_theme_option( $id ) {
            $options = self::get_theme_options();
            if ( isset( $options[$id] ) ) {
                return $options[$id];
            }
        }

        /**
         * Add sub menu page
         *
         * @since 1.0.0
         */
        public static function add_admin_menu() {
            add_menu_page(
                esc_html__( 'Theme Settings', 'text-domain' ),
                esc_html__( 'Theme Settings', 'text-domain' ),
                'manage_options',
                'theme-settings',
                array( 'WPEX_Theme_Options', 'create_admin_page' )
            );
        }

        /**
         * Register a setting and its sanitization callback.
         *
         * We are only registering 1 setting so we can store all options in a single option as
         * an array. You could, however, register a new setting for each option
         *
         * @since 1.0.0
         */
        public static function register_settings() {
            register_setting( 'theme_options', 'theme_options', array( 'WPEX_Theme_Options', 'sanitize' ) );
        }

        /**
         * Sanitization callback
         *
         * @since 1.0.0
         */
        public static function sanitize( $options ) {

            // If we have options lets sanitize them
            if ( $options ) {

                // Checkbox
                if ( ! empty( $options['checkbox_example'] ) ) {
                    $options['checkbox_example'] = 'on';
                } else {
                    unset( $options['checkbox_example'] ); // Remove from options if not checked
                }

                // Input
                if ( ! empty( $options['input_example'] ) ) {
                    $options['input_example'] = sanitize_text_field( $options['input_example'] );
                } else {
                    unset( $options['input_example'] ); // Remove from options if empty
                }

                // Select
                if ( ! empty( $options['select_example'] ) ) {
                    $options['select_example'] = sanitize_text_field( $options['select_example'] );
                }

            }

            // Return sanitized options
            return $options;

        }

        /**
         * Settings page output
         *
         * @since 1.0.0
         */
        public static function create_admin_page() { ?>

            <div class="wrap">

                <h1><?php esc_html_e( 'Theme Options', 'text-domain' ); ?></h1>

                <form method="post" action="options.php">

                    <?php settings_fields( 'theme_options' ); ?>

                    <table class="form-table wpex-custom-admin-login-table">

                        <?php // Checkbox example ?>
                        <tr valign="top">
                            <th scope="row"><?php esc_html_e( 'Checkbox Example', 'text-domain' ); ?></th>
                            <td>
                                <?php $value = self::get_theme_option( 'checkbox_example' ); ?>
                                <input type="checkbox" name="theme_options[checkbox_example]" <?php checked( $value, 'on' ); ?>> <?php esc_html_e( 'Checkbox example description.', 'text-domain' ); ?>
                            </td>
                        </tr>

                        <?php // Text input example ?>
                        <tr valign="top">
                            <th scope="row"><?php esc_html_e( 'Input Example', 'text-domain' ); ?></th>
                            <td>
                                <?php $value = self::get_theme_option( 'input_example' ); ?>
                                <input type="text" name="theme_options[input_example]" value="<?php echo esc_attr( $value ); ?>">
                            </td>
                        </tr>

                        <?php // Select example ?>
                        <tr valign="top" class="wpex-custom-admin-screen-background-section">
                            <th scope="row"><?php esc_html_e( 'Select Example', 'text-domain' ); ?></th>
                            <td>
                                <?php $value = self::get_theme_option( 'select_example' ); ?>
                                <select name="theme_options[select_example]">
                                    <?php
                                    $options = array(
                                        '1' => esc_html__( 'Option 1', 'text-domain' ),
                                        '2' => esc_html__( 'Option 2', 'text-domain' ),
                                        '3' => esc_html__( 'Option 3', 'text-domain' ),
                                    );
                                    foreach ( $options as $id => $label ) { ?>
                                        <option value="<?php echo esc_attr( $id ); ?>" <?php selected( $value, $id, true ); ?>>
                                            <?php echo strip_tags( $label ); ?>
                                        </option>
                                    <?php } ?>
                                </select>
                            </td>
                        </tr>

                    </table>

                    <?php submit_button(); ?>

                </form>

            </div><!-- .wrap -->
        <?php }

    }
}
new WPEX_Theme_Options();

// Helper function to use in your theme to return a theme option value
function myprefix_get_theme_option( $id = '' ) {
    return WPEX_Theme_Options::get_theme_option( $id );
}

Utilisation des options de votre thème

L’utilisation de vos options est très simple, en particulier avec la fonction d’assistance incluse dans le code ci-dessus. Voici un exemple sur la façon dont vous utiliseriez la fonction d’assistance pour obtenir et afficher la valeur du champ déroulant qui a un ID de «select_example».

$value = myprefix_get_theme_option( 'select_example' );
echo $value;

Plus d’informations sur la création d’écrans d’administration

J’ai vu des tonnes de pages d’administration toutes créées de manière très distincte, mais j’aime personnellement la méthode que je vous ai montrée ci-dessus. C’est très simple et direct. Il n’est pas nécessaire de devenir si fou avec vos options de thème! Si vous avez besoin de plus d’informations pour créer des écrans d’administration, vous voudrez consulter le Écrans d’administration Codex.

Share: