Share
În ultima tranșă a acestei serii, am creat cadrul nostru tematic, care se ridică la o boilerplate destul de simplă, unde am adăugat câteva funcționalități pe care le folosim în mod obișnuit. Există două moduri în care putem folosi cadrul nostru acum: ca temă copil și ca o adevărată boilerplate pe care tocmai l-am copiat și editat. Astăzi vom folosi cadrul nostru ca o temă pentru copii.
Am facut un tutorial despre crearea unei teme simple pentru copii, dar acest lucru este putin diferit de data aceasta, pentru ca nu avem o tema deplina cu care sa lucram. Avem doar minimul minim în ceea ce privește stilurile și funcționalitatea. Deci, cu asta în minte, să mergem mai departe.
Notă: Deci, acest tutorial nu ajunge prea mult, eu pot presupune în anumite puncte că sunteți familiarizați cu crearea de teme pentru copii pentru WordPress.
Primul lucru pe care trebuie să-l facem este să creați directorul în directorul nostru / themes /. Mi-am chemat copilul-copil (foarte creativ, stiu); poți numi orice al tău. Ca întotdeauna, vom începe cu fișierul nostru stil.css și definiția temei:
/ * Tema Nume: URI tematică tematică a temei: http: //example.com/ Descriere: Tema copilului pentru tema dvs. cadru Autor: Numele dvs. Autor URI: http: //your-site.com/ Format: wp-boilerplate Versiune: 1,0 * /
Amintiți-vă că cu temele copilului avem nevoie de acea linie suplimentară pentru a defini ce director găzduiește tema părinte. Odată ce aceasta este stabilită, WordPress știe unde să apucă fișierele de temă părinte. Următorul lucru pe care trebuie să-l facem este importul CSS din cadrul nostru:
Accentsconagua
@import url ("... /wp-boilerplate/style.css"); Acesta este un pas necesar dacă nu doriți să începeți de la zero, deoarece aceasta va suprascrie CSS din tema părinte. De asemenea, rețineți că acest lucru va fi încărcat după ce toate CSS-urile din tema noastră sunt încărcate, inclusiv ie.css.
Acum, dacă vă veți aminti, cadrul nostru fără modificări arată astfel:
Ceva de reținut aici este faptul că, deoarece acesta este cadrul nostru, suntem mult mai familiarizați cu acesta decât cu alte cadre; l-am construit în propriile noastre stiluri personale de codificare. În timp ce acest lucru poate părea similar cu tutorialul pentru alte teme pe care am făcut-o, o mare diferență este că tema părintească este cadrul nostru propriu, construit pentru nevoile noastre.
Vom adăuga un anumit stil, începând cu baza CSS. Adăugați aceste linii de cod la CSS temei copilului dvs.:
corp fundal: # 000000; a, a: a vizitat color: # a2a085; text-decoration: none; #container background: #FFFFFF;
Acest lucru creează o bază pentru transformarea temei noastre, care va avea loc în principal în CSS. Am schimbat câteva setări implicite în culorile corpului, legăturii și culorilor. Acum vom face ca antetul nostru să fie mai atrăgător.
antetul font-size: 1.4em; fundal: # D1CFB5; antet h1 padding: 10px; antet h1 a, antet a: vizitat culoare: # 69652B; nav fundal: # ABA0B6; font-size: 1.5; padding: 3px; frontieră de fund: 1px solid # 221F49; frontieră: 1px solid # 221F49; nav, nav a: vizitat culoare: # 221F49; nav: hover culoare: # 4C4B55;
Ca și cu stilurile noastre de bază, am înlocuit simplu stilurile antet și nav din cadrul. Am mai făcut și alte stiluri pentru tema copilului nostru, care sunt incluse în acest tutorial dacă doriți să luați uite. Ceea ce am ajuns la urmă a fost:
Acum, să aruncăm o privire la crearea unui nou șablon de aspect, pe care îl vom folosi strict în tema copilului nostru.
Cea mai mare parte a temei noastre este deja îngrijită datorită cadrului nostru, dar asta nu înseamnă că nu putem adăuga la ea. În această secțiune următoare, vom crea o pagină de pornire personalizată cu șabloane de pagini și o funcție magică mică. Să creați o nouă pagină numită Pagina-home.php și adăugați aceasta:
Citiți restul paginii "„); ?>
Avem aici o pagină destul de standardă cu numele șablonului, buclă și aceleași etichete șablon pe care le-am folosit pe pagina noastră a cadrului. Cu toate acestea, am adăugat, de asemenea, o zonă widget chiar sub conținut, astfel încât să putem adăuga ceea ce dorim pe pagina de pornire. Acum trebuie să definim acea zonă widget în tema noastră prin fișierul nostru de funcții.
Amintiți-vă că fișierul cu funcțiile copilului nostru este încărcat înainte de fișierul funcțiilor părintelui.
Creeaza o functions.php fișier în tema copilului nostru și adăugați acesta:
__ ("Widget-uri de acasă", "home widgets"), 'id' => 'home-widget-area', 'description' => > '',' după_widget '=> ""," anterior_title "=> '',' după_title '=>'
',)); ?> Cu aceasta putem acum adăuga widget-uri pe pagina noastră de pornire! Am adăugat un feed RSS. Înainte de a aplica orice CSS, arata astfel:
Tu, desigur, poți să hrănești această hrănire, oricum vrei.
Există absolut mult mai multe pe care le-am putea face aici folosind extensia API a WordPress. Putem folosi funcții pentru a schimba șablonul de comentarii, pentru a crea un fișier gol al barei laterale pentru a șterge, în esență, bara laterală sau pentru a înlocui complet subsolul. Posibilitățile sunt nesfârșite, deoarece cadrul nostru este atât de ușor / simplu.
Unul dintre lucrurile cu adevărat plăcute în ceea ce privește utilizarea propriului cadru homegrown este că putem îmbunătăți constant acest lucru. De fapt, folosesc acest lucru mai mult ca o boilerplate pe care o copiez și o modific (tutorialul vine în curând), astfel încât să o schimb și să folosesc ca temă copil mi-a arătat câteva îmbunătățiri pe care le-aș putea face pe cadru.
get_sidebar ( „diferit perciuni“)).functions.php fișier, deoarece le folosesc în mod regulat, oricum. Una dintre clase este un procesor de formular, deci nu voi avea nevoie de un plugin pentru a face simple formulare de e-mail.Amintiți-vă că aveți o mulțime de spațiu pentru personalizarea personalizată, cu excepția cazului în care intenționați să vă eliberați cadrul pentru public.
Aici am făcut niște personalizări de bază ale cadrului nostru prin tema copilului nostru. Această tehnică este utilă în special dacă păstrați o structură similară cu site-ul dvs. și doriți doar să faceți personalizări prin CSS (cred că CSS Zen Garden). De asemenea, este util să adăugați noi șabloane de pagini și funcții personalizate pe lângă cele deja existente. Cu toate acestea, din moment ce folosim un cadru de bază / boilerplate, dacă schimbăm complet structura temei, am putea crea o temă de la zero dacă folosim o temă de copil, deoarece probabil vom înlocui majoritatea șabloane șablon. Data viitoare voi trece prin copierea și lipirea plăcii noastre și modificarea temei însuși pentru a obține cât mai mult din codul pe care l-am stabilit deja.
