Share
När de flesta tycker om WordPress, tänker de på bloggar. Om du tittar på framsidan av WordPress.org talar de mycket om bloggar också. Vad de inte berättar för är att WordPress också dubblerar som ett mycket kraftfullt CMS; du måste bara ställa in det ordentligt. Det kan också vara lite knepigt att få inställningar och arbeta som du vill. Det är här jag kommer in. I den här 3-delade handledningsserien ska jag ta dig igenom de tre stegen att använda WordPress som ett CMS.
Denna handledning innehåller en skärmdump som är tillgänglig för Tuts + Premium-medlemmar.
Den första delen kommer att utforma en enkel layout i Photoshop. Del två kommer att innehålla kodning av webbplatsen som en statisk HTML-mall och den sista delen kommer att gå igenom inställningen av WordPress och tillämpa vårt nya tema på det mallsystem.
Om du är en erfaren webbutvecklare kan dessa två första delarna vara jordnötter för dig, men gör dig själv en tjänst och bara skumma över innehållet. Du vet aldrig, du kan hämta något nytt eller ett annat sätt att göra saker.
Du är förmodligen sjuk att läsa så låt oss få våra händer smutsiga!
Öppna Photoshop och skapa en ny blank duk. Jag brukar bara välja 1024 x 768 från webben.
Jag har gått framåt och skapat en snabb färgpalett och låst den som ett toppskikt. På så sätt kan jag hänvisa till det utan att behöva oroa mig för att förlora det i fray.
Fyll i din bakgrund med den ljusaste färgen och gör dig redo att göra några guider.
Vi ska skapa guider så att vi kan förutse utseendet på vår webbplats innan vi börjar lägga ner grafiska element. Om du inte har linjaler aktiverade fortsätt och slå på ⌘-R för att slå på dem.
Om du musen över linjalen, klicka och flytta bort markören kommer att ändras och det kommer antingen att vara en horisontell eller vertikal linje efter musen. Detta är en guide. Låt gå att skapa på.
Vi ska utforma sidofältet, rubriken och huvudinnehållet. Gör dina guider som min, eller något som min. Vi lade fram sidofältet och vadderingen vi vill inkludera.
Varje sida behöver en logotyp. Logotypen sitter strax ovanför sidofältet. Om du har en logotyp, lägg den nu, annars kommer vi att skapa en talbubbla-logotyp. Varför? Jag gillar talbubblor.
Jag lade till en liten bit av fast droppskugga direkt under den för lite styling. Låt oss ge vår hemsida ett namn. Jag ska kalla den Gear'd och använd en liten växelikon.
Våra användare behöver ett sätt att navigera på vår webbplats. Vi ska placera vår navigering ovanpå vårt huvudinnehåll och justera det till höger. Ta ut vårt textverktyg och skriv några navigationsobjekt.
Vi ska låtsas att vi säljer en tjänst. Låt oss säga att gear'd är en webapp och användare kan registrera sig för att köpa olika medlemsnivåer.
Vår navigering kommer att innehålla Om, Planer & Prissättning, Vanliga frågor och Kontakt. Vi vill att användaren ska veta vilken sida de är för närvarande på, så vi kan aktivera såväl som ett svängläge för våra navigeringsknappar.
För detta har jag just skapat en rundad ruta med ett ljusare färgalternativ. Huver-staten har en ljus färg, bara lite större än bakgrundsfärgen.

Vår webbapp erbjuder några nivåer av medlemskap som de ska kunna navigera genom. Vi vill verkligen inte ha 100 olika huvudnavigeringsposter eftersom det är fult. Det är här sidofältet kommer in.
Låt oss ta samma stil som vi brukade till navigeringshuvudet, svävar och aktiva stater och tillämpa dem på en sidoregistrering. Sidor navigeringen kommer att hålla vår sekundära navigering för huvudsidan vi är på. Detta inkluderar och prissättning och anmälningsinformation, eller olika områden av omkring eller kontakt.
Sidan ser lite tom, vi kan lägga till lite innehåll.
Vi har lagt till en del rubriktext samt en rubrik under texten. Bara en annan visuell indikation av var användaren är närvarande.
Därefter har vi lagt en rundad ruta hela bredden av vårt innehållsområde och kastat en bild inuti den.
Senast lade vi till vår kroppstext.
Vår sida börjar bli snyggt. Vi har lagt till alla våra element men en, vår sidfot.
Vår footer kommer att hålla vår upphovsrätt samt några fler sidor som egentligen inte kräver något huvudnavigationsutrymme.
Lägg till en radbrytning för att dela upp sidan lite och sedan låta lite upphovsrättstext införas och justera den hela vägen till vänster guide.
Villkor och sekretesspolicy är några sidor som du vill ha användaren att kunna komma åt men behöver inte nödvändigtvis kastas i ansiktet. Skönheten hos en footer är att vi fortfarande kan ge användaren den här informationen, men göm den bra bort: P
Vi har just skapat en enkel webbplats som vi nu kan konvertera till en HTML- och CSS-mall. Känn dig fri att krypa mallen upp men för hastighet och användarvänlighet kommer vi att gå vidare härifrån.
Accentsconagua