# Egyéni kód

> Hová írhatsz saját CSS-t, JavaScriptet, HTML-t és PHP-t a Bricksben: globális, oldalszintű, elemszintű CSS, Kód elem, kódfuttatás és Emmet.

A Bricksben négy helyen adhatsz hozzá saját kódot (CSS, JavaScript, HTML és PHP). Mindig a legszűkebb helyet válaszd, amelyik elég a céljaidhoz.

| Hely | Mikor használd |
| --- | --- |
| Globális CSS és szkriptek | Az egész webhelyen betöltődő kódhoz. |
| Oldalszintű CSS és szkriptek | Egyetlen oldalra vagy sablonra érvényes kódhoz. |
| Elemszintű CSS | Egy elemhez vagy globális osztályhoz kötött stílushoz. |
| **Kód** elem | Ha PHP/HTML, CSS vagy JavaScript kell az oldal kimenetének egy adott pontján. |

A futtatható PHP és az SVG-kód biztonsági szempontból érzékeny. Csak akkor fut le, ha a kódfuttatás be van kapcsolva, a bejelentkezett felhasználónak van kódfuttatási jogosultsága, és a mentett kódnak érvényes kódaláírása van.

![Az Egyéni kód lap a Bricks beállításai között](./kepek/funkciok-egyeni-kod-beallitasok.webp)

