Cum se creează o temă copil în WordPress. Teme pentru copii în WordPress

În unele cazuri, atunci când lucrează pe un site web, clientul cere să nu facă modificări temei originale. Acest lucru este necesar dacă intenționați să îl actualizați în viitor, iar modificările aduse fișierelor vor dispărea.

Pentru astfel de cazuri, WordPress oferă un mecanism pentru crearea unei teme copil. Această temă folosește șablonul părinte ca bază și îi puteți adăuga propriile fișiere și funcții.

Mecanismul de lucru cu teme pentru copii este destul de simplu. În primul rând, trebuie să creați un folder nou în folderul wp-content/themes pentru acesta. Vom presupune că folderul cu șablonul principal se numește părinte și vom crea unul nou, pe care îl vom numi copil.

Trebuie să plasați cel puțin un fișier style.css în folderul copil. Acesta trebuie să conțină următoarele instrucțiuni:

/* Numele temei: Copil Șablon: părinte */

Numele temei: Copil Șablon: părinte

Prima instrucțiune (Numele temei: Copil) este pur și simplu numele temei copilului, de fapt nu este obligatorie, dar a doua instrucțiune (Șablon: părinte) este obligatorie și indică faptul că acest șablon este un copil al părintelui.

Dacă plasați un fișier în dosar cu o temă copil, acesta îl înlocuiește pe același din șablonul părinte. Această regulă se aplică tuturor fișierelor, cu excepția funcțiilor.php.

@import url("../parent/style.css");

@ import URL ("../parent/style.css" );

Pentru a funcționa corect, nu ar trebui să existe reguli CSS înainte de directiva @import.

Nu este nevoie să faceți setări suplimentare. Uneori este posibil ca includerea automată a stilurilor CSS dintr-un folder copil să nu funcționeze. Dezvoltatorul șablonului trebuie să folosească funcțiile:

• get_stylesheet_uri() — adresa fișierului de stiluri;
• get_stylesheet_directory_uri() — adresa folderului cu stiluri,

dar poate include style.css într-un alt mod, ceea ce duce la probleme. În acest caz, cel mai probabil nu va fi dificil să priviți codul și să găsiți problema.

Mai multe detalii despre fișierul functions.php. Dacă tema copil are un astfel de fișier, motorul îl va încărca mai întâi și apoi fișierul cu acest nume din folderul părinte. În acest fel, puteți extinde liber funcționalitatea șablonului.

Toate celelalte fișiere aflate în folderul copil, așa cum sa menționat deja, își înlocuiesc omologii din tema părinte. Adică, puteți lua single.php original, îl puteți modifica și îl puteți plasa într-un folder copil. Când rulați motorul WordPress, acesta va fi folosit.

Beneficiile utilizării unei teme copil sunt clare: păstrați intactă tema originală și o puteți actualiza liber. Nu există dezavantaje deosebite, cu excepția cazului în care dezvoltatorul a făcut greșeli în șablonul original care au făcut dificilă utilizarea.

Structura de foldere din tema copil trebuie să se potrivească cu structura părinte dacă modificați fișiere în subfoldere.

Platforma WordPress este un magnet pentru cei care doresc să ia problema în propriile mâini, care doresc să preia controlul deplin asupra site-ului lor și doresc să fie independenți în gestionarea acestuia. WordPress face acest lucru foarte ușor și vă poate personaliza complet site-ul. Dacă aveți puține cunoștințe de HTML, CSS și/sau PHP, atunci nu există nimic ce nu puteți schimba.

Adică, compară doar temele implicite, Twenty Fifteen și Twenty Fourteen. E greu de crezut că rulează pe aceeași platformă, nu-i așa? Prin urmare, este firesc să doriți să adaptați aspectul site-ului dvs. pentru a se potrivi preferințelor dvs. Mă îndoiesc că există utilizatori WordPress care nu se gândesc la asta în mod constant. Totuși, apare o problemă.

Configurarea WordPress: S-ar putea să o faci greșit

Când încearcă să facă modificări unui site web, un număr mare de persoane preferă să editeze tema în sine. Aceasta înseamnă că schimbă sau adaugă fișiere la . Acest lucru creează o serie de probleme.

Cel mai mare dezavantaj este că orice modificări aduse temei vor fi astfel pierdute odată ce tema este actualizată de către dezvoltator. Ca urmare, utilizatorii fie nu vor putea să-și mențină tema actualizată (ceea ce este dăunător pentru securitate), fie vor pierde orice personalizări pe care le-au făcut.

În orice caz, situația este departe de a fi ideală.

O idee mult mai bună este să folosești. Acest lucru vă permite să faceți orice număr de modificări site-ului dvs. web fără a atinge fișierele teme originale.

Sună bine? Grozav, pentru că în acest articol vom arunca o privire mai atentă la ce este. teme pentru copii în WordPress, cum să le creați și cum să le utilizați, cum să vă configurați corect site-ul.

Ce sunt temele pentru copii și cum să le folosești?

Când vorbim despre teme pentru copii, trebuie să vorbim mai întâi despre temele parentale. O temă devine părinte doar atunci când cineva creează o temă copil pentru ea. Până atunci, aceasta este doar o temă pe care o veți găsi în directorul WordPress. Fiecare temă include toate fișierele necesare pentru tema părinte.

Cu toate acestea, orice astfel de subiect Pot fi fiind părintele temei, unele sunt mai potrivite în acest scop decât altele. De exemplu, există cadre special create pentru personalizarea unei teme pentru copii.

Ce este o temă de copil? În backend-ul WordPress, o temă copil se comportă ca o temă obișnuită. Îl puteți găsi și activa în secțiunea „Aspect” → „Teme”, la fel ca orice altă temă.

Marea diferență este că o temă copil este complet dependentă de părintele său pentru a funcționa. Fără o temă părinte, tema copil nu va face nimic și nici măcar nu poate fi activată.

Acest lucru se datorează faptului că o temă copil nu este o temă în sine, ci modifică sau adaugă fișiere la o temă existentă. Folosește totul din tema părinte și schimbă doar părțile pe care doriți să le schimbați.

Vă permite să schimbați stiluri, caracteristici, aspect, șabloane și multe altele. De fapt, puteți personaliza tema părinte dincolo de recunoaștere. Cu toate acestea, fără prezența ei, niciunul dintre ei nu va funcționa.

Beneficiile temelor pentru copii

Există numeroase beneficii ale unei teme pentru copii:

• În schimb, puteți construi pe unul existent, accelerând astfel timpul de dezvoltare.
• Puteți profita de funcționalitatea structurilor complexe și a temelor părinte în timp ce personalizați designul pentru a se potrivi nevoilor dumneavoastră.
• Puteți actualiza tema părinte fără a pierde setările personalizate.
• Dacă nu sunteți mulțumit de setările dvs., pur și simplu dezactivați tema copilului și totul va fi așa cum era înainte.
• Aceasta este o modalitate excelentă de a începe să înveți cum funcționează temele.

O temă copil poate conține foldere cu imagini, fișiere șablon și multe altele. Puteți activa câte setări doriți.

De fapt, o temă copil are nevoie doar de trei lucruri: foldere, fișiere foi de stil și . Asta e tot. Și apoi, aceste două fișiere pot fi chiar în mare parte goale.

Când să folosiți o temă pentru copii

Deci, este întotdeauna necesar să creați o temă copil ori de câte ori doriți să faceți modificări site-ului dvs. WordPress? Nu.

Dacă intenționați să faceți doar modificări minore, cum ar fi modificări de culoare sau un font diferit, atunci este mai bine să instalați un plugin CSS personalizat. . Multe teme oferă acum și posibilitatea de a adăuga cod personalizat nativ.

Cu toate acestea, dacă intenționați să introduceți schimbări majore, cum ar fi o revizuire majoră a designului, câteva modificări de șablon sau orice altceva între ele, atunci o temă copil este cu siguranță soluția.

Configurare de bază a temei pentru copii

Bine, acum că știm ce este o temă de copil și ce pot face ei pentru noi, să vedem cum să creăm pas cu pas. Pentru exemplul nostru, vom folosi Twenty Fifteen, cea mai recentă temă implicită pentru WordPress. Nu vă faceți griji, este foarte ușor și îl veți obține în cel mai scurt timp.

Notă:

Următoarele acțiuni pot fi efectuate direct pe server folosind . Cu toate acestea, recomand să setați totul la nivel local și apoi să comprimați folderul cu tema copil și să îl instalați ca o temă obișnuită prin meniul Temă. Acest lucru va face totul mult mai ușor.

Crearea unui folder în wp-content/themes

După cum am menționat, o temă copil are nevoie de trei lucruri: propriul folder, foi de stil și un fișier functions.php. Vom începe cu folderul.

Ca orice altă temă, temele copil se găsesc în folderul wp-content/themes al instalării dvs. WordPress. Deci haideți să mergem acolo și să creăm un nou folder pentru tema copilului dvs.

Cea mai bună practică este să furnizați folderul cu tema, același nume ca și tema părinte și să adăugați -child . Deoarece folosim tema twentyfifteen, vom numi folderul twentyfifteen-child.

Puteți folosi orice nume doriți; asigurați-vă că nu includeți spații, deoarece acest lucru poate duce la erori.

Crearea foilor de stil

Acum că avem folderul nostru, vom avea nevoie de o foaie de stil. În cazul în care nu știți, o foaie de stil conține cod care definește designul unui site web. Temele pot avea mai multe foi de stil, dar vom rămâne cu una pentru moment.

Crearea unei foi de stil este ușoară: creați un fișier text nou și numiți-l style.css . Gata! Cu toate acestea, pentru ca acesta să funcționeze, va trebui să inserăm următorul cod, numit „antet de foaie de stil”, chiar la începutul fișierului (codul prin amabilitatea WordPress Codex):

/* Numele temei: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Descriere: Twenty Fifteen Child Theme Autor: John Doe Autor URI: http://example.com Șablon: twentyfifteen Versiunea: 1.0.0 Licență: GNU General Public License v2 sau o versiune ulterioară URI al licenței: http://www.gnu.org/licenses/gpl-2.0.html Etichete: light, dark, two-colons, right-sidebar, responsive-layout, Domeniu text gata pentru accesibilitate: douăzeci și cincisprezece copii */

Iată ce înseamnă fiecare linie:

• Numele temei
  Acesta este numele care va apărea pentru tema dvs. în backend-ul WordPress.
• URI temei
  Link-ul indică un site web sau o pagină demonstrativă pentru acest subiect. Acesta este de obicei un link de autor care trebuie să fie prezent pentru ca tema să fie acceptată în directorul WordPress.
• Descriere
  Această descriere a temei dvs. va apărea în meniul temei când faceți clic pe butonul „Detalii teme”.
• Autor
  Numele autorului ești tu în acest caz.
• URI autor
  Puteți pune adresa site-ului dvs. aici dacă doriți.
• Șablon
  Această parte este critică. Aici vine numele temei părinte, ceea ce înseamnă numele folderului său. Rețineți că este sensibil la majuscule și dacă nu introduceți informațiile corecte, veți primi o eroare, așa că verificați!
• Versiune
  Afișează versiunea temei pentru copil. De obicei, toată lumea începe de la 1.0.
• Licență
  Aceasta este licența pentru tema copilului dumneavoastră. Temele din directorul WordPress sunt de obicei lansate sub licență GPL; trebuie să respectați aceeași licență ca și tema părinte.
• URI de licență
  Aceasta este adresa la care este indicat linkul către licența pentru tema dvs. Din nou, rămâneți la ceea ce spune subiectul dvs. părinte.
• Etichete
  Etichetele îi ajută pe alții să vă găsească tema în directorul WordPress. Deci, dacă includeți unele, asigurați-vă că sunt la zi.
• Domeniul text
  Această parte este folosită pentru internaționalizare și pentru a face subiectele traducibile. Acest lucru ar trebui să se potrivească cu „melcul” temei tale.

Dacă vă simțiți puțin copleșit (deja?), s-ar putea să vă bucurați să aflați că nu toate informațiile sunt de fapt necesare. De fapt, tot ce aveți nevoie este un nume de temă și un șablon.

Restul este important doar dacă intenționați să vă publicați subiectul. Din acest motiv, antetul temei copilului meu arată ca cel de mai jos. Simțiți-vă liber să îl copiați și să faceți propriile modificări.

/* Numele temei: Descrierea temei Twenty Fifteen Child: O temă copil a temei implicite WordPress Twenty Fifteen Autor: AndreyEx Șablon: twentyfifteen Versiune: 1.0.0 */

Activarea unei teme pentru copii

După ce ați creat folderul și foile de stil, accesați Aspect → Teme și găsiți acolo tema copilului. Când faceți clic pe butonul „Detalii teme”, veți vedea conținutul antetului foii de stil. Asta sunt toate informațiile.

Bine, acum faceți clic pe butonul care spune „Activați”. Loc de muncă bun! Tema dvs. a fost activată. Cu toate acestea, dacă vă uitați la site-ul dvs. web, va arăta astfel:

Nu-ți face griji, totul este bine. Nu te-ai încurcat. Scoate-ți fața dintr-o pungă de hârtie. Motivul pentru care site-ul tău este gol este că nu are încă niciun stil.

Am vrut doar să vă arătăm că, în teorie, a avea o foaie de stil și un folder este suficient pentru a crea o temă pentru copii. Și dacă funcționează pentru tine, atunci ai făcut-o deja! Totuși, să trecem la îmbunătățire.

Crearea unui fișier functions.php

Fișierul functions.php vă permite să modificați și să adăugați funcționalități și caracteristici site-ului dvs. WordPress. Poate conține atât PHP, cât și funcții WordPress încorporate. În plus, vă puteți crea propriile funcții.

Pe scurt, functions.php conține cod care schimbă fundamental aspectul unui site web.

Crearea unui fișier este la fel de ușoară ca și crearea unei foi de stil, dacă nu chiar mai ușoară. Tot ce aveți nevoie este un fișier text numit functions.php și apoi lipiți următorul cod:

Să vedem ce se întâmplă când schimbăm ordinea codului:

După cum puteți vedea, după salvarea și încărcarea fișierului în folderul cu tema copilului, imaginea fiecărei postări de blog va apărea acum sub titlul postării.

Desigur, ar putea folosi ceva stil, dar ai înțeles ideea. Puteți folosi această metodă pentru a face toate modificările pe site-ul dvs. Nu uitați să acordați temei copil aceeași structură de foldere arborescentă ca și părintele ei. De exemplu, dacă fișierul pe care doriți să îl schimbați se află într-un folder numit șabloane de pagină din tema părinte, atunci puteți crea un folder cu același nume în directorul temei copilului și plasați fișierul acolo.

Lucrul cu fișiere șablon

Am învățat că putem suprascrie orice fișier din tema părinte plasând o copie în folderul temei copil și personalizându-l. Cu toate acestea, este și posibil să utilizați fișiere care există doar într-o temă copil. Fișierele șablon sunt un bun exemplu în acest sens.

Să presupunem că vrem să construim un șablon cu lățime completă a paginii pentru tema noastră copil. Voi fi primul care recunosc că tema douăzeci și cincisprezece nu se pretează pentru o prezentare pe tot ecranul, dar haideți să o facem oricum în scopuri demonstrative.

Pentru a crea o pagină cu lățime completă de douăzeci și cincisprezece, trebuie să facem patru lucruri: să creăm un șablon de pagină personalizat, un antet și un fișier de subsol personalizat și apoi să adăugăm niște CSS personalizate. Să începem cu șablonul de pagină.

Pentru șablonul de pagină personalizată, pur și simplu vom copia fișierul page.php din tema părinte, îl vom redenumi custom-full-width.php și îl vom plasa într-un folder numit șabloane de pagină în tema noastră copil.

Acum, să facem câteva modificări codului, astfel încât să arate astfel:

Singurul lucru pe care l-am făcut aici este introducerea unui antet care spune WordPress că acesta este un șablon de pagină, unde am schimbat get_header și get_footer, astfel încât acestea să includă două fișiere numite header-custom.php și footer-custom.php .

Să ne întoarcem la pagina pe care vrem să o vedem la lățime completă și să schimbăm șablonul de pagină cu șablonul nou creat.

Acum este timpul să ne creăm antetul și subsolul personalizate în fișierul temă. Mai întâi, mergeți la tema părinte și copiați header.php și footer.php în folderul temei copil și redenumiți-le în header-custom.php și, respectiv, footer-custom.php.

Până acum, pagina noastră arăta la fel ca înainte. Este timpul să ne punem la punct. Să începem cu antetul nostru personalizat.

Încă o dată, vom copia fișierul footer.php din tema părinte douăzeci și cincisprezece și îl vom lipi în tema copil. De data aceasta însă, îi vom lăsa numele așa cum este.

După aceasta, trebuie să adăugăm un apel noului nostru widget de subsol, astfel încât va arăta astfel: