• Gå direkte til primær navigation
  • Skip til indhold
  • Gå direkte til primær sidebar

WPTRICKS{DK}

En blog om WordPress, Webudvikling og gode idéer!

  • Forsiden
  • WordPress Guide
  • WordPress Hosting
  • Gratis WordPress Sparring
  • Er mit domæne ledigt?
  • Få gratis hjælp til WordPress
Du er her: Forside / Generelt / WordPress & AngularJS – Part 1

WordPress & AngularJS – Part 1

13. september 2017 af Aris Skriv kommentar

Endelig har jeg fået tid til at afprøve noget, som jeg har tænkt over i lang tid. Hvordan vil WordPress fungere som backoffice til en AngularJS frontend? Indtil nu – FANTASTISK!

Det første spørgsmål var egentlig, om jeg skulle prøve med AngularJS 1 eller AngularJS 2/4. Lidt svært at bedømme, når man ikke har siddet med begge. Derfor satte jeg WordPress op, og prøvede med AngularJS 2. Det fungerede – til dels. Det skal lige siges, at jeg ikke rigtig har arbejdet med Angular 2 – og måske har jeg ikke gjort det helt korrekt – men jeg fik det da til at loade mine posts. Dog sprang jeg fra det ganske hurtigt, da jeg ikke rigtig følte, at jeg kom nogle steder. Der mangler stadig en masse dokumentation på dette ude på det store internet.

Valget faldt på AngularJS 1

Hvorfor? Simpelt; Jeg har arbejdet en del med AngularJS 1 – og vidste derfor hvad jeg præcist skulle bruge, og hvordan jeg skulle bygge mine elementer op. Der gik en masse tid med at læse om WordPress’ REST API v2 (plugin | dokumentation) – og afprøve en masse endpoints i Postman. Jeg havde alt det jeg skulle bruge – og så var det egentlig bare at gå i gang med opbygningen af HTML’en, som skulle danne rammer for et AngularJS baseret WordPress site.

Opbygning af tema

I AngularJS 2 skulle jeg bruge TypeScript og ECMAscript 6, for at danne de nødvendige komponenter og services der skulle til, for at jeg kunne få indhold på mine templates/views. Dette var én af grundende til, at jeg hurtigt fravalgte AJS2. Jeg byggede i stedet min themefolder op med de 5 “vitale” filer der skal til:

  1. index.php
  2. header.php
  3. footer.php
  4. functions.php
  5. style.css

Disse 5 filer skal danne ramme for mit WordPress theme – og jeg begyndte hurtigt at overveje, hvordan jeg kan dele mine HTML, CSS og JS filer op, så det giver mest mening. Jeg opbggede mit theme, så det er bygget logisk (i mit hoved, i hvert fald), hvor alle views og partials (de HTML sider der viser f.eks. indhold osv. samt indholdet i header, footer og menu) ligger i én mappe, mens mine controllers og JS er i en anden mappe. Her er et screenshot af min mappestruktur:

 

De røde streger er de steder jeg gemmer alle mine JS-filer. I “JS” mappen er der én fil – app.js – den indeholder min AngularJS App modul, config og filter – det er her al min routing bliver styret. Dvs. at hvis jeg går ind på www.wptricks.dk/test – så tjekker den herinde, om der er noget der hedder “test” – og hvis der er, så viser den et tilhørende view (HTML) der hører til netop denne side.

De blå streger er de steder jeg har al min CSS/SCSS. I “css” mappen er min main.css, hvor al min SCSS bliver compilet og autoprefixet. Denne bliver så enqueuet i functions.php, så min styling bliver sat ind på selve siden.

Den grønne streg er det sted jeg gemmer alle mine views og partials. Som du kan se, så er der et view til “home”, dvs. min forside, content.html bliver initialiseret når jeg går ind på f.eks. en side eller en artikel – og 404.html vises når min router ikke kunne finde et resultat.

Hvorfor gøre det på denne måde?

