Les templates de pages WordPress – Comment ça marche ?

Vous souhaitez ajouter un menu personnalisé sur la page boutique de votre site, supprimer le sidebar sur certaines pages, ajouter des widgets sur votre page d’erreur 404, créer une page de formulaire personnalisée, etc. ? Avec WordPress, tout est possible. Grâce aux templates de pages, vous pouvez personnaliser votre site web dans ses moindres détails et avoir un contrôle complet sur l’apparence et l’organisation des éléments de vos pages.

Vous voulez franchir une étape dans votre maîtrise de WordPress et apprendre à créer des templates de page ? Vous êtes tombé(e) au bon endroit. On va vous expliquer étape par étape comment faire pour créer un template de page. Vous le verrez, pas besoin d’un expert de la programmation pour y arriver.

Un template wordpress c’est quoi ?

Défini en quelques mots, un template est un fichier qui indique à WordPress comment afficher le contenu de vos pages. Sur WordPress, vous pouvez créer plusieurs templates, pour faire varier la mise en page du contenu en fonction de ce que vous voulez afficher.

Lorsqu’un internaute envoie une requête en chargeant une page de votre site, WordPress va chercher le contenu à afficher et la manière de l’afficher (la mise en page). Pour cela, la plateforme WordPress essaie de trouver le ou l’ensemble de templates le(s) plus approprié(s) parmi les fichiers que contient votre thème. Il se base pour faire son choix sur la hiérarchie des templates présentées ci-dessous.

La hiérarchie des templates est la liste des fichiers templates avec lesquels WordPress est familier. WordPress se base sur leurs rapports hiérarchiques pour décider de choisir plutôt tel fichier que tel autre. Le tableau de la hiérarchie des templates peut être comparé à un arbre de décision. Quand WordPress cherche à trouver comment afficher telle ou telle page, il descend dans la hiérarchie jusqu’à trouver le premier fichier template qui correspond à la requête. Par exemple, si un internaute cherche à accéder à l’adresse : http://yoursite.com/category/news, WordPress cherchera le bon template en procédant dans cet ordre :

1. category-{slug}.php: in this case category-news.php
2. category-{id}.php>: s’il s’agit de la catégorie 5 par exemple, WordPress cherchera à trouver un fichier template nommé « category-5 ».
3. category.php
4. archive.php
5. index.php

Le fichier index.php est tout en bas de la hiérarchie. En clair, il sera utilisé pour afficher tous les contenus qui n’utilisent pas un fichier template spécifique. Si, au contraire, un fichier template se positionne plus haut dans la hiérarchie, ce sera ce template qu’utilisera automatiquement WordPress pour afficher le contenu en question.

Découvrez notre guide complet pour transformer votre site WordPress en site ecommerce avec WooCommerce.

A quoi sert un template de page wordpress ?

Pour les « pages » WordPress, le template standard utilisé est généralement le bien nommé « page.php ». A moins qu’il existe dans votre thème un fichier template plus spécifique (par exemple archive.php pour afficher les pages d’archive), WordPress utilisera le template page.php pour afficher toutes les pages de votre site.

Toutefois, dans beaucoup de cas, il est nécessaire de changer le design, l’apparence et les fonctionnalités des pages. Par exemple si vous êtes une marketplace et que vous voulez créer des pages de formulaire à destination de vos partenaires potentiels. Pour cette page de La Fabrique du Net, par exemple, nous n’utilisons évidemment pas le template page.php.

C’est là qu’interviennent les templates de page. Les templates de page personnalisés permet de personnaliser chaque partie de votre site WordPress sans que cela n’affecte le reste du site. Avant d’entrer dans le détail du comment ça marche, un conseil. Editer des fichiers templates implique de changer des fichiers dans votre thème WordPress. Il est fortement conseillé de travailler sur un thème enfant pour faire vos manipulations. Cela vous évitera de mettre en danger votre site web.

