Nejlepší blaženost spolupráce s kódem

autor:
Tweet
Share
Share
Pin

Propojení světa WordPress a GitHub

Ve světě vývoje se často setkáváme s pojmy GitHub a WordPress. Jejich integrace může programátorům zefektivnit pracovní proces a zvýšit jejich produktivitu.

GitHub představuje cloudovou platformu, která umožňuje sledování, správu a uchovávání zdrojového kódu. WordPress, naopak, je redakční systém (CMS) určený pro tvorbu webových stránek.

Proč je integrace výhodná?

  • Správa verzí: GitHub umožňuje sledovat veškeré změny zdrojového kódu WordPress v čase. Tímto způsobem můžete snadno spravovat vlastní kód, šablony a pluginy.
  • Větvení: Díky integraci s GitHub již není nutné uvádět web do stavu „údržba“. Můžete vytvářet nové větve, pracovat na jednotlivých funkcích, testovat je a následně implementovat, až budete s výsledkem spokojeni.
  • Spolupráce: Pokud vyvíjíte rozsáhlý web, na kterém se podílí více vývojářů, GitHub vám umožní začlenit členy týmu a přidělit jim různé role.
  • Revize kódu: Při vývoji aplikace WordPress může dojít k chybám. GitHub umožňuje kontrolovat veškeré změny zdrojového kódu před nasazením do produkčního prostředí.
  • Zálohování a obnova: Ukládání zdrojového kódu WordPress na lokálním počítači je rizikové. GitHub uchovává kód v cloudu, což umožňuje jeho obnovu v případě selhání hardwaru.
  • Transparentnost a zodpovědnost: GitHub poskytuje přehled o všech změnách provedených v kódu WordPress, včetně toho, kdo je provedl.

Co je WordPress?

WordPress je open-source redakční systém, který umožňuje i uživatelům bez znalosti programování vytvářet webové stránky. Původně byl určen pro blogy, ale dnes umožňuje i tvorbu e-commerce platforem, fór, sociálních sítí, mobilních aplikací a firemních webů.

Open-source povaha WordPressu je velkým lákadlem pro vývojáře. Zdrojový kód je volně dostupný a lze jej upravovat. Pro publikaci webu online je však nutné zakoupit doménové jméno a hosting.

Proč používat WordPress?

  • Snadné použití: WordPress je uživatelsky přívětivý, ať už jste v kódování nováček nebo expert. Díky editoru „drag and drop“ můžete vytvářet profesionální weby bez nutnosti psát kód.
  • Rozmanité šablony: WordPress nabízí tisíce šablon, které lze upravit dle vašich potřeb. Můžete si také vytvořit vlastní šablonu.
  • Rozšiřitelné pluginy: Nemusíte vyvíjet vše od začátku. Můžete využít pluginy pro integraci s platebními bránami a dalšími službami.
  • Velká komunita: V případě problémů se můžete spolehnout na rozsáhlou komunitu WordPress. K dispozici je spousta zdrojů pro řešení potíží.

Co je GitHub?

GitHub je cloudová platforma pro vývoj softwaru, která umožňuje uchovávat, sledovat a spolupracovat na vývojových projektech. Uživatelé mohou zdarma vytvářet účty, zakládat repozitáře a zvát spolupracovníky. Platforma úzce spolupracuje s Gitem, nástrojem pro správu verzí, který umožňuje lokálně sledovat změny v projektu.

GitHub nabízí zdarma hosting statických webů prostřednictvím GitHub Pages, což je vhodná volba pro portfoliové stránky. GitHub lze využít i jako platformu pro sdílení projektů s otevřeným kódem, do kterých mohou přispívat i ostatní vývojáři.

Proč používat GitHub?

  • Snadné použití: Založení účtu na GitHubu je jednoduché i pro uživatele bez technických znalostí.
  • Cloudové úložiště: Zdrojový kód je uložen v cloudu, což umožňuje k němu vzdálený přístup a obnovu v případě havárie počítače.
  • Správa verzí: GitHub sleduje veškeré změny provedené v kódu. Můžete vytvářet různé větve pro snadné sledování vývoje.
  • Spolupráce: Do projektu můžete pozvat další vývojáře. Platforma umožňuje vytvářet organizace a přidělovat členům různé role.

Integrace WordPress a GitHub

Před propojením webu WordPress s GitHub je nutné vytvořit si lokální vývojové prostředí.

Pro vytvoření lokálního serveru existuje několik řešení. V tomto článku budeme používat Local WP.

Požadavky pro integraci

  • Git: Bývá předinstalován na systémech Linux a macOS. Pro ověření verze použijte příkaz: git --version.
  • Funkční účet na GitHubu. Pokud nemáte Git a GitHub, můžete se inspirovat tímto průvodcem.
  • Základní znalost fungování WordPressu.