Det er der faktisk en ganske god grund til.
Jeg er træt af langsomme WordPress sider. Desuden, er WordPress temaerne FYLDT med en masse bloated kode, som ikker er kønt. Se f.eks. kildekoden til det mest solgte WordPress theme, Avada:

Som du kan se, består kildekoden af 990 linjer!
Det er, i sig selv, ikke meget – men når 40% af al den kode er noget som man ikke bruger, så er det meget! Der er f.eks. en masse inline styling, whitespace og scripts, som man ikke bruger på et WordPress site – men muligheden skal være der, da der KAN være at man får brug for det.

Ydermere, så er den gennemsnitlige loadhastighed på 2.02 sekunder(!)
Det er netop disse ting jeg gerne ville væk fra…

Derfor satte jeg mig for at bygge et hurtigt WordPress theme, som ikke havde al den bloatede kode, som mange WordPress themes, desværre, består af. De resultater, som jeg er kommet frem til lige nu, er VANVITTIGE ift. ovenstående! Vil du gerne se de resultater som jeg er kommet frem til?  Og vil du gerne have “basen” til mit AngularJS WordPress theme? Så tilmeld dig mit nyhedsbrev i højre side – eller du kan vente på at jeg skriver part 2 af denne WordPress & AngularJS “serie”.

Jeg glæder mig til at dele min viden med dig!

Populært lige nu...

  • - Alternativer til Google Analytics
  • - 10 mest stillede spørgsmål om WooCommerce
  • - 8 Tips til at skrive et godt indlæg
  • - Gratis WordPress hjemmeside

Skrevet i: AngularJS, Generelt, WordPress Temaer Tags: angularjs, Google, JS, Load, MVC, seo, wordpress

Læserinteraktioner

Skriv et svar Annuller svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

Primær Sidebar

Søg

Mine anmeldelser

  • Kinsta.com(☆☆☆☆☆)
  • Nordicway.dk(☆☆☆☆)
  • UnoEuro / simply.com (☆☆☆)
  • One.com (☆☆)

Simply

Hold dig opdateret

Et par gange om året sender jeg et nyhedsbrev ud, med alle de nye tiltag jeg har gang i.
INGEN SPAM - det lover jeg!


… eller vælg en kategori

  • AngularJS (3)
  • Gammel (1)
  • Generelt (48)
  • Gør det selv (30)
  • Hosting (4)
  • WooCommerce (1)
  • WordPress Admin (3)
  • WordPress Fejl (3)
  • WordPress Guide (17)
  • WordPress Nyt (8)
  • WordPress Plugins (19)
  • WordPress Temaer (10)
  • WordPress Tips (30)
  • WordPress Tutorials (2)

Arkiver

  • januar 2023 (1)
  • juni 2022 (1)
  • februar 2022 (2)
  • januar 2022 (1)
  • december 2021 (2)
  • oktober 2021 (1)
  • april 2021 (1)
  • marts 2021 (1)
  • februar 2021 (2)
  • november 2020 (1)
  • august 2020 (1)
  • juli 2020 (2)
  • juni 2020 (1)
  • marts 2020 (1)
  • februar 2020 (2)
  • januar 2020 (5)
  • november 2019 (1)
  • maj 2019 (1)
  • april 2019 (1)
  • september 2018 (1)
  • juni 2018 (2)
  • april 2018 (1)
  • december 2017 (3)
  • oktober 2017 (1)
  • september 2017 (1)
  • november 2016 (1)
  • juni 2016 (1)
  • april 2016 (1)
  • marts 2016 (1)
  • juli 2015 (1)
  • september 2014 (1)
  • juni 2014 (3)
  • marts 2014 (5)
  • februar 2014 (2)
  • november 2013 (4)
  • oktober 2013 (1)
  • maj 2013 (1)
  • april 2013 (2)
  • marts 2013 (1)
  • januar 2013 (7)
  • december 2012 (2)

© Copyright 2012 - 2023 | WPTricks.dk | Sitemap | Cookie- og Privatlivspolitik