Créer un thème classique et des fonctionnalités

Introduction

Beaucoup de thèmes avancés payants utilisent une structure plus complexe que les thèmes gratuits. Souvent, le dossier du thème comporte des dossiers supplémentaires et les thèmes offrent beaucoup plus de possibilités. Les thèmes avancés ont dans un de leurs dossiers un ou plusieurs fichiers PHP contenant des fonctions ou des classes, mais aussi des fichiers JavaScript ou d’autres bibliothèques... Certains thèmes sont même entièrement construits en Ajax... D’autres intègrent directement de très grosses extensions comme WooCommerce, BuddyPress... WordPress est tellement flexible qu’il offre toutes les possibilités.

Le dossier est souvent nommé include ou inc, mais chaque développeur peut lui donner le nom qu’il veut, ou même créer un ou plusieurs fichiers directement à la racine du thème, la gestion des fichiers et dossiers étant très souple. Pour une meilleure organisation, il est tout de même préférable de classer les fichiers de son thème dans des dossiers.

Si vous avez déjà utilisé des thèmes avancés, vous avez pu constater qu’il y a une ou des pages d’administration grâce auxquelles vous pouvez configurer le thème. Parfois même des extensions font partie intégrante du thème....

Créer le thème

Pour créer un thème avancé, il faut dans un premier temps sélectionner un thème. Dans cet exemple, vous partez d’un thème existant. Prenez-en un dont la mise en page principale, c’est-à-dire la disposition générale du site (header, footer, sidebar, content) se rapproche du thème final. Si certaines fonctionnalités sont déjà intégrées, cela vous fera gagner du temps. Mais attention à ne pas choisir un thème trop complexe, dont vous ne comprenez pas l’architecture.

Les thèmes proposés par WordPress sont minimalistes, en HTML5 et responsive, et permettent une prise en main simple. Ils sont aussi facilement modifiables. WordPress propose des thèmes tenus à jour, intégrant plus ou moins des fonctionnalités de base selon les cas.

Retrouvez ici, tous les thèmes de WordPress : https://fr.wordpress.org/themes/author/wordpressdotorg

Pour suivre ce chapitre, vous allez prendre pour base le thème classique WordPress : Twenty Twenty-One. Mais vous pouvez bien entendu prendre le thème classique de votre choix, comme un thème vierge par exemple ou autre, ce que nous allons voir fonctionnant avec n’importe quel thème classique.

Pour commencer, dupliquez le thème : copiez-collez le thème Twenty Twenty-One dans le dossier...

Customiser le thème de base

Ajouter un logo avec la fonction add_theme_support()

WordPress propose d’ajouter un logo depuis sa version 4.5 (voir le chapitre Personnaliser le site avec le fichier functions.php, section Customiser un thème avec add_theme_support()).

Actuellement, vous utilisez le thème Twenty Twenty-One pour créer votre propre thème, donc cette option est déjà implémentée au site, mais certains thèmes ne l’utilisent pas.

Vous retrouvez cette fonction dans le fichier functions.php du thème Twenty Twenty-One lignes 103 et 115 :

