I tag condizionali di Blogger per codici e widget.

Come usare i tag condizionali nel modello di Blogger per mostrare widget, banner, contenuti o applicare CSS solo quando una o più condizioni siano soddisfatte.

Tra gli strumenti di Blogger di cui gli utenti possono usufruire hanno un ruolo di assoluto rilievo quelli che vengono definiti i tag condizionali. Si tratta di inserire delle condizioni per mostrare elementi o widget solo quando queste condizioni si manifestino. In questo modo per esempio possiamo fare in modo di mostrare le icone dei social network solo nei post oppure di visualizzare un dato widget solo in una determinata pagina statica del sito.

Il meccanismo con cui Blogger permette queste impostazioni è basato sui Tag dei Dati per i Layout di Blogger che sono delle espressioni assimilabili a delle funzioni che prendono un determinato valore quando siano inserite correttamente in un codice. Tali espressioni non sono tag HTML e funzionano solo nei modelli di Blogger. Tanto per fare 2 o 3 esempi ricordo che se inseriamo nel modello questo tag <data:blog.title/> il browser rileverà il nome del blog così come si potrà verificare anche dal Sorgente Pagina che si attiva digitando Ctrl+U. L'espressione data:post.title determina il Titolo del post mentre il tag data:post.body è il contenuto dell'articolo e viene utilizzato per aggiungere contenuti subito sopra o subito sotto l'articolo come banner pubblicitari o icone dei social network.

La sintassi generica per mostrare un contenuto solo se si verifica una certa condizione è la seguente:

<b:if cond='condition'>
 [contenuto da visualizzare se la condizione è vera]
<b:else/>
   [contenuto da visualizzare se la condizione è falsa]
</b:if>

con due diversi contenuti da mostrare se la condizione è vera oppure è falsa. Questo tipo di condizione si usa per esempio per mostrare due diversi menù per la versione mobile e desktop del sito.  Se invece si desidera non mostrare nulla se la condizione è falsa allora si utilizza questa sintassi più semplice:

<b:if cond='condition'>
 [contenuto da visualizzare solo se la condizione è vera]
</b:if>

In entrambi i casi i tag condizionali terminano con la riga </b:if> mentre la prima riga è quella che determina la condizione vera e propria. Le condizioni sono spesso inserite in questo modo

cond='data:blog.pageType == "item"'

Tale condizione si verifica se la pagina è del tipo item cioè un post. Le virgolette doppie " quando si incollano nel modello vengono convertite in linguaggio XML cioè in &quot; e  diventa

cond='data:blog.pageType == &quot;item&quot;'

OPERATORI DI CONFRONTO E EQUIVALENZA

I due uguali affiancati dal punto di vista logico rappresentano il valore VERO o TRUE in inglese. Utilizzando la stessa sintassi si possono usare anche gli altri operatori di confronto

1. == significa VERO o TRUE
2. != significa FALSO o FALSE
3. < significa MINORE
4. > significa MAGGIORE
5. <= significa MINORE o UGUALE
6. >= significa MAGGIORE o  UGUALE

TABELLA DEI TAG CONDIZIONALI PIÙ COMUNI

CONDIZIONE	EFFETTO
<b:if cond='data:blog.url == data:blog.homepageUrl'>	Elemento solo in Home
<b:if cond='data:blog.url != data:blog.homepageUrl'>	Elemento ovunque esclusa la Home
<b:if cond='data:blog.pageType == &quot;item&quot;'>	Elemento solo nei post
<b:if cond='data:blog.pageType != &quot;item&quot;'>	Elemento ovunque esclusi i post
<b:if cond='data:blog.url == "URL_PAGINA"'>	Elemento solo nella pagina dell'URL
<b:if cond='data:blog.url != "URL_PAGINA"'>	Ovunque escluso l'URL della pagina
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>	Solo nelle pagine statiche
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>	Ovunque escluse le pagine statiche
<b:if cond='data:blog.pageType == &quot;archive&quot;'>	Solo nelle pagine di Archivio
<b:if cond='data:blog.pageType != &quot;archive&quot;'>	Ovunque escluso pagine di archivio
<b:if cond='data:blog.pageType == "data:blog.searchLabel"'>	Solo nelle pagine delle etichette
<b:if cond='data:blog.pageType != "data:blog.searchLabel"'>	Ovunque escluso pagine etichette
<b:if cond='data:post.isFirstPost'>	Solo nel primo post
<b:if cond='data:blog.pageType == "error_page"'>	Solo nelle pagine non trovate
<b:if cond='data:blog.pageType != "error_page"'>	Ovunque escluso le pagine errore
<b:if cond='data:blog.searchLabel == "NOME_ETICHETTA"'>	Post con quella etichetta
<b:if cond='data:blog.searchLabel != "NOME_ETICHETTA"'>	Ovunque esclusa data etichetta
<b:if cond='data:post.author == "NOME_AUTORE"'>	Pagine con dato autore
<b:if cond='data:post.author != "NOME_AUTORE"'>	Pagine non di quell'autore
<b:if cond='data:post.numComments > 1'>	Post con più di 1 commento
<b:if cond='data:blog.isMobile'>	Visibile solo nei dispositivi mobili
<b:if cond='!data:blog.isMobile'>	Non visibile nei dispositivi mobili
<b:if cond='data:post.allowComments'>	Post in cui sono permessi i commenti
<b:if cond='data:post.allowComments == "false"'>	Post con commenti non consentiti
<b:if cond='data:post.hasJumpLink'>	Solo nei post con il Read More
<b:if cond='data:blog.metaDescription'>	Solo nei post con la meta descrizione

 

ALTRI TAG CONDIZIONALI

