Dans l’univers du développement, les termes GitHub et WordPress reviennent fréquemment. L’harmonisation de WordPress avec GitHub peut considérablement fluidifier le travail d’un développeur et accroître son efficacité.
GitHub est une plateforme en nuage où l’on peut superviser, administrer et sauvegarder le code source. Parallèlement, WordPress est un système de gestion de contenu (CMS) servant à la création de sites web.
Pourquoi fusionner ces deux outils ?
- Gestion des versions : GitHub permet de suivre chaque modification apportée au code source de WordPress. Cela simplifie la gestion de votre code personnalisé, de vos thèmes WordPress et extensions.
- Création de branches : Après avoir intégré WordPress à GitHub, il n’est plus nécessaire de mettre le site web en mode « maintenance ». Créez des branches spécifiques, travaillez sur des fonctionnalités distinctes, testez-les, puis déployez-les une fois validées.
- Collaboration : Si vous travaillez sur un site web de grande envergure nécessitant l’intervention de plusieurs développeurs, GitHub facilite l’intégration des membres de l’équipe et l’attribution de rôles.
- Révision du code : Des erreurs peuvent survenir lors de la conception d’une application WordPress et engendrer des dysfonctionnements. GitHub permet de vérifier toutes les modifications du code avant leur déploiement.
- Sauvegarde et restauration du code : Conserver le code source de WordPress sur votre ordinateur comporte des risques de panne ou de détérioration de la machine. GitHub stocke le code en ligne, permettant sa récupération en cas de problème.
- Transparence et responsabilité : GitHub fournit un historique clair des modifications du code source de WordPress, indiquant également l’auteur de chaque changement.
Qu’est-ce que WordPress ?
WordPress est un système de gestion de contenu open source qui permet à des personnes sans compétences en codage de créer des sites web. Initialement conçu pour les blogs, il a évolué pour permettre la création de plateformes d’e-commerce, de forums, de réseaux sociaux, d’applications mobiles et de sites professionnels.
Le caractère open source de WordPress est un atout majeur pour les développeurs. Il est possible de télécharger, modifier et redistribuer le code source. Toutefois, l’achat d’un nom de domaine et d’un hébergement est indispensable pour publier un site en ligne.
Pourquoi opter pour WordPress ?
- Facilité d’utilisation : WordPress est conçu pour être accessible, que vous soyez novice ou expert en codage. L’éditeur glisser-déposer permet de créer un site professionnel sans écrire une ligne de code.
- Diversité des thèmes : WordPress propose une multitude de thèmes personnalisables. Il est également possible de créer un thème sur mesure et de le télécharger sur le site.
- Richesse en extensions : Il n’est pas nécessaire de tout créer de zéro, car des extensions (plugins) sont disponibles. On peut, par exemple, intégrer une application WordPress avec des passerelles de paiement grâce à ces plugins.
- Communauté active : En cas de difficultés, il est possible de s’appuyer sur l’importante communauté WordPress. De nombreuses ressources sont disponibles pour dépanner et résoudre divers problèmes.
Qu’est-ce que GitHub ?
GitHub est une plateforme de développement de logiciels basée dans le cloud. Elle permet de sauvegarder, suivre et de collaborer sur des projets de développement. GitHub permet la création de comptes gratuits, de référentiels et l’invitation de collaborateurs. La plateforme fonctionne avec Git, un système de gestion de version permettant de suivre localement les modifications d’un projet.
GitHub offre un hébergement gratuit pour les sites web statiques via Pages GitHub, ce qui est une option intéressante pour les portfolios. GitHub peut également être utilisé comme réseau social, permettant d’exposer des projets au public. Cette fonctionnalité facilite l’exploration de projets open source par les développeurs souhaitant contribuer.
Pourquoi utiliser GitHub ?
- Facilité d’utilisation : La création d’un compte GitHub est simple, même pour les personnes peu familières avec la technologie.
- Basé sur le cloud : GitHub stocke le code source dans le cloud, ce qui permet d’y accéder à distance et de récupérer des fichiers en cas de panne de la machine.
- Gestion de version : GitHub suit l’évolution du code source. La création de branches simplifie le suivi des modifications.
- Collaboration : Il est possible d’inviter des collaborateurs à un projet GitHub, de créer une organisation et d’attribuer des rôles et des permissions aux membres.
Comment utiliser GitHub pour WordPress
La mise en place d’un serveur de développement local est une étape préalable à l’intégration d’un site WordPress avec GitHub.
Plusieurs solutions existent pour créer un serveur de développement. Toutefois, pour cet article, nous allons utiliser WP Local.
Prérequis pour l’intégration WordPress-GitHub
- Git. Il est préinstallé sur les systèmes Linux et macOS récents. La commande `git –version` permet de vérifier sa disponibilité.
- Un compte GitHub opérationnel. En cas de besoin, ce guide peut aider à la configuration.
- Une compréhension du fonctionnement de WordPress.
Installation de WP Local
- Sur la page de téléchargement, sélectionnez la version correspondant à votre système d’exploitation (Ubuntu dans mon cas).
- Suivez ensuite le guide d’installation propre à votre système d’exploitation.
- WP Local propose de créer un compte gratuit. Cette étape peut être ignorée en cliquant sur le bouton « X ».
- Sélectionnez l’option qui permet de créer un nouveau site WordPress.
- Choisissez votre environnement. Pour l’instant, optons pour « Préféré ».
- Configurez votre nom d’utilisateur et votre mot de passe.
- Installez une extension pour utiliser un éditeur de code. L’accès aux extensions se fait par le bouton à gauche de WP Local. Si vous utilisez VS Code, vous pouvez installer cette extension :
Vous disposez désormais d’un site WordPress que vous pouvez développer localement. L’étape suivante consiste à l’intégrer à GitHub.
Comment connecter WordPress à GitHub
Dans l’interface WP Local, cliquez sur « Aller au dossier du site » comme indiqué dans la capture d’écran.
Le code source du site WordPress créé localement est maintenant accessible. Avec VS Code, la structure des dossiers est la suivante :
Pour l’instant, ne vous préoccupez pas des détails des dossiers et des fichiers.
Création d’un dépôt GitHub
En supposant que Git et GitHub soient configurés, vous pouvez suivre ces étapes pour créer un dépôt et utiliser Git comme outil de contrôle de version :
- Connectez-vous à GitHub et cliquez sur « Nouveau ».
- Donnez un nom mémorable à votre dépôt, cochez les cases correspondantes et cliquez sur « Créer un référentiel ».
- Initialisez votre code source à partir du dossier du projet WordPress. GitHub vous fournira les commandes à copier-coller dans votre terminal pour commencer. Les commandes seront similaires à :
echo "# GitHub-WordPress" >> README.md git init git add README.md git commit -m "first commit" git branch -M main git remote add origin git@github.com:nom_utilisateur/nom_du_depot.git git push -u origin main
Remplacez « nom_utilisateur » et « nom_du_depot » par votre nom d’utilisateur et le nom du dépôt choisi à l’étape précédente.
- Poussez la source WordPress vers GitHub. Utilisez les commandes suivantes :
git add . (Cette commande prépare tous les fichiers de votre projet)
git commit -m « valider le dossier du projet »
git push (Cette commande envoie tous les fichiers vers GitHub)
Après ces étapes, votre site WordPress local est intégré à GitHub.
Voici un aperçu :
La structure des dossiers est identique à celle que nous avions lors de l’ouverture du code source dans l’éditeur de code.
Votre équipe peut désormais cloner le dépôt sur leurs machines locales, créer des branches, travailler sur des fonctionnalités distinctes, puis les valider et les envoyer vers GitHub pour stockage.
Modifier votre site WordPress
La majorité du codage se fera dans le dossier des thèmes, accessible via le chemin suivant : `app/public/wp-content/themes`
Mon dossier contient trois thèmes. Mon site ressemble à ceci avant modification :
En suivant le chemin `app/public/wp-content/themes/templates/home.html`, je peux modifier le contenu de la page d’accueil.
Je peux changer le contenu du <H1> de la page d’accueil par « Ceci est un exemple d’intégration WordPress-GitHub ».
Après actualisation du serveur de développement local, voici le résultat :
Comment envoyer les modifications à GitHub
Les modifications apportées ci-dessus ne sont disponibles qu’en local. Il est nécessaire de les préparer, les valider et les envoyer vers GitHub. Procédez comme suit :
- Exécutez la commande : `git status`
Comme vous pouvez le voir, des fichiers non suivis sont présents dans `app/public/wp-content/themes/twentytwentythird/templates/home.html`
- Préparez vos modifications en utilisant la commande : `git add .`
- Validez vos modifications en utilisant la commande : `git commit -m « ce commit modifie la page d’accueil »`
- Envoyez les modifications avec la commande : `git push`
Le nouveau commit est visible dans le dépôt GitHub, comme le montre la capture d’écran :
Votre équipe peut désormais récupérer les modifications, les modifier et les envoyer vers ce dépôt.
Meilleures pratiques pour une intégration GitHub fluide
- Profitez du contrôle de version : Le contrôle de version (Git) est le principal avantage de l’intégration de WordPress avec GitHub. Assurez-vous de suivre chaque portion de code écrite ou modifiée.
- Créez un environnement intermédiaire : Le serveur de développement local est votre environnement intermédiaire. Vérifiez toutes les modifications sur ce serveur avant de les valider et de les transférer sur le site en ligne.
- Utilisez la fonctionnalité `.gitignore` : Il n’est pas nécessaire de suivre chaque dossier et fichier lors du développement d’un site WordPress. Concentrez-vous sur les thèmes. `.gitignore` permet de suivre uniquement les modifications pertinentes.
- Utilisez les branches : Plusieurs développeurs peuvent travailler simultanément sur différentes fonctionnalités. Créez des branches pour ces fonctionnalités et fusionnez-les avec la branche principale (Main/Master) après avoir validé le fonctionnement.
- Définissez un flux de travail : Un bon développeur doit avoir un flux clair indiquant les étapes à suivre, quand tester et déployer le site, et les critères à remplir.
- Automatisez les tests : Utilisez des pipelines d’intégration et de déploiement continus (CI/CD) comme Jenkins pour tester automatiquement le code au fur et à mesure du développement.
- Documentez votre travail : La documentation doit préciser la fonction de chaque fonctionnalité dans le code WordPress.
Conclusion
L’intégration de WordPress à GitHub est simple en suivant les étapes décrites. L’étape suivante consiste à fournir le lien du dépôt GitHub à votre équipe et à répartir les tâches. En tant que chef d’équipe, vous pouvez vérifier chaque commit avant validation. GitHub facilite également l’accès au code source car il est stocké dans le cloud.
De plus, si vous avez WordPress sur votre machine locale, vous pouvez l’héberger sur les pages GitHub si vous recherchez un site web statique. Vous pouvez aussi installer diverses extensions dans votre environnement de développement local.
Consultez également notre article sur GitHub vs GitLab.