Category: Wordpress

Februari-release på FFU

2021-02-24 / Bobby

I dessa dagar har vi rullat ut nye versioner av våra tre viktigaste kodbaser – designen till alla guiderna – theme-ffu2, till vårt plugin som ger oss TopNav och EndNav – plugin-common, samt designen till guide-väljaren – theme-light (det ligger också annan funktion och andra sidor där, så som “Senaste uppdateringarna“).

Detta har vi nu lanserat:

Theme Light

1.2.0 av theme-light – Theme Light är alla de där småsidorna på FFU som inte är guider, alltså startsidan, felsidor, lista över alla uppdateringar, och liknande. Theme Light har nu utvidgats stort för att ta över absolut allt som vi tidigare använde ASP classic och vår Windows-server till, detta är ett kritiskt steg för att kunna helt stänga ner den servern.

Theme light kan nu:

Visa vår 404 sida, ersätter den vi har på Windows-servern.
Visa RSS för alla uppdateringar på alla våra guider, ersätter den vi har på windows-servern. Vår gamla RSS för detta dirigeras nu hit.
Visa en community-template för när den stängs ner 1 mars. Ersätter communityn som ligger på Windows-servern.
Visa vår “välkommen”-sida där man väljer väg (guider, nyheter eller annat). Ersätter sidan vi har idag på Windows-servern.
Några andra mindre fixar:
- Fixat länkar som ej funkade på uppdateringssidorna (namn och logo länkade ej till guiden på översikten).
- Länk till RSS i toppen och botten på sidor som visar uppdateringar från bara en guide.
- Förbättrad och modernare kod för hur titlar (<title>) hanteras på alla sidor. Lite småjusteringar återstår, men nu är det lättare att specialanpassa detta.
- Alla spelloggor ligger nu i /logos/ istället för i /img/ som inte gav nån mening.

Theme FFU2

1.7.2 av theme-ffu2 – Theme FFU2 används för att visa alla våra guider, och innehåller således väldigt många olika mallar, och väldigt mycket kod. Vi har gjort några lyft här för att dels visa upp våra RSS-feeds bättre, och dels för att på sikt kunna ta bort kod för saker som nyare WordPress gör för oss.

Vid sista migreringen (FFX-2-sajten) la vi in några bildgallerier på det sätt WordPress öppnar för inne i admin, för att få testa systemet gott. Och det funkade så bra, men det såg helt trasigt ut. Vi har nu skrivit om koden för detta så att dessa gallerier ser ut och beter sig exakt som de gamla, fast i tillägg använder alt och title attributen på rätt sätt.
En liten orange länk till guidens RSS-feed på startsidan efter listan men nyheter.

Plugin Common

1.6.0 av plugin-common – Vårt FFU-plugin som ansvarar för att alla delar av sajten – trots olika design på sidorna – får TopNav, EndNav, och i övrigt ser ut och funkar likadant. Detta plugin har fått flera tillskott som gör att vi kan ta bort kod andra platser, eller flytta något bort från Windows.

Tagit över all koden för att lägga in uppdateringar (posts) som skrivs på guiderna i en egen databas som vi nu lagrar tillsammans med guiderna. Detta ger oss mer flexibilitet runt val av themes i framtiden, men mest gjordes detta för att säkra serverbyte – få allt bort från Windows.
En ‘ta mig till toppen’-knapp nede till höger på alla våra sidor som aktiverat den nya topnaven (just nu är det 100% av sidorna). Den animeras snyggt och kan användas för att komma till toppen på sidan snabbt när du är långt nede i en guide och läser.
Tagit över all kod för att skjuta in länkar till alla våra olika feeds på alla sidors <head>. Förut underhölls detta manuellt på alla sajter, nu ordnar pluginet det.

Vi är nu ett stort steg närmare att inte vara beroende av Windows-servern och 15 år gammal kod full av säkerhetsproblem som inte fixas. Nu återstår bara att stänga av communityn, och att flytta hela vårt www-område till den nya WordPress-server vi satt upp för att ta över med hjälp av alla utökningar i Theme Light.

Vi jobbar på eget WordPress-plugin

2017-03-21 / Bobby

En stor styrka med WordPress är deras många plugin. Man kan enkelt installera en massa färdig funktionalitet på sin sajt istället för att slippa bygga allt själv. Detta är smart och något som hjälpt FFU mycket. Funktioner som jag tidigare lagt massor av timmar på för att bygga installeras med ett klick.

