Twenty Fifteen: Nytt tema till WordPress!

På mina egna webbsidor brukar jag hålla mig till något av de tema som följer med WordPress. Jag började med WordPress redan på första temat så jag har använt alla utom Twenty Twelve. Dels för att jag tycker de är så välbyggda, för att jag gillar att de är enkla att jobba med, men också mycket för att det är smidigt att ta som exempel när jag undervisar i WordPress.

I början av 2014 när jag gick ifrån Twenty Thirteen till Twenty Fourteen kändes det först lite klumpigt men det har växt på mig. Skönt att ha nått som inte ser så ”bloggigt” ut som alla de tidigare temana. Det finns saker jag vill ändra men överlag är jag nöjd. Jag använder det på flera av de sidor jag byggt den senaste tiden. På mitt klättervarumärke STENs sida tycker jag det funkar utmärkt med de stora bilderna som får mig att vilja släppa datan och dra och klättra :)

Under hela 2014 körde jag temat Twenty Fourteen på min egen hemsida
Under hela 2014 körde jag temat Twenty Fourteen på min egen hemsida. Så här ser det ut idag när jag snart kommer byta ut det :)

Även om Twenty Fourteen har funkat bra så har jag på min egen sida (denna) letat efter att få fram en enklare, tydligare och personligare känsla. Jag har velat ha mer fokus kring innehållet.

Jag har smygkört Twenty Fifteen ett par månader på min test-WordPress och har fått stångas en del för att tämja de.

På nästan alla teman har man ett horisontellt sidhuvud längst upp med plats för stora bilder men här har man istället valt att arbeta stora vertikala bilder för sidhuvudet (de gröna fältet i bilden). När jag försökte få till ett trevligt foto som bakgrund bakades bilden och texten ihop för mycket hur jag än gjorde. Så istället fick jag arbeta mer med bara färger och istället använda stora bilder längst upp på varje sida eller inlägg istället.

Under 2015 vill jag ha en renare, enklare och mer fokuserad upplevelse från både min hemsida och livet i stort :)
Under 2015 vill jag ha en renare, enklare och mer fokuserad upplevelse från både min hemsida och livet i stort :)

Jag har valt personliga, lugna och trevliga färger. Tror jag. Men jag inget färgproffs. Det som gjorde hela skillnaden för mig var när jag började arbeta mer med funktionen Utvalda bilder som jag tycker ligger snyggt längst upp på både sidor och inlägg i Twenty Fifteen. Jag tycker också menyn är snygg med sina vänliga beskrivningar under varje inlägg. Menyn håller nog inte för att ha stora hemsidor men min är ju inte stor så :) Jag önskar mig en sidfot där jag kunde lägga egna widgets men det finns inte som standard men förutom det tror jag att jag är nöjd just nu.

När jag såg första skissen på Twenty Fifteen i somras kände jag direkt att jag ville använda det som nästa tema på Klätterbilder. Jag har testat lite men inte riktigt fått till det än. En sak jag tänkte på är att det inte finns plats för en logo som standard i temat utan man fick göra ett child-theme för det.

Jag har stångats lite med att få till Twenty fifteen på Klätterbilder men här har jag inte nått hela vägen fram än.
Jag har stångats lite med att få till Twenty fifteen på Klätterbilder men här har jag inte nått hela vägen fram än.

Måste det alltid vara en balansgång mellan funktion och hur enkelt något är? Vad tror ni? Har ni testat Twenty Fifteen? Kommer ni testa det?

Här kommer jag installera det så fort 4.1 släpps!

Yogastudions hemsida uppe!

För någon månad sedan träffade jag Linda som precis då köpt Yogastudion – ett yogaställe i Göteborg som är proffs på KundaliniYoga. Hon frågade om jag kunde hjälpa henne med helheten kring IT, webb, marknadsföring och foto. När jag cyklade från mötet var jag upprymd, det är exakt den här sortens långsiktiga och sunda uppdrag jag tycker så mycket om!

Sedan dess har vi jobbat med många olika saker. Allt ifrån foto till rena IT-administrativa uppgifter som webbhotellsflytt och domännamnstransfers.  Från idag ligger grundbulten i Yogastudions online-marknadsföring uppe! Besök gärna yogastudion.com men ännu viktigare besök Yogastudion i Linnéstaden i Göteborg!

