De-a lungul acestei serii începând cu șase părți, vom folosi caracteristicile avansate ale WordPress pentru a crea propriul portofoliu și blog, completând o pagină cu opțiuni, mai multe stiluri și suport pentru noile funcții WordPress 2.7. Astăzi, creăm aspectul paginii de pornire.

Disponibile și în această serie:

1. WordPress: Începător la Maestru, Partea 1
2. WordPress: Începător la Maestru, Partea a 2-a
3. WordPress: Începător la Maestru, Partea 3
4. WordPress: Începător la Maestru, Partea a 4-a
5. WordPress: Începător la Maestru, Partea 5
6. WordPress: Începător la Maestru, Partea 6

Salt la o secțiune

• Noțiuni de bază
•   - Contur
• header.php
•   -
•   - Scheme de culori și foi de stil
•   - div # cap
•   - div # nav
• Modelarea antetului
•   - Stiluri generale
•   - Header Styling
•   - Stylingul navigației
•   - Unele culori
• Portofoliu Posts
• Pagina de pornire
•   - Frumusețe Terapie
• Zona largă
• Subsol
• rezumat

Noțiuni de bază

În această parte, vom crea prima pagină a portofoliului nostru, folosind pagina de opțiuni și gestionând câmpurile personalizate în postări. Înainte de a începe, creați următoarele fișiere și directoare în interiorul / Wp-content / teme /inovație/ dosarul pe care l-ați creat anterior:

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

De asemenea, salvați acest script TimThumb PHP Image Resizer ca thumb.php în interiorul / Inc / pliant. TimThumb este un script inteligent de redimensionare a imaginii de către Darren Hoyt.

Contur

Mai jos este o prezentare generală a ceea ce va arăta prima pagină:

Al nostru header.php fișierul va conține #cap și #nav secțiuni - inclusiv etichetele de deschidere pentru #wrap, #conţinut și .contentwrap.

footer.php va conține apoi #subsol și etichetele de închidere pentru #conţinut și ultima secțiune de mai sus (aceasta ar putea fi fie .contentwrap, .extraswrap sau #sidebar în funcție de pagină).

.contentwrap zona va deține cele mai recente posturi din categoria Portofoliul nostru, și .extraswrap va fi o zonă de widget-ready în cazul în care putem plasa widget-uri de la tabloul de bord.

header.php

În partea de sus a header.php fișier, includeți următorul cod.

  >   

După cum puteți vedea, acesta este, în principal, codul pe care îl includeți în partea de sus a oricărui document xHTML Strict, numai că am înlocuit câteva secțiuni cu o funcție WordPress care va afișa codul corespunzător în funcție de limba în care se execută WordPress

La sfârșitul codului este eticheta titlului care, din nou, folosește funcțiile WordPress pentru a obține numele paginii curente, iar numele site-ului.

Scheme de culori și foi de stil

Apoi, includem pe noi style.css fișier folosind WordPress bloginfo (); funcţie. Este important să utilizați această funcție pentru a include foaia de stil principală, spre deosebire de intrarea directă în calea fișierului.

Apoi este codul pentru apucarea foii corecte de stiluri de culori selectate din Optiunile pe care le-am creat in partea anterioara:

Graficul de mai jos explică ce face codul de mai sus:

Verificăm dacă opțiunea noastră de culoare ($ ts_colourscheme) există pe pagina opțiunilor și că a fost setată corect (de exemplu, nu este lăsată ca "Alegeți o schemă de culori:"). Dacă opțiunea nu este setată corect sau nu există, va fi implicită utilizarea funcției deepblue.css schema de culori; altfel folosim foaia de stil pe care a fost selectată din pagina de opțiuni.

Continuând, vom include fluxurile noastre RSS & Atom și vom deschide eticheta corporală:

#cap

Codul următor este mult mai simplu decât cel precedent. Așa cum se arată în imaginea de mai sus, vom folosi mai multe funcții WordPress pentru a prelua informații din baza de date WordPress:

bloginfo ( 'name'); și bloginfo ( 'descriere'); funcțiile recuperează setările relevante din pagina "Setări generale" din tabloul de bord WordPress:

#nav

Recuperarea unei liste de pagini din baza de date este, de asemenea, foarte ușoară. Noi folosim wp_list_pages (); funcţie. Rețineți că includeți și title_li = argument. Acest lucru este de a opri funcția de la crearea unui element de listă suplimentar numit "Navigare:" înainte de listarea paginilor.

De asemenea, am deschis broșurile și diviziile relevante pentru următoarea secțiune.

Modelarea antetului

Dacă ați ajuns la programul dvs. de instalare WordPress acum, acesta va arăta cam așa:

Amintiți-vă că vom include orice stiluri de culoare în interior deepblue.css astfel încât să putem crea cu ușurință scheme de culori diferite mai târziu. Totul va intra style.css.

Stiluri generale