// Custom logo. 
 
    $logo_width = 300; 
    $logo_height = 100; 
 
    add_theme_support( 
        'custom-logo', 
        array( 
            'height'                  => $logo_height, 
            'width'                   => $logo_width, 
            'flex-width'              =>...

Ajouter un onglet Options du thème

Dans le répertoire du thème, à l’intérieur du dossier inc, créez un fichier et nommez-le control.php.

<?php 
add_theme_page($page_title,$menu_title,$capability,$menu_slug,
$function); 
?> 

Mettre en place la page d’options

Pour mettre en place la page d’options, ajoutez du code HTML dans la méthode displayOptions(), c’est dans cette méthode que vous insérez les éléments de la page.

Servez-vous du HTML des autres pages d’administration pour avoir une apparence cohérente. Observez la structure HTML grâce à la console d’inspection de code et ajoutez la même structure HTML (div, class et id), puis changez le titre de la page.

Pour ajouter le code HTML, fermez et rouvrez les balises PHP, cela évite de faire de nombreux affichages avec la fonction echo.

<?php 
class MB { 
          static function init(){  
          add_theme_page("The mobility options", 'Options du thème', 
          'edit_themes', 'control.php', array('MB','displayOptions')); 
          } 
          static function displayOptions(){ 
?> 
              <div class="wrap"> 
                <h2>Options du thème</h2> 
                <!--mise en page--> 
         ...

Ajouter une feuille de style CSS et un script JavaScript

Dans le dossier inc, créez un dossier js avec, à l’intérieur, un fichier JavaScript et un dossier css contenant un fichier CSS. Nommez-les en leur attribuant le nom que vous voulez, pour l’exemple : control.js et control.css.

Créez une nouvelle méthode dans la classe et faites appel aux fonctions wp_register_style() pour enregistrer le style, puis wp_enqueue_style() pour afficher le style. Faites de même avec les scripts, grâce aux fonctions wp_register_script() et wp_enqueue_script().

Voici le contenu de la méthode addAdminHeader() :

static function addAdminHeader(){  
   wp_register_style('Mb_css', 
                   get_template_directory_uri().'/inc/css/control.css', 
                   array()
                   ); 
   wp_enqueue_style('Mb_css'); 
   
   wp_register_script('Mb_js', 
                   get_template_directory_uri().'/inc/js/control.js'...

Ajouter une image bannière

Pour ajouter une image au thème, commencez par créer le code HTML dans la méthode displayOptions().

static function get_upload_field($id) { 
   $field = '<input id="'.$id.'" type="file" name="attachment_'.$id.'" /> 
             <span class="submit"><input name="Mb_upload" type="submit" 
             value="Envoyer" class="button panel-upload-save" /> 
             </span>'; 
return $field; 
} 

static function displayOptions(){ 
?> 
         <div class="wrap"> 
             <h2>Options du thème</h2> 
             <form action="#" method="post" enctype="multipart/form-data">
             <h3>Image bannière</h3> 
             <h4>Téléchargez une image bannière de 728X90 pixels :</h4> 
                   <div id='imgupload'> 
                         <?php echo MB::get_upload_field('image'); ?> 
         ...

Créer un bouton qui remet les options par défaut

Pour remettre les paramètres par défaut, créez un bouton input avec pour valeur Réinitialisation. Ajoutez-le en haut du formulaire HTML <form> dans la méthode displayOptions().

static function displayOptions(){ 
 $aOptions = MB::initOptions(); 
 ?> 
 <div class="wrap"> 
 <h2>Options du thème</h2> 
 <form action="#" method="post" enctype="multipart/form-data"> 
 <input type="submit" class="button" name="Mb_reset" 
value="Réinitialisation" /> 
 <br />  
 <h3>Image bannière</h3> 
 <h4>Aperçu :</h4>  
 <div id="apercuimage"> 
 <img src="<?php echo($aOptions['image']); ?>" /> 
 </div> 
 <h4>Téléchargez une image bannière de 728X90 pixels :</h4> 
 <div id='imgupload'> 
 <?php echo MB::get_upload_field('image'); ?> 
 </div> 
 
 </form> 
 </div> 
 <?php 
} 

Ajoutez à la méthode init(), une méthode à exécuter lorsque l’on...

Choisir une couleur avec Iris (color picker)

Dans cette partie, vous allez récupérer une couleur dans une palette de couleurs de type color picker avec Iris. L’utilisateur pourra choisir la couleur du pied de page et de la ligne qui sépare l’en-tête du contenu, afin de personnaliser son site.

static function addAdminHeader(){  
 wp_register_style('Mb_css', get_template_directory_uri().
'/my-inc/css/my-inc.css', array()); 
 wp_enqueue_style('Mb_css'); 
 
 wp_register_script('Mb_js', get_template_directory_uri().
'/my-inc/js/my-inc.js', array()); 
 wp_enqueue_script('Mb_js'); 
 
 wp_enqueue_style('iris'); 
 wp_enqueue_script('iris'); 
} 

$aOptions['color'] = '#d1174c'; 

Ajouter des textes sur la page d’accueil

Dans cette partie, vous allez ajouter à la page d’options la possibilité d’écrire un texte d’accueil avec un éditeur WYSIWYG, un titre et une image. Pour ajouter un éditeur WYSIWYG, utilisez la plate-forme TinyMCE, qui permet à l’utilisateur de mettre en forme le texte d’accueil.

$aOptions['hometitle'] ="mobility"; 
 
$aOptions['homedesc'] ="<p>Et quoniam mirari posse quosdam 
peregrinos existimo haec lecturos forsitan, si contigerit, 
quamobrem cum oratio ad ea monstranda deflexerit quae Romae 
gererentur, nihil praeter seditiones narratur et tabernas et 
vilitates harum similis alias, summatim causas perstringam nusquam 
a veritate sponte propria digressurus.</p> 
<br /> 
<p>Sed fruatur sane hoc solacio atque hanc insignem ignominiam, 
quoniam uni praeter se inusta sit, putet esse leviorem, dum modo, 
cuius exemplo se consolatur, eius exitum expectet, praesertim cum 
in Albucio nec Pisonis libidines nec audacia Gabini fuerit ac 
tamen hac una plaga conciderit, ignominia senatus.</p>";  
 
$aOptions['home-image'] = 
get_template_directory_uri().'/images/themobility/welcome.jpg'; 

<div class="bloc2">  
 <h3>Ajouter une présentation :</h3> 
 <div id="homeleft"> 
 
    <h4>titre :</h4>  
    <input type="text" style="width:80%" name="hometitle" 
    id="hometitle" value="<?php echo($aOptions['home-title']); ?>"/> 
 
    <h4>texte :</h4>  
    <div class="txtmce"> ...

Ajouter une sidebar dans le footer pour la page d’accueil

Ajoutez une sidebar pour afficher trois colonnes avec des widgets en dessous du texte d’accueil.

Pour cela, créez une sidebar dans le fichier functions.php avec la fonction WordPress register_sidebar() (voir le chapitre Personnaliser le site avec le fichier functions.php, section Créer des sidebars et des zones pour les sidebars). 

Puis, ajoutez la fonction au corps de WordPress grâce à un hook d’action, avec pour action widget_init. L’action s’exécute lors de l’initialisation des widgets. Dans le cas du thème Twenty Twenty-One, cette fonction existe déjà sous le nom de twenty_twenty_one_widgets_init(), il suffit donc de lui ajouter votre sidebar. 

// Footer mobility. 
    register_sidebar( array( 
        'name'          => 'sidebar accueil', 
        'id'            => 'sidebar-home', 
        'description'   => 'sidebar 3 colonnes pour le pied de page de l\'accueil',
        'before_widget' => '<li id="%1$s" class="widget %2$s">', 
        'after_widget'  => '</li>', 
        'before_title'  => '<h3 class="widget-title">', 
        'after_title'   => '</h3>', 
    ) ); 

Maintenant, ajoutez le code faisant apparaître la sidebar dans le fichier page-accueil.php, étant donné que la sidebar s’affiche uniquement pour la page d’accueil. 

<?php  
if ( is_active_sidebar('sidebar-home')){ 
   echo '<ul id="sidebar-home">'; 
   dynamic_sidebar('sidebar-home'); 
   echo '</ul>'; 
} 
?> 

À ce stade, lors de l’activation du thème, l’internaute ne voit pas la sidebar, car celle-ci ne contient aucun...

Modification du pied de page

Pour modifier le pied de page ouvrez le fichier footer.php. Vous allez enlever le logo pour faire apparaître à la place le titre du site. Vous retrouvez du code que nous avons déjà vu, et vous pouvez le comprendre :

<div class="site-name"> 
                <?php if ( has_custom_logo() ) : ?> 
                    <div class="site-logo"><?php the_custom_logo(); ?></div> 
                <?php else : ?> 
                    <?php if ( get_bloginfo( 'name' ) && 
get_theme_mod( 'display_title_and_tagline', true ) ) : ?> 
                        <?php if ( is_front_page() && ! is_paged() ) : ?> 
                            <?php bloginfo( 'name' ); ?> 
                        <?php...

En résumé

Vous avez créé un fichier control.php se composant d’une classe, avec des méthodes. Le détail se trouve dans les commentaires à l’intérieur de chaque méthode :

<?php 
if (!class_exists("MB")) { 
 class MB { 
 static function init(){  
 //lu à chaque fois que la page se charge grâce à un hook d'action 
 //en dehors de la classe 
 //récupère les variables $_POST et $_FILE 
 //affiche le bouton dans l'administration  
 }  
 static function initOptions($reset=false){ 
 //fonction qui retourne le tableau d'options 
 //met à jour le tableau soit avec les valeurs d'origine 
 //soit avec les valeurs modifiées  
 }  
 static function displayOptions(){ 
 //affichage sur la page d'administration du code HTML 
 } 
 static function addStyleColor(){ 
 //ajoute un style CSS inline à la fonction WordPress wp_head() 
 //grâce à un hook d'action
 } 
 static function addAdminHeader(){  
 //ajoute les scripts JavaScript et les styles CSS au header de 
 //l'administration grâce à un hook d'action en dehors de la classe 
 } ...