Det är snart dags att göra om min webbplats för "Web 2.0 Age". Jag har på allvar tittat på två plattformar, Drupal och Joomla, för att åstadkomma detta.
Drupal och Joomla erbjuder omfattande paket som, när det gäller Drupal, inkluderar en blogg och ett forum som kärnmoduler. Tema dessa plattformar kan åstadkommas genom både CSS (Cascading Style Sheets) och PHP (Personal Home Page eller PHP: Hypertext Preprocessor) kodändringar. Dessa plattformar är dock komplexa och att lära sig tillräckligt för att installera, hantera och anpassa dessa plattformar kan vara en skrämmande uppgift.
Efter att ha studerat de två plattformarna, inklusive att använda dem både på min testbäddsplattform och på Internet, bestämde jag mig för att ta en titt på WordPress som en möjlig lösning på mina framtida webbbehov. Jag blev förvånad över att upptäcka att den senaste versionen av WordPress är lätt att installera, lätt att använda och lätt att tematisera.
I den här artikeln kommer jag att beskriva hur man anpassar WordPress 2.5.
STYLING WORDPRESS
Det finns sex huvudkomponenter som utgör utseendet på standard WordPress-bloggen:
1. Rubrikgrafik
2. Bloggtitel
3. Tagline
4. Sida
5. Bakgrund
6. Sidfot.
För att bloggen ska laddas snabbt bestämde jag mig för att inte använda sidhuvud eller sidfotsgrafik; och eftersom designen i huvudsak kommer att vara standard WordPress-tema med en ny kappa, behöver bara lite grafisk designarbete göras. Faktum är att jag bara behövde skapa en grafik för att skapa bloggsidan med dess tvåkolumneffekt. Bloggsidan kommer att "flyta" centrerad i en mörkblå *kropp*-bakgrund som kommer att tjäna till att rama in sidan.
Skapa grafiken
En titt i bildkatalogen för standard WordPress-temat visar standardbilderna som används för Kubrick-utseendet. För närvarande finns det bara en fil av särskilt intresse: kubrickbgwide.jpg. För designen behövs inte de andra Kubrick-bilderna utan kommer att behövas för den "Fancy", mer komplexa designen.
Bloggens sida kommer att skapas från en "skiva" genom mitten av den nya designen. Skivan är en smal bild på bloggsidans bredd.
Jag började min design med att lägga ut en grundläggande sida (760px X 600px) i Adobe Illustrator. Jag gillar att använda Illustrator för konstverk av det här slaget, även om andra program också kan användas.
Jag fyllde grundsidan med sidans bakgrundsfärg (inte att förväxla med den mörkblå *kroppen* bakgrunden). Den ljusa bakgrundsfärgen kommer att "visa upp" färgad text, som bloggens titel och slagord.
Jag överlagrade sidan med två rektanglar, eller "kolumner". Den vänstra, 510px breda kolumnen är fylld med en pastellgul färg; den högra kolumnen, 230px bred, är fylld med en pastellblå färg. De två kolumnerna passar inom grundsidan med en 10px kant av sidbakgrund runt dem.
I Illustrator placerade jag sedan en 760px X 40px rektangel på sidan och använde denna för att göra en skiva. En skiva är inget annat än en representativ del av en större bild, i det här fallet, av bloggdesignen. Jag sparade skivan som kubrickbgwide.jpg. Kubrickbgwide.jpg kommer att användas för att skapa bloggsidans bakgrund. När nytt innehåll läggs till på bloggsidan kommer kopior av segmentet att staplas vertikalt för att "växa" bakgrunden med två kolumner. Detta är den enda bilden som behövs av en webbläsare för att skapa bloggens hemsida. Bloggen kommer därför att laddas väldigt snabbt.
Ganska lätt än så länge, eller hur? Resten av designen åstadkoms genom temats CSS-fil och/eller via WordPress administrativa gränssnitt.
CSS Förändringar
Standard CSS-filen finns i katalogen wp-content_themes_default. CSS-texten nedan visar kodändringarna till style.css. Innan jag gör några ändringar i standard CSS-filen gör och sparar jag alltid en kopia av originalet. CSS-filen kan öppnas och ändras med vilken textredigerare som helst. Text som ska raderas visas inom hakparenteser. Ny eller ändrad text kommer att visas utan hakparenteser.
/* Börja typografi och färger */
body { [bakgrund: #d5d6d7 url('images/kubrickbgcolor.jpg');]
bakgrund: #636f89; /* Ställ in Brödets bakgrundsfärg till blå */
}
#sida {
[bakgrundsfärg: vit;] [kant: 1px fast #959596;]border:ingen;
} [#header {
bakgrund: #73a0c5 url('images/kubrickheader.jpg') ingen upprepad nedre mitten;
}
#headerimg {
marginal: 7px 9px 0;
höjd: 192px;
bredd: 740px;
}]
#footer { [bakgrund: #eee url('images/kubrickfooter.jpg') no-repeat top;]
bakgrund: #ffef2; /* Mycket ljusgul */
}
h1, h1 a, h1 a:hover, h1 a:besökt, #headerimg [.description] {
text-dekoration: ingen; [färg vit;]
färgen röd; /* Gör rubriken röd */
padding-bottom: .5em; /* Sätt ett litet mellanrum mellan titeln och slagordet */
}
.description {
textdekoration: ingen;
färgen blå; /* Gör slagordet blå */
text-align: center;
}
/* Sluttypografi och färger */
/* Börja struktur */
#page { [bakgrundsfärg: vit;]
bakgrundsfärg: ffef2; /* Mycket ljusgul */ [border: 1px solid #959596;]
gräns: ingen;
}
#header { [bakgrundsfärg: #73a0c5;]
bakgrundsfärg: #ffef2; /* Mycket ljusgul */
}
/* Slutstruktur */
Efter att ha gjort och sparat dessa ändringar i filen style.css är den nydesignade bloggsidan klar.
STYLING WORDPRESS — DESIGNEN FÖR UTKLÄNNING
Även om jag gillar enkelheten i Jakobs bloggdesign kommer den inte att tilltala alla. Många människor bara älskar "glitz". Priset på en snygg WordPress-klänning är ofta en blogg som laddas långsammare utan någon ökad användbarhet. Men för dem som vill "klä upp" utseendet på sin blogg, här är ytterligare sätt detta kan åstadkommas.
Först och främst bör det noteras att bakgrunden på WordPress-standardsidan använder sidhuvud (kubrickheader.jpg) och sidfot (kubrickfooter.jpg). Den här grafiken är inte fylld med en solid färg, som i Jakob-designen, utan med gradienter. Det verkar också finnas en mycket liten skugga under sidan.
På grund av standardsidans komplexitet krävs ytterligare grafik och därför kommer fler segment att behövas. Dessutom, när en mer komplex kroppsbakgrund önskas för att "flyta" sidan, kan det också krävas en "fröbild" för detta (detta är vad bilden kubrickbgcolor.jpg är till för).
Som tidigare skapade jag en ritning av bloggsidan i Illustrator. Sidan, med rundade hörn, flyter på WordPress-standardbakgrunden, har en gul gradient och har en liten skugga.
Jag skapade först en 760px X 600px rektangel på Illustrator-ritytan. Jag fyllde denna rektangel med bakgrundsfärgen (C:8, M:6, Y:6, K:0).
Därefter, med hjälp av Rounded Rectangle Tool, ritade jag en 736px X 584px rektangel och fyllde den med den gula gradienten. I huvudsak gjorde jag sidan så stor som möjligt i bakgrunden samtidigt som jag lämnade tillräckligt med utrymme för skuggan.
Till sist gav jag den rundade rektangeln en liten skugga.
För att säkerställa att skivorna smälter samman perfekt i *kropp*-bakgrunden skapade jag en 60px X 60px kvadrat med samma bakgrundsfärg (C:8, M:6, Y:6, K:0) och sparade den som kubrickbgcolor.jpg. Den lilla bilden kommer att användas för att "måla" kroppens bakgrund. Detta är ett viktigt steg eftersom bakgrunden som används för kroppen och bakgrunden som används för sidan måste matcha perfekt för Fancy designen.
Skapa skivorna
Med hjälp av rektangelverktyget placerade jag en 760px X 200px rektangel ovanpå layouten som beskrivs ovan. Jag placerade den här rektangeln överst i layouten och använde den för att göra en skiva för rubrikgrafiken. Innan jag gjorde detta inaktiverade jag stroke and fill.
Jag sparade skivan som kubrickheader.jpg.
Jag skapade sidfoten och sidsnitten på ett liknande sätt och döpte om dem till kubrickfooter.jpg respektive kubrickbgwide.jpg. Kubrickfooter.jpg är 760px X 63px och kubrickbgwide är 760px X 40px.
Det finns två andra Kubrick-bilder i bildkatalogen: kubrickbg-ltr.jpg och kubrickbg-rtl.jpg (vänster till höger och höger till vänster). Dessa bilder är samma som kubrickbgwide.jpg. Så jag gjorde två kopior av kubrickbgwide.jpg och döpte om dem därefter.
CSS-ändringar
Standard CSS-filen finns i katalogen wp-content_themes_default. CSS-texten nedan visar kodändringarna till style.css. Hakparenteser visar vilken kod som ska raderas och ny kod visas utan parentes. Innan jag gjorde ändringen kopierade jag och sparade originalfilen. För Fancy-designen är CSS-ändringarna minimala.
/* Börja typografi och färger */
body { [bakgrund: #d5d6d7 url('images/kubrickbgcolor.jpg');]
bakgrund: #e7e7e7 url('images/kubrickbgcolor.jpg');
}
#page { [bakgrundsfärg: vit;] [kant: 1px fast #959596;]
}
#header { [bakgrund: #73a0c5 url('images/kubrickheader.jpg') no-repeat nedre mitten;]
bakgrund: #e7e7e7 url('images/kubrickheader.jpg') ingen upprepad nedre mitten;
}
#footer { [bakgrund: #eee url('images/kubrickfooter.jpg') no-repeat top;]
bakgrund: #e7e7e7 url('images/kubrickfooter.jpg') no-repeat top;
}
h1, h1 a, h1 a:hover, h1 a:besökt, #headerimg [beskrivning]{ [färg: vit;]
färgen röd; /* Gör bloggtiteln röd */
padding-bottom: .5em; /* Sätt ett litet mellanrum mellan titeln och slagordet */
}
.description {
textdekoration: ingen;
färgen blå; /* Gör bloggens slagord blå */
text-align: center;
}
/* Sluttypografi och färger */
/* Börja struktur */
#page { [bakgrundsfärg: vit;]
bakgrundsfärg: #e7e7e7; [kant: 1px fast #959596;]
gräns: ingen; }
#header { [bakgrundsfärg: #73a0c5;]
bakgrundsfärg: #e7e7e7;
}
/* Slutstruktur */
Efter design- och CSS-arbetet visar WordPress sina nya kläder för hela Internet.
STYLING WORDPRESS — DEN NO-GRAFISKA DESIGNEN
Inget går fel när en webbläsare laddar en sida från Internet, eller hur? Även om detta i själva verket skulle vara fallet, är det fortfarande klokt att överväga hur en sida kommer att visas om grafiken inte kan hittas.
I fallet med Jakob-designen, om kubrickbgwide.jpg inte laddades ned, av någon anledning, skulle sidan inte visas acceptabelt. På grund av den ljusa bakgrunden som används för sidhuvudet och sidfoten visas de normalt på den mörkblå bakgrunden som tilldelats kroppen. Sidans innehåll blir dock svårt att läsa: det försvinner nästan bort i den mörkblå bakgrunden. En ljusare bakgrund för kroppen hade kanske varit ett mycket klokare val.
Skaparen av Kubrick-designen löste detta problem genom att tilldela alternativa bakgrundsfärger som skulle användas om grafiken inte var tillgänglig. Tilldelningarna görs i filen style.css:
body { bakgrund: #d5d6d7 url('images/kubrickbgcolor.jpg'); }
#header { bakgrund: #73a0c5 url('images/kubrickheader.jpg') ingen upprepande nedre mitten; }
#footer { bakgrund: #eee url('images/kubrickfooter.jpg') no-repeat top; }
Om bilderna inte är tillgängliga kommer det alternativa RGB-färgvärdet att användas.
Om grafiken inte är tillgänglig är standard WordPress-bloggen fortfarande presentabel och användbar. För en första omdesign av sidan kan det vara ett bra ställe att börja med att börja med den grundläggande Kubrick-designen, utan grafik. Detta kan uppnås genom att förenkla påståendena ovan:
body { bakgrund: #d5d6d7; }
#header { bakgrund: #73a0c5; }
#sidfot { bakgrund: #eee; }
Färgerna kan sedan ändras för att prova olika bloggfärgscheman. Ändra bara RGB-färgkoderna, spara CSS-filen och uppdatera webbläsaren för att se ändringarna omedelbart. Hoppas detta var användbart och lätt att läsa.
Inlägg skrivet av Royce Tivel