Sat nam och väl mött!

Installera WordPress på din egen dator

Detta vänder sig främst till avancerade WordPress-användare eller om du är nyfiken på att lära dig mer. Det finns risk att du behöver en del tålamod första gången :)

Vill man bygga teman eller plugins till WordPress är det oftast värt att installera WordPress på din egen dator. Detta gör att du slipper sitta och ladda upp filer fram och tillbaka till dit webbhotell. Istället kan du ändra i dina filer direkt från Finder eller Utforskaren.

Jag kommer gå igenom övergripande hur man gör så det finns många detaljer jag saknar. Detaljerna ändrar sig ändå så fort så det viktigaste för dig är att lära dig det övergripande tänket och hur man hittar lösningarna själv. Har du problem med något skriv gärna i kommentarsfältet nedanför oavsett om du löser det eller ej så kan vi säkert fixa det ihop.

För att kunna installera WordPress behöver du en webbserver med PHP och MySQL. Det finns massor med varianter. Den smidigaste jag sett heter Ampps. Testa gärna att installera den. När du installerat Ampps kan du förhoppningsvis surfa till: http://localhost/ som är din lokala webserver.

När du installerat Ampps behöver du skaffa en Databas och en databasanvändare. Det gör man lättast med programmet phpMyAdmin som går att installera i Ampps. Du kan installera det via Ampps kontrollpanel. För att surfa till phpMyAdmin surfar du till: http://localhost/phpmyadmin. Skapa en användare som heter wordpress med lösenordet wordpress och databasnamnet wordpress.

Ladda ner WordPress, packa upp filerna och kopiera hela wordpress-mappen till www-mappen i Ampps. För att hitta till rätt mapp öppna Ampps och gå in i den mappen. När WordPress-filerna är på plats kan du surfa till: http://localhost/wordpress och följa installationen av WordPress.

I Ampps såg jag även att det fanns en inställning för att installera WordPress via 1 klick. Testa gärna det och berätta hur det går :)

Lycka till!

WordPress-frågor

Efter första lektionen i WordPress-kursen dök följande upp som vi diskuterade.

F: Kan man styra vilka knappar som dyker upp under varje inlägg för att dela på tex Facebook.
S: Man gör det i Dashboard under Settings / Sharing (http://en.support.wordpress.com/sharing/)

F: Var hittar man andra tema än de som finns att välja på som standard?
S: De som är inbyggda i WordPress hittar ni via http://wordpress.org/themes/ Köp-teman finns på många olika sidor. Några av de stora är tex http://ithemes.com/, http://themeforest.net/ och http://www.woothemes.com/ Sök på Google efter “wordpress themes”

F: Varför har min egen WordPress inte statistiken som WordPress.com har?
S: På WordPress.com har man installerat ett plugin som heter Jetpack som ni förmodligen vill ha installerade på alla era WordPress-installationer.

F: Vilka filtyper man kan ladda upp i WordPress?
S: De skiljer sig lite åt mellan WordPress.com och en egen installation. På WordPress.com kan man, förutom bilder, ladda upp de vanligaste dokumenttyperna som tex PDF och PowerPoint. Alla filtyper är beskrivna i manualen.

F: Kan man göra lösenordsskyddade sidor?
S: Titta ungefär vid publicera-knappen i högerkolumnen när du ska publicera en sida så ser du lösenordsskyddad sida. Lösenordskydd finns beskrivet i manualen.

F: Jag använder WooCommerce för e-handel på min WordPress-sida. Hur kan jag göra en produkt där användaren kan välja olika saker som tex storlekar.
S: Det heter Product Variations och det finns ett stycke i WooCommerce-manualen. Börja där så försöker vi fixa det om det inte går själv! http://docs.woothemes.com/document/product-variations/ Det går att göra det. Jag har gjort det på några sidor.

F: Hur kan man ändra på hur informationen i mina sidor ser ut?
S: Man gör det med Mallar eller Templates. Det är byggblocken som sen temat pusslar ihop. Så en Template bestämmer mer hur innehållet är upplagt och temat något mer hur det visar. Läs beskrivningen i manualen: http://codex.wordpress.org/Stepping_Into_Templates

F: Vad för annonser visas på WordPress.com?
S: Jag hittar ingen officiell information om detta men kontaktade supporten och fick följande svar:

Ads on the free blogs are run below the blog posts on the single post pages. They are either a YouTube video usually featuring an extended edition of a US TV commercial or a similarly-sized unit featuring links to four different articles elsewhere.

We have strict deals in place with our ad networks to ensure that they do not run any ads featuring sex, violence, or drugs.

You can send them to http://en.wordpress.com/about-these-ads/ for further details.

Also, if they would like to completely eliminate ads from appearing on their blogs, we offer the No-Ads Upgrade: http://store.wordpress.com/premium-upgrades/ad-free/

F: Hur gör man en facebook fan-page?
S: En Facebook fan page är en sida på Facebook som istället för en person är ett företag eller organisation. Alla sidor där du trycker Like istället för att trycka Add friend är fan pages. Logga in i din egen Facebook. Surfa sedan till Create a Page och följ guiden.

Frågor Diplomerad Webbdesigner

F: Jag skulle vilja göra så att en bild zoomas in när man håller musen över. Behöver jag JavaScript då?
S: Nej du kan använda CSS-transitions. Läs i följande tråd på StackOverflow. Berätta gärna hur det går :)

