Ce tutoriel fait un survol de certaines notions de base nécessaires à la création de votre propre thème WordPress. Dans différents tutoriels sur le web, les auteurs prennent souvent en considération que vous connaissez déjà ces notions. Nous voulions vous faire un « crash course » en la matière!
Comment partir du bon pied afin de créer la base d’un thème WordPress?
Pour débuter, dans la structure de dossiers et fichiers de WordPress, vous devez vous créer un nouveau dossier à l’intérieur du répertoire « wp-content/themes » du nom de votre nouveau thème. Dans ce tutoriel, nous appellerons ce dossier « wppourlesnuls ». Le nom du dossier doit correspondre au nom du thème que vous voulez créer. Pour effectuer cette manoeuvre, vous pourrez soit créer cette structure directement sur votre ordinateur et téléverser celle-ci à l’aide d’un logiciel FTP ou créer directement votre répertoire sur votre serveur également à l’aide de votre logiciel FTP.
Avant de commencer à créer le thème, vous devez décider le visuel de votre interface web. Est-ce que votre thème aura une barre latérale (sidebar)? Est-ce qu’il en aura 2? Dans ce tutoriel, nous construirons un thème WordPress comprenant un en-tête (header), une colonne latérale (sidebar), un espace de contenu (content ou body) et un pied de page (footer). En fait, on veut une structure comme l’image présentée ci-dessous :
Pour arriver à ce résultat, nous devrons créer les fichiers suivants dans le dossier « wppourlesnuls » :
- header.php – Ce fichier contient le code d’en-tête du thème.
- index.php – Il s’agit du fichier principal du thème. Il contient le code du contenu principal de la page principale.
- sidebar.php – Ce fichier contient les contenus de la colonne latérale.
- footer.php – Ce fichier prend en charge votre pied de page.
- style.css – Ce fichier s’occupe de déterminer les styles CSS de votre thème.
Vous pouvez créer ces fichiers localement grâce à un simple éditeur de texte et les ajouter via votre logiciel FTP. Vous pourriez aussi utiliser l’outil File Manager disponible dans votre cPanel afin de créer le tout depuis votre serveur WordPress.
Maintenant, regardons en détails ce que chacun des fichiers doivent contenir :
Le fichier header.php
Dans ce fichier ajoutez le code suivant :
<html>
<head>
<title>Tutorial theme</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>HEADER</h1>
</div>
Il s’agit d’un code simple HTML avec un bout de code PHP et une fonction standard de WordPress. Nous vous avons proposé seulement une base, mais vous pourriez également spécifier vos métas tags tels que la balise <title> de votre site et la balise méta descriptions. Sinon, le plugin WordPress SEO de Yoast peut également le faire pour vous.
Juste après le titre, la ligne suivante indique à WordPress de charger le fichier style.css.
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
Ce fichier charge les styles CSS de votre site. La ligne suivante est un appel à une fonction de WordPress qui charge votre feuille de style :
<?php bloginfo('stylesheet_url'); ?>
Après, nous avons ouvert un « div » qui sera le conteneur (container) principal de votre blog WordPress. Nous lui avons aussi attribué un ID CSS. Vous pourrez donc personnaliser le visuel de celui-ci comme bon vous semble dans votre fichier style.css.
Le fichier index.php
<?php get_header(); ?>
<div id="main">
<div id="content">
<h1>Contenu Principal</h1>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4>Posted on <?php the_time('F jS, Y') ?></h4>
<p><?php the_content(__('(more...)')); ?></p>
<hr> <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>
</div>
<?php get_sidebar(); ?>
</div>
<div id="delimiter">
</div>
<?php get_footer(); ?>
Le code de ce fichier commence par :
<?php get_header(); ?>
Cela permet d’inclure le fichier header.php et son contenu au sein de votre page principale. Le code fait référence à une fonction de WordPress qui fait cette étape pour vous. En fait, vous auriez pu aussi utiliser directement une fonction PHP d’« Include » de ce même fichier, mais dans le cas d’un site WordPress, on veut utiliser les fonctions natives de WordPress. C’est plus « clean », c’est plus rapide, et c’est une bien meilleure éthique de travail. Ensuite, nous avons écrit « Contenu Principal » pour vous indiquer l’endroit où la section apparaît. Les lignes qui suivent sont du code PHP standard et des fonctions propres à WordPress. Ce code vérifie si vous avez des articles de blog déjà créés à travers la console de gestion de contenu de WordPress et si c’est les cas, ce code les affichera.
Ensuite, on inclut la barre latérale avec cette ligne de code:
<?php get_sidebar(); ?>
Après cette ligne, nous insérons une balise « div » vide qui va séparer du footer le contenu principal et la colonne latérale.
Enfin, on ajoute la dernière ligne qui va inclure le footer à votre page :
<?php get_footer(); ?>
Le fichier sidebar.php
Dans sidebar.php nous ajouterons le code suivant :
<div id="sidebar">
<h2 ><?php _e('Categories'); ?></h2>
<ul >
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
<h2 ><?php _e('Archives'); ?></h2>
<ul >
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
Dans ce fichier nous utilisons des fonctions internes de WordPress qui servent à afficher les catégories et les archives de vos différents articles. La fonction WordPress les affiche dans une liste. Pour ce faire, nous avons mis les fonctions actuelles en listes non-ordonnées (la balise <ul>). Pour toutes questions par rapport à comment personnaliser le code HTML de cette liste, nous vous invitons à rechercher dans Google des expressions comme « Codex WordPress wp_list_cats() » ou « Codex WordPress wp_get_archives() ». Vous obtiendrez toutes les informations nécessaires pour personnaliser le code retourné par ces fonctions.
Le fichier footer.php
Vous devez ajouter les lignes suivantes au fichier footer.php :
<div id="footer">
<h1>FOOTER</h1>
</div>
</div>
</body>
</html>
Avec ce code nous ajoutons simplement la mention FOOTER. À la place de ce code vous pourriez ajouter des liens, du texte additionnel, des informations de droits d’auteur ou tous autres éléments.
Le fichier style.css
Ajoutez les lignes suivantes à votre fichier style.css :
body { text-align: center; }
#wrapper { display: block; border: 1px #a2a2a2 solid; width:90%; margin:0px auto; }
#header { border: 2px #a2a2a2 solid; }
#content { width: 75%; border: 2px #a2a2a2 solid; float: left; }
#sidebar { width: 23%; border: 2px #a2a2a2 solid; float: right; }
#delimiter { clear: both; }
#footer { border: 2px #a2a2a2 solid; }
.title { font-size: 11pt; font-family: verdana; font-weight: bold; }
Ce simple fichier CSS détermine le look principal de votre thème. Ces lignes établissent l’arrière-plan de votre page et entourent les différentes parties de votre site d’une bordure de 2px d’épaisseur.
À ce stade-ci, votre site devrait ressembler à cela :
Comme nous l’avons déjà mentionné, les fonctions natives de WordPress sont souvent utilisées au sein du code de votre thème. Vous pouvez jeter un coup d’oeil aux fonctions de référence sur le site officiel de WordPress, dans le Codex, si vous souhaitez avoir plus d’informations sur chacune d’entre elles.
À partir de maintenant, vous pouvez modifier le fichier CSS, ajouter des images, des animations et n’importe quel autre contenu à votre thème afin d’obtenir le design que vous désirez pour votre blog !