I hela denna sexdelade nybörjare till mästarserien använder vi avancerade funktioner i WordPress för att skapa vår egen portfölj och blogg, komplett med en options sida, flera stilar och stöd för de nya WordPress 2.7-funktionerna. Idag skapar vi vår hemsida layout.

---

Finns även i serien:

1. WordPress: Nybörjare till Master, Del 1
2. WordPress: Nybörjare till Master, Del 2
3. WordPress: Nybörjare till Master, Del 3
4. WordPress: Nybörjare till Master, Del 4
5. WordPress: Nybörjare till Master, Del 5
6. WordPress: Nybörjare till Master, Del 6

---

Hoppa till ett avsnitt

• Komma igång
•   - Översikt
• header.php
•   -
•   - Färgscheman & Stylesheets
•   - div # huvud
•   - div # nav
• Stilar i rubriken
•   - Allmänna stilar
•   - Header Styling
•   - Navigation Styling
•   - Något färg
• Portföljinlägg
• Hemsidan
•   - Skönhetsbehandling
• Widgetised Area
• sidfot
• Sammanfattning

---

Komma igång

I den här delen kommer vi att skapa framsidan för vår portfölj, använda vår options sida och hantera anpassade fält i inlägg. Innan du börjar, skapa följande filer och mappar inuti / Wp-innehåll / teman /innovation/ mapp du skapade tidigare:

• / Inc /
  • / Cache /
• header.php
• footer.php
• sidebar.php

Spara också detta TimThumb PHP Image Resizer-skript som thumb.php inuti / Inc / mapp. TimThumb är ett "smart" PHP image resizer script av Darren Hoyt.

Översikt

Nedan följer en översikt över hur vår startsida kommer att se ut:

Vår header.php filen kommer att innehålla #huvud och #nav sektioner - inklusive öppningsetiketter för #slå in, #innehåll och .contentwrap.

footer.php kommer då att innehålla #footer avsnittet och stängningskoderna för #innehåll och det sista avsnittet ovanför (detta kan antingen vara .contentwrap, .extraswrap eller #sidebar beroende på sidan).

De .contentwrap Området kommer att innehålla de två senaste inläggen från vår Portfolio kategori, och .extraswrap kommer att vara ett widget-färdigt område där vi kan lägga widgets från instrumentpanelen.

---

header.php

På toppen av header.php fil, inkludera följande kod.

  >   

Som du kan se är det huvudsakligen koden som du skulle inkludera längst upp i något xHTML-strängt dokument. Vi har bara ersatt vissa avsnitt med en WordPress-funktion som kommer att mata ut lämplig kod beroende på vilket språk WordPress körs

I slutet av koden är vår titel tagg, som igen använder WordPress funktioner för att få namnet på den aktuella sidan och namnet på webbplatsen.

Färgscheman & Stylesheets

Nästa, vi inkluderar vår style.css fil med WordPress bloginfo (); fungera. Det är viktigt att använda den här funktionen för att inkludera huvudformatarket, istället för att direkt ange filbanan.

Då är koden för att ta tag i det korrekta färgscheman stilarket valt från alternativen som vi skapade i föregående del:

I tabellen nedan förklaras vad ovanstående kod gör:

Vi kontrollerar om vårt alternativ för färgschema ($ ts_colourscheme) existerar från alternativsidan och att den har ställts in korrekt (dvs. inte kvar som "Välj ett färgschema:"). Om alternativet inte är korrekt inställt eller inte existerar det som standard att använda deepblue.css färgschema; Annars använder vi stilarket som det valdes från alternativsidan.

Fortsätt med, vi inkluderar våra RSS- och Atom-flöden, och öppnar kroppstaggen:

#huvud

Nästa kod är mycket mer straight-foward än föregående avsnitt. Som framgår av bilden ovan använder vi fler WordPress-funktioner för att hämta information från WordPress-databasen:

De bloginfo ( 'name'); och bloginfo ( 'beskrivning'); funktioner hämtar relevanta inställningar från sidan "Allmänna inställningar" i WordPress instrumentpanel:

#nav

Att hämta en lista med sidor från databasen är också mycket lätt. Vi använder wp_list_pages (); fungera. Observera att vi också inkluderar a title_li = arguement. Det här är att stoppa funktionen från att skapa ett extra listobjekt som heter "Navigation:" innan du listar sidorna.

Vi har också öppnat relevanta div och wrappers för nästa avsnitt.

---

Stilar i rubriken

Om du går till din WordPress-installation nu kommer det att se ut så här:

Kom ihåg att vi kommer att inkludera alla färgstilar inuti deepblue.css så att vi lätt kan skapa olika färgscheman senare. Allt annat kommer att gå in style.css.

Allmänna stilar

