Vad är Migrate 2 WP kan man undra. Det är ett namn som dyker upp lite här och där på guide.ffuniverse.nu. Men vandra inte i okunskap. Ta några minuter av din tid så ska jag här förklara det du behöver veta (OBS! Teknisk artikel).

WordPress

Först och främst så står “WP” för WordPress, världens största system för bloggar, nu senare också för vanliga hemsidor – som FFU. Enligt Wikipedia kan så körs över 60 miljoner olika hemsidor i världen på WordPress! Du besöker nästan garanterat dagligen hemsidor som visas tack vare att WordPress ligger bakom och puttrar.

WordPress har nog hundratals fördelar jämfört med att fortsätta utveckla varje sajt på FFU på det gamla sättet: manuellt i statiska filer, utan databas. Men jag ska inte gå in i detalj på WordPress i denna artikel. Utan här ska jag förklara vad då “Migrate 2 WP” är, ett system som jag skapade med hjälp av Jimmy “epaaj” då FF7-sajten skulle göras om med start i 2012.

Migrate 2 WP

Migrate 2 WP är ett migreringsverktyg som springer ur all kod jag var tvungen att skriva för att kunna underlätta mitt jobb att förnya FF7-sajten. Jag byggde då upp allt i flera mindre filer, varje fil kördes genom att skriva in rätt sökväg i webbläsaren. När koden på en sida var gjord så hade ett steg i migreringen utförs. Sen gick man till nästa sida. Och så vidare, tills alla steg var utförda. Men det var ingen grafik eller design på systemet, inga hjälptexter, stegen länkade inte mellan varandra, allt var manuellt och komplext, och det kraschade titt som tätt.

Så det jag gjorde var att starta upp ett nytt projekt på GitHub (en av världens största hemsidor för öppen källkod där alla kan delta). Efter det började jag så smått att bygga bryggor mellan alla stegen, göra så att man måste ta dem i en speciell ordning, samt så klart att lägga på en fin och användarvänlig design.

Just idag är systemet officiellt i version 0.8 och inte färdigt för beta ens. Men jag har gjort flera förbättringar och fler ska in. Förhoppningen är att nå en stabil version 1.0 och använda den för att få flyttat våra största och mest komplexa sajter, så som de för FF8, FF9, och FF10.

De stegen systemet utför är:

  1. Hämta och spara alla sidor på en sajt
  2. Ta bort repetativ kod (header och footer)
  3. Rensa bort dålig/onödig kod
  4. Formatera om all kod enligt W3C-standard med Tidy
  5. Efterbehandla den formaterade texten
  6. Manuellt koppla gammal menystruktur till den nya i WordPress
  7. Skjuta in all text på rätt plats i WordPress

Systemet är väldigt smart på detta sätt, och även om vissa saker fortfarande kräver en utvecklares fulla uppmärksamhet, så underlättar varje litet steg enormt mycket då vi snackar om runt 100 sidor på vissa sajter. Att flytta och uppdatera alla sidorna på FF7-sajten hade till exempel tagit mig många långa och tråkigt repetativa timmar.

Komma igång

Först och främst loggar man in i systemet och lägger upp den eller de sajter man vill flytta. Varje sajt har några egna inställningar man kan ändra på. När man är klar väljer man en av de sajter/projekt man lagt in och kan så börja på Steg 1.

Steg 1

I Steg 1 så fyller man in en startsida på FFU, t.ex. “www.ffuniverse.nu/ff8/” och sedan går en robot dit och börjar leta länkar. Roboten sparar samtidigt undan absolut all kod på sidan, även det som inte är själva textinnehållet på sidan. Roboten finner sen alla länkar i koden som går innanför FF8-sajten (den går aldrig utanför den sökväg man angett) och börjar att “tvätta” dem från dubletter. Roboten går sedan till den första länken i listan och upprepar mönstret. Detta fortsätter den med tills absolut alla sidor den kunde finna har sparats in i databasen – utan en enda dublett.

Nu är det som hade tagit en person upp till någon minut per sida färdigt – i loppet av kanske 1-2 minuter för vår robot. På enbart FF7-sajten sparade vi alltså in minimum två timmar, på endast detta steg!

