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

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.

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.

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ű.

wp bricks regenerate_assets