Det första jag alltid tar med i mitt stilark är en återställning av webbläsaren, följt av grundläggande styling för stycken, listor, rubriker och länkar.

 * padding: 0; margin: 0; body font-family: Arial, Helvetica, sans-serif;  p font-size: 0.9em; linjehöjd: 1.5em; marginal-botten: 10px;  ul, ol marginal: 0 0 10px 10px;  li font-size: 0.9em; linjehöjd: 1.5em; lista-stil-position: inuti; marginal-botten: 3px;  img border: none;  h1, h2, h3, h4, h5, h6 font-vikt: normal;  h3, h4 marginal: 15px 0 2px 0;  h4, h5, h6 font-weight: bold;  a: länk, a: besökte text-decoration: none;  a: svävar, a: aktiv, a: fokus text-decoration: underline; kontur: ingen; 

Detta borde se väldigt rakt fram för alla med grundläggande förståelse för HTML och CSS. Vi har ställt in marginaler och vadderingar för alla (*) -elementen till 0 för att överdriva standardstilarna varje webbläsare gäller för en sida. Vi inkluderar sedan nya marginaler, teckensnittstorlekar och rader för de viktigaste elementen för att öka läsbarheten bland dem.

Header Styling

Därefter skapar vi lite av en layout:

#wrap margin: 0 auto; bredd: 980px;  #head margin: 25px 0; överflöde: gömd;  #head h1 float: left; marginal-vänster: 20px;  #head h3 font-family: Georgia, "Times New Roman", Times, serif; typsnittstorlek: 0,8em; typsnittstyp: kursiv; float: right; linjehöjd: 1,7em; textjustera: höger; marginal: 0 20px 0 0; bredd: 500px; 

De #slå in elementet är behållaren som rymmer allt. Vi använder en bredd på 980px (det här är ungefär lika högt som vi kan gå och ändå hålla sig till 1024x768 resolutioner). Och vi har använt marginal: 0 auto; att centrera den i webbläsaren.

Titeln och tagline (h1 och h3 respektive) floats därefter till vardera sidan av behållaren.

#huvud har en egendom av överflöde: gömd; så att den håller de flytande elementen korrekt. Vanligtvis kommer en div inte att vikla runt några flytande barn (som vi har här). Se bilden nedan som ett exempel (den gula representerar den marginal som tilldelats #huvud):

Navigation Styling

 #nav gränsen till vänstra radien: 15px; gränsen till höger-radie: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -webkit-gränsen-övre-vänstra radien: 15px; -webkit-gräns-topp-högra radie: 15px; gränsbotten: ingen; klara: båda; vaddering: 0 20px; bredd: 939px; 

Ta en titt på förhandsgranskningsbilderna längst upp i handledningen, och du märker att vi använder rundade hörn längst upp i navigeringsdelen. I stället för att uppnå denna effekt genom ett gäng bilder och extra HTML-taggar, kommer vi att använda den nya CSS3 border-radius egenskap för att ge en 15px radie till båda övre hörnen.

Nuvarande webbläsare stöder dock inte denna egenskap, men Mozilla och Webkit-baserade webbläsare har sina egna -moz-border-radius och -webkit-border-radius egenskaper som vi också kan använda för att få de rundade hörnen att fungera i Firefox 3, Safari och Chrome. Internet Explorer och Opera använder helt enkelt en kvadraterad gräns tills de stöder border-radius.

Obs! Att använda dessa leverantörsspecifika egenskaper i din CSS stoppar att ditt stilark inte valideras. Men eftersom det bara kommer att vara dessa som stoppar valideringen - vem bryr sig?

Fortsätt på, vi stämmer listobjekten i navigeringen för att visa inline (horisontellt):

 #nav ul marginal: 0;  #nav ul li display: inline; typsnittstorlek: 1em; linjehöjd: 1,3em; marginal-höger: 25px;  #nav ul li a: länk, #nav ul li a: besökte display: -moz-inline-stack; display: inline-block; font-weight: bold; text-dekoration: ingen; vaddering: 20px 10px;  #nav ul li a: sväva, #nav ul li a: aktiv, #nav ul li a: fokus disposition: none; 

Observera att vi använder display: -moz-inline-stack; på länkarna. Detta är rent för Firefox 2 och under, vilket (av någon anledning) inte stöder display: inline-block; - även IE6 stöder det!
Vi ger mycket vaddering till länkarna för att öka det klickbara området (i motsats till vaddering av li istället).

Kolla nu på sidan i din webbläsare och det ska se ut så här. Bättre, men behöver nu lite färg!

Något färg

För det första, spara följande bild i / Stilar / deepblue / mapp som bg.jpg.

Och den här bilden i samma mapp som trans.png (det är faktiskt en mörk 1px halvtransparent bild).

