Share
Unul dintre primele lucruri pe care le-am observat când am început să-l folosesc WordPress a fost cât de bine folosește mantra dezvoltatorului, "Separarea preocupărilor". În lumea programării, doriți ca fiecare componentă să se bazeze cât mai puțin pe celelalte componente; acest lucru face ca fiecare componentă să fie reutilizabilă. Un exemplu perfect de acest lucru în WordPress este Teme. Acestea separă în totalitate designul de conținut. Putem schimba tema și conținutul rămâne neschimbat. WordPress face ceva similar cu modul în care putem construi pe teme în WordPress. În loc să modificăm o temă existentă (și riscăm să pierdem modificările la următoarea actualizare), putem crea o temă copilărească, care separă schimbările noastre de părinte. În acest tutorial, vă voi arăta cum să creați o temă simplă pentru copii.
Din Codul WordPress:
În esență, ceea ce înseamnă acest lucru este că ne putem baza pe tema părinte fără a modifica dosarele. Putem schimba CSS, adăugăm un tip de post personalizat sau construim propriul set de funcții. Acesta este și modul recomandat de a crea o temă bazată pe o altă temă.
În afară de temele copilului, există și alte două moduri în care putem crea o temă bazată pe alta. Prima modalitate este de a modifica tema respectivă. Cu toate acestea, dacă facem acest lucru și tema este actualizată, vom pierde toate schimbările noastre. A doua modalitate este să copiați tema într-un alt dosar și să treceți de la temă. Nu am pierdut tema (cu condiția să o redenumim în mod corespunzător), dar am avea duplicate ale tuturor fișierelor, chiar și cele pe care nu le-am modificat.
"O temă pentru copii WordPress este o temă care moștenește funcționalitatea unei alte teme, numită tema părinte, și vă permite să modificați sau să adăugați la funcționalitatea acelei tematici părinte".
În acest tutorial, vom modifica ultima temă implicită (din 3.2), Twenty Eleven
Primul lucru pe care vom dori să-l facem după actualizarea WordPress la 3.2 sau descărcarea și instalarea Twenty Eleven este crearea unui director propriu pentru tema copilului nostru. În / Wp-content / teme / creați directorul twentyeleven-copil. Acum putem începe să adăugăm fișiere la tema copilului nostru.
Există un singur fișier necesar atunci când creați o temă copil: style.css. Aici este faptul că ne vom declara tema, precum și spunem WordPress că este copilul unei alte teme. Creați stil.css în folderul twentyeleven-child și adăugați următoarele rânduri:
/ * Tema Nume: Twenty Eleven Child Tema URI: http: //example.com/ Descriere: Tema copilului pentru tema Twenty Eleven Autor: Numele dvs. Autor URI: http: //your-site.com/ Format: twentyeleven Versiune: 0.1.0 * /
Cele mai multe dintre informațiile de mai sus sunt cele pe care le-ați bine în orice altă temă: este numele, link-ul, credit autor și versiune. Cu toate acestea, există și o linie pentru Șablon. Aici spuneți WordPress ce ar trebui să folosească pentru tema părintelui. Trebuie să fie numele directorului din tema părinte, și este sensibil la minuscule.
Un lucru de remarcat înainte de a începe să adăugăm propriul CSS personalizat: Fișierul stil.css al temei copilului nostru va suprascrie complet parintele. Prin urmare, după informația despre declarația temei, prima noastră linie ar trebui să importe CSS-ul părintelui:
Accentsconagua
@import url ("? /twentyeleven/style.css"); Suntem gata să modificăm CSS-ul părintelui. În timp ce vom face câteva schimbări simple aici, dacă doriți să efectuați o editare mai avansată, vă recomand să utilizați Firefox cu Firebug sau cu Instrumentele de dezvoltare Google Chrome pentru a vă ajuta. Ele sunt foarte utile! Pentru moment, adăugați următoarele linii în fișierul dvs. stil.css, sub @import linia:
a culoare: # 254655; corp background: # 727D82; header # branding fundal: # 29305C; culoare: # B3BDC1; antet # branding h1, antet # branding h2, header # branding a culoare: # B3BDC1; #respunde background: # E7DFD6;
Aceste linii vor schimba fundalul și culoarea fontului casetelor corpului, antetului și comentariilor. Tu, desigur, poți să te joci la fel de mult ca și tine :-)
Dacă aș fi să clasifică fișiere tematice WordPress în ordinea importanței, aș pune stil.css și index.php într-o cravată pentru prima după cum aveți nevoie să le executați. În al doilea rând aș pune functions.php. Fișierul functions.php este modul în care adăugați funcționalitatea personalizată temei dvs.: tipuri personalizate, suport pentru meniuri și miniaturi, bare laterale suplimentare și modificări pentru bucla, printre altele.
În timp ce funcțiile funcționale.php nu sunt necesare pentru o temă de copil (rețineți că stil.css este singurul fișier necesar), este cel mai bun mod pentru a adăuga propriile funcționalități. Și spre deosebire de stil.css, care suprascrie style.css-ul părintelui, funcțiile lui child.php sunt încărcate inainte de parintii. Vom crea o zonă widget pentru antet și vom suprascrie una dintre funcțiile încorporate în Twenty Eleven.
Mai întâi, vom adăuga zona widgetului. Creați-vă functions.php și adăugați următorul cod:
__ ('Header Widget', 'twentyeleven-child'), 'id' => 'header-widget', 'before_widget'',' după_widget '=> ""," anterior_title "=> '',' după_title '=>'
',)); ?> Aceasta va înregistra zona de widget pe care o vom adăuga în antet în pasul următor.
Acum vom trece peste una din funcțiile Twenty Eleven încorporate. Cele douăzeci și opt de factori de decizie au făcut foarte ușor dezvoltatorilor de temele copilului să își depășească funcțiile, deoarece verifică mai întâi dacă o funcție cu același nume există. Uitați-vă la exemplul din twentyeleven / functions.php că vom modifica:
dacă (! function_exists ('twentyeleven_posted_on')): / ** * Imprima HTML cu informații meta pentru data / ora curentă și autor. * Creați propriul dvs. twentyeleven_posted_on pentru a suprascrie într-o temă copil * * @ din douăzeci și unsprezece 1.0 * / funcție twentyeleven_posted_on () printf (__ ('postat pe de % 7 $ s',' twentyeleven '), esc_url (get_the_time ()), esc_attr (get_the_time ()), esc_attr (get_the_date (' c ')), esc_html (get_the_date , sprintf (esc_attr __ ('Vezi toate mesajele de% s', 'twentyeleven'), get_the_author ()), esc_html (get_the_author ())); endif; Observați cum se verifică prima linie pentru a vedea dacă există o funcție de nume twentyeleven_posted_on () primul. Prin plasarea unei funcții cu acest nume în funcțiile funcției tematice ale temei copilului, vom suprascrie funcția temei părinte.
Notă pentru dezvoltatorii de teme:Dacă doriți să faceți tema mai ușoară pentru dezvoltatorii temelor copil ("plug-in"), ar trebui să urmați conducerea Twenty Eleven și să vă asigurați că o funcție cu același nume nu există pentru fiecare dintre funcțiile dvs. personalizate!
Funcția imprimă o linie după titlul postului cu data și informațiile ascunse ale autorului. Vom schimba puțin această linie utilizând același apel pentru funcții. Adăugați următorul cod la adresa dvs. functions.php fişier:
funcția twentyeleven_posted_on () $ link = esc_url (get_permalink ()); $ title = esc_attr (obțineți_titlul ()); $ timp = esc_attr (get_the_time ()); $ dateGMT = esc_attr (obțineți_date ('c')); $ date = esc_html (get_the_date ()); $ authorURL = esc_url (obțineți_author_posts_url (get_the_author_meta ('ID'))); $ autor = esc_html (obțineți_author ()); echo ('postat pe de '$ Autor.'„); Primul lucru pe care l-am făcut a fost să punem toate valorile pe care le folosim în variabile. Aceasta este o preferință personală a mea, deoarece consider că codul este mai ușor de citit. După cum puteți vedea, nu am schimbat prea mult aici. În primul rând, am tipărit atât timpul, cât și data. În al doilea rând, am dezbrăcat linia de byline, astfel încât oamenii ar putea vedea link-ul către alte posturi ale autorului.
Din nou, în timp ce nu am făcut niciun fel de revoluționare, am reușit să demonstrăm cum să suprascriem o funcție tematică personalizată [corect codată]. Acum, să trecem la fișierele șablon reale!
Ultimul lucru pe care vreau să-l acordez este fișierele șablon pentru tema copilului. Poate că vrem să modificăm antetul pentru site sau o singură buclă post sau chiar să adăugăm o pagină de arhivă. Acest lucru și mai mult este posibil folosind teme pentru copii. Ne-am numi doar fișierul cu același nume ca orice fișier pe care dorim să-l înlocuim în părinte. Aceste fișiere, precum stil.css, vor înlocui fișierul părintelui. Vom modifica antetul și vom crea un nou șablon de pagină.
Mai întâi vom face headerul. Crea header.php, copiați codul de la twentyeleven / header.php și lipiți-o în fișierul header.php. Odată ce facem asta, vom înlocui liniile 104 și 109 () cu următoarea funcție de apel:
Acum vom adăuga următorul cod în fișierul functions.php:
funcția techild_header_widget () if (! dynamic_sidebar ('header-widget')): get_search_form (); endif; Acest cod va face acest lucru dacă există widgeturi în zona Header Widget, le afișăm, altfel vom afișa bara de căutare. În cele din urmă, vom avea nevoie de un pic de CSS pentru a face ca antetul nostru să fie ușor de utilizat. Adăugați aceasta în fișierul dvs. stil.css:
antetul # branding .widget position: absolute; top: 2em; dreapta: 7,6%;
Acest lucru va schița widgetul în același mod ca și caseta de căutare, dar aveți grijă. Această metodă nu este exact antiglont. Este doar pentru a demonstra modificarea fișierelor șablon în temele copilului. Iată rezultatul nostru:
În continuare, vom crea un nou șablon de pagină. Creați fișierul twentyeleven-copil / pagina-welcome.php și copiați codul din paginile Twenty Eleven's page.php (twentyeleven / page.php). Primul lucru pe care trebuie să-l facem este să modificăm comentariile din partea de sus pentru a permite WordPress să știe că acesta este un șablon de pagină. Înlocuiți comentariile din partea de sus cu aceasta:
/ ** * Nume model: Bun venit * /
Când vom crea o pagină nouă, vom putea utiliza șablonul "Bun venit". Ceea ce vom face acum este să adăugați un mesaj personalizat în partea de sus a paginii. Sunteți fișier întreg ar trebui să arate astfel:
Bine ati venit pe site-ul meu! Rulează o modificare a temei Twenty Eleven din WordPress. Simțiți-vă liber să vă împrăștiați puțin!
Rețineți că între diviziile #primary și #content am adăugat un div cu clasa binevenită. Să mergem la fișierul stil.css și să adăugăm câteva CSS-uri pentru el:
.bun venit marja: 15px 60px; fundal: # fbffd8; frontieră: 1px solid # f6ff96; padding: 15px; text-align: centru;
Rezultatul nostru final ar trebui să arate astfel:
Ar trebui să menționez că cel mai bun mod de a face acest lucru ar fi să adăugați un câmp particular la șablonul respectiv, dar, așa cum am spus mai devreme, am vrut să păstrez lucrurile simple, astfel încât să ne concentrăm pe crearea temei copil.
În timp ce postul ar avea un pic de mult timp pentru mine să re-lista codul în fiecare dintre fișiere, am inclus tema copil pentru tine de a descărca. Evident, tocmai am zgâriat suprafața creării temelor copilului; scopul meu a fost să vă dau o idee bună despre cum să creați unul pe baza modului în care WordPress se ocupă de fiecare tip de fișier. Un lucru de reținut este că atunci când se face referire la imagini sau alte fișiere de pe tema copilului dvs., trebuie să le utilizați get_stylesheet_directory_uri () spre deosebire de get_template_directory_uri () deoarece acesta din urmă va fi legat de tema părintelui.
Amintiți-vă, puteți crea o temă copil din orice temă WordPress. Cu toate acestea, există și o grămadă de cadre tematice de acolo, din care putem crea teme destul de profunde pentru copii. Unele dintre cele mai populare includ Carrington, Tematică și Teză. Fiecare are o curbă de învățare, dar toți sunt foarte puternici!
