Créer un modèle de page (template) WP personnalisé

Dans cet exemple on crée un modèle de page (dite template) avec des contenus personnalisés, avec une colonne latérale (sidebar) et sans pied de page (footer) pour le thème twentyeleven ou son child theme.

Créer le fichier
Créez un nouveau fichier PHP qui correspondra à votre modèle. Nommez-le d'une façon différencié des autres (exemple-template.php) et sauvegardez le dans le dossier de votre thème (/wp-content/themes/votre-theme/).

 
 
 
 

Nom du template et les codes d'entête
Donnez un nom du template qui doit être unique.
Copiez les codes de la tête d'une page de votre thème.
Si vous utilisez un child theme WP du thème twentyten ou twentyeleven, vous pouvez copier la structure du fichier page.php qui est le template des pages par défaut. C'est ce que j'ai fait pour mon exemple.

<?php
/**
* Template Name: Exemple Template
* Description: A Page Template that adds its content with sidebar and without footer / Un modèle de page avec contenu personnalisé, avec colonne latérale et sans pied de page
*
* @package WordPress
* @subpackage IL-Design
* @since IL Web-Design 1.0
*/

La structure
Copiez la structure de vos pages et corrigez la selon votre besoin.
Dans mon exemple je ne voulais pas de commentaires, ni de pied de page (footer), donc j'ai supprimé les lignes : <?php comments_template( '', true ); ?> et <?php get_footer(); ?>.

...
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 endwhile; // end of the loop. ?>

        </div><!-- #content -->

        <?php get_sidebar(); ?>
    </div><!-- #primary -->

Contenu personnalisé
Dans le <div id="content"> vous pouvez rajouter des contenus : des textes, des fichiers médiatiques ou/et des éléments de design à votre choix ou/et appeler des extensions (plugins) avec un code php, pour que ce modèle de page les affiche par défaut. Un jour par exemple on voudrait afficher une fenêtre de dialogue d'un tchatch dans une page personnalisée. Ou afficher un diaporama d'une galerie photo dans une page où on ne peut pas commenter et on ne voit pas des widgets du pied de page...

...
        <div id="content" role="main">

            <?php while ( have_posts() ) : the_post(); ?>
                <?php get_template_part( 'content', 'page' ); ?>
                <div id="exemple-contenu"><img src="http://www.votre-site.com/votre-image.jpg" alt="My logo" title="My logo" /></div>
            <?php endwhile; // end of the loop. ?>

        </div><!-- #content -->
...

Appliquer le style
On peut donner un ID ou class au div (#exemple-contenu) pour qu'on puisse lui appliquer un style (dans la feuille de style - style.css du thème).
Selon votre thème, il peut arriver que vous deviez ajuster la largeur du #content pour que la barre latérale puisse se positionner à coté.

 

Créer la page
Créez une page (pas un article !) à laquelle vous voulez appliquer le modèle de page. A l'édition de la page, à coté droite, juste au-dessus des choix des catégories, où c'est marqué "Format", cherchez le nom que vous avez donné au template (exemple-template.php) et choisissez, puis enregistrez le.

L'ensemble des codes :

<?php
/**
* Template Name: Exemple Template
* Description: A Page Template that adds its content with sidebar and without footer / Un modèle de page avec contenu personnalisé, avec colonne latérale et sans commentaires et sans pied de page
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/


get_header(); ?>

<div id="primary">
    <div id="content" role="main">

        <?php while ( have_posts() ) : the_post(); ?>
            <?php get_template_part( 'content', 'page' ); ?>
            <div id="contenu-exemple-div" style="text-align:center;">
                <img src="http://www.igorlaszlo.com/logo.jpg" alt="IL Design logo" />
            </div>
               
        <?php endwhile; // end of the loop. ?>

    </div><!-- #content -->
       
    <?php get_sidebar(); ?>
</div><!-- #primary -->

Les commentaires sont fermés.