Primul lucru pe care îl includ mereu în foaia de stil este resetarea browserului, urmată de un stil de bază pentru paragrafe, liste, anteturi și linkuri.

 * umplutură: 0; margine: 0; corp font-family: Arial, Helvetica, sans-serif;  p font-size: 0.9; Înălțimea liniei: 1,5cm; margin-bottom: 10px;  ul, ol margine: 0 0 10px 10px;  li font-size: 0.9; Înălțimea liniei: 1,5cm; listă-stil-poziție: interior; margin-bottom: 3px;  img border: none;  h1, h2, h3, h4, h5, h6 font-greutate: normal;  h3, h4 margine: 15px 0 2px 0;  h4, h5, h6 font-greutate: bold;  a: link, a: vizitat text-decoration: none;  a: hover, a: activ, a: focalizare text-decoration: underline; contur: nici unul; 

Acest lucru ar trebui să arate foarte direct pentru oricine are o bază de înțelegere a HTML și CSS. Am setat margini și umplutură pentru toate elementele (*) la 0 pentru a depăși stilurile implicite pe care fiecare browser le aplică unei pagini. Apoi includem noi margini, dimensiuni ale fontului și înălțimi de linie pentru elementele principale pentru a crește lizibilitatea acestora.

Header Styling

Apoi, vom crea un pic de aspect:

#wrap margin: 0 auto; lățime: 980px;  #head margin: 25px 0; overflow: ascuns;  #head h1 float: left; margin-stânga: 20px;  #head h3 font-familie: Georgia, "Times New Roman", Times, serif; font-size: 0.8cm; font-style: italic; float: dreapta; linie înălțime: 1,7; text-aliniere: drept; marcă: 0 20px 0 0; lățime: 500px; 

#wrap elementul este containerul care deține totul. Folosim o lățime de 980 de pixeli (este cam la fel de mare ca și cum putem merge în timp ce încă mai găzduim rezoluții de 1024x768). Și am folosit-o marja: 0 auto; pentru ao centra în browser.

Titlul și taglines (h1 și h3 respectiv) sunt apoi flotate în ambele părți ale containerului.

#cap are o proprietate de overflow: ascuns; astfel încât să țină corect elementele plutitoare. În mod obișnuit, un div nu se va înfășura în jurul copiilor plutiți (așa cum avem aici). Vezi exemplul de mai jos (galbenul reprezintă marja atribuită #cap):

Stylingul navigației

 #nav border-top-left-radius: 15px; raza frontală-dreapta-dreapta: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; frontieră de fund: nici unul; clar: ambele; padding: 0 20px; lățime: 939px; 

Uitați-vă la imaginile de previzualizare din partea de sus a tutorialului și veți observa că folosim colțuri rotunjite în partea de sus a secțiunii de navigare. În loc să realizăm acest efect printr-o mulțime de imagini și etichete HTML suplimentare, vom folosi noul CSS3 border-radius proprietate pentru a da o rază de 15px ambelor colțuri de sus.

Cu toate acestea, browserele actuale nu acceptă încă această proprietate, dar browserele bazate pe Mozilla și Webkit au propriile lor -Moz-border-radius și -webkit-border-radius proprietăți pe care le putem folosi și pentru a obține colțurile rotunjite pentru a lucra în Firefox 3, Safari și Chrome. Internet Explorer și Opera vor folosi pur și simplu o graniță pătrată până când o vor susține border-radius.

Notă: Utilizarea acestor proprietăți specifice furnizorului în CSS vă va opri validarea foii de stil. Dar, deoarece vor fi doar aceia care opresc validarea - cine îi pasă?

Continuând, vom modela elementele listă din navigație pentru a afișa în linie (orizontal):

 #nav ul marja: 0;  #nav ul li afișare: inline; dimensiune font: 1em; linia-înălțime: 1.3; margin-dreapta: 25px;  #nav ul li: link, #nav ul li a: vizitat display: -moz-inline-stack; afișare: inline-block; font-weight: bold; text-decoration: nici unul; padding: 20px 10px;  #nav ul a: hover, #nav ul li a: activ, #nav ul li a: focalizare contur: none; 

Rețineți că folosim afișare: -moz-inline-stack; pe link-uri. Acest lucru este exclusiv pentru Firefox 2 și mai jos, care (din anumite motive) nu suportă afișare: inline-block; - chiar și IE6 îl acceptă!
Vom da o mulțime de padding la link-uri pentru a crește zona clickable (spre deosebire de padding Li in schimb).

Acum, aruncați o privire la pagina din browser și ar trebui să arate așa. Mai bine, dar acum are nevoie de o culoare!

Unele culori

În primul rând, salvați următoarea imagine în / Stiluri / deepblue / dosar ca bg.jpg.

Și această imagine în același director ca trans.png (este de fapt o imagine semi-transparentă de 1px întunecată).