F: Hur gör jag en meny i CSS så att den funkar på mobilen?
S: Jag gjorde två exempel som du kan utgå ifrån. Det ena sättet behöver JavaScript det andra inte.

F: Hur bäddar jag in en Youtube-film?
S: För att bädda in Youtube-filmer surfar du fram filmen på Youtube och sedan precis nedanför själva film-fönstret finns en knapp som heter Dela eller Share. Där innanför finns en Embedd-knapp. I den hittar du HTML-kod som du kopierar och klistrar in. Se till att du får med hela raden. Det funkar bara om du har ett eget webhotell eller webserver. Annars kommer du se det som en grå ruta där videon kommer hamna.

F: Hur vet jag att min HTML & CSS är rätt?
S: Det finns verktyg du kan använda för att testa din HTML & CSS. De kallas att validera den. Det finns en HTML-validator och en CSS-validator. Resultatet från ett sånthär test kan tas med en nypa salt. Vissa saker är inte viktiga att dom är rätt och andra är viktigare. Det är väldigt bra att testa lite då och då för att se så man inte gjort slarvfel (tex glömt avsluta taggar) eller glömt måsvingar i sin CSS.

F: Hur skriver jag ett eget tema till WordPress?
S: WordPress har överlag väldigt välskriven dokumentation. Börja med den om teman :)

F: Hur kommer jag igång med JavaScript?
S: Jag skulle börja med att lära mig en sorts JavaScript som kallas jQuery. Det finns en väldigt fin dokumentation som kan va värd att börja med. Kul!

F: Hur gör jag ett bildspel?
S: Du behöver använda JavaScript eller jQuery för ett bildspel. Testa gärna med Lean Slider. Exempel på hur du använde det finns på deras hemsida. De man gör är att ladda hem några filer från deras hemsida som man kopierar in i sin egen. Sedan lägger man till lite HTML, Javascript och CSS. Klart :)

F: Hur centrerar och beskär jag en bild i CSS?
S: Testa med oversize:hidden i CSS:en och läs i under svaret som fått 49 röster. Det går att göra men det finns inget jättebra sätt. För mig slutade det med att jag gjorde ett exempel där jag lägger bilden som bakgrund.

F: Hur gör man en meny i HTML?
S: Menyer gör man i listor. Det finns en fin artikel på w3schools om det :)

F: Hur gör man bakgrundsbilder som scrollar?
S: Det kallas Fixed Background Scrolling. Eller parallax scrolling. Börja med att läsa på: http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/ Min kompis Johan använder det på sin hemsida.

F: Hur gör man för att använda olika fonter?
S: Det absolut enklaste sättet att använda fonter är att använda de som finns på datorn. Läs på w3schools om hur. Förutom det så kan man ladda in andra typsnitt via tex Google Fonts.

F: Hur centrerar man i CSS? Utan att använda <center> i HTML.
S: För att centrera i CSS behöver elementet ha en fast bredd. Jag gjorde ett centrera exempel och så kan du läsa överkursvarianten på W3.