Det fina är också att man kan dels köra varje steg flera gånger (det gamla sparas då helt enkelt bara över), och dels kan man alltid göra en provkörning först som visar alla resultat man kommer få, men utan att något sparas. Genialt va?

Steg 2

När vi kommer nått Steg 2 så har vi alla sidorna i databasen. Detta hjälper oss väldigt mycket framöver då Migrate 2 WP prövar att automatisera så mycket som möjligt åt dig. Det vi nu ska göra är att definiera det jag kallar “Needles” i systemet. Det är snuttar med kod som garanterat visar vart allt innehåll på en sida startar och börjar – alltså själva guidetexterna. Vi måste ha “Needles” eftersom att i Steg 1 så sparade vi precis all HTML-kod på sidan, och där finns mycket vi inte behöver – eller ska – ha med in i WordPress sen.

Man kan till exempel skriva in “<div class=’main’>” som en “Needle” att starta på. Koden kommer då öppna alla sidor i databasen och leta efter denna kodsnutt och sedan klippa bort den och allt kod innan. När sedan samma görs för en andra, avslutande “Needle”, så har vi faktiskt klippt bort all onödig HTML-kod, alltså allt av copyright-texter, gamla menyer, gammal design, och liknande.

Den avskalade HTML-koden sparas in i ett nytt fält i databasen (så att man kan köra om stegen separat). Detta ska endast vara text som vi vill publicera i sin helhet på den nya guiden i WordPress. Om resultatet inte är perfekt kan man antingen behöva testa några andra “Needles”, eller uppdatera originalkoden på sajten som roboten läste av i Steg 1 och manuellt lägga in unika “Needles” i form av till exempel unika html-kommentarer.

Steg 3

När vi fått rensat bort all upprepande kod med våra Needles i förra steget så är det dags att gå ned på djupet i den text som blev kvar. Många av guiderna på FFU skrev och utvecklade jag för upp till 15 år sedan. Det är inte bara svenskan som är mindre bra på sina ställen, det värsta är all fruktansvärt dålig kod som gömt sig i alla texter. Allt från komplexa och dåliga tables, till gamla html-taggar som inte längre stöds.

Detta steg är i nuläget manuellt i det att man måste lägga in all gammal kod man vill rensa bort inne i koden till detta steg. Den finner massa gammal dålig html och byter ut den med något bättre, eller tar det bort helt. Du väljer själv.

Detta steg ska jag jobba lite på för att förenkla. Det kommer fortfarande vara lite manuellt, men man ska i vartfall slippa ändra direkt i källkoden. Möjligen får man lägga upp en egen lista på ersättningar, som sparas undan så att de kan återanvändas på andra sajter. Extra kul hade varit om koden kunde analysera all text och ge konkreta förslag på ersättningar.

Mest använder jag detta steg till att för exempel ersätta vissa img-taggar för ikoner med span-taggar med en specifik class och sedan visa ikonen via CSS. Alltså är detta steg mest för att skriva om och förbättra semantiken på html-koden. Dessutom funkar den utmärkt till att rensa bort onödig kod man använde för 15 år sen men inte behöver nu längre.

Steg 4

Nu är den mesta skräpkoden borttagen, men kvar har vi säkerligen en hel del gammal kod ändå. Styggelser så som “inline-style”, stilning via attribut (color=red, cellpadding=2, width=10, med flera), gamla taggar (<font>), och mycket annat spännande. Det är ganska mycket jobb att fixa upp i denna röra. Så detta steg kör ett Tidy-plugin till PHP på all kod som uppdaterar den till att hålla de standarder som satts de sista 15 åren.

Som du ser finns flera likheter med Steg 3, men det är viktigt att köra det steget först för att bara få bort det absolut värsta. För sen modifieras det mesta till oigenkänlighet rent kodmässigt (men resultatet är oförändrat).

Även detta steg kan köras valfritt antal gånger. Ser man att man inte fick ett så bra resultat så kan man gå tillbaks till Steg 3 och göra lite justeringar och köra det på nytt och sedan köra Steg 4 igen.