Acum deschis /styles/deepblue.css, și tip:

 / * Stilul implicit de inovare - deepblue.css * / body background: url ("deepblue / bg.jpg") no-repeat # 101010 centru de vârf fix; culoare: # 333;  a: link, a: vizitat culoare: # 5c6e80;  #head h1 culoare: #eee;  #head h3 culoare: #ddd;  #nav background: url ("deepblue / trans.png") repetați; frontieră: 1px solid # 111;  #nav ul li: link, #nav ul li a: vizitat culoare: #ddd;  #nav ul li.current_page_item a: link, #nav ul li.current_page_item a: vizitat background: url ("deepblue / trans.png") repeta; culoare: #eee;  #nav ul a: hover, #nav ul li a: activ, #nav ul li a: focus culoare: #eee; 

Am setat imaginea de fond mare pe corp (și am fixat-o astfel încât să nu se miște când derulați), imaginea transparentă este utilizată ca fundal pentru navigație și am setat și câteva culori ale fontului.
Previzualizați-o și veți avea acum ceva asemănător:

Portofoliu Posts

Înainte de a crea partea superioară a paginii noastre de pornire, unde vor fi lansate cele două cele mai recente articole din portofoliu, vom avea nevoie de câteva postări pentru a testa. Tema va folosi câteva câmpuri personalizate pentru a afișa informații suplimentare pentru elementele de portofoliu:

• Data (data finalizării lucrării)
• client (pentru care a lucrat)
• legătură (la o versiune live a lucrării dvs.)
• previzualizare (Adresa URL a unei imagini cu dimensiunea de 930 pixeli a lucrării dvs.)
• previzualizate completă (versiune mai mare a lucrării, se va afișa într-o casetă lightbox)

Creați o nouă postare de blog, titlul fiind numele proiectului (ca în imaginea de mai sus) și introduceți un anumit conținut despre lucrare. Puneți postul în categoria "Portofoliu".

Înainte de a salva postarea, derulați în jos până la secțiunea "Câmpuri personalizate":

Aici, introduceți fiecare dintre câmpurile personalizate furnizate mai sus. Doar previzualizare Câmpul este obligatoriu. Puteți utiliza următoarele imagini pentru dvs. previzualizare dacă nu aveți încă unul (faceți clic dreapta și salvați):

După ce ați completat câmpurile, puteți publica postarea. Repetați acest proces până când aveți cel puțin două postări (de preferință mai multe).

Pagina de pornire

Acum, avem toate premisele făcute, putem codifica în cele din urmă partea principală a paginii de pornire. În Pagina-home.php, tastați următoarele:

 
Ultimele proiecte
  
query_posts (); este o funcție WordPress pentru a obține postări specifice din baza de date. După cum puteți vedea în argumentele pentru funcția (părțile din paranteze), îi spunem WordPress să obțină doar 2 posturi din categoria Portofoliu ($ ts_portfolio_cat obtine informatiile din pagina de optiuni create).
 
Cu in timp ce();, am inceput "Loopul WordPress". Aici putem să spunem WordPress care parte din fiecare post de care avem nevoie.
 
 $ Contra ++; $ preview = get_post_meta ($ post-> ID, 'preview', true); $ date = get_post_meta ($ post-> ID, 'data', true); ?>
 
Pe prima linie, am adăugat unul la contor (vom folosi acest lucru în curând). $ Contra ++; este scurtă pentru scriere $ contra = $ contra + 1;
 
Apoi folosim get_post_meta (); funcționează pentru a obține câmpurile personalizate "previzualizare" și "data" din postare - care sunt plasate în $ previzualizare și data de $ variabile.
 
 „>
 
Deasupra am creat un div cu un muncă clasa pentru elementul de portofoliu care va avea loc. Dar observați că verificăm, de asemenea, că, dacă ne $ counter este egal cu 2 (adică acesta este al doilea element de portofoliu), adăugăm o altă clasă divului numit ultimul. Această clasă va veni la îndemână atunci când vom modela această secțiune.
 
Apoi, afișăm imaginea de previzualizare:
 
 
 
Dacă există o imagine de previzualizare, atunci ... 
 
 „>   
 
 the_permalink (); funcția este utilizată pentru a trimite linkul la postul curent.
 
Apoi, emise imaginea de previzualizare. Dar de asemenea, rulați-l prin intermediul resizitorului TimThumb pentru a redimensiona imaginea la o lățime de 450px și o înălțime de 210px (de la imaginea de 930px de fapt). Rețineți modul în care folosim bloginfo ( 'template_directory'); pentru a vă asigura că WordPress verifică dosarul nostru tematic (este echivalentul lui templatePath am folosit în partea anterioară din serie).
 
Acum trebuie doar să scoatem linia de text care se află sub imaginea (titlul și data):
 
 
 „>   ($ Data)";>> 
 
Acest lucru este relativ direct înainte. Folosim the_permalink (); din nou pentru a obține linkul pentru postul curent. titlul(); este folosit pentru a obține titlul postului curent.
 
Apoi, verificăm dacă a fost introdus un câmp particularizat "data" (în data de $ variabilă) pentru acest post. Dacă da, îl scoatem.