Men de har inte allt, och mycket de har är dessutom dåligt, eller inte exakt som just du vill ha det. Så därför kan man också bygga egna plugins.

FFU har redan ett eget WordPress theme (all design). I det ligger också massa funktionalitet som hör mer generellt till FFU och inte till just detta theme. Denna funktionalitet flyttar jag nu över till ett eget plugin som vi utvecklar på Bitbucket privat. Fördelen med denna separering är att vi nu kan jobba med flera olika themes (som denna sida) men ändå dela alla FFU funktioner via detta plugin.

Just nu är vårt plugin inte ens i alpha-version. Jag har efter många timmar och mycket frustration lyckats få upp grunden. Det var inte helt lätt, och php bjuder på en del rörig kod ibland. Men nuvarande version av pluginet klarar att lägga in FFUs Topnav med allt av html, CSS och Javascript som behövs. Detta öppnar så klart för att kunna introducera Topnav enkelt även på denna sida. Det enda som behövs är en ny så kallad “hook” som Topnav kan fästs sig till. Den lägger man enkelt in i sitt theme. Mer än så är det inte. Enorm skillnad från förut!

Vidare ska detta plugin få kod för att krysspublicera till uppdateringsdatabasen (rätt komplex kod som nu ligger i våra themes), kod för att lägga in Playstation-knappikoner i text (också komplex theme-kod idag), och en massa annat intressant på baksidan.

Som du säkert räknat ut kommer detta plugin fortsätta vara privat och inte delas. Det ger ingen mening utanför FFUs värld.

Kommer hålla er uppdaterade om hur det går, och eventuellt dela lite tips eller kod.

Ny mall: FAQ dragspelsmeny

2015-10-03 / Bobby

Vår gamla FAQ/Support-sajt är tänkt att med tiden flytta mer in på varje enskild guide-sajt. Detta så att man inte ska tvinga besökarna ut från guiden för att få svar på vanliga frågor. Dessutom är det bättre för sökmotoroptimalisering att man har denna info direkt på varje guide. FAQ-delen kommer dock leva kvar, möjligen i förändrad form, för att samla alla vanliga frågor för flera spel (och sajten) utan att besökaren behöver gå via guiderna. Två vägar till samma mål alltså.

Just nu är det bara vår FF7-guide som har en sådan FAQ-sida direkt på sajten. Vi håller fortfarande på och testar ut systemet för att se om det ska bli en permanent lösning för alla sajter. Och småjusteringar behövs hela tiden. Men de andra sajterna ska uppgraderas till detta nya system när vi är redo.

Men som det såg ut och funkade på FF7-sajten var extremt enkelt. Jag skapade bara en helt vanlig textsida som hette “Vanliga Frågor” och la sen in varje fråga som en undersida. Frågan var titeln, och brödtexten var svaret. En PHP-funktion listade så länkar på huvudsidan ner till alla undersidor.

Problemet med detta är två. Dels kom det extremt långa titlar på sidor in i menyn till vänster, som förstörde eller såg riktigt dåligt ut. Och dels så var det lite mer jobb eftersom man behövde första skapa den nya frågan med svaret och efter det sortera in den rätt i menyn.

Så det jag gjorde var att programmera en ny WordPress-mall i PHP med stöd av lite JavaScript. I WordPress så tog jag bort alla undersidor och flyttade istället in dem på huvudsidan, “Vanliga Frågor”, och la varje titel som en “h2”-rubrik. Min nya mall-kod analyserade denne text och gör en navigationsmeny av alla h2:or på sidan. Man kan lätt identifiera dem som dragspelsmenyer på grund av pilarna som visas i menyn före länktexten. Klickar man på en av dessa frågor så hämtas texten (svaret) automagiskt upp av JavaScript och visas direkt under, man scrollas också ned till rätt ställe på sidan på ett mjukt och smidigt sätt.

Testa gärna vår nya Vanliga Frågor-mall och säg vad ni tycker. Fler sajter följer efter en liten testrunda med mindre justeringar på koden

Två nya superbra funktioner

2015-07-09 / Bobby

I vårt WordPress-Theme (version 1.5) av FFU så har vi ett flertal olika mallar att välja på för våra sidor. Alla med lite olika funktionalitet.

