Vous rencontrerez souvent les termes GitHub et WordPress dans le monde du développement. L’intégration de WordPress et de GitHub peut simplifier le flux de travail des développeurs et les rendre plus productifs.

GitHub est une plateforme en nuage qui vous permet de suivre, de gérer et de stocker votre code source. D’autre part, WordPress est un système de gestion de contenu (CMS) pour la création de sites web.

Pourquoi avez-vous besoin d’intégrer les deux ?

  • Contrôle des versions : Avec GitHub, vous pouvez suivre toutes les modifications apportées au code source de WordPress au fil du temps. Vous pouvez ainsi gérer facilement votre code personnalisé, vos thèmes WordPress et vos plugins.
  • Branchements : après avoir intégré WordPress à GitHub, vous n’avez plus besoin de maintenir le site web en état de maintenance. Créez de nouvelles branches, travaillez sur des fonctionnalités individuelles, testez-les et déployez-les une fois que vous êtes sûr que tout fonctionne comme prévu.
  • Collaboration : Il se peut que vous construisiez un site web de grande envergure nécessitant l’intervention de plusieurs développeurs. GitHub vous permet d’intégrer les membres de votre équipe et de leur attribuer différents rôles.
  • Révision du code : Les choses peuvent mal tourner lors de la construction d’une application WordPress et votre application peut tomber en panne. GitHub vous permet de revoir toutes les modifications apportées au code source de WordPress avant de le déployer dans le développement.
  • Sauvegarde et récupération du code : Stocker votre code source WordPress sur votre ordinateur peut être risqué car la machine peut tomber en panne ou être endommagée. GitHub stocke le code source dans le nuage, ce qui vous permet de le cloner sur votre ordinateur en cas de problème.
  • Transparence et responsabilité : GitHub vous permet de suivre clairement toutes les modifications apportées au code source de WordPress et de savoir qui les a apportées.

Qu’est-ce que WordPress ?

What-is-WordPress

WordPress est un système de gestion de contenu open-source que les personnes n’ayant pas d’expérience en matière de codage peuvent utiliser pour créer des sites web. Cette plateforme a été conçue à l’origine pour les blogs, mais elle a évolué et les utilisateurs peuvent désormais créer des plateformes de commerce électronique, des forums, des plateformes sociales, des applications mobiles et des sites web d’entreprise.

Le fait que WordPress soit open source est l’un des plus grands attraits pour les développeurs et les concepteurs. Vous pouvez donc télécharger le code source de WordPress, le modifier et le redistribuer. Cependant, vous devez acheter un nom de domaine et un hébergement pour publier votre site web en ligne.

Pourquoi utiliser WordPress ?

  • Facile à utiliser : WordPress est conçu pour être facile à utiliser, que vous soyez novice ou expert en codage. Vous pouvez utiliser l’éditeur “glisser-déposer” pour créer un site web professionnel sans avoir à écrire une seule ligne de code.
  • Une grande variété de thèmes : WordPress propose des milliers de thèmes que vous pouvez modifier en fonction de vos besoins. Vous pouvez également créer un thème personnalisé et le télécharger sur votre site web.
  • Différents plugins : Vous n’avez pas besoin de tout créer à partir de zéro, car vous pouvez utiliser des plugins. Par exemple, vous pouvez intégrer une application WordPress avec des passerelles de paiement à l’aide de plugins.
  • Grande communauté : Si vous êtes bloqué, vous pouvez toujours compter sur la grande communauté WordPress. Vous pouvez également utiliser des tonnes de ressources pour dépanner et résoudre différents problèmes.

Qu’est-ce que GitHub ?

GitHub

GitHub est une plateforme de développement de logiciels en nuage. Cette plateforme permet de stocker, de suivre et de collaborer à divers projets de développement. GitHub permet aux utilisateurs de créer des comptes gratuits, de créer des dépôts et d’inviter des collaborateurs pour divers projets. La plateforme fonctionne de manière transparente avec Git, une plateforme de contrôle de version qui vous permet de suivre localement les modifications apportées à votre projet.

GitHub propose un hébergement gratuit pour les sites web statiques via GitHub Pages et peut être une bonne option pour les pages de portfolio. Vous pouvez également utiliser GitHub comme plateforme de réseau social, car il vous permet d’afficher des projets publiquement. Cette fonctionnalité permet également aux développeurs d’explorer facilement les projets open-source auxquels ils peuvent contribuer.

