image_pdf

Création d'un thème WordPress

image_pdf

Dossier du thème

Créez un dossier nommé Jonathan et déposez-le dans wordpress/wp-content/themes

Feuille de style

Créez un fichier nommé style.css et écrivez-y le code suivant :

/*
Theme Name: Jonathan Doe
Theme URI: http://www.johndoe.com/
Description: Le theme créé par Jonathan Doe
Version: 0.1
Author: Jonathan Doe
*/

body {
 background-color: #ddd;
 font-family: arial;
}

Fichier index.php

Un autre fichier indispensable au thème est index.php qui affiche la boucle des articles et des pages (si le modèle des pages page.php est absent). C'est aussi la page d'accueil, en absence du modèle spécifique pour la page d'accueil nommé home.php.

Voici son contenu :

<h1>Mes articles</h1>
    <?php while(have_posts()) : the_post(); ?>
    <article>
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
    </article>
<?php endwhile; ?>

Suite à l'enregistrement du fichier index.php dans le dossier du thème Jonathan, votre thème sera activable dans le Tableau de bord.

Voici à quoi ressemble la page d'accueil :

Vous pouvez désormais ajouter des articles avec le Tableau de bord.

Songez que les fichiers index.php et style.css enregistrés dans un dossier suffisent à donner naissance à un thème. A ce stade, on déjà peut profiter de la convivialité du Tableau de bord et de la richesse des extensions. WordPress est formidable.

Entête et pied de page

Vous avez sans doute constaté que notre site est dépourvu d'un entête et d'un pied de page. Nous allons remédier à cela.

Entête

Tapez et enregistrez sous le nom header.php le code suivant :

<!doctype html>
<html lang="fr">
    <head>
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
        <meta charset="utf-8">
        <title><?php bloginfo('name') ?></title>
    </head>
    <body>

La fonction get_stylesheet_uri() renvoie le chemin de la feuille de style principale style.css. Cela permet de relier dynamiquement la feuille de style, quelque soit l'adresse de votre site.

La fonction bloginfo('name') renvoie le titre du site indiqué dans la rubrique Réglages -> Général du Tableau de bord.

Pied de page

Tapez et enregistrez sous le nom footer.php le code suivant :

        <footer>
            <p>© 2017 Jonathan Doe - Tous droits réservés</p>
        </footer>
    </body>
</html>

Intégration de l'entête et du pied de page dans index.php

Complétons la page index.php en ajoutant les fonctions get_header() et get_footer() pour intégrer l'entête et le pied de page :

<?php get_header(); ?>
        <h1>Mes articles</h1>
        <?php while(have_posts()) : the_post(); ?>
        <article>
            <h2><?php the_title(); ?></h2>
            <?php the_content(); ?>
        </article>
        <?php endwhile; ?>
<?php get_footer(); ?>

L’entête permet notamment de lier la feuille de style et de donner un titre à notre site, au moyen des balises <link> et <title> :

Modèle de page par défaut

Ajoutez le fichier page.php dans le dossier du thème pour créer un modèle pour l'ensemble de vos pages statiques. Le code est quasi identique à index.php. Le contenu de la page se retrouve dans la balise <article>

<?php get_header(); ?>
    <?php while( have_posts() ) : the_post(); ?>
        <article>
            <h1><?php the_title(); ?></h1>
            <?php the_content(); ?>  
        </article>
    <?php endwhile; ?>
<?php get_footer(); ?>

Ajouter un menu

Ajoutez un un fichier functions.php dans le dossier de votre thème et écrivez-y ceci :

<?php
function enregistre_mon_menu() {
    register_nav_menu( 'menu_principal', __( 'Menu principal' ) );
}
add_action( 'init', 'enregistre_mon_menu' );

Ce code permettra d'ajouter la gestion du menu dans le Tableau de bord, puis de signaler la présence d'un "Menu principal".

Vous pouvez maintenant créer des pages et un menu dans le Tableau de bord. Pensez à cocher la case Menu principal dans les réglages du menu.
Pour que le menu apparaisse en haut des pages et des articles, on ajoute la fonction wp_nav_menu() dans l'entête header.php.

<!doctype html>
<html lang="fr">
    <head>
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
        <meta charset="utf-8">
        <title><?php bloginfo('name') ?></title>
    </head>
    <body>
        <?php wp_nav_menu( array( 'theme_location' => 'menu_principal' ) ); ?>

Amélioration des articles

Sur la page présentant l'ensemble des articles (la page d'accueil par défaut), les images mises en avant sont souvent représentées par des vignettes au dessus d'un titre suivi d'un extrait de l'article. En cliquant sur le titre, l'internaute pourra atterrir sur une page développant l'article complet. Selon la charte graphique du thème, on pourra réafficher l'image mise en avant.

Images mises en avant

Si vous ajoutez un article, vous ne verrez pas de rubrique Image mise en avant dans le Tableau de bord. Pour l'ajouter il faut ajouter cette ligne dans le fichier functions.php :

add_theme_support('post-thumbnails');

