WordPress & GitHub: Integrer for effektiv utvikling!

«`html

Samspillet mellom GitHub og WordPress

I utviklingsmiljøet vil du ofte støte på begrepene GitHub og WordPress. En integrasjon mellom WordPress og GitHub kan betydelig forenkle arbeidsflyten for utviklere og øke deres produktivitet.

GitHub er en skybasert plattform som brukes for å spore, administrere og lagre kildekode. WordPress, på den annen side, er et publiseringsverktøy (CMS) som primært brukes til å skape og vedlikeholde nettsider.

Hvorfor er det nyttig å integrere disse to?

  • Versjonskontroll: GitHub gjør det mulig å følge alle endringer i WordPress-kildekoden over tid. Dette gjør det lettere å administrere tilpasset kode, WordPress-temaer og plugins.
  • Forvaltning av endringer: Ved å integrere WordPress med GitHub, unngår du å sette hele nettstedet i vedlikeholdsmodus for oppdateringer. Du kan opprette separate grener, utvikle nye funksjoner, teste dem grundig og publisere dem når du er sikker på at alt fungerer som det skal.
  • Samarbeid: Hvis du arbeider med et større nettsted som krever innsats fra flere utviklere, kan GitHub forenkle samarbeidet. Plattformen lar deg invitere teammedlemmer og tildele dem spesifikke roller.
  • Kvalitetssikring av kode: Under utviklingen av en WordPress-applikasjon kan feil oppstå. GitHub gir deg muligheten til å gjennomgå alle kodeendringer før de implementeres i produksjon.
  • Sikkerhetskopiering og gjenoppretting: Det kan være risikabelt å lagre WordPress-kildekoden lokalt på datamaskinen din, ettersom maskinen kan svikte eller bli skadet. GitHub sikrer at kildekoden er lagret trygt i skyen, slik at den enkelt kan gjenopprettes ved behov.
  • Åpenhet og sporbarhet: GitHub gir en klar og tydelig oversikt over alle endringer som er gjort i WordPress-koden, og av hvem. Dette øker transparensen og ansvarligheten i utviklingsprosessen.

Hva er WordPress?

WordPress er et publiseringsverktøy med åpen kildekode, som gjør det mulig for enkeltpersoner uten kodeerfaring å lage sine egne nettsider. Plattformen ble opprinnelig utviklet for blogger, men er i dag et fleksibelt verktøy som kan brukes til å bygge alt fra nettbutikker og diskusjonsfora til sosiale plattformer og bedriftsnettsider.

Åpen kildekode er en av de største fordelene for utviklere og designere. Det gir deg muligheten til å laste ned, redigere og videreutvikle WordPress sin kildekode. For å publisere nettstedet ditt på internett må du derimot skaffe et domenenavn og webhotell.

Hvorfor velge WordPress?

  • Brukervennlighet: WordPress er utformet for å være enkel å bruke, uansett om du er nybegynner eller en erfaren utvikler. Med dra-og-slipp-funksjoner kan du bygge et profesjonelt nettsted uten å skrive en eneste linje med kode.
  • Et mangfold av temaer: WordPress tilbyr et enormt utvalg av temaer som kan tilpasses dine spesifikke behov. Du har også mulighet til å lage et helt tilpasset tema.
  • Ulike plugins: I stedet for å kode alt fra bunnen av, kan du benytte deg av plugins. Du kan f.eks. integrere betalingsløsninger i WordPress-applikasjonen din ved hjelp av plugins.
  • Stort fellesskap: Hvis du skulle støte på problemer, kan du alltid regne med et stort og aktivt WordPress-fellesskap. Det finnes også en rekke ressurser tilgjengelig som kan hjelpe deg med å finne løsninger på forskjellige utfordringer.

Hva er GitHub?

GitHub er en skybasert plattform for programvareutvikling. Den gjør det mulig å lagre, spore og samarbeide om ulike utviklingsprosjekter. På GitHub kan brukere opprette gratis kontoer, opprette egne kodebaser (repositories) og invitere andre til å samarbeide. Plattformen er designet for å fungere sømløst med Git, et versjonskontrollsystem som lar deg spore endringer i prosjektet ditt lokalt.

GitHub tilbyr gratis hosting av statiske nettsider via GitHub Pages, noe som er et godt alternativ for f.eks. porteføljesider. Plattformen fungerer også som et sosialt nettverk der utviklere kan dele sine prosjekter offentlig og utforske åpen kildekode prosjekter.

Hvorfor velge GitHub?

  • Brukervennlig: Det er enkelt å opprette en GitHub-konto selv om du ikke har teknisk bakgrunn.
  • Skybasert: GitHub lagrer kildekoden din i skyen, som gir deg tilgang til koden fra hvor som helst, og mulighet til å gjenopprette filene dersom maskinen din skulle krasje.
  • Versjonskontroll: GitHub holder oversikt over alle endringer som gjøres i kildekoden. Du kan også opprette separate grener for enklere sporing av ulike funksjoner.
  • Samarbeid: Du kan invitere teammedlemmer til å samarbeide på GitHub-prosjektet ditt. Plattformen lar deg også opprette organisasjoner der du kan tildele forskjellige roller og rettigheter til medlemmene.

Hvordan bruke GitHub med WordPress

Før du begynner å utvikle og integrere et WordPress-nettsted med GitHub, er det nødvendig å sette opp en lokal utviklingsserver.

Det finnes flere måter å opprette en utviklingsserver på, men i denne artikkelen vil vi bruke Local WP.

Krav til integrasjon mellom WordPress og GitHub

  • Git. Dette er ofte forhåndsinstallert på maskiner som kjører den nyeste versjonen av Linux eller macOS. Du kan sjekke om det er tilgjengelig med kommandoen: git --version.
  • En aktiv GitHub-konto. Hvis du ikke har Git og GitHub, kan du bruke denne veiledningen.
  • Grunnleggende forståelse for hvordan WordPress fungerer.

Installer Local WP

  • Gå til nedlastingssiden og velg versjonen som passer til operativsystemet ditt. (Vi bruker Ubuntu i dette eksemplet).
  • Etter nedlasting følger du installasjonsveiledningen som er tilpasset ditt operativsystem.

  • Local WP vil be deg om å opprette en gratis konto. Du kan hoppe over dette ved å klikke på «X»-knappen.

  • Velg det første alternativet for å opprette en ny WordPress-side.

  • Velg ønsket miljø. La oss velge «Foretrukket» i dette tilfellet.

  • Konfigurer brukernavn og passord.

  • Installer et tillegg som hjelper deg med å bruke en kodeeditor. Du finner utvidelsesknappen på venstre side av WP Local. Hvis du bruker VS Code, kan du installere denne:

Du har nå en WordPress-side som du kan utvikle lokalt. Neste steg er å integrere nettstedet med GitHub.

Hvordan koble WordPress til GitHub

I WP Local-grensesnittet kan du klikke på «Gå til nettstedsmappe», som vist på skjermbildet.

Nå kan vi åpne kildekoden til WordPress-siden vi har opprettet lokalt. Hvis du bruker VS Code, vil mappestrukturen være som vist nedenfor:

For nå trenger du ikke fokusere for mye på de ulike mappene og filene.

Opprett et GitHub-depot

Forutsatt at Git og GitHub er konfigurert, kan du følge disse stegene for å opprette en kodebase (repo) og ta i bruk Git for versjonskontroll:

  • Logg inn på GitHub og klikk på «Ny»

  • Gi kodebasen et navn, kryss av for de aktuelle boksene, og klikk på «Opprett depot».

  • Initialiser kildekoden din fra WordPress-prosjektmappen. GitHub vil generere en rekke kommandoer som du kan kopiere og lime inn i terminalen for å komme i gang. Disse vil ligne på dette:
echo "# GitHub-WordPress" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin [email protected]:username/repository-name.git
git push -u origin main

Erstatt «brukernavn» og «depotnavn» med ditt GitHub-brukernavn og navnet på din kodebase.

  • Last opp WordPress-kildekoden til GitHub. Du kan bruke disse kommandoene:

git add . (Dette legger til alle filene i prosjektet ditt for endring)

git commit -m «commit the project folder»

git push (Denne kommandoen laster opp alle filene til GitHub)

Etter å ha fulgt disse stegene, har du integrert ditt lokale WordPress-nettsted med GitHub.

Ta en titt på dette skjermbildet:

Du vil legge merke til at den har samme mappestruktur som da vi åpnet kildekoden i kodeeditoren.

Teamet ditt kan nå klone depotet til deres lokale maskiner, opprette grener, arbeide med forskjellige funksjoner, teste dem og laste dem opp til GitHub.

Rediger WordPress-siden din

Hoveddelen av kodingen/byggingen vil foregå i temamappen. Du finner denne mappen ved hjelp av denne stien: app/public/wp-content/themes

Min mappe inneholder tre temaer, og jeg har valgt det nyeste. Slik ser siden min ut før jeg begynner å redigere:

Ved å følge denne stien: app/public/wp-content/themes/templates/home.html, kan jeg redigere innholdet på hjemmesiden.

Jeg kan endre innholdet i <H1> på hjemmesiden til «Dette er et WordPress-GitHub-integrasjonseksempel».

Hvis jeg oppdaterer innholdet på den lokale utviklingsserveren, vil dette vises:

Hvordan laste opp endringer til GitHub

Endringene jeg har gjort ovenfor er kun tilgjengelige lokalt. Vi må legge dem til, lagre dem og laste dem opp til GitHub. Følg disse instruksjonene:

  • Kjør denne kommandoen: git status

Som du ser, er det ikke-sporede filer i app/public/wp-content/themes/twentytwentythree/templates/home.html

  • Legg til endringene. Du kan bruke denne kommandoen: git add .
  • Lagre endringene. Bruk denne kommandoen: git commit -m "Denne endringen redigerer hjemmesiden"
  • Last opp endringene. Bruk denne kommandoen: git push

Hvis vi går tilbake til kodebasen på GitHub, ser vi at det er en ny endring, som vist på dette skjermbildet.

Teamet ditt kan nå laste ned endringene, redigere filene og laste dem opp til denne kodebasen.

Gode fremgangsmåter for å opprettholde en problemfri GitHub-integrasjon

  • Bruk versjonskontroll: Den største fordelen med å integrere WordPress med GitHub er versjonskontrollfunksjonen. Sørg for at du sporer all kode du skriver eller endrer ved hjelp av Git.
  • Opprett et testmiljø: Den lokale utviklingsserveren fungerer som ditt testmiljø. Sjekk alle endringene du gjør på WordPress-siden din her, før du lagrer og laster dem opp til det aktive nettstedet.
  • Bruk .gitignore-funksjonen: Det er ikke nødvendig å spore hver mappe og fil når du utvikler et WordPress-nettsted. Hovedfokuset vil ligge på temaer. Bruk .gitignore for å sikre at du kun sporer de relevante endringene.
  • Bruk grener: Du kan ha flere utviklere som arbeider med ulike funksjoner samtidig. Opprett grener for hver funksjon og slå dem sammen med Master/Main når du er sikker på at alt fungerer som det skal.
  • Utvikle en arbeidsflyt: En god utvikler har en tydelig arbeidsflyt som viser alle trinnene som skal følges i utviklingsprosessen. Arbeidsflyten bør inneholde informasjon om når du skal teste og lansere nettstedet ditt, og hvilke kriterier som må oppfylles.
  • Automatiser testing: Bruk kontinuerlig integrasjon og kontinuerlig distribusjon (CI/CD) pipelines, som Jenkins, for å teste koden din automatisk under utvikling.
  • Dokumenter arbeidet ditt: Dokumentasjonen bør forklare hva hver funksjon gjør i WordPress-koden.

Konklusjon

Det er enkelt å integrere WordPress med GitHub når du følger trinnene ovenfor. Det neste steget er å gi teammedlemmene tilgang til GitHub-kodebasen og tildele dem forskjellige oppgaver. Hvis du er teamleder, kan du gjennomgå alle endringer før de godkjennes. GitHub gjør det også enkelt å få tilgang til kildekoden, ettersom den lagres trygt i skyen.

Med WordPress på din lokale maskin, kan du også publisere en statisk versjon av nettstedet via GitHub Pages. Du har også tilgang til å installere ulike plugins i ditt lokale utviklingsmiljø.

Du kan også se vår artikkel om GitHub vs. GitLab.

«`