Pourquoi utiliser GitHub ?

  • Facile à utiliser : La création d’un compte GitHub est facile, même si vous n’êtes pas un expert en technologie.
  • Basé sur le cloud : GitHub stocke votre code source dans le nuage, ce qui signifie que vous pouvez y accéder à distance ou même récupérer vos fichiers en cas de panne de votre ordinateur.
  • Contrôle des versions : GitHub assure le suivi de toutes les modifications apportées au code source. Vous pouvez également créer différentes branches pour faciliter le suivi.
  • Collaboration : Vous pouvez inviter des coéquipiers à collaborer à votre projet GitHub. Cette plateforme vous permet également de créer une organisation au sein de laquelle vous pouvez attribuer différents rôles et droits aux membres.

Comment utiliser GitHub pour WordPress

Vous devez créer un serveur de développement local avant de développer et d’intégrer un site WordPress avec GitHub.

Il existe différentes solutions pour créer un serveur de développement. Cependant, nous pouvons utiliser Local WP pour cet article.

Conditions requises pour l’intégration de WordPress à Github

  • Git. Il est préinstallé si vous disposez d’une machine fonctionnant sous la dernière version de Linux ou macOS. Vous pouvez utiliser cette commande pour vérifier s’il est disponible : git –version.
  • Compte GitHub fonctionnel. Si vous n’avez pas Git et GitHub, vous pouvez utiliser ce guide.
  • Compréhension du fonctionnement de WordPress

Installez Local WP

  • Sur la page de publication, sélectionnez une distribution qui correspond à votre système d’exploitation (j’utilise Ubuntu).
  • Après le téléchargement, suivez le guide d’installation correspondant à votre système d’exploitation.
WP Local
  • Local WP vous demandera de créer un compte gratuit. Vous pouvez sauter cette étape en cliquant sur le bouton ‘X’.
WP Local Account
  • Créer le premier site
image-70
  • Sélectionnez la première option qui vous permet de créer un nouveau site WordPress.
create a site
  • Donnez un nom à votre site
Website name
  • Sélectionnez votre environnement. Pour l’instant, optons pour “Preferred”.
WordPress environment
  • Définissez votre nom d’utilisateur et votre mot de passe.
Set password
  • Installez une extension pour vous aider à utiliser un éditeur de code. Vous naviguez vers le bouton d’extension sur le côté gauche de WP Local. Si vous utilisez VS Code, vous pouvez l’installer :
Xdebug and VS  Code

Vous avez maintenant un site WordPress que vous pouvez développer localement. La prochaine étape consistera à intégrer notre site à GitHub.

Local WordPress site

Connecter WordPress à GitHub

Dans l’interface de WP Local, vous pouvez cliquer sur “Go to site folder”, comme le montre cette capture d’écran.

Local WP site folder

Nous pouvons maintenant ouvrir le code source du site WordPress que nous avons créé localement. Comme j’utilise VS Code, la structure du dossier sera comme indiqué ci-dessous :

WordPress Site folder

Pour l’instant, ne vous préoccupez pas trop des différents dossiers et fichiers.

Créez un dépôt GitHub

En supposant que vous avez Git et que GitHub est configuré, vous pouvez suivre les étapes suivantes pour créer un dépôt et utiliser Git comme contrôle de version :

  • Connectez-vous à GitHub et cliquez sur “Nouveau”
GitHub new repo
  • Donnez un nom mémorable à votre dépôt, cochez les cases correspondantes et cliquez sur “Créer un dépôt”.
Name GitHub repo
  • Initialisez votre code source à partir du dossier du projet WordPress. GitHub vous donnera plusieurs commandes que vous pouvez copier-coller dans votre terminal pour commencer. Vous aurez des commandes similaires à celle-ci :
echo "# GitHub-WordPress" >> README.md
git init
git add README.md
git commit -m "premier commit"
git branch -M main
git remote add origin git@github.com:username/repository-name.git
git push -u origin main

Remplacez “username” et “repository-name” par votre nom d’utilisateur et le nom du dépôt que vous avez choisi à l’étape deux.

  • Poussez les sources de WordPress sur GitHub. Vous pouvez utiliser ces commandes :

git add . (Ceci met en scène tous les fichiers de votre projet)

git commit -m "commit le dossier du projet"

