Teme pentru copii de bază și crearea temelor pentru copii în WordPress

O temă WordPress este o colecție de fișiere șablon care vă permite să modificați interfața cu utilizatorul, să designați, să vizualizați și să simțiți site-ul. O temă WordPress poate avea doar câteva modificări minore ale proiectării minime implementate sau ar putea avea chiar unele logici avansate care să arate cel mai recent post diferit decât ceilalți sau să afișeze postările de la o anumită categorie într-o altă secțiune de pe pagina de pornire etc. Temele WordPress pot variază de la un set simplu de fișiere la un cadru complet complex, astfel încât alte teme pot fi construite pe partea de sus a acesteia. În acest articol vom vedea cum se pot crea temele copilului pentru alte teme care să aibă efect asupra codului furnizat de tema părinte.

Pasul 1 Înțelegerea fundamentelor temei copilului

Pentru a crea o temă pentru copii, mai întâi trebuie să creați un dosar în wp-content / teme dosar pentru tema copilului nostru. Atunci vom crea o style.css fișier în folderul tematic pentru copii, după cum se arată mai jos:

 / * Tema Nume: Ursul meu de douăzeci și unu de teme URI: Descriere: Tema mea de copil Autor: Abbas Suterwala URI autor: Format: twentyeleven Versiune: 1 * /

După ce am făcut acest lucru, ar trebui să putem vedea tema noastră în wp-admin așa cum se vede mai jos.

Acum ne putem activa tema copilului. Odată ce vom activa tema copilului nostru și vom vedea blogul nostru vom vedea că toate sunt distorsionate deoarece nu am furnizat niciun CSS în foaia de stil. Aici vom folosi și reutiliza stilul din tema părintelui și îl vom include doar în tema copilului nostru. Apoi schimbați doar părțile pe care vrem să le modificăm. În acest caz vrem să facem fundalul gri. Ar trebui să adăugăm următoarele linii la style.css:

 // Această linie @import încarcă foaia de stil de la tema parentală @import url ("... /twentyeleven/style.css"); // Acum putem înlocui stilurile din tema părinte ... corp background: #eeeeee;

Acum, dacă vedem blogul nostru, îl vom vedea așa cum se vede mai jos

Tema copilului trebuie să conțină a style.css fişier. Apoi, tema copilului ar putea suprascrie opțional alte fișiere de șabloane cum ar fi author.php, category.php etc. Cadrul WordPress caută mai întâi un fișier șablon în directorul tematic copil și apoi dacă nu este găsit, îl va prelua din directorul părinte. Tema copilului poate adăuga și propria sa functions.php pentru a adăuga propriile funcții și funcționalități în plus față de cele oferite de tema părinte.

Pasul 2 Înțelegerea avantajelor și dezavantajelor utilizării temelor pentru copii

Folosirea unei teme tematice are multe avantaje, dintre care unele sunt:

Dacă vom crea o temă de copil nu va trebui să creați o temă nouă de la zero, care să aibă un timp de dezvoltare mai rapid.
Există o mulțime de cadre gratuite și comerciale disponibile care ne oferă o gamă largă de funcționalități care nu vor necesita prea mult personalizare în temele copilului nostru.
Dacă folosim teme pentru copii, spre deosebire de modificarea directă a temei părinte pentru a se potrivi nevoilor noastre, vom putea ușor să trecem la o versiune mai nouă a temei părinte, fără a pierde niciun fel de personalizare.
De multe ori temele părinte nu oferă doar designul, dar includ și widget-uri și plugin-uri care pot fi utilizate direct dacă vom crea o temă copilătoare a acelei tematici părinte.
Dacă este o temă părinte populară pe care o utilizați, fie liberă, fie comercială, este mai probabil să aveți mai puține erori și să fiți mai stabilă, deoarece a fost folosită și testată pe mai multe site-uri.

Unele dintre dezavantajele temelor copilului sunt:

Atunci când facem temele copilului WordPress trebuie să analizeze două locuri pentru a găsi fișiere șablon, acest lucru are un cost de performanță și, prin urmare, utilizarea unor teme pentru copii ar putea avea unele impact asupra performanței pe site-ul dvs. Deși în realitate acestea sunt foarte minime.
O mulțime de cadre tematice sunt foarte extinse și oferă o mulțime de caracteristici care ar putea să nu fie utile pentru dvs. Acest lucru face cadrele complexe și ar crește timpul necesar învățării și stăpânirii cadrului.

