Share
Când v-am lăsat ultima oară, am analizat câteva principii de proiectare, am explorat alte cadre și am ajuns la concluzia inevitabilă că ne-am construi propria noastră. În acest tutorial, vom acoperi pașii pe care i-am făcut pentru a crea ceea ce mi-am numit Bootplate-ul meu WordPress, aruncând o privire mai atentă la CSS, functions.php și selectând paginile de șabloane.
Lucrul important de ținut minte pe parcursul dezvoltării este că dorim să păstrăm suficient de general acest lucru încât să îl putem adopta / construi cu ușurință pe temele viitoare; De asemenea, mi-am făcut un scop personal de a face acest lucru suficient de bun pentru a sta de-a lungul ca tema barebones. Să ne amintim că mergem înainte.
Primul lucru pe care trebuie să-l facem este să aranjăm CSS. Există 2 componente principale pentru CSS în WordPress Boilerplate: style.css, care este necesar și folderul / css /, care include toate CSS-urile pentru cadru. În stil.css veți găsi două secțiuni: definiția temei și apelurile către CSS-ul meu real. Întregul fișier stil.css arată astfel:
Accentsconagua
/ * Denumirea temei: WordPress 3.0 Tema URI placă boiler: http://casabona.org/ Descriere: O temă Placă cazan pentru WP 3.0. Acum, cu HTML5 mai mult! Versiune: 1.5 Autor: Joe Casabona URI autor: http://www.casabona.org * / @import url ("css / reset.css"); @import url ("css / master.css"); @import url ("css / ie.css"); După definiția temei, vedeți trei @import linii. Aici se duce toată ridicarea grele pentru CSS. reset.css este în mod evident resetarea CSS. De fapt, am schimbat recent acest lucru pentru a utiliza normalize.css din câteva motive. Primul motiv este că, în loc să resetați totul la un stil implicit, neformatat, acesta creează stiluri pe care le-ați aștepta de la un browser implicit. De exemplu, într-o resetare standard, nu mai este de tip boldface. În normalize.css, este. Al doilea motiv este că are stiluri implicite pentru elementele HTML5, care sunt necesare pentru browserele mai vechi care nu acceptă cele noi.
Notă: Folosesc HTML5 în această temă. Funcționează în Firefox, Chrome, Safari și IE7-9.
După ce reset.css este numit, eu numesc principala mea foaie de stil, master.css (numirea convențiilor mulțumită lui Dan Cederholm de SimpleBits). Aceasta este esența chestiunii! Toate stilurile implicite după resetare vor fi aici. Nu voi lipi toate CSS aici, dar am inclus fișierele pe care le puteți vizualiza. În crearea CSS, am păstrat în minte stiluri care, de obicei, rămân aceleași pentru mine de la site la site; lucruri precum lățimea containerului general, stilurile mele de navigare, modul în care îmi aranjez bara laterală etc. De asemenea, în general utilizez padding / margins în multipli de 15 pentru paragrafele și elementele mele de listă, așa că am câteva definiții de bază pentru aceleași.
De asemenea, includ stiluri implicite pentru unele clase comune WordPress, inclusiv cele generate de editorul WordPress. Sunt: .navigare, .post, .postmetadata, ol.commentlist, ol.commentlist li, ol.commentlist li .vcard, ol.commentlist li .vcard img, formular # comment form, formular # commentform p etichetă, formular # commentform input, form # commentform textarea, formularul # comentariul textarea, formularul # commentform input [type = "submit"], img.centered, .alignright, .alignleft, .aligncenter, div.aligncenter, .wp-caption, .wp-caption img, .wp- caption p.wp-caption-text.
Ultimul lucru pe care îl includ în master.css este o clasă care va face divs "auto-curățare". Aceasta este, va elimina necesitatea de a .clearfix div (din nou, datorită lui Dan Cederholm pentru acest lucru).
/ * flotări auto-clare * / .group: după content: "."; afișare: bloc; înălțime: 0; clar: ambele; vizibilitate: ascuns;
După ce ma chema master.css, sună în piesa finală a puzzle-ului nostru, ie.css. Aici se vor rezolva toate și toate remedierile IE. Chiar acum, este doar o rezolvare pentru .group și un fix PNG. Rețineți că ordinea de import este foarte important aici, deoarece unele lucruri pot fi suprasolicitate, iar schimbarea ordinului se poate face cu stilurile pe care le-am definit.
La fel de important ca și chestiunea CSS este fișierul functions.php. Aici vom adăuga orice funcții generale pe care intenționăm să le folosim pe întreaga temă, precum și orice definiții pentru barele laterale, meniuri și multe altele. Încearcă asta cu două linii:
defini ('TEMPPATH', get_bloginfo ('stylesheet_directory')); definiți ("IMAGES", TEMPPATH. / images); Acestea sunt două constante pe care le folosesc destul de frecvent pe întreaga temă. Prima este calea șablonului; acest lucru este bun pentru referirea fișierelor specifice temelor. Am folosit "stylesheet_directory" în loc de "template_directory", deoarece dacă folosim acest lucru ca temă părinte (tutorialul vine în curând), template_directory ar apuca calea greșită (și anume aceasta în locul căii copilului). A doua linie utilizează de fapt TEMPPATH pentru a crea o cale spre directorul / images /, pe care o vom folosi foarte frecvent, indiferent dacă se află în această temă sau în teme pentru copii.
După aceste două linii, adaug suport pentru meniuri dinamice și 2 bare laterale widgetized; unul este bara laterală primară, iar una este a doua bara laterală "doar în caz". În general, o voi folosi în subsolul temei mele. În cele din urmă, am creat alte două funcții pe care le-am găsit pe care le foloseam în mod regulat:
funcția print_post_nav () ?>Nu s-au găsit postări. Încercați o căutare diferită?
Primul imprimă navigarea postului și ar trebui să fie folosit în afara buclă. Aceasta înseamnă că o putem folosi pe orice pagină care afișează postări (index, căutare și orice șablon tip post post customizat). Cea de-a doua funcție creează zona "Mesaje care nu au fost găsite", pe care o foloseam pe aproape fiecare pagină de șablon.
Există, desigur, nici o limită pentru câte funcții creați aici. Acestea erau doar cele pe care le foloseam frecvent.
Pagini de șablon
Următoarele sunt paginile șablonului. Vom analiza 4 pagini specifice: header.php, footer.php, single.php și page.php. Celelalte sunt în principiu derivate ale paginii sau șabloanelor unice.
Antet și subsol
Mai jos este întregul dosar header.php:
<?php bloginfo('name'); ?> | <?php wp_title(); ?> „>
Puteți vedea asta în afară de regulamentul nostru declarații, nu este prea mult. eu includ
pentru a ne asigura că tema noastră este gata HTML5 și apoi în corp, creați un antet de bază cu numele și navigarea site-ului, sunați la bara laterală și porniți zona "conținut", toate înfășurate în # predefinite predefinite div. Puteți vedea că modul în care pun lucrurile este conform cu modul în care CSS-ul meu este definit (de exemplu, bara laterală, pe care o fluturau corect, se află deasupra zonei principale de conținut).Notă: Nu vorbesc despre șablonul sidebar.php pentru că este același ca orice bara laterală standard: verificați dacă este definită o zonă widget; dacă nu, imprimați unele widget-uri implicite.
Același lucru este valabil și pentru subsolul nostru:
Am imprimat două pauze de linii, mai ales pentru a face codul să arate destul, pentru a termina conținutul div, apoi începe pe subsol. Includeți bara laterală secundară în subsol, deoarece acesta este ceva ce fac deseori, apoi aveți câteva informații generale privind drepturile de autor și completați tema închizând toate etichetele deschise. Din nou, încerc să nu fac prea mult cu subsolul, deoarece acesta este un cadru, dar ofer unele opțiuni pentru a adăuga informații la subsol dacă am nevoie să.
Pagina singura
Aceste fișiere sunt, de asemenea, destul de fundamentale. Am încercat să taie majoritatea lucrurilor care nu sunt necesare, lăsând în informațiile pe care le așteptați să le vedeți pe fiecare. single.php ar trebui să arate familiar:
>Citiți restul acestei intrări "„); ?>postat pe la | Categorie | Comentariu | Comentariile sunt închise în prezent Comentariu | Ambele comentarii și ping-uri sunt în prezent închise. |
Avem antetul și subsolul și bucla noastră. Am păstrat clasele care sunt comune printre cele mai multe teme WordPress, astfel încât oamenii care folosesc acest lucru pot doar să definească aceste clase în CSS fără a fi nevoie să schimbe șablonul single.php. De asemenea, includ meta date post standard și o zonă de comentarii. Observați că nu folosesc funcția de navigare după post pe care o scriu în funcțiile .php. Asta pentru că asta se află în interiorul buclă și această funcție se va comporta imprevizibil.
Șablonul page.php este puțin mai scurt:
Citiți restul paginii "„); ?> 'Pagini: ',' după '=>'
',' next_or_number '=>' numărul ')); ?>Din nou, includ doar ceea ce este necesar. Nu există clase sau informații suplimentare. Paginile de pe site-uri web se concentrează pe conținut, motiv pentru care am încercat să simplificăm cât mai mult posibil acest șablon.
Alte șabloane
Evident, nu pot acoperi fiecare pagină de șablon aici; Vă sugerez să verificați sursa inclusă. Pentru fiecare șablon am încercat să taie ceea ce nu foloseam și, în unele cazuri, am lăsat șabloanele de-a lungul secțiunii (ca informație standard WordPress). Deoarece toți codificăm în mod diferit felul în care adaug cele mai bune lucruri, dar am încercat să fac asta cât mai general posibil.
Iată cum arată tema din cutie:
WordPress Boilerplate Tema
Concluzie
Deci, iată o prezentare generală cu câteva exemple de creare a unui cadru tematic. Privind exemplul meu de cod, puteți vedea că nu am încercat să fac prea mult cu nici un singur fișier șablon. Dacă voi adăuga ceva la această temă, va fi în fișierul functions.php, deoarece fișierele șablon ar trebui să rămână de bază - mai ales dacă le vom înlocui doar când creați o temă copilărească. Vorbind despre asta, o să facem data viitoare, deci stați liniștit!
