Comment créer un thème wordpress ?

Publié le 3 octobre 2011 - Developpement Web, Webdesign. Tags : , ,

 

Profitant de la mise à jour du papier peint de ce blog (attention, peinture fraiche), j’ai décidé de vous proposer un petit tutoriel destiné à vous expliquer comment créer un thème WordPress à partir d’un template HTML. Étant donné que l’on trouve un peu tout et n’importe quoi sur le sujet, ce petit article ne fera pas de mal. Pas que les informations proposées soient erronées, mais elle donnent souvent l’impression que la création / découpage d’un design pour WP est une tâche compliquée, alors qu’en fait, quelques notions de PHP suffisent…

Pour commencer, il faut savoir que WordPress est un moteur de blog/site fonctionnant comme tout site PHP qui se respecte, a savoir d’une imbrication subtile de classes et fonctions PHP qui, couplées à une base de données forment les fondations de votre site. Autours de cela gravite des éléments satellites, incluant un espace d’administration, des plugins, templates, etc.

Pour créer un thème, il va donc falloir découper votre design (au format HTML) selon un modèle spécifique prédéfini, et y inclure les éléments de base nécessaires au bon fonctionnement de WP.

A moins de travailler sur un serveur de pre-prod, vous n’aurez pas d’autre choix que de développer votre thème en local en utilisant un environnement de travail tel que EasyPHP (sauf si bien sûr vous avez envie de massacrer votre blog en live ;) ).

Structure d’une page

Dans sa forme la plus plus répandue, WordPress est composé de 11 fichiers .php (minimum 3 pour la forme la plus simple qui ne présente que peu d’intérêt) accompagnées d’une feuille de style, permettant de gérer l’intégralité des pages. Sur ces 11 fichiers, 4 seront communs à tout le site:

  1. header.php (entête),
  2. sidebar.php (barre latérale accueillant les plugins),
  3. footer.php (pied de page),
  4. functions.php (fonctions du thème)

Ces 3 fichiers seront appelés par vos pages afin de générer une page html complète à vos visiteurs. Au final donc si vous suivez, une page est composée de la sorte : header.php + page (category.php, single.php, home.php, etc. – nous verrons cela plus bas) + sidebar.php + footer.php.

Notons que sidebar.php est un cas particulier, puisqu’il est facultatif. Néanmoins, à quelques rares exceptions près ce fichier est toujours affiché sur les blogs (beaucoup on même 2 barres latérales), donc je pars du principe qu’il est nécessaire pour mes explications.

Visuellement, voici ce que ça donne :

comment créer thème WP : les zones
Le fichier functions.php n’est bien entendu pas visuellement présent dans le template.

Création d’un thème WP : les bases

Pour commencer la création de votre thème, vous devez commencer par créer le dossier (du nom de votre choix) qui accueillera les fichiers correspondant, et le placer dans ‘/wp-content/themes/’. Si vous appelez votre theme ‘SuperTuto’, cela donnera donc l’arborescence suivante : /wp-content/themes/SuperTuto/’.

A partir de ce moment, si vous allez dans l’admin de votre blog (Apparence -> thèmes,) vous verrez apparaitre votre thème. Pour modifier les caractéristiques de votre thème, crééez une feuille de style ‘style.css’ et placez ce code en début de page :

/*
Theme Name: Nom Du Theme
Theme URI: http://www.domaine.com/
Description: Votre description, bla, bla bla
Version: 1.0
Author: Votre Nom
Author URI: http://www.domaine2.com/
*/

Si vous voulez qu’une image s’affiche, faites une capture écran de votre thème (ou exportez pour le Web votre design .PSD) et nommez-la « screenshot.png ». (ce fichier, ainsi que style.css ci-dessous, et tous les ceux que nous allons voir après doivent se placer à la racine de votre thème).

Création d’un thème WP : découpage HTML

Maintenant que votre thème est en place, l’étape suivante consiste à découper le template HTML que vous avez préparé afin de le rendre compatible à la structure de WordPress. Normalement, cela ne devrait pas vous poser de problème particulier.

  • header.php doit contenir tout le haut de la page (entêtes, logo, menu, etc.) et s’arrêter avant le titre de vos pages. (Conservez la zone suivante correspondant à votre corps de texte dans un fichier index.php – on en aura besoin après)
  • sidebar.php doit contenir la zone ou seront accrochés les widgets
  • footer.php doit contenir le pied de page et la fin du code html du site.

Vous voici donc avec 3 fichiers (4 si l’on compte index.php) PHP en lieu et place de votre fichier .html d’origine. Copiez/collez vos styles CSS dans le fichier style.css précédemment créé pour finaliser votre découpage.

header.php

C’est ici que les choses un peu plus compliquées commencent.

