Formation Wordpress : Créer un thème WordPress
Comment créer un thème WordPress ?
Rien de plus simple, rendez-vous tout d’abord dans le dossier wp-content/themes créez un nouveau dossier et les fichiers suivants à l’intérieur de celui-ci :
- index.php
- functions.php
- style.css
- screenshot.png
Le fichier index.php va permettre au routing d’y accéder et le fichier functions vous permettra de réaliser tous les settings PHP dont vous aurez besoin (shortcodes etc…).
En faisant simplement celui votre thème est activable !
Comment activer mon thème ?
Pour l’activer rendez-vous dans le back-office dans le menu Apparence > Thèmes. Vous verrez le votre apparaitre. Cliquez sur activer pour l’utiliser.
Maintenant que votre thème est activé vous allez devoir le designer. Pour celui nous allons tout d’abord installer et configurer quelques éléments.
Comment ajouter un menu ?
Rendez-vous dans votre fichier functions.php et ajouter les éléments que votre thème supportera :
add_theme_support('menus');Si vous voulez connaitre les autres valeurs que vous pouvez renseigner dans cette function add_theme_support je vous redirige vers la documentation officielle
En ajoutant ‘menus’ vous pourrez accéder à la page des menus dans votre back office : Apparence > Menus.
Pour enregistrer un nouveau menu vous devez utiliser la fonction register_nav_menus
register_nav_menus(['mon-menu' => 'Mon Menu']);Après avoir enregistré ce menu vous pourrez créer votre menu dans le back office en sélectionnant “Mon Menu”.
Maintenant que nous avons ajouté le support des menus et enregistré le notre nous allons pouvoir commencer par intégrer notre header et notre footer.
Intégrer le header et le footer
Les fichiers header.php et footer.php seront utilisés pour afficher la tête et le pied de nos pages. On ajoutera donc notre HTML head + début du body (avec le header) dans header.php et le footer + fermeture des balises body et html dans footer.php
Créer le fichier header.php
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head() ?>
</head>
<body <?php body_class(); ?>>
<nav id="menu">
<?php wp_nav_menu(['theme_location' => 'mon-menu']); ?>
</nav>Ici nous avons 3 fonctions importantes :
wp_head(): permettra d’inclure dans le head toutes les dépendances javascript et style nécessaires.body_class(): ajoutera toutes les class génériques de WordPress à la balise body (par exemple page-{id} lorsque vos serez sur une page de l’id en question etc…).wp_nav_menu(): récupère le menu demandé (ici “mon-menu”) et le sort en structure HTML (avec des ul, li et a).
Créer le fichier footer.php
<footer>
<!-- footer à placer ici -->
</footer>
<?php wp_footer(); ?>
</body>
</html>Comme pour header.php, dans footer.php on utilise une fonction ; wp_footer(), qui permettra d’inclure des scripts javascript en pied de page.
Maintenant que nous avons notre header et notre footer nous allons voir comment ajouter nos pages en commençant par la page d’accueil.
Besoin d'une formation personalisée ?
Avis