Bon, même si je sais que je ne dois pas vous faire l'affront d'une introduction sur WordPress, je m'y risque quand même, vous ne m'en voudrez pas. :p
WordPress est un content management system, ou CMS, open source très populaire. Il vous permet de réaliser des blogs, des sites vitrines, mais également des sites e-commerce.
La particularité de ce CMS est qu'il offre de grandes possibilités de personnalisation et une très grande communauté. On peut noter que 42 % du web repose sur WordPress, ce qui en fait un incontournable sur le web.
L'un des grands avantages de WordPress est sa capacité à personnaliser l'apparence et ses fonctionnalités en utilisant des thèmes. Les thèmes de WordPress sont des ensembles de fichiers de style et de code qui définissent l'apparence de votre site.
Si je dois faire une vulgaire comparaison, WordPress peut être défini comme le moteur de votre voiture, le thème quant à lui en est la carrosserie. :)
Il existe de nombreux thèmes (gratuits et payants) disponibles pour WordPress, chacun offrant une apparence unique et différentes fonctionnalités. Si vous souhaitez vraiment personnaliser votre site, la création d'un thème sur mesure sera la solution idéale.
La création d'un thème sur mesure vous permettra de contrôler complètement les options ainsi que l'apparence de votre futur site.
WordPress propose ainsi trois types de thèmes pour les utilisateurs qui souhaitent personnaliser leur site :
gratuit ;
payant ;
sur mesure.
Chacun d'entre eux a ses propres avantages et inconvénients, le choix final dépendra des besoins et des objectifs du site.
Revenez sur les différents types de thèmes WordPress
Les thèmes gratuits sont disponibles bien évidemment gratuitement depuis la liste des thèmes affichés dans la page Apparence, dans l’administration WordPress (ou encore via des sites externes). Ils sont un choix idéal pour les utilisateurs qui cherchent à économiser de l'argent, et qui sont disposés à faire un peu de travail pour personnaliser leur site.
Viennent ensuite les thèmes payants, qui sont disponibles à l'achat sur des sites web tiers. Ils offrent généralement plus de fonctionnalités et de personnalisation que les thèmes gratuits. Les thèmes payants sont un bon choix pour les utilisateurs qui cherchent une solution “toute prête” à être utilisée, et plus complète que les thèmes gratuits.
Les thèmes gratuits et payants peuvent être personnalisés via un thème enfant, mais cette méthode peut être limitée à cause de la structure du thème. Souvent les fonctions ne peuvent pas être modifiées sans changer le code du thème parent, et adieu les mises à jour du thème sans encombre.
Arrivent ensuite les thèmes sur mesure (le type de thème qui nous intéresse). Ce sont des thèmes réalisés pour un site en particulier.
Un thème sur mesure pour WordPress peut offrir plusieurs avantages significatifs pour votre site web :
Design personnalisé : En utilisant un thème sur mesure, vous pouvez créer pour votre site web un design unique, qui répond à votre charte graphique.
Performances optimisées : Les thèmes sur mesure peuvent être conçus pour être plus rapides et plus performants que les thèmes génériques (ce qui est très apprécié des utilisateurs et du SEO).
Fonctionnalités supplémentaires : En utilisant un thème sur mesure, vous pouvez ajouter à votre site web des fonctionnalités spéciales qui n'ont pas été prévues par les thèmes génériques (comme par exemple des formulaires, des systèmes d’import, etc.).
Sécurité renforcée : Les thèmes sur mesure peuvent être développés avec une meilleure sécurité pour protéger votre site web des menaces en ligne. Cela s’effectue en respectant les standards en développement, et en maintenant le code du thème à jour.
Meilleure expérience utilisateur : En créant un thème sur mesure, vous pouvez optimiser l'expérience utilisateur de votre site web pour les visiteurs, en fournissant une interface plus intuitive et plus simple à utiliser.
Personnalisation future : Avec un thème sur mesure, il est bien plus facile d'apporter des modifications et des améliorations à votre site web à mesure que vos besoins évoluent.
L’avantage ici est que l’on développe l’ensemble des fonctionnalités, et que nous n'aurons pas de limites en termes de possibilités. C’est une personnalisation complète !
Les thèmes sur mesure sont un bon choix pour les entreprises et les utilisateurs qui cherchent à obtenir un site web unique et haut de gamme.
Installez WordPress
Avant d'aller plus loin, nous allons devoir nous assurer que nous avons bien tous une installation WordPress fonctionnelle.
Cette installation de WordPress est un processus simple et rapide qui peut être accompli en quelques étapes clés :
Créez un serveur web local avec PHP / MYSQL.
Créez une base de données avec un utilisateur.
Téléchargez WordPress depuis le site officiel.
Décompressez WordPress et copiez les fichiers à l'emplacement de votre serveur web.
En accédant à votre nom de domaine, vous installerez WordPress via tout une suite d'étapes.
Une fois que WordPress est installé, vous pouvez le configurer en définissant les paramètres généraux.
Créez un thème
Comme nous venons de le voir, un thème sur mesure peut améliorer considérablement votre site web en termes de design, de performances, de fonctionnalités, de sécurité et d’expérience utilisateur. Il peut également offrir une plus grande flexibilité pour les futurs développements.
Vous souhaitez vous lancer dans le développement après cette longue introduction ? Alors c’est parti !
Pour réaliser un thème sur mesure, nous allons devoir respecter la structure d’un thème WordPress. Pour fonctionner, un thème a besoin au minimum de 2 fichiers :
style.css, qui contiendra l’ensemble des informations du thème ;index.php, qui sera le fichier par défaut affichant le contenu de votre site au visiteur (si aucun autre fichier template n’est placé dans le thème).
Bon, avant toute chose, créons un sous-dossier dans wp-content/themes/ (ce dossier contient l’ensemble de tous les thèmes installés pour votre WordPress). Pour notre projet, nous allons créer le sous-dossier wp-content/themes/cookinfamily/ . Créez ensuite un fichier style.css dans le dossier wp-content/themes/cookinfamily/ .
Que doit contenir le fichier style.css ?
Il y a différentes informations que l’on peut initialiser dans le fichier style.css (telles que le nom du thème, son auteur, etc.). Les indications ci-dessous sont requises pour chaque thème WordPress. Voici par exemple les informations que nous allons utiliser pour notre projet CookInFamily :
/*
Theme Name: CookInFamily
Theme URI: https://www.cookinfamily.fr
Author: OpenClassrooms
Author URI: https://openclassrooms.com
Description: Thème pour le cours "Perfectionnez-vous sur WordPress"
Version: 1.0
Tags: openclassrooms, cookinfamily, cours
Text Domain: cookinfamily
*/Et voici à quoi cela correspond :
Theme Name : le nom du thème ;
Theme URI : l’URL du site utilisant le thème ;
Author : le développeur ou l’agence ayant développé le thème ;
Author URI : l’URL de l’auteur du thème ;
Description : une brève description du thème ;
Version : la version du thème ;
Tags : des mots clés pour affiner la recherche sur la page des thèmes ;
Text Domain : identifiant définissant le groupe de traduction de votre thème.
Vous retrouverez l’ensemble des informations dans la page Apparence dans l’administration WordPress, en cliquant sur votre thème, comme ci-dessous :
Cool, mais vous ne nous avez pas encore parlé d’ index.php !
Très juste ; maintenant que vous avez le fichier style.css , nous allons créer un fichier index.php vide à l’intérieur de notre dossier wp-content/themes/cookinfamily/ . Et voilà, avec rien que 2 fichiers, vous avez un thème prêt à être installé sur WordPress.
Ajoutez des templates à un thème
Un thème sur mesure sous WordPress doit être développé avec toute une suite de fichiers ayant des noms bien spécifiques. Ces fichiers qui composent un thème ont un impact visuel sur votre site WordPress : ils tirent des informations de votre base de données WordPress, MySQL, et génèrent le code HTML qui est envoyé au navigateur web.
La nomenclature ainsi que la hiérarchie de ces fichiers sont importantes à respecter dans la réalisation d’un thème ; c’est ce que l’on nomme un template (ou un modèle).
Voici pour rappel le schéma officiel des fichiers d’un thème sous WordPress :
Maintenant, il est temps de générer notre page d’accueil pour CookInFamily !
Vous êtes partant ?
Dans notre thème, nous allons donc ajouter les fichiers :
home.php: ce modèle est utilisé pour afficher la page d'accueil du site ;header.php: permet de développer la partie haute de votre thème, à partir de l’ouverture de la balise HTML jusqu’à l’ouverture de la balise body, et parfois un peu plus. Ce fichier est en général inclus dans les différents templates ;footer.php: permet de développer la partie basse d’un thème, à partir de la balise footer jusqu’à la fermeture de la balise HTML.
En règle générale, ces trois fichiers sont présents dans les thèmes.
Dans header.php , nous allons partir sur une base classique en HTML ; voici le code :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CookInFamily</title>
</head>
<body>Pour le footer, même chose, nous allons utiliser du simple code HTML pour le créer :
</body>
</html>Vient ensuite notre fichier home.php ; nous allons devoir appeler notre header ainsi que notre footer. Pour cela, WordPress nous propose déjà des fonctions toutes prêtes à l’emploi, get_header() et get_footer() .
En les utilisant, WordPress ira automatiquement charger le contenu des fichiers header.php et footer.php pour nous !
Ensuite, nous pouvons ajouter un peu de contenu entre ces 2 appels pour voir si la page se charge correctement. Dans notre exemple, nous ajoutons un simple titre :
<?php get_header(); ?>
<h1>Bienvenue sur le site CookInFamily !</h1>
<?php get_footer(); ?>Et voilà, avec ces quelques fichiers, vous avez créé un thème pour WordPress ! Que diriez-vous de l’activer pour voir le résultat ?
Pour ce faire, rendez-vous dans l’administration WordPress et cliquez sur Apparence -> Thèmes. Votre thème apparaîtra dans la liste que WordPress proposera d’installer. En cliquant dessus puis sur le bouton Activer, vous demanderez à WordPress d’utiliser le thème CookInFamily.
En vous rendant sur la page d’accueil de votre site, le rendu ne sera pas très intéressant, un simple titre sur un fond blanc :
Mais pas de panique, nous allons améliorer tout cela dans la suite du cours !
En résumé
WordPress affiche un design ainsi que du contenu grâce à un thème.
Plusieurs critères sont à étudier avant de sélectionner un thème, comme l’investissement de temps, l’aspect financier, ou encore les fonctionnalités attendues.
Un thème sur mesure apportera de nombreux avantages, mais demande davantage de temps de développement.
Un thème sur mesure doit contenir au minimum 2 fichiers : style.css (pour les informations du thème) et le fichier index.php (qui sera le fichier affichant par défaut quelque chose sur votre site).
Un thème utilise toute une série de templates afin d’afficher du contenu au visiteur.
Maintenant que nous avons créé la base de notre thème (la coquille), nous allons poursuivre en réalisant une page pour gérer nos options de thème !