Instalace Local WP

  • Na stránce vydání vyberte verzi pro svůj operační systém (v příkladu použijeme Ubuntu).
  • Postupujte podle instalačních pokynů pro váš systém.

  • Local WP vás vyzve k vytvoření bezplatného účtu. Tento krok můžete přeskočit kliknutím na „X“.

  • Vyberte první možnost pro vytvoření nového webu WordPress.

  • Zvolte preferované prostředí. Pro tento článek zvolíme „Preferred“.

  • Zadejte uživatelské jméno a heslo.

  • Nainstalujte si plugin pro váš kódový editor. Pokud používáte VS Code, můžete nainstalovat tento plugin:

Nyní máte vytvořený lokální web WordPress pro vývoj. Dalším krokem bude propojení s GitHubem.

Propojení WordPress s GitHub

V rozhraní Local WP klikněte na „Go to Site Folder“, jak je znázorněno na obrázku.

Otevře se složka se zdrojovým kódem WordPress. Struktura složek ve VS Code bude vypadat následovně:

Zatím se nemusíte starat o jednotlivé složky a soubory.

Vytvoření repozitáře na GitHub

Pokud máte nakonfigurovaný Git a GitHub, postupujte podle následujících kroků:

  • Přihlaste se na GitHub a klikněte na „New“.

  • Zadejte název repozitáře, zaškrtněte příslušná políčka a klikněte na „Create repository“.

  • Inicializujte zdrojový kód ze složky projektu WordPress. GitHub vám poskytne několik příkazů, které můžete zkopírovat do terminálu:
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:username/repository-name.git
git push -u origin main

Nahraďte „username“ a „repository-name“ svým uživatelským jménem a názvem repozitáře.

  • Nahrajte zdrojový kód WordPress na GitHub pomocí těchto příkazů:

git add . (Tímto se přidají všechny soubory)

git commit -m "upload project folder"

git push (Odešle soubory na GitHub)

Po těchto krocích je lokální web WordPress propojený s GitHubem.

Podívejte se na obrázek:

Struktura složek je podobná struktuře, kterou jsme viděli v editoru kódu.

Nyní může váš tým klonovat repozitář na lokální počítače, vytvářet větve, pracovat na jednotlivých funkcích, a odesílat změny na GitHub.

Úpravy webu WordPress

Většina kódu a úprav se provádí ve složce šablon, kterou najdete v: app/public/wp-content/themes

V této složce se nachází několik šablon. Než začnu upravovat, můj web vypadá takto:

Pokud se podívám do cesty app/public/wp-content/themes/templates/home.html, mohu upravit obsah domovské stránky.

Změním obsah <H1> na „Toto je ukázka integrace WordPress-GitHub“.

Po obnovení lokálního serveru se zobrazí:

Odeslání změn na GitHub

Změny, které jsem provedl, jsou zatím dostupné jen lokálně. Můžeme je připravit, odevzdat a odeslat na GitHub:

  • Spusťte příkaz: git status

Vidíte, že ve složce app/public/wp-content/themes/twentytwentythree/templates/home.html se nacházejí nesledované soubory.

  • Uspořádejte úpravy pomocí příkazu: git add .
  • Odevzdejte změny příkazem: git commit -m "change home page"
  • Odešlete změny příkazem: git push

V repozitáři na GitHubu nyní můžeme vidět nový commit:

Váš tým nyní může stahovat změny, upravovat soubory a odesílat je do tohoto repozitáře.

Doporučení pro bezproblémovou integraci s GitHubem

  • Využívejte správu verzí: Správa verzí je největší výhodou propojení WordPress a GitHub. Sledujte veškerý kód pomocí Gitu.
  • Pracujte v lokálním prostředí: Lokální server je vaše pracovní prostředí. Vždy otestujte změny lokálně před odesláním na živý web.
  • Používejte .gitignore: Ne všechny soubory je nutné sledovat. Zaměřte se hlavně na šablony. Použijte .gitignore pro sledování jen relevantních změn.
  • Používejte větve: Při práci více vývojářů najednou, vytvořte pro jednotlivé funkce větve. Po otestování je sloučte s hlavní větví.
  • Vytvořte pracovní postup: Mějte jasný postup, který popisuje kroky při vývoji. Určete, kdy se má web testovat a nasazovat.
  • Automatizujte testování: Používejte nástroje pro průběžnou integraci a průběžné zavádění (CI/CD) jako Jenkins pro automatické testování kódu.
  • Dokumentujte: Dokumentace by měla popisovat, co dělá každá funkce v kódu WordPress.

Závěr

Integrace WordPress s GitHubem je jednoduchá, pokud postupujete podle těchto kroků. Dále už jen stačí dát týmu odkaz na repozitář a přidělit jim role. Pokud jste vedoucí týmu, můžete kontrolovat všechny změny, než je schválíte. GitHub usnadňuje přístup ke zdrojovému kódu, protože je uložen v cloudu.

WordPress můžete provozovat na lokálním počítači a hostovat ho na GitHub Pages pro statický web. Můžete také instalovat různé pluginy z repozitářů ve svém vývojovém prostředí.

Podívejte se i na náš článek o GitHub vs. GitLab.