Lors de la création d’un thème WordPress, une fois que le code HTML et CSS de base ait été créé, vous devez convertir ceci en quelque chose que WordPress sait utiliser. Si vous êtes prêt à passer à l’étape suivante, ce tutoriel vous indiquera la bonne démarche pour faire des fichiers Template pour WordPress.
Étape 1 – Comprendre ce que sont les fichiers Template
Pour commencer, vous devez savoir pourquoi vous créez ces fichiers si vous voulez savoir quoi faire. En gros, WordPress a besoin d’un fichier index.php et d’un fichier style.css pour afficher toutes les composants nécessaires.
Mais dans les thèmes WordPress, vous diviserez le fichier index.php et inclurez un ensemble de fichiers à part. Ceux-ci contiennent les données relatives au header, au footer et à la barre latérale.
Nous allons faire un fichier WordPress de base incluant les quatre fichiers suivants :
- index.php
- header.php
- sidebar.php
- footer.php
Étape 2 – Créer des fichiers PHP vides
Créez de nouveaux fichiers dans votre éditeur de code préféré. Créez un fichier séparé pour chacun des quatre. Vous devez aussi avoir un dossier portant le nom de votre thème WordPress à des fins d’organisation. Ça devrait être sous la forme ‘[le nom de votre thème]-demo-theme’.
Copiez votre feuille de style dans ce même dossier. Ceci est requis à une étape ultérieure, mais ça dépasse le cadre de ce tutoriel et c’est inutile dans notre cas.
Étape 3 – Ajoutez du code dans les trois fichiers
Vous n’avez pas besoin d’expérience dans la programmation pour suivre cette étape. Le code que vous devez ajouter séparément dans chacun de ces trois fichiers est ci-dessous. Vous n’avez qu’à copier et coller tout ce qui est dans ce guide et vous êtes prêt. Vous n’avez pas besoin de comprendre son sens, mais ce code vous permettra d’obtenir le site que vous désirez.
Voici le code du fichier header.php :
<!-- ajoute une classe à la balise html si le site est ouvert avec IE, pour corriger tout bug éventuel -->
<!--[if lt IE 8]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if gt IE 9]><html><![endif]-->
<!--[if !IE]><html><![endif]-->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Title</title>
<link href="style.css" rel="stylesheet" media="all" type="text/css" />
<header role="banner">
<div class="site-name half left"><!-- nom et description du site --></div>
<div class="site-name half left">
<h1 class="one-half-left" id="site-title"><a title="Title" rel="home">Création d'un Thème WordPress</a></h1>
<h2 id="site-description">Description</h2>
</div>
<!-- un aside dans le header – ceci contiendra une zone de widgets plus tard -->
<aside class="header widget-area half right" role="complementary">
<div class="widget-container">Ceci sera une zone de widget dans le header - l'adresse (ou n'importe quelle autre information de votre choix) sera ici</div><!-- .widget-container -->
</aside><!-- .half right -->
</header><!-- header -->
<!-- menu de navigation de largeur totale – supprimez l'élément nav si vous utilisez la navigation du haut -->
<nav class="menu main"><?php /* Permettre aux programmes qui lisent l'écran ou qui parcourent le texte de sauter le menu de navigation et de passer directement au contenu intéressant */ ?>
<div class="skip-link screen-reader-text"><a title="Passer au contenu" href="#content">Passer au contenu</a></div>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Dernières infos</a></li>
<li><a href="#">Articles à la une</a></li>
</ul>
</nav><!-- .main -->
<div class="main">
Maintenant, voici le code du fichier sidebar.php :
<!-- la sidebar - dans WordPress, ceci contiendra des widgets -->
<aside class="sidebar widget-area one-third right" role="complementary">
<div class="widget-container">
<h3 class="widget-title">Un widget sidebar</h3>
<p>C'est le widget sidebar, dans votre thème WordPress vous pouvez paramétrer ceci afin que ça s'affiche sur tout votre site.</p>
</div><!-- .widget-container -->
<div class="widget-container">
<h3 class="widget-title">Un widget sidebar</h3>
<p>Un deuxième widget sidebar, vous pourriez peut-être avoir recours à un plugin pour afficher un flux de réseau social, ou tout simplement lister vos publications les plus récentes.</p>
</div><!-- .widget-container -->
</aside>
Voici le troisième bout de code pour le fichier footer.php :
<!-- .main -->
<footer>
<!-- aside .fatfooter - J'utilise ceci pour avoir un arrière-plan de la largeur de l'écran au niveau du footer tout en gardant le contenu du footer conforme au layout -->
<aside class="fatfooter" role="complementary">
<div class="first quarter left widget-area">
<div class="widget-container">
<h3 class="widget-title">First footer widget area</h3>
<p>Une zone de widgets dans le footer - utilisez des extensions et des widgets pour remplir ceci.</p>
</div><!-- .widget-container -->
</div><!-- .first .widget-area -->
<div class="second quarter widget-area">
<div class="widget-container">
<h3 class="widget-title">Deuxième zone de widgets du footer</h3>
<p>Une zone de widgets dans le footer - utilisez des extensions et des widgets pour remplir ceci.</p>
</div><!-- .widget-container -->
</div><!-- .second .widget-area -->
<div class="third quarter widget-area">
<div class="widget-container">
<h3 class="widget-title">Troisième zone de widgets du footer</h3>
<p>Une zone de widgets dans le footer - utilisez des extensions et des widgets pour remplir ceci.</p>
</div><!-- .widget-container -->
</div><!-- .third .widget-area -->
<div class="fourth quarter right widget-area">
<div class="widget-container">
<h3 class="widget-title">Quatrième zone de widgets du footer</h3>
<p>Une zone de widgets dans le footer - utilisez des extensions et des widgets pour remplir ceci.</p>
</div><!-- .widget-container -->
</div><!-- .fourth .widget-area -->
</aside><!-- #fatfooter -->
</footer>
Étape 4 – Remplir le fichier Index
La partie suivante consiste à mettre en place votre fichier index.php correctement, ce qui demande un peu plus de patience. Ajoutez les fonctions PHP pour que WordPress ajoute le header, le footer et la sidebar.
Commencez avec le code suivant :
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Mais laissez un vide entre l’inclusion du header d’ouverture et celle de la sidebar. C’est dans cet espace que vous ajouterez le code supplémentaire qui ne va pas dans ces parties du site.
A partir de là, vous avez plus de code à entrer. C’est un autre gros bout de code que vous trouverez ci-dessous. Collez ceci dans le fichier et vous être prêt.
Ce dernier bout de code doit aller dans le fichier index.php et sous la ligne get_header() :
<div class="two-thirds" id="content">
<article class="post" id="01">
<h2 class="entry-title">Voici le titre d'un article ou d'une page</h2>
<img class="size-large" alt="" src="images/featured-image.jpg" />
<section class="entry-meta">
<p>Publié le …</p>
</section><!-- .entry-meta -->
<section class="entry-content">
<p>Voici le contenu de l'article. Sur une page d'archive, il peut s'agir d'un extrait de l'article, ou vous pouvez inclure le contenu en entier.</p>
<h3>Les images dans WordPress</h3>
<img class="alignright" alt="" src="images/another-image.jpg" />
</section><!-- .entry-content -->
<section class="entry-meta">
<h3>Catégories et Tags d'Articles</h3>
<p>Dans cette section, vous pouvez afficher des informations sur les catégories et les tags associés à votre article.</p>
</section><!-- .entry-meta -->
</article><!-- #01-->
</div><!-- #content-->
Étape 5 – Qu’est-ce qui suit?
Ensuite, votre travail consiste à ajouter les besoins en termes de style. Ceci va bien au-delà du cadre de ce tutoriel, mais vous aurez besoin de connaissances en CSS pour continuer. Nous vous recommandons de communiquer avec un professionnel si vous n’êtes pas un expert dans ce domaine.
Le CSS nécessite de comprendre le code, au lieu de juste copier et coller ce que quelqu’un d’autre a fait.
Conclusion
Vous devez garder à l’esprit qu’il s’agit de la forme la plus basique de fichier index. Beaucoup des thèmes WordPress plus avancés peuvent avoir plus de fichiers, avec beaucoup d’options de personnalisation à proposer aux utilisateurs et des fonctions supplémentaires.
Si vous cherchez quelque chose de spécifique, n’hésitez pas à prendre contact avec un professionnel.