Pasul 3 Cunoașterea unor teme tematice WordPress celebre

Există o mulțime de cadre gratuite și comerciale tematice pentru WordPress decât pot fi folosite ca temă părinte. Unele dintre ele sunt generice și oferă o mare varietate de funcționalități. Există, de asemenea, cadre tematice disponibile pentru anumite tipuri de nevoi cum ar fi crearea unui site imobiliar sau crearea unui site de catalog de produse etc.

Unele dintre cadrele tematice populare gratuite sunt:

Twenty Eleven - Deși aceasta este o temă completă, este un punct de plecare foarte bun pentru a crea o temă pentru copii, având toate funcționalitățile necesare pentru a crea un bun site web. Stilul acestei teme poate fi personalizat cu ușurință. Aceasta este o temă gratuită și vine cu instalarea implicită WordPress. Deci, este un cadru minunat să te uiți dacă vrei să creezi un site web simplu și cool.
Tematică - Acesta este un cadru tematic foarte popular pentru WordPress. Aceasta este o temă gratuită. Acest lucru are, de asemenea, mai multe teme pentru copii făcute pe partea de sus a acestuia, care sunt, de asemenea, disponibile în mod liber. Acest cadru tematic are o mulțime de cârlige pe care tema copilului le poate folosi pentru a personaliza. De asemenea, are mai multe stiluri cum ar fi 2 coloane și 3 coloane care pot fi utilizate. De asemenea, este disponibilă o bună documentație care ar facilita demararea acestui cadru.
WhiteBoard - Acesta este, de asemenea, un cadru foarte bun și util. Acest lucru vine cu o funcționalitate minimă și o structură bună care poate fi personalizată pentru nevoile dvs. Este un cadru foarte util.

Pentru o listă mai completă a cadrelor WordPress, puteți vizita un articol interesant

Pasul 4 Crearea temei copilului la douăzeci și una ca exemplu

Acum vom schimba designul temei părintelui TwentyEleven în tema noastră de copil. În prezent, presupunând că dorim ca o coloană cu 2 coloane să se întindă cu bara laterală la dreapta. În acest caz, aspectul de care avem nevoie este același cu cel al temei părinte. Așa că vom obține asta direct de la tema părintelui și nu vom face nici o schimbare în tema copilului.

Pentru tema copilului meu nu vreau o imagine antet. În TwentyEleven pot schimba sau elimina imaginea antetului din opțiunile temei, după cum se arată mai jos.

Următoarele sunt modificările din style.css din tema copilului:

 / * Tema Denumirea: URI-ul meu de douăzeci și unu de copii URI: Descriere: Tema mea de copil Autor: Abbas Suterwala URI autor: Format: twentyeleven Versiune: 1 * / @import url ("... /twentyeleven/style.css"); corp, intrare line-height: 1.75em; fundal: # A9D0D6; font-size: 11.5pt; culoare: # 5A6466; font-familie: Kreon, serif;  a culoare: # 2A3436;  # site-title un font-family: "Open Sans", sans-serif; font-size: 3m;  #acces background: #FFFFFF;  #acces a text-transform: majuscule; text-decoration: nici unul; culoare: # 1C1C1C; font-size: 1.2m;  #acces .current-meniu-element> a, #acces. curent-meniu-strămoș> a, #acces .current_page_item> a, #access .current_page_ancestor> a background: # F2EBDE; frontieră: solid 1px # BFB5A4; box-shadow: inserție 0px 0px 0px 1px #fff; text-shadow: 1px 1px 0px rgba (255,255,255,0.9);  # secundară background: # EEF5F6; padding: 20px; frontieră: solid 1px # D6E0E2; margine: 0 10px 0 0; text-shadow: 1px 1px 0px rgba (255,255,255,1); box-shadow: inserție 0px 0px 0px 1px #fff;  .getați o text-decoration: underline; culoare: # 2A3436;  .widget a: hover, .widget a: focalizare, .widget a: activ text-decoration: none;  # site-generator umplutură: 40px 40px 0 40px; culoare: # 302F2C; fundal: # F2EBDE; font-familie: Kreon, serif; vârf frontal: solid 1px # BFB5A4; box-shadow: inserție 0px 0px 0px 1px #fff; text-shadow: 1px 1px 0px rgba (255,255,255,0.9);  .entry-title, .entry-title un font-family: "Open Sans", sans-serif; culoare: # 2A3436; marginea inferioară: 1em; font-size: 1.5; text-transform: majuscule; font-weight: normal; . bara laterală # secundară marginea-stânga: 3%;