Oltre ai tag condizionali classici sono state introdotte nuove espressioni. Abbiamo già visto l'operatore Equivalenza dato dai due uguali == che può diventare anche di confronto modificando un uguale con un punto esclamativo o con un segno di maggiore o minore. Vediamone altri oltre all'operatore NOT che è serve come negazione ed è simile al punto esclamativo.

OPERATORE AND

Esempio:

<b:if cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments'>
      <b:include name='comment_count_picker' data='post' />
</b:if>

Con questo codice si mostra il contatore dei commenti solo nelle pagine che non siano di post oppure pagine statiche e che permettano i commenti.

OPERATORE OR

Esempio:

<b:if cond='data:blog.pageType == "item" or data:blog.url == data:blog.homepageUrl'>

Tale condizione è vera se la pagina è di post o se è la Homepage.

OPERATORE NOT

Si può usare ! oppure not. Esempio:

<b:if cond='not data:blog.pageType == "static_page"'>
<b:include name='comments_byline' />
</b:if>

Tale condizione è vera se non siamo in una pagina statica.

SELETTORE TERNARIO ?

Con il selettore ternario si indica la condizione poi si mette tra virgolette quello che si mostra nel caso in cui la condizione si verificasse o meno.

Esempio:

<div expr:class='data:post.allowComments ? "comments" : "no-comments"'>
</div>

Il risultato visualizzato sarà comments nel caso in cui il post permettesse commenti e no-comments se non li consentisse.

OPERATORI APPARTENENZA IN E CONTAINS

Si definisce un set di elementi con le parentesi graffe { } per contains e le parentesi quadre [ ] per in quindi si applicano gli operatori.

Esempi:

<b:if cond='{"item", "static_page"} contains data:blog.pageType'>
     <p>Questo elemento è un post o una pagina statica</p>
</div>

e

<b:if cond='data:blog.pageType in ["index", "archive"]'>
     <p>Questa è la homepage o una pagina di archivio </p>
</div>

 

OPERATORI IF, ELSE E ELESEIF

Oltre agli operatori if e else che abbiamo già visto Blogger ha introdotto anche l'operatore elseif

Esempio:

<b:if cond='prima condizione'>
  [Contenuto da mostrare se la condizione è vera]
<b:elseif cond='seconda condizione'>
  [Contenuto da mostrare se la condizioni if è falsa ma elseif è vera]
<b:else/>
  [Contenuto da mostrare se entrambe le condizioni non si verificano]
</b:if>

 

ATTRIBUTO EXPR

Abbiamo visto che secondo i Tag dei Dati dei Layout l'espressione data:blog.homepageUrl rappresenta l'URL della home del sito mentre data:posts.url dà come risultato il Permalink del post. Su Blogger non si può creare un link con il tag href dell'HTML ma si usa expr.

Esempio:

<a expr:href='data:blog.homepageUrl'>Home</a>
Un link all'URL della home page del blog.
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Feed RSS</a>
Un link con il collegamento al feed RSS dei post del blog. L'operatore + concatena le due stringhe.

 

COME SI UTILIZZANO I TAG CONDIZIONALI CON I CSS

I tag condizionali non sono codice HTML ma funzionano solo nel modello di Blogger. Non funzionano neppure in un widget HTML/Javascript. Con queste condizioni possiamo per esempio fare in modo che determinati CSS vengano applicati solo in certi casi. 

Esempio:

<b:if cond='data:blog.isMobile'>
<style>
/* Regole CSS da applicare solo per visualizzazione da mobile */
</style>
</b:if>

Se si incolla il codice precedente subito sopra la riga </head> si potranno aggiungere delle regole CSS valide solo per chi apra le pagine del nostro sito con un dispositivo mobile. Analogamente si può fare in modo che il titolo di una pagina statica abbia dimensioni più grandi degli altri, ecc.

COME USARE I TAG CONDIZIONALI CON I CONTENUTI

Poniamo che si voglia inserire un banner nel nostro layout in modo però che sia visibile solo nel primo post e non in quelli successivi della homepage, delle pagine di etichetta e di archivio. Tale esigenza si presenta per esempio quando si voglia aggiungere un banner pubblicitario subito sotto il titolo del primo post. Se noi incolliamo il codice prima del tag data:post.body che rappresenta il contenuto degli articoli lo vedremo sotto a tutti i titoli dei post presenti in home e nelle altre pagine dinamiche. Si risolve con un codice come il seguente

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.isFirstPost'>
Codice del Banner Pubblicitario </b:if>
</b:if>
</b:if>

che mostrerà l'unità pubblicitaria solo nelle pagine che non siano post, che non siano pagine statiche e che siano il primo post della pagina.

COME USARE I TAG CONDIZIONALI CON I WIDGET

I tag condizionali sono molto usati per nascondere un dato gadget in determinate tipologie di pagine e viceversa per mostrare un certo widget solo in una o più pagine. Per applicare tali tag bisogna andare nel Modello e cercare il codice del widget. Ci si può aiutare cercando con Ctrl+F il titolo del gadget oppure il suo ID. Il codice di un widget di Blogger ha solitamente questa struttura

<b:widget id='Id Widget' locked='false' title='Titolo Widget' type='Tipo del widget'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
..........
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

che inizia con <b:widget id=.... e che termina con </b:widget>. Nel codice del gadget sono sempre presenti le due righe evidenziate di giallo nel codice precedente. I due tag condizionali vanno incollati nel template subito sotto la prima riga e subito sopra alla seconda riga in questo modo

Sopra alla riga </b:includable> si incolla il tag di chiusura </b:if>mentre sotto alla riga <b:includable id='main'> si incolla il tag della condizione da scegliere tra quelle della tabella personalizzata. Si inseriranno cioè dei vincoli per il widget che sarà mostrato solo quando la condizione introdotta sia soddisfatta.