Découvrez notre guide complet pour sécuriser votre site WordPress.

Comment personnaliser les templates de pages wordpress

Il y a trois principales techniques pour utiliser des templates de page personnalisés dans WordPress :

• Ajouter des expressions conditionnelles dans un fichier template existant.
• Créer un fichier template positionné plus haut dans la hiérarchie que le template existant.
• Assigner manuellement des templates à chacune des pages de votre site.

#1 Utiliser des expressions conditionnelles dans des fichiers templates par défaut

La première solution consiste à ajouter des expressions ou balises conditionnelles dans un fichier template que vous utilisez déjà. Comme leur nom l’indique, ces expressions permettent de créer des fonctions qui seront exécutées uniquement si une condition est remplie.

En général, les expressions conditionnelles sont ajoutées dans le fichier page.php de votre thème WordPress. Cela permet de limiter les changements à la page d’accueil, aux pages de blog et aux autres pages de votre site. Voici quelques unes des expressions conditionnelles les plus utilisées :

• is_page(): pour cibler une page précise. Vous pouvez utilisez l’identifiant de la page, le Title ou l’URL.
• is_home(): pour appliquer les changements uniquement sur la page d’accueil.
• is _category(): pour cibler les pages catégories. Là encore, vous pouvez choisir d’utiliser l’ID de la catégorie, son Title ou son URL.
• is_single(): pour appliquer les changements uniquement à un article de blog ou à des éléments importés (attachments).
• is_archive(): pour cibler les pages d’archives.
• is_404(): pour ne modifier que la page d’erreur 404.

