Aggiungere classi CSS alle righe in modo programmatico utilizzando il Page Builder di SiteOrigin

Il Page Builder di SiteOrigin è certamente uno dei più performanti plugin in circolazione, sia nella versione free che in quella a pagamento. Noi lo utilizziamo da anni in ogni nostra realizzazione, sempre nella versione gratuita, per evitare aumenti di costi ai nostri clienti e garantire il massimo delle performance possibili.

Integrato con Gutenberg e veloce

Come detto, il Page Builder di SiteOrigin gode di ottime prestazioni e grazie ad un interfaccia minimale permette di effettuare modifiche dalla nostra schermata di amministrazione in modo semplice e veloce, con alcuni accorgimenti che rendono meno frustrante la gestione anche per gli sviluppatori.

Ad esempio, il numero di clic per raggiungere un determinato menu è inferiore rispetto ad altri Page Builder più eye-candy, ma allo stesso tempo maggiormente impattanti sulle prestazioni del sito (qualcuno ha detto Elementor?).

Uno degli aspetti più interessanti del Page Builder di SiteOrigin è sicuramente la sua integrazione nativa con il nuovo Block Editor di WordPress (aka Gutenberg). Potremmo infatti editare le nostre pagine senza lasciare l’interfaccia originale di WP, così come le linee guida del Codex suggeriscono, ed allo stesso tempo utilizzare i Widget dedicati di SiteOrigin anche nei nostri articoli o post type personalizzati.

Aggiungere delle classi CSS ad una riga del Page Builder in modo programmatico

Il Page Builder, come tutti i plugin di questa classe, offre una struttura a righe e colonne particolarmente flessibile e molto intelligente nella sua ideazione. Si possono aggiungere inoltre classi CSS dall’interfaccia, in modo manuale, oppure alle celle (ovvero le singole colonne) con un buon margine di personalizzazione.

Tuttavia, queste classi verranno aggiunte ad un wrapper interno rispetto al div che identifica la riga. Per esempio:

<div class="panel-grid">
    <div class="panel-row-style la-mia-classe">

        <! -- qui dentro ci sono le celle/colonne caratterizzate dal selettore .panel-grid-cell -->

    </div>
</div>

<div class="panel-grid">

    <! -- altro contenuto -->

</div>

Tuttavia, molto spesso potrebbe essere utile – se non indispensabile – aggiungere delle classi CSS specifiche al livello della riga, cioè di fianco al selettore .panel-grid. Questo non è possibile dalla schermata di modifica delle righe che offre il Page Builder, ma possiamo farlo noi sulla base delle impostazioni della riga.

Vediamo come.

Il filtro siteorigin_panels_row_classes

Il filtro siteorigin_panels_row_classes ci permette esattamente di modificare le classi della riga. Inoltre, mette a disposizione 2 argomenti:

  • $classes cioè l’array delle classi CSS applicate alla riga corrente (che ritorneremo)
  • $row cioè l’array delle impostazioni di design, stile e altro applicate alla riga corrente

Questo ci permette di:

  • Prima verificare le impostazioni applicate a $row
  • Poi, concordemente, applicare una classe CSS aggiuntiva alla riga

Codice di esempio: applichiamo una o più classi in funzione dello sfondo della riga

Nell’esempio di seguito, applicheremo due classi:

  • has-bg-image nel caso in cui la riga abbia una immagine di sfondo
  • has-bg-color nel caso in cui la riga abbia un colore di sfondo
  • NOTA: le classi verranno applicate entrambe nel caso in cui ci siano entrambe le impostazioni applicate!
/*
* SiteOrigin - Add Row Class when class have image but not color background
*/

add_filter('siteorigin_panels_row_classes', 'sopb_add_row_classes', 10, 2);

function sopb_add_row_classes($classes, $row) {

  // Check if row has bg image
  if(isset($row['style']['background_image_attachment']) && !empty($row['style']['background_image_attachment'])) {
    $classes[] = 'has-bg-image';
  }

  // Check if row has bg color
  if(isset($row['style']['background']) && !empty($row['style']['background'])) {
    $classes[] = 'has-bg-color';
  }

  return $classes;
}

Ci troveremo quindi nella situazione sottostante:

<div class="panel-grid has-bg-color has-bg-image">
    <div class="panel-row-style">

        <! -- qui dentro ci sono le celle/colonne caratterizzate dal selettore .panel-grid-cell -->

    </div>
</div>

<div class="panel-grid">

    <! -- altro contenuto -->

</div>

Casi d’uso: migliorare UX/UI design di lettore ed editor

Ovviamente questo esempio parte da un caso d’uso reale: c’era infatti la necessita di aumentare il contrasto di un testo bianco quando questo appariva su righe con una sola immagine di sfondo. In questa situazione, infatti, non era possibile stabilire a priori la leggibilità del testo a partire, per esempio, da un set di colori di base.

Spesso, perciò, il testo risultava illegibile.

Applicando la classe .has-bg-image alla riga era possibile selettivamente impostare, per esempio, una proprietà text-shadow che applicasse una leggera ombra nera molto sfocata, impercettibile all’occhio, che però migliorasse in modo sostanziale la leggibilità.

Facciamo inoltre tutto questo senza richiedere all’editor di inserire classi CSS nel box apposito che per un editor può essere spesso una competenza “avanzata” al di fuori delle proprie capacità ed in maniera totalmente automatizzata: gli basterà indicare infatti l’immagine di sfondo, al resto ci pensa una regola CSS del tipo:

.has-bg-imagenot(.has-bg-color)  h1,
.has-bg-image:not(.has-bg-color) h2,
.has-bg-image:not(.has-bg-color) h3 .... {
     
     text-shadow: {impostazione dell'ombra};

}

I developers potranno poi anche creare regole personalizzate sulle righe, abilitando l’uso di selettori CSS di adiacenza come “+” e “~” al livello di .panel-grid.

Share this:

Lascia un commento

Utilizziamo i cookie per offrirti la migliore esperienza online. Puoi accettare o personalizzare l'uso dei cookie, in accordo con la nostra cookie e privacy policy!

Close Popup
Privacy Settings saved!
Impostazioni

Quando visiti un sito Web, esso può archiviare o recuperare informazioni sul tuo browser, principalmente sotto forma di cookies. Alcuni cookie possono essere disattivati, altri sono invece vitali per il funzionamento del sito web. Controlla qui le tue impostazioni.

Questi cookie sono necessari per il funzionamento del sito Web e non possono essere disattivati nei nostri sistemi.

Cookie tecnici
Per utilizzare questo sito web usiamo i seguenti cookie tecnici.
  • wordpress_test_cookie
  • wordpress_logged_in_
  • wordpress_sec
  • wp_lang
  • popup_closed

Salva le impostazioni
Accetta tutti i cookie