Le fichier functions.php aura donc le code suivant :

<?php
add_theme_support('post-thumbnails');

function enregistre_mon_menu() {
    register_nav_menu( 'menu_principal', __( 'Menu principal' ) );
}
add_action( 'init', 'enregistre_mon_menu' );

Ensuite, on peut ajouter les images mises en avant sur les pages des articles index.php en plaçant la fonction the_post_thumbnail(). Le paramètre 'medium' permet d'afficher les vignettes avec une largeur de 300 pixels. On peut choisir d'autres valeurs comme 'thumbnail', 'large' ou 'full'.

Voici le code du fichier index.php mis à jour permettant l'affichage des extraits des articles avec des liens vers les articles complets :

<?php get_header(); ?>
        <h1>Mes articles</h1>
        <?php while(have_posts()) : the_post(); ?>
        <article>
            <?php the_post_thumbnail('medium'); ?>
            <a title="Voir l'article" href="<?php the_permalink(); ?>">
                <h2><?php the_title(); ?></h2>
            </a>
            <?php the_excerpt(); ?>  
        </article>
        <?php endwhile; ?>
<?php get_footer(); ?>

Pour que WordPress gère d'autres tailles pour les images mises en avant, il est possible de spécifier une largeur et une hauteur dans le fichier functions.php au moyen de la fonction set_post_thumbnail_size() :

<?php
add_theme_support('post-thumbnails');
set_post_thumbnail_size( 258, 145, true );

function enregistre_mon_menu() {
    register_nav_menu( 'menu_principal', __( 'Menu principal' ) );
}
add_action( 'init', 'enregistre_mon_menu' );

Extrait des articles

Dans le code ci-dessus, la fonction the_excerpt() permet d'afficher un extrait de l'article. Notez également que pour accéder à l'article complet, nous avons créé un lien avec la fonction the_permalink().

Article complet avec le modèle single.php

L'article complet utilisera un modèle de page stocké dans le fichier single.php. Le plus simple est de commencer par dupliquer page.php :

Voici le code de single.php :

<?php get_header(); ?>
    <?php while( have_posts() ) : the_post(); ?>
        <article>
            <h1><?php the_title(); ?></h1>
            <?php the_content(); ?>  
        </article>
    <?php endwhile; ?>
<?php get_footer(); ?>

Pour que les images à la unes exploitent la découpe indiquée dans functions.php, il faudra utiliser le paramètre array(258, 145) dans la fonction the_post_thumbnail().

<?php get_header(); ?>
        <h1>Mes articles</h1>
        <?php while(have_posts()) : the_post(); ?>
        <article>
            <?php the_post_thumbnail(array(258, 145)); ?>
            <a title="Voir l'article" href="<?php the_permalink(); ?>">
                <h2><?php the_title(); ?></h2>
            </a>
            <?php the_excerpt(); ?>  
        </article>
        <?php endwhile; ?>
<?php get_footer(); ?>

Conclusion

Le secret de la création d'un thème sous WordPress repose sur un pricipe simple : insérer la bonne fonction au bon endroit. Dès que maîtriserez ce concept, vous pourrez créer vos propres thèmes, ou adapter sur WordPress un site statique écrit en HTML/CSS.

Principales fonctions

Voici un tableau rassemblant les principales fonctions utilisées dans le thème :

Fonction Description
the_title() Affiche le titre de la page ou de l'article.
the_content() Affiche tout le contenu de la page ou de l'article.
the_excerpt() Affiche l'extrait de l'article.
the_permalink() Affiche le permalien de la page ou de l'article.
get_header() Inclut le fichier header.php.
get_footer() Inclut le fichier footer.php.
the_post_thumbnail() Insère le chemin de l'image mise en avant de l'article.
bloginfo('name') renvoie le titre du site indiqué dans Réglages -> Général.
bloginfo('description') renvoie le slogan du site indiqué dans Réglages -> Général.
home_url() Affiche l'URL du site. A utiliser avec la commande echo.
get_template_directory_uri() Affiche le chemin du dossier du thème. A utiliser avec la commande echo.
get_stylesheet_uri() Affiche le chemin de la feuille de style principale style.css. A utiliser avec la commande echo.
wp_nav_menu() Affiche le menu principale dans une zone de liste à puces.

Principaux fichiers du thème

Voici les fichiers que nous avons utilisés dans le thème :

Fonction Description
index.php Modèle universel de page ou d'article. Faute de modèle personnalisé pour les articles (article.php) ou les pages (page.php), c'est le modèle index.php qui sera utilisé.
style.css Feuille de style principale du thème. En début de fichier, la zone de commentaire contient des informations cruciales à propos du thème.
functions.php Fichier permettant d'ajouter des fonctionnalités à votre site. Il permet d'activer des options au Tableau de bord comme les menus ou les images mises en avant.
page.php Modèle pour les pages.
single.php Modèle pour les articles complets.
header.php Entête pour les pages et les articles.
footer.php Pied de page pour les pages et les articles.

Articles connexes