Éléments à insérer dans le < head > :

  • Remplacez l’appel à votre feuille de styles CSS par :
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
  • Ajoutez (toujours dans le <head>) votre URL de PingBack :
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
  • Paramétrez les titres dynamiques de la balise <title> :
<title><?php the_title(); ?></title>
  • Si vous voulez injecter le titre de votre blog après le titre, ajoutez ceci (avant la fermeture de la balise):
wp_title( '|', true, 'right' );
 bloginfo( 'name' );
  • Balise meta description : de façon assez étrange, WordPress gère très mal cette balise dans le thème de base, il est donc nécessaire de l’optimiser légèrement. Ces paramètres devraient largement vous suffire :
<meta name="description" content="<?php
	if (is_home () ) {
		$descr =bloginfo( 'description' );
	} elseif ( is_category() ) {
		$descr = wp_strip_all_tags( category_description() );
	} elseif (is_single() ) {
		$descr = wp_strip_all_tags($post-&gt;post_content);
		$descr = MetaCut($descr);
	} elseif (is_tag()){
		$descr = wp_strip_all_tags( tag_description() );
	} else {
		$descr = '';
	}
echo $descr;
?>" />

Comme vous vous le devinez, les fonctions is_xxx() servent à savoir quel est le type de page en cours d’affichage (ces cas peuvent d’ailleurs être facilement adaptés à divers endroits du blog selon vos besoins). La fonction MetaCut() est disponible plus bas, dans le paragraphe concernant functions.php

  • Si vous avez des scripts nécessaires au bon fonctionnement de votre site, vous pouvez les ajouter dans votre thème (dans un sous dossier ‘js/’ par exemple) et les appeler ainsi :
<script src="<?php echo get_template_directory_uri(); ?>/js/votre javascript.js" type="text/javascript"></script>

Comme vous vous en doutez, la fonction get_template_directory_uri(); retourne l’emplacement de votre thème.

Éléments à insérer après < body > :

  • Pour afficher le nom de votre site, insérez ceci- à l’endroit désiré :
<?php bloginfo( 'name' ); ?>
  • Pour la description, insérez cela :
<?php bloginfo( 'description' ); ?>
  • Pour insérer un champ de recherche, ajoutez :
<?php get_search_form(); ?>
  • Si vous avez un lien pour revenir à l’accueil, mettez ceci dans le href= » » :
<?php echo esc_url( home_url( '/' ) ); ?>
  • Pour finir (très important!), pour le menu des « Pages », n’oubliez pas d’insérez cela :
<?php wp_nav_menu(); ?>

Par défaut, wordpress attribuera pour chaque page créée, un élément de liste non ordonnée (< ul > ), de la sorte :

<li><a>Lien</a></li>

Si votre menu n’a pas été prévu pour accueillir ce type de code HTML (c’est mal), vous pouvez toujours personnaliser l’affichage selon vos besoin, grâce à divers arguments (références de la fonction wp_nav_menu()).

sidebar.php

Il n’y a pas grand chose de spécial à afficher à cette endroit, nous avons juste besoin de rendre notre barre latérale Widget Ready, c’est à dire prête à accueillir des widgets. Coller simplement ce code :

<?php if ( is_active_sidebar( 'primary' ) ) : ?>
<?php dynamic_sidebar( 'primary' ); ?>
<?php else : ?>
<!-- Code HTML si vous n'avez pas de barre latérale widgetisée -->
<?php endif; ?>

En clair, si vous avez une barre latérale active (définie au point suivant – functions.php), on l’affiche, sinon vous affichez ce que vous voulez.

functions.php

C’est ici que vous définissez toutes les fonctions relatives à votre thème.

Pour que le code inséré dans la sidebar ci-dessus fonctionne, vous devez au préalable créer la sidebar correspondante. Pour procéder, copiez/collez ce snippet :

add_action( 'widgets_init', 'my_register_sidebars' );
 
function my_register_sidebars() {
 
	register_sidebar(
		array(
			'id' => 'primary',
			'name' => __( 'SideBar' ),
			'description' => __( 'Right SideBar.' ),
			'before_widget' => '',
			'after_widget' => '',
			'before_title' => '<div class="sb_block_title">',
			'after_title' => '</div>'
		)
	);
 
}

Si vous voulez plus d’infos sur cette fonction, consultez le guide de référence WP.

On en profite pour y ajouter notre fonction MetaCut() appelée dans le header (coupant le texte d’un article à 125 caractères au niveau d’un espace) :

function MetaCut($txt) {
	$txt = substr($txt, 0, 125);
	$space = strrpos($txt," ");
	if($space)
		$txt = substr($txt,0,$space);
	$txt.= '...';
	return $txt;
}