Steg 5

Efter att Tidy gått igenom all kod så lämnas det lite kod man inte önskar sig. Bland annat CSS-kod som man bör se över och eventuellt flytta vidare. I FFU:s fall så ska all stil sättas via CSS:er som redan skapats, så ingen stil ska komma med i de texter vi lägger in i WordPress sen. Så detta steg rensar bort allt sånt, samt tar bort lite onödiga dubletter, som till exempel “<strong><span>ord</span></strong>”.

Du har även här möjlighet att ändra på semantiken. Kanske alla img-taggar ska få en speciell class, eller liknande?

Steg 6

Nu kan vi säga att texten har hämtats ut från den gamla sajten och sedan putsats upp till modern standard. Den är inte perfekt, men för att vara behandlad mer eller mindre automatiskt så är den väldigt bra nu. Det är dags att flytta in allt i WordPress.

På denna sida får du en lista på alla sidor vi har i databasen från gamla sajten. Vid sidan av dem finner vi alla sidor i WordPress (med länk till ett smidigt plugin som kan skapa hundratals sidor i WordPress med ett knapptryck). Det man gör här är att koppla ihop de olika sidorna så att Migrate 2 WP vet vilken text som ska till vilken sida. Detta manuella jobb är lite trögt och jag ska i framtida versioner jobba på att förenkla detta, bland annat genom Ajax och automatiska matchningsförslag.

Om en sida inte kopplas så kommer den gamla sidan inte att flyttas med till WordPress. Detta faktum använde jag för att “radera” några gamla och dåliga sidor på FF7-sajten, som GameShark-koderna och sidan om FF7-leksaker.

Man kan också koppla en gammal sida till flera WordPress-sidor, gör man det så dupliceras texten, något jag använde mycket när jag till exempel ville dela upp en gammal text i 2-3 mindre delar.

Kopplar man flera gamla sidor till samma WordPress-sida så slås de ihop, texterna kommer efter varandra på samma sida. Detta använde jag också mycket på FF7-sajten för att kunna lätt slå ihop 2-3 sidor till en enda sida i WordPress.

Genom att spendera lite tid och tanke i detta steg så kunde jag förbättra strukturen på menyn avsevärt, minska mängden överflödig text, och generellt förenkla för besökarna på jakt efter hjälp.

Steg 7

Detta steg är bara en stor knapp. När man klickar på den så skjuts all text rätt in på respektive sida i WordPress utifrån valen man gjorde i förra steget. Självklart finns allt kvar i databasen till Migrate 2 WP så att man kan ändra sig och göra fler justeringar på sina texter.

Koden gör dig också en extra tjänst genom att uppdatera alla gamla länkar i texterna till de nya riktiga länkarna. Koden lägger också på några class:er på alla länkar och bilder som gör att de sticker ut dels på sajten sen men också inne i WordPress admin. Detta är för att de ska liksom “lysa” lite så att man kan testa dem manuellt. Efter det kan man manuellt ta bort den class:en.

Kör man detta steg en gång till senare så raderas den text som redan finns i WordPress!

Färdig?

Nu är det bara att börja testa den nya WordPress-sajten. Gå igenom alla länkar och uppdatera bilder, lägga upp menyer, rätta gamla stavfel, lägg till texter, etc. Denna del av jobbet är den mest tidskrävande och kanske cirka 70% av tiden spenderad på nya FF7-sajten hamnade i denna fas. Det är ett manuellt jobb. Lyckligtvis kan man nu bjuda in flera extra skribenter som hjälper en gå igenom alla texter. Utvecklarens jobb kan ses som avslutat.

Migrate 2 WP hjälper dig med ett enormt tråkigt och tidskrävande jobb, och den fungerar på alla sajter. Förhoppningen är att fler ska komma och bidra till koden, och att produkten ska vara ett smidigt verktyg för att lättare gå från statiska sidor till WordPress. Och eftersom egentligen bara Steg 6 och 7 är specifikt till WordPress så kan man potentiellt utveckla produkten vidare till att även stöda andra CMS.