git push (Ce commit pousse tous les fichiers sur GitHub”

Après ces étapes, vous avez intégré votre site WordPress local à GitHub.

Regardez cette capture d’écran :

WordPress-GitHub integration

Vous remarquerez que la structure des dossiers est similaire à celle que nous avions lorsque nous avons ouvert notre code source dans l’éditeur de code.

Votre équipe peut maintenant cloner le dépôt sur leurs machines locales, créer des branches, travailler sur différentes fonctionnalités, les livrer et les pousser vers GitHub pour le stockage.

Modifier votre site WordPress

La majeure partie du codage/de la construction se fera dans le dossier themes. Vous pouvez localiser ce dossier en utilisant le chemin suivant : app/public/wp-content/themes

Mon dossier contient trois thèmes, et je peux sélectionner le plus récent. Mon site ressemble à ceci avant que je ne commence à le modifier :

blog-1

Si je suis ce 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

de la page d’accueil en “This is a WordPress-GitHub integration sample”.

Si je rafraîchis le contenu du serveur de développement local, c’est ce qui sera affiché :

TK-Shop

Comment pousser des changements vers GitHub

Les modifications que j’ai apportées ci-dessus ne sont disponibles que localement. Nous pouvons les mettre en scène, les valider et les pousser vers GitHub pour les stocker. Suivez les étapes suivantes :

  • Exécutez la commande suivante : git status
untracked git files

Comme vous pouvez le voir, il y a des fichiers non suivis sur app/public/wp-content/themes/twentytwentythree/templates/home.html

  • Mettez en scène vos modifications. Vous pouvez utiliser cette commande : git add .
  • Validez. Utilisez la commande git commit -m "ce commit édite la page d'accueil"
  • Poussez les modifications. Utilisez la commande suivante : git push.

Si nous retournons au dépôt sur GitHub, nous pouvons voir que nous avons un nouveau commit, comme le montre cette capture d’écran.

Pushed changes

Votre équipe peut maintenant récupérer les modifications, éditer les fichiers et les envoyer vers ce dépôt.

Meilleures pratiques pour maintenir une intégration GitHub fluide

  • Profitez du contrôle de version : Le plus grand avantage de l’intégration de WordPress avec GitHub est la fonction de contrôle de version. Assurez-vous de suivre tout le code que vous écrivez ou modifiez à l’aide du contrôle de version (Git)
  • Créez un environnement de test : Le serveur de développement local est votre environnement de mise à l’essai. Vérifiez toutes les modifications que vous apportez à votre site WordPress sur le serveur de développement local avant de les valider et de les transférer sur le site réel.
  • Utilisez la fonctionnalité .gitignore : Vous n’avez pas besoin de suivre chaque dossier et chaque fichier lorsque vous développez un site WordPress. Vous vous concentrerez principalement sur les thèmes. Vous pouvez utiliser la fonctionnalité .gitignore pour vous assurer que vous ne suivez que les changements pertinents.
  • Utilisez des branches : Plusieurs développeurs peuvent travailler simultanément sur différentes fonctionnalités. Vous pouvez créer des branches pour ces fonctionnalités et les fusionner avec la version principale après avoir testé que tout fonctionne.
  • Développez un flux de travail : Un bon développeur doit avoir un flux clair qui montre toutes les étapes à suivre dans le développement. Votre flux de travail doit indiquer quand tester et déployer votre site et quels sont les critères à respecter.
  • Automatisez les tests : Utilisez des pipelines d’intégration et de déploiement continus (CD/CI) comme Jenkins pour tester votre code automatiquement au fur et à mesure que vous le développez.
  • Documentez votre travail : La documentation doit indiquer ce que chaque fonctionnalité fait dans votre code WordPress.

Conclusion

Intégrer WordPress à GitHub est facile si vous suivez les étapes ci-dessus. L’étape suivante consiste à donner à vos coéquipiers le lien vers le dépôt GitHub et à leur assigner différentes fonctionnalités sur lesquelles travailler. Si vous êtes le chef d’équipe, vous pouvez toujours passer en revue tous les commentaires avant de les approuver. GitHub facilite également l’accès au code source puisqu’il est stocké dans le nuage.

D’autre part, si vous avez WordPress sur votre machine locale, vous pouvez l’héberger sur GitHub Pages si vous recherchez un site web statique. Vous pouvez également installer divers plugins à partir de leurs référentiels dans votre environnement de développement local.

Vous pouvez consulter notre article sur GitHub vs. GitLab.