Nu öppen /styles/deepblue.css, och skriv:

 / * Innovationsstandardstil - deepblue.css * / body background: url ("deepblue / bg.jpg") no-repeat # 101010 toppcentret fixerat; färg: # 333;  a: länk, en: besökte färg: # 5c6e80;  #head h1 färg: #eee;  #head h3 color: #ddd;  #nav bakgrund: url ("deepblue / trans.png") upprepa; gräns: 1px fast # 111;  #nav ul li a: länk, #nav ul li a: besökte färg: #ddd;  #nav ul li.current_page_item a: länk, #nav ul li.current_page_item a: besökte background: url ("deepblue / trans.png") upprepning; färg: #eee;  #nav ul li a: sväva, #nav ul li a: aktiv, #nav ul li a: fokus färg: #eee; 

Vi har satt den stora bakgrundsbilden till kroppen (och fixat den så att den inte rör sig när du rullar), den transparenta bilden används som bakgrund för navigeringen, och vi ställer också in vissa teckensnittfärger.
Förhandsgranska det, och du har nu något liknande:

---

Portföljinlägg

Innan vi skapar toppen av vår hemsida där våra två senaste Portfolio-artiklar går, behöver vi några inlägg att testa med. Temat kommer att använda några "Anpassade fält" för att visa extra information för portföljobjekten:

• datum (det datum då arbetet slutfördes)
• klient (vem arbetet var för)
• länk (till en levande version av ditt arbete)
• förhandsvisning (URL på en 930px breddsbild av ditt jobb)
• förhandsvisning full (större version av arbetet, kommer att visas i en lightbox)

Skapa ett nytt blogginlägg, med titeln som namnet på projektet (som i bilden ovan) och skriv in något innehåll om arbetet. Sätt in inlägget i din "Portfölj" -kategori.

Innan du sparar inlägget, bläddra ner till avsnittet "Anpassade fält":

Ange här varje av de anpassade fälten som anges ovan. Bara förhandsvisning fältet är obligatoriskt. Du kan använda följande bilder för din förhandsvisning fält om du inte har någon egen (högerklicka och spara):

När du fyllt i fälten kan du publicera posten. Upprepa denna process tills du har minst två inlägg (helst mer).

---

Hemsidan

Nu har vi alla förutsättningar, vi kan slutligen koda huvuddelen av hemsidan. I page-home.php, skriv följande:

 
Senaste projekt
  
query_posts (); är en WordPress-funktion för att få specifika inlägg från databasen. Som du kan se i argumenten för funktionen (delarna i parenteserna) berättar vi att WordPress bara får 2 inlägg från kategorin Portfölj ($ ts_portfolio_cat får informationen från alternativsidan vi skapade).
 
Med medan();, Vi har startat "WordPress Loop". Här kan vi få berätta för WordPress vilken del från varje post vi behöver.
 
 $ Räknare ++; $ preview = get_post_meta ($ post-> ID, 'preview', true); $ date = get_post_meta ($ post-> ID, 'date', true); ?>
 
På första raden har vi lagt till en till disken (vi kommer att använda det här inom kort). $ Räknare ++; är kortfattad för skrivning $ counter = $ counter + 1;
 
Vi använder sedan get_post_meta (); funktioner för att få våra "förhandsgranska" och "datum" anpassade fält från inlägget - som placeras i $ förhandsvisning och $ datum variablerna.
 
 ">
 
Ovan har vi skapat en div med en arbete klass för det portföljobjekt som ska hållas i. Men observera att vi också kontrollerar att om vår $ räknare är lika med 2 (vilket betyder att det här är det andra portföljelementet), lägger vi till en annan klass till den div som heter sista. Denna klass kommer att vara till nytta när vi utformar det här avsnittet.
 
Därefter utför vi förhandsgranskningsbilden:
 
 
 
Om en förhandsgranskningsbild finns finns vi ... 
 
 ">   
 
De the_permalink (); funktionen används för att utmata länken till det aktuella inlägget.
 
Sedan utmatar vi förhandsgranskningsbilden. Men Vi kör det också genom TimThumb resizer för att ändra storlek på bilden till 450px i bredd och 210px i höjd (från den 930px bilden det faktiskt är). Notera hur vi använder bloginfo ( 'template_directory'); för att säkerställa att WordPress checkar in i vår temmapp (det är en likvärdig av TEMPLATEPATH vi använde i föregående del i serien).
 
Vi behöver nu bara mata ut texten som ligger under bilden (titeln och datumet):
 
 
 ">   ($ Datum)";?> 
 
Detta är relativt rakt framåt. Vi använder the_permalink (); igen för att få länken till det aktuella inlägget. titeln(); används för att få den aktuella inläggets titel.
 
Vi kontrollerar då om ett "datum" anpassat fält har angetts (i $ datum variabel) för detta inlägg. Om så är fallet matar vi ut det.