Saját sáv létrehozása a nulláról

A 6.0-s kiadástól HTML- és CSS-tudással bármilyen sávot létrehozhatsz. A beépített sávot háromféleképpen formálhatod át:

1. egy WordPress-hookkal CSS-t adsz az alap CSS-hez,
2. eltávolítod az összes alap CSS-t, és sajátot írsz,
3. a teljes sávot saját HTML-sablonból és CSS-ből építed.

A PHP-kódot a téma functions.php fájljába, vagy jobb helyen: egy must-use bővítménybe (wp-content/mu-plugins/) írd.

1. CSS hozzáadása hookkal

Ha az egyéni CSS-mező helyett inkább action hookot használnál, a cmplz_banner_css hookra csatlakozz:

/**
 * CSS hozzáadása a sáv CSS-fájljához
 */
function add_my_custom_banner_css() {
  ?>
  .cmplz-cookiebanner {

  }
  <?php
}
add_action( 'cmplz_banner_css', 'add_my_custom_banner_css' );

2. Az összes alap CSS eltávolítása

Ha a Complianz által generált teljes CSS-t felül akarod írni, és tiszta lappal indulnál, a cmplz_cookiebanner_css szűrőt használd:

/**
 * A Complianz által generált CSS teljes felülírása
 *
 * @param string $css
 * @return string
 */
function my_custom_banner_css( $css ) {
  ob_start();
  // ide jön a saját CSS
  ?>
  .cmplz-cookiebanner {

  }
  <?php
  return ob_get_clean();
}
add_filter( 'cmplz_cookiebanner_css', 'my_custom_banner_css' );

3. Saját HTML-sablon és CSS

A teljes sávot HTML-ből és CSS-ből is megírhatod. Az alap cookiebanner.php sablonból érdemes kiindulni, hogy a JavaScript és a sáv rendben együtt tudjon működni.

3.1. Szűrő a sáv felülírásához

A szűrő a beépített sávsablont a saját HTML-sablonodra cseréli. Mentsd egy .php fájlba a /wp-content/mu-plugins/ mappában (a példában banner.php):

<?php
/**
 * A sávsablon felülírása
 */
function cmplz_custom_banner_file( $path, $filename ) {
  if ( $filename === 'cookiebanner.php' ) {
    return trailingslashit( WPMU_PLUGIN_DIR ) . 'cookiebanner/cookiebanner.php';
  }
  return $path;
}

add_filter( 'cmplz_template_file', 'cmplz_custom_banner_file', 10, 2 );

3.2. (Nem kötelező) Az alap CSS felülírása

Ha a Complianz alap CSS-ét is le akarod cserélni, a banner.php-hoz add hozzá a 2. pontban látott cmplz_cookiebanner_css szűrőt, és írd bele a saját CSS-edet.

3.3. A HTML-sablon

Hozz létre az mu-plugins mappában egy cookiebanner mappát, és töltsd fel bele a saját cookiebanner.php sablonodat. Ajánlott az alap sablonból kiindulni, mert egyes osztályokra a konfigurációd szüksége lehet. Ha biztos vagy benne, hogy a beállításaid nem használják őket, törölheted. Néhány dinamikusan kitöltött attribútumot viszont meg kell tartani a teljes működéshez, például a aria-describedby="cmplz-message-{id}-{consent_type}" értéket.

Az alap sablon felépítése:

• fejléc (.cmplz-header): logó, cím, bezáró gomb (.cmplz-close),
• törzs (.cmplz-body): üzenet (.cmplz-message) és a négy kategória (.cmplz-category: funkcionális, beállítások, statisztika, marketing), mindegyik details elemben, jelölőnégyzettel és leírással,
• hivatkozások a TCF-hez (.cmplz-links.cmplz-information),
• lábléc: elválasztó, a gombok (.cmplz-buttons: .cmplz-accept, .cmplz-deny, .cmplz-view-preferences, .cmplz-save-preferences) és a jogi dokumentumok hivatkozásai (.cmplz-links.cmplz-documents).

Végül az mu-plugins mappádban ott kell lennie a felülíró banner.php fájlnak és a cookiebanner mappának a cookiebanner.php sablonnal.