Jag har nu programmerat två helt nya mallar, bägge med en varsin funktion som jag tror avsevärt kommer underlätta det för besökarens jakt på information. Än så länge är det bara vår FF7-guide som aktiverat dessa nya mallar, men möjligheten finns att använda dem på alla våra spelguider som körs i WordPress.

Automagisk innehålls-meny

Den första är ganska enkel i sin funktionalitet, men var oerhört tidskrävande att göra manuellt. För att inte tala om oerhört lätt att göra fel!

De sidor med denna funktion aktiverad får en meny genererad automatiskt av koden. Den ser till att markera upp alla rubriker på sidan med ett litet “ankare” och sedan skapa en meny precis innan den allra första sidorubriken. Denna meny innehåller så namnen på alla rubriker på sidan, t.ex. “Clouds Omnislash”. Klickar man på den så scrollar man smidigt ner till just denna text.

minimenu

Det har aldrig varit enklare att hitta till rätt innehåll på FFU än nu!

Automagiskt innehålls-filter

När du står inne på en av sidorna med massa text på så blir det fort svårt att hitta till rätt information. Tänk dig alla Materia-sidorna. Hur ska du hitta den materia du är ute efter? Jo, du scrollar sakta ner för sidan och läser igenom alla rubriker. Men oftast vet du ju exakt vad du söker. Ja, de smarta har listat ut att alla webbläsare har en inbyggd sökfunktion som de använder. Men den träffar ju på precis all text på sidan.

Så vi byggde en egen filter/sökfunktion! Denna kunde man omöjligt ha lagt upp själv som skribent.

Överst på sidan kommer en sökruta upp. Bara skriv så filtrerar vi bort allt som inte matchar i realtid. Skriver du in “Plu” så visas bara materior som innehåller “plu” någonstans i titeln.

before-filter

Precis under sökrutan finns också en smidig meny med snabblänkar och också den filtreras samtidigt som du söker. Så du ser alltid vad det är du får träff på, och du kan enkelt bara klicka på något för att hoppa vidare.

after-filter

Glöm dock inte att klicka på “Rensa filtret” för att visa alla materior som dolts efter ett sök.

Bägge dessa funktioner är i testfasen, och det återstår lite jobb med dem på mobil-versionen av sajten. Men testa dem gärna och kom med dina synpunkter! Filter-funktion finns bara på Independent Materia-sidan, medan den automagiska menyn finns på nästan alla sidor där den behövdes, till exempel på sidan som visar hur man får alla karaktärers bästa limit breaks.

FFUs första WordPress-theme borta

2015-07-06 / Bobby

Nu har den sista sajten flyttats bort från vårt gamla WordPress theme. Det var inte någon direkt skillnad i design, utan mer i hur det tekniskt var uppbyggt. Att flytta FF7-sajten var det största jobbet, många saker behövdes göras manuellt, t.ex. lägga in all karaktärsdata på nytt.

Men nu är det gjort och vi kan då äntligen radera ytterligare en TopNav-fil som vi har allt för många av.

Säg till om du skulle hitta något som ser konstigt ut på FF7-sajten efter flytten. Väldigt mycket var som sagt tvunget att ändras manuellt, och med 160+ sidor så är det lätt att missa nåt.

Nästa steg är att fysiskt radera detta Theme från servern. Måste bara uppdatera lite sökvägar till bilder som fortfarande används.

Nytt Theme under utveckling – “1.5 light”

2015-01-21 / Bobby

I maj 2013 släppte jag äntligen FFUs första spelsajt byggt i WordPress. Nu snart två år senare har inte bara premiärsajten – FF7-guiden – flyttats utan även en mängd andra spelsajter på FFU. En efter en lämnar de gamla tunga dåliga system. Förbättringarna är för många för att klara att skriva ned. Sen är det alltid kul för besökare, och oss, med ny design och ett mer lättillgängligt innehåll.

Men det tar fortfarande en hel del tid att flytta en enda sajt. FF7-guiden tog månader att flytta. FF2-guiden bara en dag. Så det går framåt på den fronten. Vårt Open Source-projekt “Migrate-2-WP” underlättar enormt, det är vi helt beroende av.