Si vous avez d’autres fonctions, c’est ici que celles-ci doivent être définies. De même, WP permet l’ajout de filtres et autres réjouissances (que nous n’évoqueront pas dans cet article), c’est également ici que tout ceci se passe. ;)

footer.php

Généralement, à part des marqueurs de statistiques, il n’y a pas grand chose à ajouter ici.

index.php

Si vous avez bien suivi ce tutoriel, vous avez maintenant selon toute logique un 5ème fichier index.php, correspondant au corps du texte. (Si vous ne l’avez pas, retourner au passage concernant le découpage HTML).

Il s’agit en fait du 12ème fichier que nous allons avoir dans notre thème, et il est un peu particulier, puisqu’il peut remplacer à lui tout seul les 7 fichiers que nous allons voir aux paragraphes suivants. Ce qu’il faut savoir, c’est que WP utilsera ce fichier par défaut s’il ne trouve pas de modèle disponible pour le type de contenu qu’il doit afficher. En clair si vous n’avez pas de fichier category.php pour afficher vos catégories, c’est index.php qui sera utilisé à la place.

La première chose à faire, c’est d’inclure les pages que nous venons de créer. Pour cela, ajoutez tout début du fichier :

<?php get_header(); ?>

puis tout à la fin :

<?php get_sidebar(); ?>
<?php get_footer(); ?>

note: vous n’avez pas besoin d’inclure functions.php, il est chargé par défaut avec votre thème.

Maintenant, il va falloir insérer les informations nécessaire à l’affichage du contenu de vos pages, conformément à la fameuse boucle WordPress (The loop) :

<?php if ( have_posts() ) : ?>
	<?php while (have_posts()) : the_post(); ?>
	<!-- Mise en page de votre contenu -->
	<?php endwhile; ?>
<?php else : ?>
	Texte si rien à afficher
<?php endif; ?>

Grosso modo, si vous avez du contenu à afficher, WP lance une boucle chargée de récupérer tout le contenu, sinon rien ne s’affiche. Qui dit boucle, dit possibilité d’extraire plusieurs lignes de résultats, donc si vous êtes sur une page susceptible de retourner plusieurs résultats (catégories, tags, recherche, etc.), vous aurez une liste, sinon (article, page, etc.) un seul contenu.

Voici les 2 principales fonctions à insérer dans votre code source pour afficher quelque chose :

  • Le titre de la page :
<?php the_title(); ?>
  • Le contenu
<?php the_content(); ?>

(nous verrons les autres sur les pages concernées)

Maintenant que ce fichier est prêt, nous allons le dupliquer sous différents noms aux étapes suivantes, afin de créer rapidement les pages suivantes, à savoir :

  1. single.php, pour afficher un article
  2. category.php, pour afficher les listes d’articles des catégories
  3. page.php, pour les pages WP
  4. search.php, pour les résultats des recherches
  5. tags.php, pour l’affichage des listes de billets par tags
  6. 404.php, pour les pages d’erreur
  7. home.php, pour la page d’accueil

Commencez donc par dupliquer votre index.php en single.php puis passez à l’étape suivante.

Notez qu’il existe encore plus de pages pour peaufiner (contact-form.php, etc), je vous laisse découvrir tout ceci par vous-même.

single.php

Ce fichier correspond à la page d’un article, y ajouter les fonctions suivantes me semble être le minimum :

  • Catégories liées à l’article (le paramètre entre guillemets est facultatif, il sert à définir le séparateur si vous avez plusieurs catégories liées):
<?php the_category(', '); ?>
  • Date de l’article (les paramètres acceptées correspondent ceux de la fonction date() de PHP – dans ce cas 26 septembre 2011 ) :
<?php the_time('j F Y'); ?>
  • Les tags liés à l’article :
<?php the_tags('', ', ', ''); ?>
  • Auteur :
<?php the_author() ?>
  • Si vous souhaitez afficher le lien permanent de l’article, insérez ce code :
<a href="<?php the_permalink(); ?>">Ancre</a>
  • Pour finir, on affiche les commentaires :
<?php comments_popup_link( 'Pas encore de commentaires', '1 commentaire', '% commentaires', 'comments-link', 'Commentaires fermés sur cet article'); ?>

Maintenant que votre fichier single.php est pret, dupliquez-le et nommez-le category.php

category.php

Il s’agit de la page listant les articles d’une catégorie.

  • Le titre étant appelé différemment, remplacer < ? php the_title(); ? > par :
<?php single_cat_title(); ?>
  • Pour afficher la description de votre catégorie :
<?php category_description(); ?>

