Share
Lucrul minunat despre WordPress este că nu limitează modul în care este afișat conținutul, ci oferă un "cadru" de moduri de a face acest lucru. Chiar mai bine, este posibil să modificați afișarea în funcție de conținut. La scrierea acestui tutorial a fost greu să explic ceea ce se întâmplă ... Dar cel mai bun mod este acesta: postul va fi afișat în bucla în funcție de conținutul său - sau diferențe contextuale. În orice caz, include fișiere specifice care corespund categoriei postului.
Acest tutorial presupune că aveți un motor WordPress care rulează pe un server pe care aveți acces la încărcarea fișierelor, descărcarea fișierelor și căutarea. Dacă doriți să rulați un server local pe computerul dvs. cu o instalare wordpress, există un tutorial pe care aici pentru Windows, și aici pentru OS X.
Permiteți-mi să descriu puțin mai profund ce vom face. Multe site-uri WordPress sunt mai mult decât un blog în aceste zile. Pentru cei care integrează un blog, un sistem de știri și un portofoliu, există multe modalități de a face distincția între fiecare dintre aceste postări. Pentru început, cantitatea de meta informație pe care WordPress o acordă fiecărui post este monumentală. Date, categorii, câmpuri personalizate, opțiuni, etichete, cantitate de etichete etc. Continuă. Prin alegerea uneia dintre acestea, puteți să manipulați WordPress pentru a afișa anumite lucruri chiar și atunci când contextul se schimbă (adică nume de categorie diferită, etichetă diferită etc.). Metoda pe care o voi preda când o anumită categorie este atașată la un anumit post și apoi aduce un dosar diferit în consecință. Contextual! În cazul în care context este un blog, afișează-l ca un post pe blog! În cazul în care context este de un element de portofoliu, afișează-l ca un element de portofoliu! Deci, așa mai departe. Ai înțeles. Sa mergem!
Am pregătit câteva dosare; style.css, index.php și câteva imagini (mulțumiri site-uri TUTs!). Vom construi aceste produse pentru a crea produsul nostru final. Descărcați-le și plasați folderul în folderul wp-content / themes. Acum, du-te la tabloul de bord WordPress, faceți clic pe "design" sau "prezentare" dacă încă mai trăiți în epoca de piatră și selectați tema "Context Files". Grozav! Acum este activat putem scufunda în editarea fișierelor și de a continua cu tutorialul.
Pentru ca metoda să funcționeze, un grup de posturi trebuie să aibă o anumită categorie. Pentru aceasta, le-am oferit câteva dintre ele categoria "Blog", unele "News" și au lăsat restul să fie grupul de portofoliu, fără nicio categorie specifică. Asigurați-vă că faceți acest lucru sau că rezultatele dvs. nu vor fi prea variate. Asigurați-vă că postările dvs. (cel puțin pentru acest tutorial) sunt grupate într-un fel. E vital!
Modul funcțional de a descrie ce se întâmplă, depinde de categorie, fiind inclus un fișier specific pentru codul bucla. Ierarhia arată astfel:
O postare de pe blog se va termina în felul următor:
Un element de știri va fi afișat astfel:
Și toate celelalte postări sau elementele de portofoliu se vor asemăna cu aceasta:
Observați micile filigrane din partea dreaptă sus a fiecărui post? Aceasta este dovada că sistemul nostru va funcționa!
Oricum. Între etichetele corpului avem nevoie de un antet și o buclă. Adaugă asta:
"title =" Acasă ">
În continuare, trebuie să obținem categoria pentru fiecare post. Acest lucru utilizează o anumită sintaxă Custom WordPress / PHP. De obicei, ai putea folosi get_the_category pentru valoare, dar poți obține Oricare informații despre categorie prin această metodă (merge sau înlocuiește comentariul în PHP):
foreach ((get_the_category ()) ca categorie $) $ categoryName = $ category-> cat_name. "
Acum, cu asta, trebuie să verificăm această valoare față de o valoare. Dacă ați numit categoriile dvs. "Blog" sau "theirNews", putem verifica acum variabila $ categoryName în funcție de exact acele nume / valori. Amintiți-vă că acest lucru este în buclă, astfel că această verificare se face pentru fiecare post individual.
dacă ($ categoryName == 'Blog') include (TEMPLATEPATH. '/ blogTemplate.php'); elseif ($ categoryName =='newNews ') include (TEMPLATEPATH.' / newsTemplate.php '); altfel (includeți (TEMPLATEPATH. '/ portfolioTemplate.php'));
Fiecare linie a celor de mai sus este relativ aceeași. PHP '==' înseamnă 'este egal cu'. Acestea sunt două, pentru că atunci când se utilizează doar o singură = definește o variabilă. Nu ceea ce dorim. Dacă, altfel, și altceva există câteva etichete PHP condiționate. Puteți utiliza mai multe declarații otherif dacă doriți să aveți mai mult de trei fișiere!
Cu PHP-ul făcut, putem crea acum fișierele reale care sunt incluse mai sus. Ceea ce interesează acest șablon este că puteți păstra întreaga bucla, categorie și include toate într-un singur set de etichete PHP. Eficienţă!
Aceste fișiere sunt, în principiu, ceea ce se întâmplă în bucla, constând în șabloane șablon de buclă. Deci, putem aloca fiecare categorie cu filigranul de sus dreapta, o clasă diferită se aplică fiecărui fișier de categorie diferită. Altfel, toate acestea sunt chestii de bază ale WordPress. Creați un nou fișier numit 'blogTemplate.php' în dosarul tematic și completați-l cu o bunătate PHP!
"title ="„>
Postat de | Filed under
"> Citește mai mult | |
Doar un lucru de observat. Știu că este o practică foarte proastă din motive de SEO, dar the_content (") are cele 2, astfel încât să nu fie afișat nici un mesaj" citiți mai mult ". Linkul" Citiți mai multe "din postMetaData face acest lucru!
Acest lucru este destul de minimalist. Antetul este și mai mic!
Vizitați sursa |
În cele din urmă, ultimul fișier de sub șablon.
; ?>/images/portfolio.png )
"title ="„>
"> Vizualizați proiectul
Și asta e tot PHP / HTML-ul pe care îl vei avea nevoie! Dacă încărcați pagina WordPress, se va asemăna cu ceva de genul:
Rețineți că puteți vedea deja diferențele din fiecare postare!
Acum, pentru a face destul! Vom începe cu un cod de nerespectare. Acest lucru este de a-l seta la un look de bază, a scăpa de lucrurile pe care nu le doriți și stilul tag-uri generale (adică anteturi, etc).
a text-decoration: none; culoare: # b93a00; * marja: 0; umplutura: 0; corp background: # 000; culoare: # 5b5b5b; font-familie: "Lucida Grande", Lucida, Verdana, sans-serif; dimensiune font: 75%; h1, h2, h3, h1 a, h2 a, h3 a font-family: "Trebuchet MS", Arial, Helvetica; culoare: #fff; spațierea literelor: -2px; text-decoration: nici unul; h1 a: hover, h2 a: hover, h3 a: hover culoare: # 8b8b8b; h2 font-size: 35px; margin-bottom: 10px; h3 font-size: 20px; culoare: # a8a8a8; spațierea cu litere: -1px; padding-bottom: 20px;
Acum avem nevoie de o structură pentru pagina noastră.
#wrapper marja: 0 auto; lățime: 500px; font-size: 11px; #header height: 150px; font-familie: Georgia, "Times New Roman", Times, serif; margine de fund: 1px solid; culoarea frontală: # 222; #content padding-top: 20px; .post margin-bottom: 40px; min-înălțime: 150px;
Înainte vom adăuga filigranele de negru în:
.blog background: url (images / blogbg.png) nu-repeta dreapta sus; .portfolio background: url (images / portfoliobg.png) nu-repeta dreapta sus; min-înălțime: 150px; .news background: url (images / newsbg.png) nu-repeta dreapta sus; padding-right: 100px;
Tema noastră se formează! Tot ce a mai rămas este un stil de imagine și stilul postMetaData!
#header h1 font-size: 50px; padding-top: 30px; #header p.description font-style: italic; font-size: 16px; .post img float: left; padding-right: 10px; padding-bottom: 20px; .post p padding-bottom: 15px; .postInfo padding: 10px; .postMetaData padding: 10px; fundal: # 141414; margine: 10px 0; lățime: 480px; afișare: bloc; clar: ambele; .postMetaData a culoare: # 06f;
Ultima secțiune de cod necesară, tema dvs. ar trebui să pară acum completă! Acest tutorial vă învață câteva lucruri. O metodă versitile pentru a obține informații despre categorie, cum se utilizează acest lucru împreună cu etichetele condiționate și gruparea PHP!
Săptămâna trecută, te-am făcut să creezi un tablou de bord / Desktop desktop. Voi o să vă plimbați complet când veți auzi ce este în acest tutorial plin de gemuri! Mai multă concentrare pe tabloul de bord (jur că este mai rece decât suna și necesită mult cod) și chiar mă duc în modul de a crea un stack (separat de doc, îmi pare rău că jqDock nu-i place cuibărit
Continuați lectură
jQuery adaugă o mulțime de funcționalitate misto pe site-urile dvs. web. Poate face o serie de lucruri, de la animație la AJAX. De obicei, se încruntă să se bazeze foarte mult pe jQuery pentru a proiecta site-urile dvs., dar este distractiv să mergem sălbatic din când în când. În acest tutorial vă voi învăța cum să utilizați jQuery pentru a crea un tablou de bord complet codat, la fel ca Leopard! Acest lucru poate fi util pentru a ascunde o mulțime de obiecte gadget sau widget-uri pentru care nu aveți spațiu!
Continuați lectură
CSSEdit este o altă aplicație web dev fantastic, care ia WebKit-ul Apple de către domnii pentru a oferi o experiență fantastică de editare CSS în timp real. Dar asta e doar! Oamenii îl cunosc doar ca un editor CSS vizual, atunci când este de fapt mult mai mult! Folosesc aceste 5 sfaturi fantastice pentru a-mi menține fluxul de lucru rapid și neted.
Continuați lectură
în Lucrul cu CMS de Harley
WP_Query este un instrument puternic pentru a controla ceea ce iese din bucla ta. Astăzi o să vă învăț cum să o utilizați pentru a crea o temă de ziar cu 3 coloane, care conține toate postările dvs. principale pe blog în coloana principală și o parte dintr-un set de postări cu o anumită categorie. Vom folosi 960 cadru CSS pentru aspectul de bază și resetarea temei noastre, aceasta va tăia o mulțime de muncă de pe ceea ce este necesar!
Continuați lectură
Accentsconagua
; ?>/images/portfolio.png )