# Erőforrások betöltése és Bricks CLI

> Hogyan tölti be a Bricks a webhely stílusait és szkriptjeit, a külső CSS-fájlok használata, az egyes erőforrások kézi betöltése és a wp bricks parancs.

A Bricks a teljesítményt fontos szempontnak tekinti, ezért a webhely erőforrásainak nagy részét csak ott tölti be, ahol szükség van rájuk.

A főstíluslapot mindig a `bricks-frontend`, a fő szkriptet a `bricks-scripts` azonosítóval tölti be. A kiegészítő könyvtárakat (diavetítők, lightboxok, térképek, animációk, ikonbetűkészletek, dátumválasztók) regisztrálja, de csak akkor tölti be, ha az oldalon kellenek.

Alapból a kaszkádrétegekre épülő stíluslapot használja (`frontend-layer.min.css`). Ha a kaszkádrétegek ki vannak kapcsolva, a `frontend.min.css` lép a helyére. Ha a CSS betöltési módja **Külső fájlok**, a Bricks a könnyebb stíluslapot (`frontend-light-layer.min.css`, kaszkádrétegek nélkül `frontend-light.min.css`) és az adott oldalhoz generált CSS-fájlokat tölti be.

## Még kevesebb betöltött erőforrás: külső fájlok

Alapból a generált stílusok (oldalbeállítások, sablonbeállítások, elemstílusok, globális egyéni CSS, sablonstílusok, színpaletták, globális osztályok CSS-e és más Bricks-adatok) soron belül, a HTML-ben jelennek meg. A betöltött stílusok további csökkentéséhez állítsd a **CSS betöltési módja** beállítást **Külső fájlok** értékre.

1. Nyisd meg a **Bricks → Beállítások** oldalt, és lépj a **Teljesítmény** lapra.
2. A **CSS betöltési módja** beállításnál válaszd a **Külső fájlok** lehetőséget.
3. Kattints a **CSS-fájlok újragenerálása** gombra, hogy a Bricks létrehozza a szükséges mappát és a CSS-fájlokat. A gomb csak a Külső fájlok kiválasztása után látszik.

![A Teljesítmény lap a CSS betöltési módja beállítással](./kepek/elso-lepesek-2-beallitasok-teljesitmeny.webp)

*A Teljesítmény lap a CSS betöltési módja beállítással* (https://minta-bolt.hu/wp-admin/admin.php?page=bricks-settings)

A képen a **CSS betöltési módja** beállítás látszik a **Teljesítmény** lapon.

A Bricks a Bricks-adataidból minimalizált CSS-fájlokat hoz létre a `wp-content/uploads/bricks/css` mappában (vagy ott, ahová a WordPress feltöltési mappáját állítottad), és az éppen kért oldalnak megfelelően szolgálja ki őket.

## Egyes stílusok és szkriptek kézi betöltése

Ha harmadik féltől származó Bricks-bővítményt használsz, vagy egy stílus vagy szkript valamiért nem töltődik be, ahol kellene, egyenként be is töltheted őket. Ehhez a gyermektéma `functions.php` fájljában a `wp_enqueue_scripts` WordPress-műveletre köss rá. Ha saját Bricks-elemed függ ezektől, az elem `enqueue_scripts` függvényében is meghívhatod ugyanezeket.

```php
add_action( 'wp_enqueue_scripts', function() {
  // isotopeJS (például metró és kőműves elrendezés)
  wp_enqueue_script( 'bricks-isotope' );
  wp_enqueue_style( 'bricks-isotope' );

  // Ikonbetűkészlet-fájlok
  wp_enqueue_style( 'bricks-font-awesome-6' );
  wp_enqueue_style( 'bricks-font-awesome-6-brands' );
  wp_enqueue_style( 'bricks-ionicons' );
  wp_enqueue_style( 'bricks-themify-icons' );

  // Animációk
  wp_enqueue_style( 'bricks-animate' );

  // Elemleírások (tooltip)
  wp_enqueue_style( 'bricks-tooltips' );

  // Dátumválasztó
  wp_enqueue_script( 'bricks-flatpickr' );
  wp_enqueue_style( 'bricks-flatpickr' );

  // swiperJS (például diavetítő, körhinta)
  wp_enqueue_script( 'bricks-swiper' );
  wp_enqueue_style( 'bricks-swiper' );

  // splideJS (például egymásba ágyazható diavetítő, körhinta)
  wp_enqueue_script( 'bricks-splide' );
  wp_enqueue_style( 'bricks-splide' );

  // Lightbox
  wp_enqueue_script( 'bricks-photoswipe' );
  wp_enqueue_script( 'bricks-photoswipe-lightbox' );
  wp_enqueue_script( 'bricks-photoswipe-caption' );
  wp_enqueue_style( 'bricks-photoswipe' );

  // Leaflet-térkép
  wp_enqueue_script( 'bricks-leaflet' );
  wp_enqueue_style( 'bricks-leaflet' );

  // Kódszínező
  wp_enqueue_script( 'bricks-prettify' );
  wp_enqueue_style( 'bricks-prettify' );

  // Choices.js
  wp_enqueue_script( 'bricks-choices-lib' );
  wp_enqueue_script( 'bricks-choices-js' );
  wp_enqueue_style( 'bricks-choices' );
}, 11 );
```

## Bricks CLI

A Bricks a WP-CLI-vel (a WordPress parancssori felületével) is együttműködik, így bizonyos feladatokat a szerver parancssorából is elvégezhetsz a grafikus felület helyett.

### CSS-fájlok újragenerálása

Csak akkor működik, ha a Bricks **CSS betöltési módja** **Külső fájlok** értékű.

```bash
wp bricks regenerate_assets
```