Notez que WordPress ajoute des tags html autours de votre descriptions, selon la façon dont est designé votre thème, cela peut provoquer un problème de validation W3C. Pour y remédier, remplacez le code ci-dessus par

  • Insérez < ? php the_title(); ? > (que vous venez de remplacer), dans la boucle, afin de pouvoir afficher les titres des contenus retournés (et n’oubliez pas au passage d’y ajouter un lien en utilisant ce code pour le href :
<?php the_permalink(); ?>
  • Vous pouvez garder < ? php the_content(); ? >, si vous avez envie d’afficher en intégralité tous vos articles, mais personnellement je préfère n’afficher qu’un extrait, ça tombe bien, WP a une fonction toute prète pour ça :
<?php the_excerpt(); ?>

Si vous avez bien compris, vous êtes sensé avoir cela concrètement (adapté à votre code source):

<h1><?php single_cat_title(); ?></h1>
<div id="content">
<?php category_description(); ?>
<?php if ( have_posts() ) : ?>
	<?php while (have_posts()) : the_post(); ?>
		<h2/><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
		<span>date: <?php the_time('j F Y'); ?>, catégories : <?php the_category(', '); ?>.</span>
		<?php the_excerpt(); ?>
	<?php endwhile;?>
<?php else : ?>
	Il n'y a aucun article dans cette catégorie...
<?php endif; ?>
</div>

Maintenant, dupliquez cette page en tag.php et search.php

tag.php

Ici, il n’y a que deux choses à remplacer par rapport à notre category.php :

  • Le titre :
<?php single_tag_title(); ?>
  • La description (le cas échéant):
<?php echo tag_description(); ?>

search.php

La seule chose qui nous intéresse sur cette page, c’est de récupérer la recherche effectuée pour l’afficher. Insérer ce code à la place du titre devrait faire l’affaire :

<?php printf( __( 'Résultats de la recherche pour :  "%s"' ), '<span>' . get_search_query() . '</span>' ); ?>

page.php

Sur le modèle de index.php, créez une nouvelle page page.php, et… le tour est joué. Vous pouvez aussi retirer le si vous ne voulez pas afficher la barre latérale sur ces pages, au choix.

404.php

C’est la page la plus simple à mettre en place puisqu’il n’y a rien à y insérer, mis a part votre texte personnalisé. Dupliquez votre index.php, en supprimant la boucle (en gros en arrêtant votre lecture juste avant le passage ou je parle de The Loop dans le paragraphe concernant index.php).

home.php

Le cas de home.php est un peu particulier car votre page d’accueil dépend vraiment de ce que vous voulez en faire. Si vous voulez simplement lister vos derniers billets (comme c’est souvent le cas sur les blogs), il vous suffit de construire une requête personnalisée (référence WP Query) sur une nouvelle page que vous nommerez home.php, basée sur le modèle de category.php. Modifiez le titre à la main ou affichez la description de votre blog (< ? php bloginfo( ‘description’ ); ? >), etc selon vos envies. Pour cette requête, remplacez simplement :

<?php while (have_posts()) : the_post(); ?>

par :

<?php
$the_query = new WP_Query('showposts=5&orderby=post_date&order=desc');
while ($the_query->have_posts()) : $the_query->the_post(); ?>

…et le tour est joué !

Bien entendu, vous pouvez allez beaucoup plus loin dans la construction de votre page d’accueil, jusqu’à modifier complètement la mise en page comme c’est le cas sur ce blog.

Conclusion

Voilà votre thème est prêt. On aurait pu tout aussi bien n’utiliser qu’un fichier index.php et faire des cas (à l’image que ce qu’on a fait dans header.php pour la gestion de la meta description), mais cela ne servirait pas à grand chose, puisque comme nous l’avons vu, dupliquer les pages est tout aussi rapide (et surtout plus facilement modifiable).

De même il existe une très grande quantité de fonctions incluses dans WP, ce que nous avons concerne les éléments classiques. Si on pourrait en utiliser moins (mais je pense que c’est quand même le minimum), on pourrait aussi en utiliser beaucoup plus. En ce qui me concerne, mis à part quelques fonctions PHP personnelles bonus évitant d’installer des plugins inutiles (sujets similaires, dernier tweet, etc. ) je n’ai rien d’autre.

Voilà c’est à peu près tout pour ce qui doit être le plus long article de ce blog, si vous aimez, pensez à partager le lien ;)

Et maintenant, a vos pinceaux !

Annexes

Quelques ressources intéressantes :

  • Codex, le manuel des fonctions WordPress
  • La référence en matière de création de thème WordPress est sans aucun doute le site Franc6art, je ne sais pas si ce tutoriel est à jour et donc entièrement compatible avec la version 3.2, mais c’était une véritable mine d’or à l’époque
  • Dans le même genre, CSS4Design propose un tutoriel très bien fait sur WP (en cours d’écriture)
  • Si vous cherchez un professionnel pour effectuer ce travail, je vous conseille l’agence Web EDM que je connais très bien, spécialisée en creation site vitrine sous wordpress.

Articles sur ce thème :