Solutions techniques

Les Notions de Base pour Créer un Thème WordPress


Les Notions de Base pour Créer un Thème WordPress

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 « inc/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 :

structure de wordpress

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 :



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.



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 :



Après, nous avons ouvert un « div » qui sera le conteneur (container) principal. 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





Le code de ce fichier commence par :



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 d’un blog WordPress et si c’est les cas, ce code les affichera.

Ensuite, on inclut la barre latérale avec cette ligne de code:



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 :



Le fichier sidebar.php



Dans sidebar.php nous ajouterons le code suivant :



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
    ). 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 :



    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 :



    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 :

    theme wordpress de base

    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 !


     

    Source


Créateur du site
Fondateur & Développeur du site

Citation du jour
Tes erreurs devraient être ta motivation et non tes excuses

Solutions techniques



Actualités national et international




Média du digital