# A bolt testreszabása biztonságosan

> Hogyan módosíthatod a bolt megjelenését úgy, hogy a téma és a bővítmények frissítése ne törölje a változtatásokat.

A bolt tartalmát és megjelenését a saját igényeid szerint alakíthatod, de a módosításaid csak akkor élnek túl egy téma- vagy bővítményfrissítést, ha jól választod meg a módszert. A téma fájljainak közvetlen szerkesztése azért rossz ötlet, mert frissítéskor a fájlok felülíródnak, és minden módosításod elvész.

Két ajánlott módszer van, a változtatás méretétől függően:

- **Bővítmény vagy beépített eszköz:** kisebb CSS- vagy PHP-módosításokhoz.
- **Gyermektéma:** nagyobb sablon- vagy szerkezeti átalakításokhoz.

## Kisebb módosítások

### Egyedi CSS

A WordPress beépített módja a CSS hozzáadására a frissítéseket is átvészeli. A téma típusától függ, hol találod:

- **Klasszikus téma:** **Megjelenés → Testreszabás → További CSS**. Írd be a CSS-szabályokat a szerkesztőbe, és kattints a **Közzététel** gombra.
- **Blokkos téma:** **Megjelenés → Szerkesztő**, nyisd meg a **Stílusok** panelt, és válaszd a **További CSS** lehetőséget.

Mindkét mód a CSS-t a témafájloktól függetlenül tárolja, ezért a téma frissítése nem törli.

### Példa: a menülinkek színe

Ehhez a böngésző fejlesztői eszközeit és egyszerű CSS-szabályt használsz.

1. Kattints jobb gombbal a menülinkre a böngészőben, és válaszd az **Inspect** (Vizsgálat) lehetőséget. Megnyílnak a fejlesztői eszközök, és látod az elemre vonatkozó stílusokat.
2. A **Styles** panelen keresd meg a menülinkek szabályait. A Storefront témánál például ilyen: `.main-navigation ul li a { color: #ffffff; }` és `.main-navigation ul li a:hover { color: #e6e6e6; }`.
3. Nyisd meg a **Megjelenés → Testreszabás → További CSS** oldalt, illeszd be a szabályokat, és írd át a színeket. Például piros link, fehér színű rámutatással: `.main-navigation ul li a { color: red; }` és `.main-navigation ul li a:hover { color: white; }`.
4. Kattints a **Közzététel** gombra, és frissítsd az oldalt. A menülinkek színe piros, rámutatáskor fehér.

Új stílusokat is felvehetsz a téma meglévői mellé. Ha a téma frissül, a saját stílusaid megmaradnak. A téma frissítése előtt készíts biztonsági mentést.

### PHP-részletek: Code Snippets

A **Code Snippets** bővítmény lehetővé teszi, hogy a PHP-részleteket a `functions.php` fájl szerkesztése helyett a bővítményben kezeld. Minden részlethez rövid leírást írhatsz, és szükség szerint be- vagy kikapcsolhatod őket. Így a PHP-módosításaid biztonságban vannak a témafrissítésektől. Ehhez PHP-kódot kell írnod és kezelned, ezt bízd fejlesztőre, ha nem vagy otthon benne.

## Nagyobb módosítások: gyermektéma

Ha sablonfájlokat kell módosítanod, jelentős PHP-funkciót adnál hozzá, vagy a téma szerkezetét alakítanád át, használj gyermektémát. A gyermektéma örökli a szülőtéma stílusait és működését, de felülírhatsz benne egyes fájlokat, és saját kódot is hozzáadhatsz, amely túléli a szülőtéma frissítését.

- Egyes témák kész gyermektémát kínálnak, amelyet telepítve és bekapcsolva kód nélkül is megváltoztathatod a szülőtéma kinézetét.
- A megvásárolt gyermektémát egy másik tervező munkájának megjelenéséhez találták ki. Ne tegyél bele saját kódot: a gyermektéma frissítésekor a kódod felülíródik, ugyanúgy, ahogy a szülőtéma közvetlen módosításai elvesznének.
- Saját gyermektémát is készíthetsz. Ez a szülőtéma tetején lévő réteg, amelynek egyetlen feladata, hogy a te kódod élvezzen elsőbbséget, és a szülőtéma frissítése ne dobja el.

A gyermektéma elkészítéséhez egy fejlesztő segítségét érdemes kérni, vagy a WordPress gyermektémákat bemutató útmutatóit követni.