Trots att det vi släppte i 2013 hade fått väldigt mycket tid under flera år så klarar jag ändå se fullt av förbättringsmöjligheter. Det gick länge under kodnamnet “FFU2 – version 2.0”. Där samlade jag en lista med hundratals små förbättringsförslag. För ett par veckor sedan var vi uppe i en lista på 200 förbättringar där. Men inga var påbörjade. Tanken var att göra ett helt nytt WordPress Theme, med ny design och nya funktioner. Men att göra ny design tar väldigt mycket tid, så jag gjorde en kompromiss för att äntligen få kommer igång med projektet och flera extremt välbehövda förbättringar.

“FFU2 – v1.5 light” är det nya Theme jag påbörjat. Från listan över “2.0”-saker så flyttade jag ut de 100 viktigaste punkterna, och då bara de som inte hörde till designen. Dessa har jag nu jobbat på i ett par veckor på ett nytt Theme som testas och utvecklas på kommande FF11 och FF12-sajterna.

De egentligen största problemen vi hade med våra tidigare WordPress-sajter var tre. De går trögt. Onödig administration. Övrigt. Så jag satte igång med full fokus på detta. Varje del har adresserats med en mängd olika förbättringar. Alla dessa förändringar är under ytan, men tillför väldigt mycket. Jag har också den stora fördelen av att jobba i ett separat Theme på sajter som inte lanserats, så ingen anledning att bli nervös om något går helt sönder.

Trög sajt

Här måste man analysera väldigt mycket för att komma till roten av felet. Flera åtgärder görs, och flera saker påverkar hur snabb en sajt är. Det är också gjort många många småförbättringar för detta. Här är några av de störra förbättringarna.

TopNav

Den var använd som en iframe för att jag då Themet gjordes inte visste hur jag skulle lösa det mer långsiktigt, men valde att inte lägga tid på att tänka på saken. Men nu har två år gått, och jag har tänkt på saken. Det slutade med att jag tog den senaste html-koden för TopNav och la in direkt i Themet. Med den ligger all tillhörande CSS och JavaScript så att det inte behöver läsas in som separata filer (inläsning av filer tar på snabbheten). Den stora utmaningen var att få TopNav att visa senaste nyheten, samt data om man var inloggad eller ej. Detta löste jag genom ett CORS-system, där får ett JavaScript i TopNav skicka en Ajax-förfrågan till Windows-servern och en JSON-fil som kan ge all denna data tillbaka. Detta sätt att jobba på var förvånadsvärt smidigt och enkelt.

Plugins

Det är flera plugins på plats i WordPress. Jag har genom åren testat flera fram och tillbaka, och i vissa fall behövde jag en funktionalitet som jag inte visste hur jag själv löste. Men nu i detta nya Theme så har jag lyckats lösa flera såna saker. Till exempel så hade vi förut ett plugin som genererade en brödsmulestig (breadcrumbs) överst på alla sidor. Den i sig tog inte direkt lång tid, men den krävde en del inställningar och extra filer, och allt detta kunde i FFU:s fall ersättas av bara 10 rader egen kod o Themet.

Inga Child-Theme

På grund av några små anledningar såg jag Child Themes som enda utvägen då jag gjorde det första Themet. Det är en smidig funktion i WordPress, men den gör enligt min uppfattning saker lite trögare. Men nu har detta gjorts om, bara ett enda Theme har skapats nu. De saker som förut krävde nya Child Themes per sajt var varje sajts personliga header-bild, logo, och eventuell annan design-grafik. Nu har jag löst detta mycket smartare och kan därför använda endast ett enda Theme. Dessutom har framsidan förbättrats. Förut ändrades där story och den lilla disclaimer/fotnot-texten manuellt i koden, nu hämtas den ut från WordPress.

Administration

Att kasta ut Child Themes underlättade massor för administrationen. Nu behöver jag inte längre lägga de cirka 30 minutrarna på att kopiera upp och ändra nya Themes till varje ny spelsajt. Dessutom blir det lite lättare med uppdateringar och förändringar på Themet, och lättare för administratörer. Men även andra saker har gjorts för att förenkla administrationen. Det ska absolut inte ses som att nya WordPress-systemet varit knöligt, jämfört med hur vi hade det på de riktigt gamla sajterna så är det enormt mycket enklare att jobba med sidorna. Men det fanns en del saker som ändå kunde förbättras, speciellt efter två års testning och erfarenhet från systemet “live”. Man märker efter ett tag vart saker skulle kunna förbättras eller förenklas, vart det uppstår flaskhalsar, och vart saker inte funkar helt som man först tänkte.

Inga CPT

