Personnalisez votre Thème WordPress

Comment y arriver, en 2 pas et 20 minutes

Une façon simple, pratique et très directe pour personnaliser votre thème WordPress est via le Theme Customizer, disponible depuis WordPress 3.4. L’équipe Automattic encourage les développeurs vers cette approche, lorsqu’ils utilisent leur thème Underscore comme point de départ.

Essentiellement, ça se résume à deux étapes:

  1. Dans le panneau du Customizer:
    Ajoutez les options dont les valeurs seront sauvegardées dans la base de données et ensuite
  2. Dans functions.php ou les modèles intéressés:
    Récupérez les valeurs sauvegardées et utilisez-les là où elles sont nécessaires.

Bref, voici quelques fragments de code, prêts pour être utilisés dans vos thèmes (tous les fichiers cités font partie du thème de départ Underscores):

Personnalisez votre Thème WordPress Example 1. – Logo et Favicon

Etape 1. – dans le fichier inc/customizer.php

function votretheme_customize_register( $wp_customize ) {
...
	/* *************************************
	// Ajoutez la section General Settings//
	************************************* */
	$wp_customize->add_section( 'general-settings' , array(
            'title' => __( 'General Settings', 'votretheme' ),
            'priority' => 30,
            'description' => __( 'Chargez votre logo et votre favicon', 'votretheme' )
	) );
	// Ajouter le paramètre Logo
	$wp_customize->add_setting( 'logo' , array( 'default' => '' ));
	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'logo', array(
            'label' => __( 'Votre logo', 'votretheme' ),
            'section' => 'general-settings',
            'settings' => 'logo'
	) ) );
	// Ajouter le paramètre Favicon
	$wp_customize->add_setting( 'favicon' , array( 'default' => '' ));
	$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'favicon', array(
            'label' => __( 'Votre favicon', 'votretheme' ),
            'section' => 'general-settings',
            'settings' => 'favicon'
	) ) );
...
}

Etape 2.

a. – dans header.php affichez le logo, si une image a été déjà chargée dans la base de données

    <div class="site-branding">
        <?php $logo=get_theme_mod('logo');?>
        <?php if ($logo) { ?>
            <a href="<?php echo home_url(); ?>"><img src="<?php echo $logo; ?>" alt="<?php bloginfo( 'name' ); ?>"/></a>
        <?php } else { ?>
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
            <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
        <?php } ?>
    </div><!-- .site-branding -->

b. – dans functions/php affichez le favicon si une image a été déjà chargée dans la base de données

    function votretheme_favicon() {
        $favicon=get_theme_mod('favicon');
        if ($favicon){
            echo '<link rel="shortcut icon" href="' . $favicon . '"/>'."\n";
        }
        else{ ?>
            <link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/admin/images/favicon.png" />
            <?php
        }
    }
    add_action('wp_head', 'votretheme_favicon');

Personnalisez votre Thème WordPress Example II. – Social Media

Etape 1. – dans le fichier inc/customizer.php

function votretheme_customize_register( $wp_customize ) {
	...
	/* ***************************
	// Ajouter la section Social Media//
	*************************** */
	$wp_customize->add_section( 'social-media' , array(
            'title' => __( 'Social Media', 'add_setting' ),
            'priority' => 30,
            'description' => __( 'Entez l'URL de votre compte sur chaque service, pour que l'icône apparaîsse dans l'en-tête.', 'add_setting' )
	) );
	// Ajouter le paramètre Twitter
	$wp_customize->add_setting( 'twitter' , array( 'default' => '' ));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'twitter', array(
            'label' => __( 'Twitter', 'add_setting' ),
            'section' => 'social-media',
            'settings' => 'twitter',
            'type' => 'theme_mod'
	) ) );
	// Ajputer le paramètre FB
	$wp_customize->add_setting( 'facebook' , array( 'default' => '' ));
	$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'facebook', array(
            'label' => __( 'Facebook', 'add_setting' ),
            'section' => 'social-media',
            'settings' => 'facebook',
            'type' => 'theme_mod'
	) ) );
        // Répéter pour tous les social media nécessaires
	...
}

Etape 2. – dans le modèles approprié (header.php, sidebar.php etc.), récupérez les valeurs des paramètres social media settings et traitez-les selon vos besoin:

    <?php 
        $tw= get_theme_mod('twitter');
        echo("Tweety: ".$tw);  // test only

        $fb= get_theme_mod('facebook');
        echo("FB: ".$fb);  // test only
    ?>

Les variables paramètres peuvent être de plusieurs types, comme suit:

  • WP_Customize_Control() – une case de texte simple, pour saisir du texte non-formaté; il est en même temps le parentde tous les autres types de contrôles. (voir example II ci-dessus, pour les URLs des social media).
  • WP_Customize_Color_Control() – un sélecteur de couleurs.
  • WP_Customize_Upload_Control() – un contrôle permettant de charger des fichiers multimédia.
  • WP_Customize_Image_Control() – un contrôle permettant de charger des images (voir example I ci-dessus, pour le logo et le favicon).
  • WP_Customize_Background_Image_Control() – un contrôle pour personnaliser l’image d’arrière-plan.
  • WP_Customize_Header_Image_Control() – un contrôle pour personnaliser l’image de l’en-tête.

C’est plus clair maintenant?

Personnaliser votre Thème WordPress est beaucoup plus simple avec le Theme Customizer, que les autres alternatives, comme créer une page de configuration du thème, utiliser Options Framework ou tout autre outil qu’on avait l’habitude d’utiliser l’année passée.

References:

Laisser un Commentaire

Plan du site

ouvrir