În codul de mai sus am schimbat fundalul utilizând eticheta corporală, designul elementelor de meniu utilizând accesul și bara laterală utilizând eticheta secundară. În mod similar, puteți schimba design-ul oricărei părți a părintelui pentru a se potrivi nevoilor dvs. Tema va arăta acum așa cum se vede mai jos:

Pentru mai multe detalii despre crearea unei teme pentru copii folosind TwentyEleven, puteți consulta articolul Crearea unei tematici simple pentru copii, utilizând Twenty Eleven.

Pasul 5 Crearea unei teme tematice pentru tematică ca exemplu

Acum vom crea tema copilului tematic. Odată ce am descărcat tema tematică și l-am adăugat în lista noastră wp-content / teme vom adăuga un nou dosar pentru tema copilului nostru numit mythematicchildtheme. În dosarul tematic există un dosar thematicsamplechildtheme în care există fișiere de eșantion pentru a crea o temă pentru copii din Tematică. Putem folosi aceste fișiere ca punct de plecare și le lipim în dosarul tematic pentru copii.

Tematica are o structură diferită deja definită pe care o putem folosi în tema copilului nostru. Pentru tema copilului nostru vom folosi un aspect de 3 coloumn. Vom face unele modificări la proiectarea site-ului, care sunt după cum urmează:

 / * Tema Nume: Teme tematica Tema tematica URI: Descriere: Aceasta este tema copilului tematic creat de mine Autor: Abbas Suterwala URI autor: Template: tematica Versiune: 1.0 * / / * Reseteaza defaultul browserului * / @import url "... / tematic / librărie / stil / reset.css"); / * Aplică stiluri tipografice de bază * / @import url ('... /thematic/library/styles/typography.css'); / * Aplică un layout de bază * / @import url ('... /thematic/library/layouts/3c-fixed.css'); / * Aplicarea stilurilor de imagine de bază * / @import url ('... /thematic/library/styles/images.css'); / * Aplică stilurile și culorile temelor implicite * / / * Este mai bine să copiați în mod implicit peste default.css acest fișier (sau o legătură într-o copie în tema copilului dvs.) dacă intenționați să faceți ceva urgent * / @import url "... / tematic / librărie / stil / defalc."); / * Pregătiți tema pentru pluginurile * / @import url ('... /thematic/library/styles/plugins.css'); corp culoare: # 787878;  #header background: # 339900;  #footer background: # 339900;  #siteinfo a: activ, #siteinfo a: hover culoare: # 000000;  #siteinfo a culoare: # 000000;  #siteinfo culoare: # 000000;  # blog-title a culoare: # 000000;  # blog-descriere culoare: # 000000;  .este o culoare: # 006600;  a, a: activă, a: hover culoare: # 006600;  .asupra h3 culoare: # 006600;  .entry-title culoare: # 006600;  .entry-title a culoare: # 006600;  .entry-title a: activ, .entry-title a: hover culoare: # 006600;

Tema va arata dupa cum urmeaza:

Tematica are, de asemenea, o mulțime de cârlige în cadrul tematic în care tema copilului se poate încorpora. Să luăm thematic_belowheader cârlig ca un exemplu și să arate versurile Hello Dolly care vine cu pluginul celebru Hello Dolly scris de Matt Mullenweg, care este implicit în instalarea WordPress. În primul rând, să activăm pluginul Hello Dolly de la admin.

Apoi în functions.php în tema copiilor adăugați următorul cod:

Acum vom afișa, la întâmplare, o singură linie din versurile Hello Dolly din pagina de pornire, după cum se vede mai jos:

Tematica oferă o mulțime de cârlige care într-adevăr ușurează tema copilului de a adăuga caracteristici utilizând aceste cârlige. Puteți obține o listă cu toate cârligele furnizate de Tematică în pagina Tematică cârlige a Ghidului tematic.

Concluzie

WordPress este o platformă excelentă pentru a construi bloguri și site-uri. Acesta oferă, de asemenea, infrastructura pentru a crea cadre de plugin sau cadre tematice deasupra acestuia. Cadrele tematice construite pe partea de sus a WordPress vă pot ajuta să dezvoltați o temă stabilă, de bună calitate în timp scurt și vă va lăsa unitatea site-ului să rămână intactă. Acest lucru ajută la o dezvoltare mai rapidă și la costuri mai mici. Deci, distreaza-te sa creezi tema copilului WordPress.

Cod