Par exemple, le code ci-dessous permet d’utiliser un header spécifique pour la page produit de votre site web. Ce code indique à WordPress qu’il faut charger le header « header-shop.php » quand la page à charger est la page boutique (http://yoursite.com/products).

    if ( is_page('products') ) {    get_header( 'shop' );  } else {    get_header();  }    

Ce cas peut se présenter si par exemple vous souhaitez afficher une image différente dans le header de votre page boutique, ou bien intégrer un menu personnalisé. Les expressions conditionnelles ne sont pas limitées à une seule page. Vous pouvez créer plusieurs expressions :

    if ( is_page('products') ) {    get_header( 'shop' );  } elseif ( is_page( 42 ) ) {    get_header( 'about' );  } else {    get_header();  }    

Dans ce deuxième exemple, on retrouve la première expression qui indique à WordPress d’afficher le header boutique sur la page boutique. Mais, en plus, on demande ici à WordPress d’afficher le header-about.php sur la page avec l’identifiant 42. Pour toutes les autres pages, c’est le fichier du header standard qui sera utilisé.

Découvrez 9 techniques pour améliorer la vitesse de chargement de votre site WordPress.

#2 Créer un fichier template dans la hiérarchie des templates WordPress

Les expressions conditionnelles sont une technique très utile pour opérer de petits changements sur vos templates de page. Bien sûr, vous pouvez aussi faire de plus gros changements, en multipliant les expressions conditionnelles. Mais c’est une méthode un peu laborieuse. Si vous souhaitez effectuer de gros changements, le mieux est de créer un fichier template. Une des manières de le faire est d’utiliser la hiérarchie des templates de WordPress. Comme nous l’avons vu, WordPress descend la hiérarchie des fichiers possibles et choisit le premier qui convient. Pour les pages, la hiérarchie est la suivante :

• Template de page personnalisé.
• page-{slug}.php
• page-{id}.php
• page.php
• index.php

Tout en haut de la hiérarchie, on trouve les templates personnalisés qui sont directement assignés à une page en particulier. Si l’un d’entre eux existe, WordPress utilisera ce template personnalisé sans se soucier de l’existence d’autres templates. On reparlera tout à l’heure des templates de page personnalisés. Poursuivant sa descente dans la hiérarchie, WordPress cherchera ensuite s’il existe un template de page qui inclut le « slug », le mot-clé principal de la page. Par exemple, si vous avez un fichier template nommé page-about.php dans votre thème, WordPress utilisera ce fichier pour afficher la page « About ». S’il n’y a pas de fichier comprenant le slug de la page, WordPress portera son attention sur l’identifiant de la page. Si votre page a pour identifiant « 5 », WordPress utilisera le fichier page-5.php. S’il n’y a pas de fichier page-5.php, il utilisera le fichier template de base : page.php. S’il n’y a pas de fichier page.php, WordPress utilisera le template index.php pour afficher la page en question.

#3 Assigner manuellement des templates à chacune des pages de votre site

Dans l’option précédente, l’idée est de fournir à WordPress un fichier template personnalisé qui sera automatiquement utilisé en raison de sa place en pole position dans la hiérarchie des templates. Mais vous pouvez aussi adopter une approche manuelle. Lorsque vous éditez une page depuis l’interface WordPress, vous indiquez à WordPress quel template utiliser parmi la liste de ceux à disposition (cette liste comprenant les templates par défaut et les templates personnalisés). Sur l’éditeur de page, dans le champ « Attributs de page », figure le menu « Modèle ».

En cliquant sur ce menu, cela fait dérouler la liste de tous les fichiers templates de votre thème. Pour appliquer le template de votre choix, vous n’avez qu’à le sélectionner et sauvegarder la page.

Comment créer un template de page wordpress en 6 étapes

Les deux dernières techniques que nous vous avons présentées suppose que vous ayez déjà créé votre ou vos templates WordPress. Nous allons maintenant vous montrer comment créer un template de page WordPress, étape par étape.

Etape #1 : Trouver le template par défaut

Pour commencer, nous vous conseillons de copier le template que vous utilisez actuellement sur la page que vous voulez modifier. C’est toujours plus simple de modifier un code existant que de créer un code à partir de rien. En général, on utilise comme base le template page.php. Si vous n’arrivez pas à identifier quel fichier template est utilisé sur la page que vous voulez modifier, vous pouvez utiliser le plugin What The File. Pour la démonstration, nous allons utiliser le thème Twenty Twelve. Voici à quoi ressemble le code du fichier traditionnel page.php :

    <?php  /**   * The template for displaying all pages   *   * This is the template that displays all pages by default.   * Please note that this is the WordPress construct of pages   * and that other 'pages' on your WordPress site will use a   * different template.   *   * @package WordPress   * @subpackage Twenty_Twelve   * @since Twenty Twelve 1.0   */  get_header(); ?>      <div id="primary" class="site-content">      <div id="content" role="main">          <?php while ( have_posts() ) : the_post(); ?>          <?php get_template_part( 'content', 'page' ); ?>          <?php comments_template( '', true ); ?>        <?php endwhile; // end of the loop. ?>        </div><!-- #content --> </div><!-- #primary -->    <?php get_sidebar(); ?>  <?php get_footer(); ?>  

Rien de très original dans ce code. On retrouve les traditionnels calls pour le header et le footer, et la boucle php au milieu. Voici ce que cela donne :

Etape #2 : Faire une copie du fichier et le renommer

Une fois que vous avez identifié le fichier template par défaut, vous devez en faire une copie. C’est sur la copie que vous ferez les changements sur la page. Vous devez donner un nom à cette copie pour ne pas confondre les fichiers. Pour le nom, vous êtes complètement libre (enfin presque : il ne faut pas que le nom commence par un nom de fichier réservé par WordPress du genre « index » ou « home »). Nous vous conseillons de choisir un nom qui qui reflète l’usage que vous voulez faire du fichier template. Par exemple : « custom-full-width.php ».

Etape #3 : Personnaliser le header du fichier template

Vous devez ensuite indiquer à WordPress que ce nouveau fichier est un fichier template personnalisé. Pour cela, vous devez ajuster le header du fichier de cette manière :

  <?php  /*   * Template Name: Custom Full Width   * description: >-    Page template without sidebar   */    // Additional code goes here...  

Le nom derrière « Template Name » est le nom qui apparaîtra dans l’éditeur de page dans la fenêtre « Attributs de page ». Ici : Custom Full Width.

Etape #4 : Personnaliser le code de votre template WordPress

Il est maintenant temps de mettre les mains dans le cambouis et de personnaliser le code du template. Dans notre exemple, nous voulons supprimer le sidebar de la page.. C’est assez simple en l’occurrence : il suffit de supprimer <?php get_sidebar(); ?> du code. Le code du template personnalisé ressemble donc à ça :

  <?php  /*   * Template Name: Custom Full Width   * description: >-    Page template without sidebar   */    get_header(); ?>    <div id="primary" class="site-content">    <div id="content" role="main">        <?php while ( have_posts() ) : the_post(); ?>        <?php get_template_part( 'content', 'page' ); ?>        <?php comments_template( '', true ); ?>      <?php endwhile; // end of the loop. ?>      </div><!-- #content -->  </div><!-- #primary -->    <?php get_footer(); ?>  

Etape #5 : Charger le template de page

Après avoir enregistré le fichier personnalisé, vous devez le charger sur votre site. Les fichiers templates personnalisés peuvent être chargés en différents endroits pour être reconnus par WordPress. Vous avez le choix entre :

• Le dossier de votre thème actif (thème enfant).
• Le dossier de votre principal thème parent.
• Un sous-dossier dans l’un ou l’autre des dossiers (parent ou enfant).

Personnellement, nous vous conseillons de créer un dossier page_templates dans votre thème enfant et d’y charger tous vos fichiers templates de page personnalisés. Cela permet de voir en un clin d’oeil tous vos templates.

Etape #6 : Activer le fichier template

C’est la dernière étape : vous devez activer le template. Comme nous l’avons vu tout à l’heure, vous pouvez le faire depuis l’éditeur de page (Attributs de page => Modèles). Une fois le template choisi, sauvegardez la page. Et voilà ! Voici à quoi ressemble la page sans le sidebar.

Ce n’est finalement pas très compliqué comme vous pouvez le constater. A force de pratique, ça devient un jeu d’enfant.

5 exemples pour personnaliser son template de page WordPresss

Nous allons maintenant vous présenter 5 exemples d’utilisation des templates personnalisés sur WordPress.

Exemple #1 de template WordPress : full-width page

Ce premier exemple est une version avancée du template de démonstration que nous avons créé tout à l’heure. Dans notre exemple précédent, nous nous sommes contentés de supprimer le sidebar de la page en supprimant <?php get_sidebar(); ?> du code. Nous aimerions maintenant faire en sorte que le panneau principal (l’endroit où il y a le contenu de la page) prenne toute la largeur de la page, c’est-à-à-dire qu’il s’étende à droite pour ne plus avoir l’espace vide du sidebar. Pour cela, il faut modifier le CSS, et plus précisément ce morceau de code :

  .site-content {    float: left;    width: 65.1042%;  }  

L’attribut width, ici, limite la largeur du contenu central à 65.1042% de la largeur totale de la page. Il faut augmenter ce pourcentage. L’erreur consisterait à porter le pourcentage à 100%, car cela affecterait toutes les autres pages du site – y compris celles qui ont des sidebars…Ce n’est pas l’objectif. Ce que vous devez faire, c’est ajouter class=“site-content-fullwidth”à votre template personnalisé :

  <?php  /*   * Template Name: Custom Full Width   * description: >-    Page template without sidebar   */    get_header(); ?>    <div id="primary" class="site-content-fullwidth">    <div id="content" role="main">        <?php while ( have_posts() ) : the_post(); ?>        <?php get_template_part( 'content', 'page' ); ?>        <?php comments_template( '', true ); ?>      <?php endwhile; // end of the loop. ?>      </div><!-- #content -->  </div><!-- #primary -->    <?php get_footer(); ?>  

Vous pouvez maintenant modifier le CSS et porter la largeur à 100% :

  .site-content-fullwidth {    float: left;    width: 100%;  }  

Ce qui donne le résultat suivant :

Exemple #2 de template WordPress : la page erreur 404

La page erreur 404 est la page sur laquelle atterrit l’internaute lorsqu’il essaie d’accéder à une page de votre site web qui n’existe pas (soit parce qu’il a fait une erreur de frappe dans l’URL, soit parce que l’URL de la page a changé et que les redirections n’ont pas été bien faites). Le risque, quand un internaute arrive sur la page Erreur 404, c’est qu’il décide de quitter le site web.

Coder une page Erreur 404 à partir de rien, from scratch, est laborieux. Surtout si vous n’êtes pas à l’aise avec la programmation. La meilleure solution consiste à ajouter des zones de widgets dans le fichier template existant pour que vous puissiez facilement modifier l’affichage de la page par glissé-déposé. Nous allons donc partir du fichier 404.php présent dans le thème Twenty Twelve. Mais avant de faire tout changement sur ce fichier, nous allons commencer par créer un nouveau widget en insérant le code suivant dans le fichier functions.php :

  register_sidebar( array(    'name' => '404 Page',    'id' => '404',    'description'  => __( 'Content for your 404 error page goes here.' ),    'before_widget' => '<div id="error-box">',    'after_widget' => '</div>',    'before_title' => '<h3 class="widget-title">',    'after_title' => '</h3>'  ) );  

Cela permet d’afficher le nouveau widget dans le back-end de WordPress. Pour être sûr qu’il s’affiche sur le site, il faut ajouter cette ligne de code dans la page 404 à la place appropriée :

  <?php dynamic_sidebar( '404' ); ?>  

Dans notre cas, on cherche à remplacer le formulaire de recherche (<?php get_search_form(); ?>) par le nouveau widget, ce qui donne :

  <?php  /**   * The template for displaying 404 pages (Not Found)   *   * @package WordPress   * @subpackage Twenty_Twelve   * @since Twenty Twelve 1.0   */    get_header(); ?>    <div id="primary" class="site-content">    <div id="content" role="main">        <article id="post-0" class="post error404 no-results not-found">        <header class="entry-header">          <h1 class="entry-title"><?php _e( 'This is somewhat embarrassing, isn&rsquo;t it?', 'twentytwelve' ); ?></h1>        </header>          <div class="entry-content">          <?php dynamic_sidebar( '404' ); ?>        </div><!-- .entry-content -->      </article><!-- #post-0 -->      </div><!-- #content -->  </div><!-- #primary -->    <?php get_footer(); ?>  

Une fois le nouveau template chargé sur le site, vous pouvez remplir l’espace du widget par le contenu de votre choix (depuis l’éditeur de page) :

Voici à quoi ressemble la nouvelle page d’erreur 404 :

Exemple #3 de template WordPress : afficher des custom post types

Les custom post types permettent de présenter de manière optimale des contenus spéciaux. En particulier les contenus comprenant des points de données et des éléments de design. Dans notre exemple, nous allons créer une page de références clients. Sur cette page, nous voulons que chaque référence soit illustrée d’une image et comprenne trois bullets points de description.

La première étape consiste à créer le custom post type. Cela peut être fait manuellement ou via un plugin. Vous pouvez par exemple utiliser le plugin « Pods« , qui permet très facilement de créer des CCP et des champs personnalisés. Une fois que vous avez installé et activé le plugin, ajoutez un custom post. Pour le slug, choisissez « portfolio » par exemple. Personnalisez les champs du CCP, en ajoutant par exemple une featured image. Sauvegardez votre custom post type.

Une fois que vous avez votre portfolio post type, il faut l’afficher sur le site. La première à chose est de créer la page en question. Attention, si vous avez choisissez « portfolio » pour le slug de votre CPT, la page que vous allez créer ne peut pas avoir le même slug. Vous pouvez choisir par exemple le slug clients-portfolio:

Sur la page, vous pouvez commencer par éditer l’introduction de la page. Une fois que c’est fait, il faut ajouter en-dessous la liste des références clients en utilisant le custom post type créé à partir du plugin Pods. Pour ce faire, nous allons encore une fois partir du fichier page.php, en faire une copie et appeler cette copie portfolio-template.php. Nous modifions le header :

  <?php  /*   * Template Name: Portfolio Template   * description: >-    Page template to display portfolio custom post types    * underneath the page content   */  

Cette fois, nous allons aussi devoir modifier le template original page.php Lorsque vous jeter un oeil au code de page.php, vous pouvez constater que ce fichier fait appel à un autre fichier au milieu du code. Ce fichier c’est content.page.php (<?php get_template_part( ‘content’, ‘page’ ); ?>). Dans ce fichier, on trouve le code suivant :

  <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>    <header class="entry-header">      <?php if ( ! is_page_template( 'page-templates/front-page.php' ) ) : ?>      <?php the_post_thumbnail(); ?>      <?php endif; ?>      <h1 class="entry-title"><?php the_title(); ?></h1>    </header>      <div class="entry-content">      <?php the_content(); ?>      <?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>    </div><!-- .entry-content -->    <footer class="entry-meta">      <?php edit_post_link( __( 'Edit', 'twentytwelve' ), '<span class="edit-link">', '</span>' ); ?>    </footer><!-- .entry-meta -->  </article><!-- #post -->  

C’est ici que le Title et le contenu de la page est appelé. Nous avons besoin de ce code. Il faut le copier sur le fichier page.php. Ce qui donne :

  get_header(); ?>  <div id="primary" class="site-content">    <div id="content" role="main">        <?php while ( have_posts() ) : the_post(); ?>        <header class="entry-header">          <?php the_post_thumbnail(); ?>          <h1 class="entry-title"><?php the_title(); ?></h1>        </header>          <div class="entry-content">          <?php the_content(); ?>        </div><!-- .entry-content -->          <?php comments_template( '', true ); ?>      <?php endwhile; // end of the loop. ?>      </div><!-- #content -->  </div><!-- #primary -->    <?php get_sidebar(); ?>  <?php get_footer(); ?>  

Pour intégrer les custom post types sur la page, il faut ajouter le code suivant juste sous<?php the_content(); ?> :

  <?php    $args = array(      'post_type' => 'portfolio', // enter custom post type      'orderby' => 'date',      'order' => 'DESC',    );      $loop = new WP_Query( $args );    if( $loop->have_posts() ):    while( $loop->have_posts() ): $loop->the_post(); global $post;      echo '<div class="portfolio">';      echo '<h3>' . get_the_title() . '</h3>';      echo '<div class="portfolio-image">'. get_the_post_thumbnail( $id ).'</div>';      echo '<div class="portfolio-work">'. get_the_content().'</div>';      echo '</div>';    endwhile;    endif;  ?>  

Et voici la page portfolio avec les custom post types :

Le résultat n’est pas top. On peut y ajouter des éléments de style pour améliorer l’apparence :

  /* Portfolio posts */    .portfolio {    -webkit-box-shadow: 0px 2px 2px 0px rgba(50, 50, 50, 0.75);    -moz-box-shadow:    0px 2px 2px 0px rgba(50, 50, 50, 0.75);    box-shadow:         0px 2px 2px 0px rgba(50, 50, 50, 0.75);    margin: 0 0 20px;    padding: 30px;  }  .portfolio-image {    display: block;    float: left;    margin: 0 10px 0 0;    max-width: 20%;  }  .portfolio-image img {    border-radius: 0;  }  .portfolio-work {    display: inline-block;    max-width: 80%;  }  .portfolio h3{    border-bottom: 1px solid #999;    font-size: 1.57143rem;    font-weight: normal;    margin: 0 0 15px;    padding-bottom: 15px;  }  

Ce qui donne :

Voici le code complet du fichier template portfolio :

  <?php  /*   * Template Name: Portfolio Template   * description: <-    Page template to display portfolio custom post types    * underneath the page content   */    get_header(); ?<    <div id="primary" class="site-content"<    <div id="content" role="main"<        <?php while ( have_posts() ) : the_post(); ?<          <header class="entry-header">          <?php the_post_thumbnail(); ?>          <h1 class="entry-title"><?php the_title(); ?<</h1>        </header>          <div class="entry-content">          <?php the_content(); ?>          <?php            $args = array(              'post_type' => 'portfolio', // enter custom post type              'orderby' => 'date',              'order' => 'DESC',            );              $loop = new WP_Query( $args );            if( $loop-<have_posts() ):            while( $loop-<have_posts() ): $loop-<the_post(); global $post;              echo '<div class="portfolio">';              echo '<h3>' . get_the_title() . '</h3>';              echo '<div class="portfolio-image">'. get_the_post_thumbnail( $id ).'</div>';              echo '<div class="portfolio-work">'. get_the_content().'</div>';              echo '</div>';            endwhile;            endif;          ?<        </div><!-- #entry-content -->        <?php comments_template( '', true ); ?>                     <?php endwhile; // end of the loop. ?>                    </div><!-- #content -->  </div><!-- #primary -->    <?php get_sidebar(); ?>  <?php get_footer(); ?>  

Découvrez notre Top 5 des plugins WordPress pour traduire votre site internet.

Exemple #4 de template WordPress : la page contributeurs (avec des avatars)

Autre exemple d’utilisation des templates WordPress personnalisés : la page contributeurs. Nous voulons créer une page qui liste l’ensemble des contributeurs du site, en intégrant leur image et le nombre de posts qu’ils ont publié. Le résultat final que nous cherchons à atteindre est celui-ci :

Pour obtenir ce résultat, nous allons partir du fichier template créé dans l’exemple précédent. On va y ajouter le code nécessaire à l’affichage de liste des contributeurs. Pour gagner du temps, nous allons prendre pour base le fichier contributors.php, qui se trouve dans le dossier page-templates du thème Twenty Foorteen. Ce fichier ne contient qu’un seul call : twentyfourteen_list_authors();. On peut déduire qu’il fait référence à une fonction du fichier function.php du thème Twenty Fourteen. La partie du code qui nous intéresse est celle-ci :

  <?php  // Output the authors list.  $contributor_ids = get_users( array(    'fields'  => 'ID',    'orderby' => 'post_count',    'order'   => 'DESC',    'who'     => 'authors',  ));    foreach ( $contributor_ids as $contributor_id ) :  $post_count = count_user_posts( $contributor_id );    // Move on if user has not published a post (yet).    if ( ! $post_count ) {      continue;    }  ?>    <div class="contributor">    <div class="contributor-info">      <div class="contributor-avatar"><?php echo get_avatar( $contributor_id, 132 ); ?></div>      <div class="contributor-summary">        <h2 class="contributor-name"><?php echo get_the_author_meta( 'display_name', $contributor_id ); ?></h2>        <p class="contributor-bio">          <?php echo get_the_author_meta( 'description', $contributor_id ); ?>        </p>        <a class="button contributor-posts-link" href="<?php echo esc_url( get_author_posts_url( $contributor_id ) ); ?>">          <?php printf( _n( '%d Article', '%d Articles', $post_count, 'twentyfourteen' ), $post_count ); ?>        </a>      </div><!-- .contributor-summary -->    </div><!-- .contributor-info -->  </div><!-- .contributor -->    <?php  endforeach;  ?>  

Il faut cette fois encore ajouter le call sous <?php the_content(); ?>

On peut améliorer le rendu visuel en ajoutant au fichier des éléments de style :

  /* Contributor page */    .contributor {    border-bottom: 1px solid rgba(0, 0, 0, 0.1);    -webkit-box-sizing: border-box;    -moz-box-sizing: border-box;    box-sizing:      border-box;    display: inline-block;    padding: 48px 10px;  }  .contributor p {    margin-bottom: 1rem;  }  .contributor-info {    margin: 0 auto 0 168px;  }  .contributor-avatar {    border: 1px solid rgba(0, 0, 0, 0.1);    float: left;    line-height: 0;    margin: 0 30px 0 -168px;    padding: 2px;  }  .contributor-avatar img{    border-radius: 0;  }  .contributor-summary {    float: left;  }  .contributor-name{    font-weight: normal;    margin: 0 !important;  }  .contributor-posts-link {    background-color: #24890d;    border: 0 none;    border-radius: 0;    color: #fff;    display: inline-block;    font-size: 12px;    font-weight: 700;    line-height: normal;    padding: 10px 30px 11px;    text-transform: uppercase;    vertical-align: bottom;  }  .contributor-posts-link:hover {    color: #000;    text-decoration: none;  }  

Et voilà ! Merci Twenty Fourteen !

Découvrez 15 conseils d’ergonomie pour améliorer l’expérience des visiteurs sur votre site web.

Exemple #5 de template WordPress : pages d’archives personnalisées

Le thème Twenty Twelve propose un template personnalisé pour les pages d’archives. Ce fichier est utilisé par WordPress pour les pages qui listent les anciens articles d’une catégorie donnée. On peut enrichir ces pages d’archives en créant un template personnalisé. On va reprendre le template utilisé jusqu’à présent, en ajoutant cette fois sous <?php the_content(); ?>le code suivant :

  <div class="archive-search-form"><?php get_search_form(); ?></div>    <h2>Archives by Year:</h2>  <ul><?php wp_get_archives('type=yearly'); ?></ul>    <h2>Archives by Month:</h2>  <ul><?php wp_get_archives('type=monthly'); ?></ul>    <h2>Archives by Subject:</h2>  <ul> <?php wp_list_categories('title_li='); ?></ul>  

On peut aussi ajouter des éléments de style pour la barre de recherche :

  .archive-search-form {    padding: 10px 0;    text-align: center;  }  

Ce qui donne le résultat suivant :

Voici le code entier du template personnalisé des pages d’archives :

  <?php  /**   * Template Name: Custom archive template   *   */    get_header(); ?>    <div id="primary" class="site-content">    <div id="content" role="main">        <?php while ( have_posts() ) : the_post(); ?>          <header class="entry-header">          <?php the_post_thumbnail(); ?>          <h1 class="entry-title"><?php the_title(); ?></h1>        </header>          <div class="entry-content">          <?php the_content(); ?>            <div class="archive-search-form"><?php get_search_form(); ?></div>            <h2>Archives by Year:</h2>          <ul><?php wp_get_archives('type=yearly'); ?></ul>            <h2>Archives by Month:</h2>          <ul><?php wp_get_archives('type=monthly'); ?></ul>            <h2>Archives by Subject:</h2>          <ul><?php wp_list_categories('title_li='); ?></ul>        </div><!-- #entry-content -->    <?php comments_template( '', true ); ?>                     <?php endwhile; // end of the loop. ?>                 </div><!-- #content -->  </div><!-- #primary -->    <?php get_sidebar(); ?>  <?php get_footer(); ?>  

Dans votre montée en compétences sur WordPress, apprendre à créer et à utiliser les templates de pages est une étape importante. Les templates WordPress permettent de personnaliser votre site web de manière assez simple lorsqu’on a compris la mécanique. Les possibilités sont quasiment infinies. Les 5 exemples que nous vous avons présenté ont uniquement pour fonction de vous faire prendre conscience de tout ce qu’on peut faire avec les templates WordPress. Ils sont loin d’être exhaustifs. A vous de jouer !