Egyéni kód

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.

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.

%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 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).

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:

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