Custom Page Types är genialt, men det kan bli lite tungt och krångligt att administrera. Det är en teknik för att jag i WordPress ska kunna definiera upp egna innehållstyper där jag själv bestämmer vilka fält som ska visas och hur de ska valideras. Detta har jag nu tagit bort helt, och allt är nu bara helt vanliga sidor. För att kunna fästa extra data till Bossar och Karaktärer, för exempel, så använder jag nu ett plugin som vi ändå hade på plats från början men inte utnyttjade. Inne i Admin så försvinner på grund av detta också tre huvudmenyer, och flera saker så som Sitemap.xml-generering och Breadcrumbs, förenklas. Den största förbättringen här dock var att jag upplevde problem med att på ett lätt sätt lära ut hur dessa fungerade. Nu är allt i nya Themet helt vanliga sidor.

Live Menu

När jag först lärde mig om meny-systemet i WordPress så älskade jag det. Det löste alla problem och utmaningar jag hade med FFU. Man skapar en sida, och när man är färdig med den så går man och placerar den i menyn. Men, detta är lite svårt att få folk som är ovana vid CMS att förstå. Dessutom upplever jag det själv som lite onödigt omständigt ibland, speciellt när en helt ny sajt skapas … på nära 100 sidor! Då lägger jag väldigt mycket tid i menysystemet. Nu har jag reducerat denna tid till nästan noll genom att helt undvika systemet! Nu har jag skrivit lite smart kod som istället genererar menyn från de sidor man har och den ordning de redan ligger i, och speciella “placeholders” placerars ut för att skapa nya menygrupper.

Injicera Boss-data

Inte visste jag att bara 10 rader kod skulle behövas för att göra det så mycket enklare att lägga in automatisk boss-data mitt i guiden. Skriver en skribent [boss url=”scorpion”] i sin text så kommer den koden se till att hitta fram till just den bossen och hämta ut data om den och skriva ut en fin och tydlig länk mitt i guiden. Förut måste jag göra en ganska omständig process för att detta skulle funka, och den hade jag nog omöjligen kunnat lärt ut till andra.

Guide-navigator

På FF7-sajten la jag tidigt upp en navigator i toppen och botten på alla guide-sidorna. Med den kunde man ta sig lätt till nästa sida, förra sidan, eller startsidan på guiden. Analys av våra besökare visade att alla inte fick med sig hur guiderna var uppbyggda och kom in på en av guidesidorna men gav upp direkt och gick inte vidare. Denna navigator löser detta problemet. Men jag la in denna kod manuellt, och den fick ändras för varje sida. Så det blev bara FF7-guiden som fick den. Nu i 1.5 så har jag en egen mall till guiderna som automatiskt genererar denna navigation.

Uppdaterings-publicering

Just nu dubbelpostar jag, i två olika system, alla uppdateringstexter från WordPress. Först skrivs de på respektive sajt i WordPress, men sen måste jag också logga in på Communityn och lägga in samma text i vår RSS-admin. Först då kommer nyheten ut i vår RSS och på sidan på Nyhetssajten där vi listar de senaste uppdateringarna. Men nu har jag ett litet system på plats som sköter den sista delen automatiskt.

Övrigt

Väldigt många andra saker har setts på också, så som förbättringar på JavaScript, CSS, och själva mall-systemet. Mycket kod har förbättrats. Fler mallar har introducerats till skribenter att välja mellan. Sökmotoroptimering har förbättrats. Bildgallerierna har äntligen utökats med Lightbox-funktion (på tiden).

Se fram emot detta nya Theme med många förbättringar.

Några förbättringar på FFU Theme

2014-11-15 / Bobby

Jag har lanserat några förbättringar på vårt FFU Theme i WordPress. Ändringarna kom fram genom att jag märkte lite förändrade behov då jag satte upp nya FFIV-guiden.

Stöd för att stänga av bilder (och “Bild saknas”) helt på våra box-länkar till undersidor. Se boss-sidorna på FFIV-guiden.

Stöd för att visa vald sidbild inne på en vanlig sidmall. Detta funkade tidigare bara på specialskrivna mallar. Se sidan om Kain från FFIV.

Bildgallerierna visar nu alltid titel på alla bilder i ett bildgalleri. Om en bättre text skrivits (“Caption”) så visas den istället för titeln (som oftast är bildens filnamn och inte alltid så läsbar). Se nya bildgallerierna på FFIV-sajten.

