Blog ENI : Toute la veille numérique !
Accès illimité 24h/24 à tous nos livres & vidéos ! 
Découvrez la Bibliothèque Numérique ENI. Cliquez ici
💥 1 livre papier acheté 
= la version en ligne automatiquement offerte. Cliquez ici
  1. Livres et vidéos
  2. WordPress
  3. Créer un thème classique et des fonctionnalités
Extrait - WordPress Développez des thèmes avancés avec PHP (théorie, TP, ressources) (5e édition)
Extraits du livre
WordPress Développez des thèmes avancés avec PHP (théorie, TP, ressources) (5e édition)
2 avis
Revenir à la page d'achat du livre

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

1. Nettoyer le thème et préparer la base

Pour alléger le code, supprimez les fonctions qui ne vous servent pas, dans le fichier functions.php ou dans les fichiers appelés par le fichier functions.php. Dans notre exemple, nous n’allons pas modifier ce fichier pour l’instant et voir les problèmes que l’on peut rencontrer au fur et à mesure.

À cette étape, vous êtes en mesure de savoir ce que font la plupart des fonctions du fichier functions.php (ainsi que les fonctions présentes dans les fichiers appelés par ce même fichier) présent dans les dossiers inc, assets, classes, templates ou template-parts. Nous avons vu ces fonctions dans les chapitres précédents.

Vous pouvez nettoyer entièrement le thème, mais attention, avant de supprimer une fonction, renseignez-vous sur son utilité, soit par une recherche sur Internet soit directement dans le codex. Si vous n’êtes pas encore à l’aise avec les fonctions de WordPress, mieux vaut laisser du code, plutôt que de supprimer un code qui serait important ; cela vaut pour n’importe quel thème. C’est pour cela qu’il est important de bien analyser un thème avant de se lancer dans sa programmation.

Créez un dossier images à la racine du thème et, à l’intérieur de ce dossier, créez un dossier nommé « themobility », où se trouveront toutes les images servant au design du thème. Elles peuvent être appelées par le fichier CSS avec le style background ou intégrées dans les pages du site avec la balise HTML <img>. Déposez les images servant pour le design du site à l’intérieur du dossier. 

Les images sont disponibles en téléchargement depuis la page Informations générales....

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.

1. La fonction add_theme_pages()

Pour créer un sous-onglet à l’onglet Apparence, utilisez la fonction add_theme_page() :

<?php 
add_theme_page($page_title,$menu_title,$capability,$menu_slug,
$function); 
?> 
  • $page_title : nom de la page qui va s’inscrire dans la balise <title>.

  • $menu_title : nom qui va apparaître dans le menu.

  • $capability : droits offerts à l’utilisateur selon son rôle. Voir la liste complète : https://wordpress.org/support/article/roles-and-capabilities

  • $menu_slug : nom du lien de l’URL.

    Exemple : /wp-admin/themes.php?page=$menu_slug.

  • $function : nom de la fonction affichant le contenu de l’onglet.

2. Créer l’onglet

Pour créer un onglet, il faut éditer le fichier control.php et y créer un objet PHP. Pour cela, créez une classe appelée MB.

À l’intérieur de la classe, créez une méthode d’initialisation, appelez-la init().

À l’intérieur de la méthode init(), utilisez la fonction add_theme_page(), pour créer l’onglet à...

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().

Voir le chapitre Personnaliser le site avec le fichier functions.php, section Ajouter des feuilles de style et des scripts pour plus de détails sur les fonctions qui font appel aux scripts et aux styles.

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().

1. Créer une méthode comprenant un champ input de type file

Créez une méthode get_upload_field(), contenant un champ input de type file. Pour éviter de réécrire à chaque fois le même code, utilisez cette méthode à chaque fois que vous avez besoin de télécharger une image avec un champ input de type file.

Pour reconnaître le champ et récupérer sa valeur à chaque validation du formulaire, passez dans la méthode un argument $id, identifiant unique :

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; 
} 

2. Créer le code HTML

Ajoutez le code HTML à la méthode displayOptions() et appelez la méthode get_upload_field() permettant d’afficher le champ input file.

Le code de la méthode displayOptions() ressemble à cela :

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.

1. Ajouter le script JavaScript et le CSS Iris, palette de WordPress

Vous allez pour cela utiliser un script JavaScript Iris et son CSS faisant déjà partie du core de WordPress (voir chapitre Personnaliser le site avec le fichier functions.php, section Ajouter des feuilles de style et des scripts).

Pour pouvoir l’utiliser, appelez le script et le CSS dans la méthode addAdminHeader(), à la suite des CSS et autres scripts :

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'); 
} 

2. Ajouter la couleur par défaut

Ajoutez dans la méthode initOptions() la couleur par défaut qui va servir à la personnalisation du site, dans le tableau $aOptions. N’oubliez pas de choisir une nouvelle clé unique pour le tableau :

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

3. Ajouter le formulaire

Ajoutez dans la méthode displayOptions() le code HTML pour l’administration. C’est...

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.

1. Ajouter le code aux méthodes de la classe

Ajoutez dans la méthode initOptions() le texte par défaut (dans l’exemple, du « faux texte »), le titre par défaut et l’image par défaut. Insérez l’image par défaut dans le dossier images - themobility. N’oubliez pas de choisir des nouvelles clés uniques pour le tableau $aOptions :

$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'; 

Ajoutez dans la méthode displayOptions() le code HTML pour l’administration, constitué de différentes balises input :

<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 
 } ...

Conclusion

Créer un thème avancé peut être très avantageux pour les utilisateurs ne connaissant pas PHP. Vous pouvez ajouter toutes sortes d’options et les enregistrer dans la base de données, ou modifier des options existantes.

Vous pouvez ajouter des liens sociaux, un diaporama, changer la phrase du footer, créer trois colonnes en tant qu’options, plutôt que de les créer avec une sidebar...

Vous pouvez également ajouter des fonctions au fichier functions.php pour améliorer le thème, ajouter des templates de page, modifier les boucles de WordPress, ou les fichiers pour les formats d’articles...

À vous d’imaginer votre propre thème.