Guide WordPress pour débutant apprenez à créer un blog en quelques minutes créer un blog

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

notions de base WordPress

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 :

structure thème 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 :

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

<?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 :

thème 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 !

Commentaires

  1. Ribeyrolles Fabienne | 16 mars 2015 Répondre

    Bonjour Louis Philippe,
    Je dois être plus nulle que nulle car je n’y arrive pas. J’ai enregistré WP en distant chez OVH . je voulais que ce site une fois fait remplace celui qui est en ligne et qui est un peu obsolète. Pour cela, j’ai crée un « sous-domaine » de mon site ribeyrolles en l’appelant ribeyrolword et en créant une nouvelle BDD. Comme les Htaccess sont différents, pour pouvoir utiliser mon site WP, j’ai dû les changer et ça a tout décalé les pages de mon site qui émanaient de leur BDD.
    Je n’ai pas trouvé de thèmes qui m’intéressaient parmi les thèmes embarqués et j’ai payé pour avoir « Elegant Thème  » et en particulier « Divi » qui a l’air de correspondre à ce que je recherche. Au moment de télécharger, on me demande de choisr entre « Themes Package » ou « PSD Files » Que faire? Ensuite, où dois-je inclure ce thème et comment pour le voir apparaître sue mon site test? je suis perdue!! Pourriez-vous m’aider SVP? Merci d’avance

  2. Louis-Philippe Dea | 19 mars 2015 Répondre

    Bonjour,
    Vous devez choisir le « Themes package ». L’option PSD ne vous fournira que le visuel des thèmes non intégré en thème WordPress. Ensuite, il faut inclure le dossier du thème dans votre répertoire « wp-content -> themes ».
    Bonne suite :)

  3. Maud | 31 mars 2015 Répondre

    Bonjour, j’ai suivi pas à pas vos explications pour créer un site internet et j’y suis arrivée ! Merci beaucoup ! (En utilisant évidement le lien bluehost de votre site…) Je suis malheureusement coincée car mon mot de passe ne fonctionne plus et le lien vers mot de passe oublié non plus. Je ne comprends pas. Je suis allée sur des forums mais je n’ai pas les connaissances nécessaires pour le modifier via ftp ou autre. Auriez-vous une idée ?

  4. Sarah - Wordpress Nantes | 1 avril 2015 Répondre

    Bonjour,
    Très bon blog. Vos articles sont tous au top. Cet article-là est une parfaite fiche de rappel.
    Merci

    • Valentina | 14 février 2017 Répondre

      Cet article est tiré d’un article anglais datant de plusieurs années. Les images, exemple et codes sont exactement les mêmes. S’il est utile, dommage que la source ne soit pas citée, le droit d’auteur est un droit, même sur Internet. Vous auriez au moins pu vous donner la peine de changer quelques détails ou citer la source….

  5. Oceane | 29 septembre 2015 Répondre

    Bonjour,
    Chouette tutoriel, hélas je l’ai suivi pas à pas et malgré cela ca ne fonctionnne pas. Une fois mis en ligne, lorsque je l’active sous WP j’ai une page blanche qui s’affiche et c’est tout …
    De l’aide serait la bienvenue si vous avez une idée ! =)
    Amicalement,
    Océane

    • Oceane | 29 septembre 2015 Répondre

      Bonjour,
      Hum juste après avoir posté mon message ça a décidé de fonctionner .. Mystère. Peut etre juste un lag mais j’avais pourtant attendu et raffraichit. Enfin l’essentiel c’est que cela foncitonne. Merci !

  6. Anthony Peltier | 12 février 2016 Répondre

    Merci pour ce petit tutoriel bien utile pour démarrer.

  7. alexandre serres | 28 février 2016 Répondre

    Bonjour Louis-Philippe,

    Quelques questions concernant la création d’un thème ; je souhaite créer un thème très simple, comme la physionomie de ce site : http://telfar.net/
    est-ce que c’est possible? mettre un gif en main area dans le fichier index.php, et un sidebar avec 3 ou 4 sous catégories.
    et ainsi négliger header et pourquoi pas aussi footer.

    merci par avance pour votre réponse,

    Cordialement,

  8. Louis-Philippe | 29 février 2016 Répondre

    Salut Alexandre,
    Bien entendu! C’est très possible. En fait, tu ne pourrais qu’avoir un fichier index.php et un fichier style.css que ton thème fonctionnerait quand même :)

  9. ndoye | 8 novembre 2016 Répondre

    Bonjour,
    J’ai suivi votre tuto est ça marche.
    Maintenant, je souhaite ajouter un menu horizontal, développer le sidebar et le footer.
    Comment faire pour intégrer le disign ds pages et mettre des couleur de fond

  10. jual roro mendut | 8 mars 2017 Répondre

    Everything composed made a bunch of sense. However, think
    on this, suppose you typed a catchier title? I mean, I don’t wish to tell
    you how to run your website, however what if you added something to maybe
    grab a person’s attention? I mean Les Notions de Base pour Créer
    un Thème WordPress – WP Pour les Nuls is a little vanilla.
    You should look at Yahoo’s front page and note how they
    create article titles to grab people interested.
    You might try adding a video or a related pic or two to get people
    interested about what you’ve got to say. Just my opinion,
    it could make your blog a little bit more interesting.

  11. 一比一手表 | 5 août 2017 Répondre

    仿牌手表, 高仿手表,精仿手表,精仿腕表,

    高仿瑞士名表,精仿腕表,超A精仿手表,超A手表,

    蜗牛表业,一比一手表,复刻手表

  12. no deposit bonus | 17 août 2017 Répondre

    Can you tell us more about this? I’d like to find out more details.

  13. giá triệt lông từ đầu gối xu[...] | 18 août 2017 Répondre

    What’s up to every body, it’s my first pay a visit of this website; this webpage
    includes amazing and genuinely good material designed for visitors.

  14. marketing | 19 août 2017 Répondre

    I am actually glad to read this website posts which carries tons of helpful information, thanks for providing these statistics.

Répondre au commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *