Cautare in site

Articol

Crearea unei Child Theme pentru WordPress

Crearea unei Child Theme pentru WordPress

WordPress este sistemul de Content Management cel mai utilizat in prezent pentru crearea de site-uri web dinamice. Acesta se bazeaza pe teme preconfectionate iar personalizarea acestora este fundamentala pentru a putea transmite vizitatorilor imaginea dorita. Personalizarea la nivel de aspect grafic, cu ajutorul CSS, a unei teme preconfectionate se poate realiza in mai multe moduri, in ceea ce urmeaza vom vedea cum se poate crea un child theme si de ce este aceasta alternativa cea mai buna pentru personalizarea unei teme in WordPress.

Cum functioneaza temele in WordPress?

Fiecare tema are dosarul sau in interiorul directorului wp-content > themes. In interiorul dosarului ce cuprinde fisierele unei teme gasim si pagina index care reuneste in mod schematic, ca intr-un puzzle, toate paginile ce compun tema (header, body (pagini ce gazduiesc articole, categorii, pagini statice, arhive, rezultatele cautarii, etc), sidebar, footer).

Temele sunt destul de complexe pentru ca sunt compuse dintr-un numar mare de pagini si asset-uri. Spre exemplu tema gratuita predefinita pusa la dispozitie de catre WordPress in acest moment, Twenty Fifteen, este compusa din 16 fisiere php si 25 de fisiere asset.

Personalizarea CSS a temelor WordPress

Majoritatea temelor WordPress prezinta un singur fisier pentru definirea regulior de stil ce se numeste style.css si poate fi modificat.

Este de preferat totusi ca personalizarile CSS sa nu se realizeze direct in acest fisier deoarece la o viitoare actualizare a temei fisierul style.css este inlocuit cu varianta cuprinsa in tema actualizata, acest lucru ducand la pierderea personalizarilor realizate asupra aspectului grafic al temei.

Rezolvarea acestei probleme este crearea unei teme child. Aceasta se integreaza cu tema parent iar fisierele gazduite in tema child vor inlocui corespondentul lor din tema parent. In folder-ul temei child vom insera deci numai acele fisiere pe care vrem sa le personalizam iar restul vor fi preluate din folder-ul temei parent. Daca modificam de exemplu fisierul header.php din tema parent si il salvam in tema child acesta va inlocui originalul din tema parent.

Odata realizata o tema child nu va trebui sa ne facem griji de pierderea personalizarilor in momentul in care actualizam tema parent pentru ca acestea vor fi mentinute, actualizarea temei parent neafectand tema child.

Crearea unei teme child in WordPress

Pentru crearea unei teme secundare in WordPress bazata pe o tema existenta vom crea mai intai un nou dosar in locatia temelor wp-content > themes. Acest dosar il vom numi la libera alegere.

creare-tema-child-creare-folder

In interiorul acestuia vom crea o foaie de stil css pe care o vom numi ca in tema parent de exemplu “style.css”. Pentru a crea legatua intre cele doua teme in foaia de stil a temei child vom insera un comentariu pe mai multe randuri in care vom indica numele temei, autorul, versiunea temei child si cel mai important referinta la tema parent care se realizeaza cu ajutorul cuvantului cheie Template. NB: Dupa acest cuvant cheie urmeaza numele dosarului temei parent, si nu numele temei propriu-zise.

css-coment-theme-child

Prima declaratie pe care o vom avea in noua foaie de stil din tema child va fi importarea foii de stil din tema parent in acest mod (unde “jupiter” este denumirea dosarului temei parent):

@import url('../jupiter/style.css');

Acum putem incepe scrierea de reguli CSS noi sau le putem personaliza pe cele existente in tema parent.

Activarea unei teme child in WordPress

Odata ce am creat dosarul pentru tema child si fisierul css putem activa noua tema. Acest lucru il vom face din interfata WordPress de la Appearance > Themes.

In acest moment vedem ca nu avem o imagine reprezentativa pentru noua tema child.

tema-wp-fara-imagine

Vom crea o imagine in format .png cu dimensiunile de 880 px lungime si 660 px inaltime pe care o vom numi screenshot.png si o vom salva in dosarul temei child.

Acum tema child are o imagine reprezentativa iar mergand pe optiunea de vizualizare a detaliilor asupra temei vedem ceea ce am adaugat cu ajutorul comentariilor in foia de stil css: versiunea 1.0, autorul etc:

theme-child theme-child-dettails

Personalizarea CSS a temei child

Adaugarea de reguli CSS personalizate se poate realiza in doua directii.

In primul rand putem crea noi reguli de stil aplicate asupra selectorilor personalizati dar mai ales putem personaliza regulile de stil prezente in foia de stil a temei parent. In acest caz va trebui sa respectam numele date in foia de stil a temei parent.

In exemplul de mai jos daca vrem sa personalizam culoarea textului pentru meniul de navigare va trebui sa rescriem regula CSS in acelasi mod iar mai apoi sa personalizam proprietatile existente sau sa adaugam altele noi. In acest caz va trebui sa rescriem in pagina CSS a temei child regula pentru id #g1-header urmata de tag-ul a pentru link si vom rescrie proprietatea color dandu-i noua culoare:

personalizare-css-meniu-tema-child

Concluzii

Realizarea unei teme child in WordPress este cea mai buna solutie pentru personalizarea unei teme existente iar aceasta se poate crea in doar cateva minute urmand pasii descrisi mai sus.



Curs WordPress Complet Online – 70 de lectii marca Multimedia Creations Academy


dreamweaver Vrei sa inveti bazele HTML si CSS? Aici gasesti detalii despre Cursul de Web Design marca Multimedia Creations Academy.



Nu sunt comentarii

Adauga Comentariu

Adresa ta de e-mail nu va fi publicata.