Création d'un thème WordPress

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

L'autre document indispensable au thème est le fichier index.php qui affiche la boucle des articles et des pages (si le modèle des pages est absent). C'est la partie blog du thème qui sera aussi notre page d'accueil.

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.

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 bloginfo('template_directory'); ?>/style.css">
        <meta charset="utf-8">
        <title><?php bloginfo('name') ?></title>
    </head>
    <body>

La fonction bloginfo('template_directory') renvoie le chemin du dossier du thème. Cela permet de relier dynamiquement la feuille de style, quelque soit l'endroit où WordPress est hébergé.

La fonction bloginfo('name') renvoie le titre du site indiqué dans la rubrique Réglages généraux 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 bloginfo('template_directory'); ?>/style.css">
        <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 register_my_menu() {
  register_nav_menu('menu-principal',__( 'Menu principal' ));
}
add_action( 'init', 'register_my_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 d'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 register_my_menu() {
  register_nav_menu('menu-principal',__( 'Menu principal' ));
}
add_action( 'init', 'register_my_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 grâce à 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(); ?>

Articles connexes