Créer Son Propre Thème WordPress

Malgré la disponibilité des milliers de themes wordpress gratuits, vous ne pouvez rencontrer votre bonheur rien qu'en codant le votre et apprendre à créer des thèmes WordPress personnalisés. Apprendre à coder votre propre theme wordpress, vous ouvre un tout nouveau monde à explorer. Il vous permet de créer des conceptions personnalisées pour vous-même, vos clients et même de contribuer à la communauté open source.
Dans ce guide, nous allons vous faire passer de zéro à un thème entièrement fonctionnel pouvant être soumis au répertoire de thèmes WordPress.org. Afin de pouvoir suivre ce tutoriel, vous devez avoir les connaissances de base en HTML, CSS, PHP.

1. Créer les fichiers système du theme

  1. Dans le dossier d'installation de votre site wordpress, accédez à wp-content -> themes.
  2. Créez un nouveau dossier, nommez le à titre d'exemple themeExample (évitez l'espace, les carctères spéciaux...).
  3. Au sein du dossier themeExample, créez les fichiers systèmes du theme:
    1. index.php: entrée principale du système pour gérer l'affichage du contenu.
    2. style.css: définit le design et l'aspect visuel du thème.
    3. header.php: contient l'entête des pages du <!DOCTYPE html> jusqu'au </head>.
    4. footer.php: contient le bas des pages jusqu'au </body> </html>.
    5. functions.php: ajoute des fonctionnalités au thème, des menus et des couleurs aux scripts et aux feuilles de style.
    6. sidebar.php: définit la barre latérale.
    7. single.php: affiche un seul article d'une page particulière.
    8. page.php: affiche le contenu d'une seule page.

2. Configurez la feuille de style css

Ajoutez le code suivant à la feuille de style css style.css

À ce niveau là, votre theme est déjà visible sur le dashboard WordPress.
Pointez alors sur le menu Apparence -> Thèmes et vous allez voir le theme que vous venez de créer intitulé themeExample avec une image carrée vide.




3. Normalisation du code CSS

Nous allons maintenant normaliser notre code css à l'aid du fichier normalise.css qui se trouve à l'adresse: https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css
Il s'agit d'un fichier CSS utilisé pour uniformiser les différences d'interprétation des feuilles de style en cascade. A l'aide de ce fichier, chaque élément HTML conserve la même apparence quel que soit le navigateur utilisé. A ce effet, ajoutez le code suiavant à votre fichier function.php

4. Activation des widgets

Jusqu'à présent, le menu widget sur notre dashboard accéssible via Apparence-> Widgets n'est plus disponible:

Il faut au préalable l'activer en ajoutant le code suivant au fichier functions.php juste après le code précédent:

5. Affichage des barres latérales (sidebar)

Afin de pouvoir afficher une barre latérale (sidbar), nous devons utiliser la fonction get_sidebar(). Pour ce faire, nous devons éditer le fichier sidebar.php en ajoutant le code suivant:

6. Création d'une mise en forme personnalisée du thème

Maintenant il est temps de régler la mise en page en éditant les fichiers:

  1. header.php,
  2. index.php,
  3. footer.php,
  4. single.php,
  5. page.php,
  6. style.css

Le fichier header.php contient les attributs suivants:

  1. DOCTYPE: cette déclaration indique au navigateur Web la façon d'interpreter le document
  2. language_attributes(): cette fonction insère le code de la langue que vous avez choisie lors de l'édition des paramètres système wordpress.
  3. Les entête HTML <head></head>: permettent de stocker les metadonnées: <title></title>, <meta></meta>, <link></link>,ainsi que les fonctions bloginfo() et wp_head().
  4. body_class(): permet de munir le body des classes CSS définies par wordPress par défaut.
  5. wp_nav_menu (): cette fonction affiche le menu de navigation de la page au sein de l’entête du site.

Fichier header.php

Le fichier index.php
Tous les composants crées seront visualisé à l'aide du fichier index.php en utilisant les fonctions: get_header, get_sidebar et get_footer. Et afin d'embellir l'affichage, nous allons créer des classes CSS au niveau du fichier style.css et les attribuer aux blocks qui contiennent ces fonctions.

Code du fichier index.php:

Explication du code

  1. <?php the_permalink(); ?>: récupère et affiche l'adresse url de l'article en question.
  2. <?php the_title_attribute(); ?>: affiche le titre de l'article dans un format sécurisé pour l’attribut title du lien.
  3. <?php the_title(); ?>: affiche le titre de l'article.
  4. <?php the_author(); ?>: affiche le nom de l'auteur.
  5. <?php the_excerpt(); ?>: récupère un extrait de l'article.

Fichier style.css




Maintenant si vous accédez accédez au page d'accueil de votre site, vous devriez voir l'aspect final de votre template design:

Younes Derfoufi
CRMEF OUJDA

Leave a Reply