Share
Când majoritatea oamenilor se gândesc la WordPress, ei se gândesc la bloguri. Dacă te uiți la prima pagină a WordPress.org, vorbește și despre blogging. Ceea ce nu vă spun este că WordPress se dublează și ca un CMS foarte puternic; trebuie doar să o configurați în mod corespunzător. De asemenea, poate fi un pic dificil să vă configurați și să lucrați așa cum doriți. Acesta este locul în care am venit. În această serie de 3 părți tutorial, am să vă duc prin cele trei pași de a folosi WordPress ca un CMS.
Acest tutorial include un screencast disponibil pentru membrii Tuts + Premium.
Prima parte va fi proiectarea unui layout simplu în Photoshop. Partea a doua va include codarea site-ului ca un șablon HTML static, iar ultima parte vă va ajuta să configurați WordPress și să aplicați noua temă a sistemului nostru de șabloane.
Dacă sunteți un dezvoltator web cu experiență, aceste primele două părți pot fi arahide pentru dvs., dar faceți-vă o favoare și pur și simplu încurcați conținutul. Niciodată nu știți, puteți lua ceva nou sau alt mod de a face lucrurile.
Probabil că te-ai săturat să citești, așa că să ne punem mâinile murdare!
Deschideți Photoshop și creați o nouă pânză neagră. De obicei, am ales doar 1024 x 768 de pe drop-ul web.
Am continuat și am creat o paletă rapidă de culori și am blocat-o ca un strat superior. În acest fel pot să o menționez, fără a fi nevoie să vă faceți griji că l-ați pierdut.
Completați fundalul cu cea mai ușoară culoare și pregătiți-vă să faceți niște ghiduri.
Vom crea ghiduri, astfel încât să putem pre-aspectul aspectului site-ului nostru înainte de a începe să stabilim elemente grafice. Dacă nu aveți conducătorii activi, mergeți și apăsați ⌘-R pentru a le activa.
Dacă vă deplasați mouse-ul peste riglă, faceți clic și deplasați-vă, cursorul se va schimba și va fi o linie orizontală sau verticală urmând mouse-ul. Acesta este un ghid. Să mergem să creăm pe.
Vom proiecta bara laterală, antetul și secțiunea principală a conținutului. Asigurați-vă ca ghizii să arate ca a mea sau ceva asemănător cu a mea. Am expus frontierele barei laterale, precum și umplutura pe care dorim să o includem.
Fiecare site are nevoie de un logo. Sigla se va situa chiar deasupra bara laterală. Dacă aveți un logo, plasați-l acum, altfel vom crea un logo cu bule de vorbire. De ce? Îmi plac bulele de vorbire.
Am adăugat un pic de umbră solidă, direct sub ea, pentru un anumit stil. Permiteți site-ului nostru un nume. O să-l spun Gear'd și să folosesc o mică pictogramă.
Utilizatorii noștri au nevoie de o modalitate de a naviga pe site-ul nostru. Vom plasa navigația pe partea de sus a conținutului nostru principal și o vom alinia la dreapta. Scoateți instrumentul nostru de text și scrieți câteva elemente de navigare.
Vom pretinde că vindem un serviciu. Să presupunem că gear'd este o aplicație web și că utilizatorii se pot înscrie pentru a cumpăra diferite nivele de membru.
Navigarea noastră va include informații, planuri și prețuri, întrebări frecvente și contact. Vrem ca utilizatorul să știe ce pagină este în prezent, deci vă permite să faceți o stare activă, precum și o poziție de navigare pentru butoanele noastre de navigare.
Pentru aceasta am creat un pătrat rotunjit cu o opțiune de text mai deschisă. Statul de hover are o culoare deschisă, puțin mai mare decât culoarea de fundal.

Aplicația noastră web oferă câteva niveluri de membru pe care utilizatorul ar trebui să le poată naviga. Nu vrem cu adevărat să avem 100 de elemente de navigație diferite, deoarece este urât. Aici intră bara laterală.
Permite urmărirea aceluiași stil pe care l-am utilizat pentru navigarea principală, starea de hover și stările active și le aplica la o anumită navigație laterală. Navigarea în bara laterală va menține navigația secundară pentru pagina principală pe care ne aflăm. Acestea includ informații despre preț și de înregistrare sau diferite domenii de interes sau de contact.
Pagina se uită puțin goală, permite adăugarea de conținut.
Am adăugat un text antet, precum și un text mini antet dedesubt. Doar o altă indicație vizuală a locului în care este în prezent utilizatorul.
Apoi am adăugat o cutie rotunjită întreaga lățime a zonei noastre de conținut și am aruncat o imagine în interiorul acesteia.
În sfârșit, am adăugat textul nostru corporal.
Site-ul nostru începe să se întâlnească frumos. Am adăugat toate elementele noastre, dar unul, subsolul nostru.
Footerul nostru va păstra drepturile de autor, precum și alte pagini care nu necesită un spațiu principal de navigare.
Adăugați o pauză de linie pentru a împărți puțin pagina și apoi lăsați să introduceți un text de copyright și să o aliniați până la ghidul din stânga.
Termenii și condițiile și politica de confidențialitate sunt câteva pagini pe care doriți ca utilizatorul să le poată accesa, dar nu trebuie neapărat nevoie să le aruncați în față. Frumusețea unui subsol este că putem furniza utilizatorului această informație, dar o ascundem foarte bine: P
Tocmai am creat un site simplu pe care îl putem converti acum într-un șablon HTML și CSS. Simțiți-vă liber să spice șablonul în sus, dar de dragul vitezei și ușurinței de utilizare vom trece de aici.
Accentsconagua