+ fler guider ×
Bli medlem
Inloggad som ...
Inloggningstid: ??

MonthMarch 2017

Första version av plugin laddar in TopNav

Jag skrev tidigare om att vi bygger på ett litet WordPress-plugin som ska förenkla några delar på FFUs WP-sidor (alla spelguiderna ligger där). Vi har ju flera themes och olika sajter (denna blogg är en av den), och det är mycket kod vi önskar köra på alla dessa. Fram till nu har vi gjort copy+paste på all denna kod, men det är slut nu när vi har ett smidigt plugin alla sajter får använda istället. Detta plugin är nu redo att testas ut live, i sitt första utförande.

Genom att ladda upp och aktivera detta plugin så får en sajt automagiskt FFUs “TopNav” insatt på toppen av sidan (förutsatt att man lagt in en WP-hook för FFU topnav). Och detta är den moderna versionen av TopNav som utvecklades med vårt FFU-Theme 1.5 för nåt år sen. Med massa förbättringar under ytan! Bättre HTML5-kod, CSS3 och JavaScript som hämtar JSON med data från Windows-servern (för att kunna se om du är inloggad på communityn eller ej). Rätt komplicerade saker och väldigt mycket att tänka på för att få allt detta till. Bara det att hämta JSON från Windows-servern krävde massor av jobb på grund av CORS – Cross-site origin (man får egentligen inte hämta filer från andra servrar, så lite nya regler behövdes programmeras).

Detta är nu tagit steget längre, TopNav som nu hämtas in ser likadan ut som förut- men går du ner på surfplatta eller mobil så får du nu en helt ny design och upplevelse! Vi har en drastiskt förbättrad TopNav för små skärmar. FFUs logo visas och en knapp för att glida in en meny med alla våra guider och spelsajter. Du kan enkelt scrolla runt i denna meny, eller stänga den. Sista nyheterna ser man också hela tiden. Ju mindre skärmyta man har, ju mer plockar vi bort från TopNav, utan att ta bort viktig funktionalitet. Dessutom droppade jag helt jQuery och skrev om all JavaScript (200 linjer) till vanlig äkta “vanilla” JavaScript.

Såhär ser TopNav nu ut, med finare blå bakgrundsfärg (förut tråkigt vit). Logo och stor tydlig knapp för att visa alla våra andra sajter. Skulle du ha ännu mindre skärm så kapar vi bort “niverse”-delen av logons text.

Såhär ser det ut på läsplattor. Har man större skärm får man den gamla vanliga TopNaven.

När man klickar på “+ fler guider” så animerar vi snyggt in menyn från höger sida. Självklart med CSS transitions. Scrolla ner för att se hela listan. Eller stäng den med X uppe till höger.

Längst ner i menyn ligger en mer tydlig “Fler spel”-länk (vi har inte alla våra guider i TopNav). Och underst ligger våra andra sajter. Lätt att komma sig överallt, även på mobil!

Hoppas detta gillas och förbättrar upplevelsen för våra besökare! Detta är bara ett litet smakprov, ett öppet beta-test. Fler förbättringar på TopNav, och vårt plugin, är på väg! Det är trots allt FFUs 20:e år på nätet i år!

PS. Det är bara de sidor vi har på WordPress som får denna nya TopNav. Så communityn, nyhetssajterna, med flera, får den inte.

Vi jobbar på eget WordPress-plugin

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.