Och så några mindre ändringar, bland annat för mobil-versionen.

Nytt Theme till bloggen

2014-09-13 / Bobby

Wilson, ett svenskutvecklat theme till vår blogg är nu på plats. Lite mer fokus på läsupplevelsen, och väldigt mycket mer rent. Får se hur länge vi håller oss till det, det förra överlevde i ett och ett halv år.

Med just bloggen är tanken att lägga minst möjlig tid på annat än att skriva. Så egna themes kommer inte att utvecklas.

Vad är Migrate to WordPress?

2014-07-21 / Bobby

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:

Hämta och spara alla sidor på en sajt
Ta bort repetativ kod (header och footer)
Rensa bort dålig/onödig kod
Formatera om all kod enligt W3C-standard med Tidy
Efterbehandla den formaterade texten
Manuellt koppla gammal menystruktur till den nya i WordPress
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 (), 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 “ord”.

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.

Uppdateringar på vårt WordPress Theme “FFU v2”

2014-07-15 / Bobby

De nya guide-sajterna har gått under projektnamnet “FFU v2”, något som fastnade efter lanseringen. FFU i sig har kommit ut i många versioner, och jag har alltid varit noggrann med att skriva ut detta överallt, till exempel “Community v4.3”, “FF8-sajten v4.0” och så vidare. Det går inte helt att sätta ett versionsnummer på hela FFU, det har liksom alltid varit ett stort och spritt nät av mer eller mindre helt unikt uppbyggda sajter. Därför passar det så bra att se på det som FFU version 1, och det nya enhetliga och kraftfullt förbättrade systemet som version 2.

I samband med lanseringen av nya FF5-sajten så fick jag några önskade förbättringar, ändringar, och buggfixar utförda på vårt theme i WordPress. Här följer en kort lista (uppdateringar/byte av externa plugins är ej listade):

BUGG: Texten bakom varje spels logo (ovanför menyerna till vänster) var hårdkodad till att alltid vara “Final Fantasy VII”. Detta ändras nu dynamiskt per sajt.
BUGG: Två page templates blandades ihop på grund av namngivning.
FÖRBÄTTRING: Menyer som inte används (vi har delat upp en guides menyer i fyra delar) blir automatiskt dolda. Detta passar perfekt på mindre sajter, så som FF5-sajten, som inte har så många olika sidor att den behöver flera olika meny-delar.
FÖRBÄTTRING: Samma funktionalitet som ovan, men på menyn i footern, har lagts till.
FÖRBÄTTRING: Menyn till vänster och menyn i footern har i princip identisk kod, men de hämtades ut två gånger. Jag har nu skrivit om detta och gjort det smartare vilket snabbare upp sajterna en del.
FÖRBÄTTRING: Alla footer-länkar har flaggats med rel=”nofollow” för att inte Google ska flagga länkarna som onödiga.
FÖRBÄTTRING: Vår Breadcrumb (brödsmulestig) har fått sin kod omformatterad för att stöda RDFa taggning så att Google och andra sökmotorer automatiskt kan identifiera den som just en breadcrumb.
FÖRBÄTTRING: addthis-länkarna som låg överst på alla sidor för att Facebook-länka och Twittra sidor användes aldrig på FF7-sajten, så som test har jag valt att stänga av dem helt en stund. Det tog tid att ladda in länkarna och sidorna upplevdes som väldigt tröga enbart på grund av detta.
FÖRBÄTTRING: För inloggad Admins har nu “Edit”-länkarna på alla sidor flyttats till en mer enhetlig placering längst ner på alla sidor.
FÖRBÄTTRING: Uppgifter om en karaktär som inte fyllts ut gör nu att rubriken till det nu döljs (tidigare stod det t.ex. “Längd: ” och sedan inget mer på en egen rad på varje karaktär om man inte angett längden).
NYTT: Möjlighet att skriva in vikt i kilo på en karaktär på sidorna.

Som extra bonus har jag också fått implementerat några nya bra plugins, vidare justerat de plugins vi har, kraftigt uppdaterat interna guider och dokumentation om det nya systemet, och jobbat mycket på vårt egenutvecklade migreringsverktyg Migrate 2 WP. Ett system som snart når den efterlängtade 1.0 statusen (så att det faktiskt fungerar utan en massa manuell handpåläggning och drösvis av krascher).