*Az Egyéni kód lap a Bricks beállításai között* (https://minta-bolt.hu/wp-admin/admin.php?page=bricks-settings)

A képen a **Bricks → Beállítások → Egyéni kód** lap látszik, ahol a globális kódot, a kódfuttatást és a kódaláírásokat kezeled.

## Globális CSS és JavaScript

A globális kódot a **Bricks → Beállítások → Egyéni kód** lapon adod meg.

- A globális egyéni CSS a dokumentum `<head>` részének végére kerül.
- A szkriptek három helyre tehetők: a fejléc szkriptjei a záró `</head>` elé, a törzs (fejléc) szkriptjei a nyitó `<body>` után, a törzs (lábléc) szkriptjei a záró `</body>` elé.

A szkriptmezőkbe írt JavaScriptet tedd `<script>` címkék közé. Ezek a mezők elemzőkódokhoz, harmadik féltől származó beágyazásokhoz és más, webhelyszintű szkriptekhez valók.

## Oldalszintű CSS és JavaScript

Ha a kód csak egy oldalra vagy sablonra kell, szerkeszd az oldalt a Bricksszel, és nyisd meg az **Oldalbeállítások → Egyéni kód** részt. Az itt megadott kód csak arra az oldalra vagy sablonra érvényes, amelyiket szerkesztesz.

## Elemszintű egyéni CSS

Bármelyik elem és globális osztály stílusát kiegészítheted saját CSS-sel.

1. Jelöld ki az elemet.
2. Nyisd meg a **Stílus** fület.
3. Nyisd ki a **CSS** vezérlőcsoportot.

A `%root%` helyőrző az éppen szerkesztett elemre vagy globális osztályra mutat. A Bricks automatikusan átírja az elem azonosítójára vagy az osztály választójára. Gyorsbillentyű: írd be, hogy `r`, és nyomj `TAB`-ot.

```css
%root% {
  border: 1px solid red;
}
```

### CSS-kiegészítés Emmettel

A CSS rövidítésekkel gyorsabban írhatsz: a `margin: 10px` helyett elég beírni, hogy `m10`, és megnyomni a `TAB` billentyűt.

### Kétirányú CSS-szinkron

A kísérleti **CSS-szinkron** az elem vagy a globális osztály egyéni CSS-ét összhangban tartja a megfelelő stílusvezérlőkkel. Kapcsold be a **Bricks → Beállítások → Szerkesztő** lapon, a **CSS-szinkron** csoportban.

- Ha a CSS-szerkesztőben módosítasz egy támogatott tulajdonságot, a hozzá tartozó stílusvezérlő is frissül.
- Ha a stílusvezérlőben változtatsz, az érték visszaíródik az egyéni CSS-be.
- A nem kapcsolódó vagy nem támogatott CSS érintetlen marad.
- A szinkron figyelembe veszi az aktív töréspontot és az állapotot (például hover).
- Ha ugyanaz a tulajdonság az egyéni CSS-ben és egy stílusvezérlőben is szerepel, az egyéni CSS az erősebb, a szerkesztőben és a weboldalon is.

## A Kód elem: PHP, HTML, CSS, JavaScript

A **Kód** elem az oldal kimenetének egy meghatározott pontjára helyez PHP/HTML, CSS vagy JavaScript kódot. Alapból a beírt kód formázott kódrészletként jelenik meg. Ha azt szeretnéd, hogy a PHP/HTML le is fusson, kapcsold be az elem **Kód futtatása** beállítását.

Az elemnek külön szerkesztője van:

- **PHP és HTML:** kódrészletként jelenik meg, vagy futtatva, ha a futtatás be van kapcsolva.
- **CSS:** futtatáskor automatikusan `<style>` címkék közé kerül, ha nem írtad be magad.
- **JavaScript:** futtatáskor automatikusan `<script>` címkék közé kerül, ha nem írtad be magad.

### A kódfuttatás bekapcsolása

A PHP/HTML futtatásához előbb kapcsold be a **Kódfuttatás engedélyezése** beállítást a **Bricks → Beállítások → Egyéni kód** lapon. A kódfuttatásnak két rétege van:

1. A globális **Kódfuttatás engedélyezése** beállításnak be kell lennie kapcsolva.
2. A felhasználónak rendelkeznie kell a Bricks kódfuttatási jogosultságával, szerepkörön vagy egyéni felhasználói felülbíráláson keresztül.

Ha a kódfuttatás ki van kapcsolva, vagy a felhasználónak nincs jogosultsága, a Bricks nem mutatja a futtatható vezérlőket, és a „Kódfuttatás nem engedélyezett” üzenetet jeleníti meg. Csak megbízható felhasználóknak és szerepköröknek add meg a jogot.

A kódfuttatást kódból is letilthatod a `bricks/code/disable_execution` szűrővel. Régebbi webhelyeken a korábbi `bricks/code/allow_execution` szűrő `false` értéke is ugyanezt éri el.

### Kódaláírások

A futtatható kód csak akkor fut le, ha a kódfuttatás be van kapcsolva, és a mentett kódnak érvényes aláírása van. Ha a WordPress sója (salt) vagy titkos kulcsai megváltoznak, generáld újra az aláírásokat.

A kódaláírás a futtatható Bricks-kódra vonatkozik: a **Kód** elem PHP/HTML tartalmára, az **SVG** elem forráskódjára, a lekérdezésszerkesztő kódjára, a komponensek lekérdezési tulajdonságaira és a globális lekérdezések rekordjaira. Ha módosítod az aláírt kódot, a régi aláírás érvénytelenné válik, amíg újra alá nem írod. A részleteket a [Kódaláírások](https://hub.hellowp.io/hu/plugins/bricks-child/funkciok-kodalairasok/) fejezet tartalmazza.

### PHP és HTML hozzáadása a Kód elemhez

1. Add hozzá a **Kód** elemet a vászonhoz.
2. Írd be a PHP/HTML kódot a PHP és HTML szerkesztőbe.
3. Kapcsold be a **Kód futtatása** beállítást.
4. Nézd át a kódot.
5. Kattints a kódszerkesztő jobb felső sarkában az aláírás ikonra, vagy nyomd meg a `CMD/CTRL + R` billentyűkombinációt.
6. Mentsd az oldalt.

Futtatáskor a Bricks ellenőrzi az aláírást. Ha hiányzik vagy érvénytelen, a kód helyett hibajelző helyőrzőt jelenít meg.

A Kód elem további, választható beállításai:

| Beállítás | Mit csinál |
| --- | --- |
| Dinamikus adat feldolgozása | A futtatott PHP/HTML-ben feldolgozza a Bricks dinamikus adatcímkéit. |
| PHP-hibák elnyomása | Elrejti a PHP-hibákat, kivéve ha az URL tartalmazza a `brx_code_errors` paramétert. |
| Megjelenítés burkoló nélkül | A futtatott eredményt a Kód elem burkolója nélkül írja ki a weboldalon. |

## Biztonsági ellenőrzőlista

Mielőtt futtatható kódot engedélyezel vagy aláírsz:

- Minél kevesebb megbízható felhasználónak add meg a kódfuttatás jogát.
- Ha nincs szükség PHP-ra, inkább oldalszintű vagy elemszintű CSS-t és JavaScriptet használj.
- Aláírás előtt nézd át a kódot.
- Szerkesztés után írd alá újra.
- A WordPress sójának módosítása után generáld újra az aláírásokat.
- A globális aláírás-újragenerálás előtt futtass kódáttekintést (lásd [Kódellenőrzés](https://hub.hellowp.io/hu/plugins/bricks-child/funkciok-kodellenorzes/)).

## HTML-kiegészítés Emmettel

Az Emmet CSS-hez hasonló rövidítésekből gyorsan generál HTML-szerkezetet.

- A `#header` rövidítés (utána `TAB`) ezt adja: `<div id="header"></div>`
- A `h$[title=item$]{Header $}*3` rövidítés három címsort ad:

```html
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
```