C’è un tema Merlin che è davvero accattivante graficamente, https://it.wordpress.org/themes/merlin/ , ma il nostro magomerlino theme che si appoggia al sito statico Sydney è tutta altra roba e persino inedito nel suo genere (ehm si fa per dire)! Riprendiamo il discorso interrotto per necessità di autoapprendimento attivo all’ indirizzo https://umbriawaycultura.wordpress.com/2020/05/08/analnatrac-utvasbeethod-dokiel-dienve-perche-wordpress-e-mago-merlino-vanno-daccordo-magia-di-exalibur-di-borman-parte-one/ dove dopo una serie infinita di operazioni siamo riusciti quasi a mettere il nostro dolce finale nel forno. In sintesi quello che abbiamo fatto nella fase preliminare era: fissare un obiettivo di partenza, ossia trasformare un free download offerto da Sydney Theme in qualcosa di dinamico per WordPress tanto da diventare thema ufficiale riutilizzabile come base di appoggio facilmente modificabile. Poi dopo abbiamo instllato il server locale che ci ha abilitato anche a mysql e che ha diversi vantaggi come quello di offrirci una installazione diretta di WP facilmente configurabile. Poi abbiamo dovuto installare i plug-in necessari come Tumber che grazie a un engine interno ci offre la possibilità di marcare il codice proposto dal sito base con informazioni dinamiche che creano automatismi al sito. A questo punto nella fase due procediamo all’ inverso. Non la solita progressiva descrizione di azioni con cause ed effetti che portano un risultato , ma un INCIPIT tecnico-narrativo che nasce direttamente sul fondo. Per poter utilizzare al meglio Timber è bene tenere sempre sotto sguardo la corposa documentazione: https://timber.github.io/docs/ perchè non solo possiamo marcare le parti statiche di una pagina HTML come percorsi di file, navigazione, risorse, titoli, meta name etc, ma possiamo anche produrre istruzioni condizionali e cicli for per mandare in loop le nostre pagine risparmiando righe e righe di codice. Quindi vediamo subito il risultato finale di questa primordiale impostazione grafica e procediamo questa volta a ritroso. Come è stato possibile arrivare a un primo passo di visualizzazione dinamica in WP? Semplicemente cambiando tutti i parametri statici con TWIG, l’engine del nostro plug-in che fa il lavoro sporco in TIMBER. Vediamo degli esempi pratici elencato in lista ordinata. Prima c’è da dire che WP ha bisognod i una gerarchia di oggetti, file e directory davvero particolare per poter funzionare con le sue funzioni predefinite, vediamo pertanto nell’ articolo anche la complessità (presunta) della struttura delle cartelle. Per la parte dinamica:

<html {{ site.language_attributes }}>
<meta charset=”{{ site.charset }}” />
<meta name=”description” content=”{{ site.description }}“>
<link rel=”icon” href=”{{ site.theme.link }}/images/favicon.ico” />
<link rel=”stylesheet” href=”{{ site.theme.link }}/templates/base/main.css” />
<link rel=”stylesheet” href=”{{ site.theme.link }}/templates/base/sydney.css” />

Qui siamo solo nell’ intestazione della pagina HTML ma vediamo come è strutturato l’inizio del body:

<body class=”{{ body_class }}“>
<header id=”navbar” class=”navbar is-spaced”>
<nav class=”container”>
<div class=”navbar-brand”>
<a class=”navbar-item” href=”{{ site.url }}“>
<img src=”{{site.theme.link}}/images/logo.png” alt=”{{ site.title }}” />
</a>

e così via fino al footer finale, quindi la cosa che più salta all’ occhio (in grassetto nel codice parziale estrapolato come esempio) è questo uso di sostituzione del codice statico con delle espressioni che solo TWIG sa riconoscere, non a caso stiamo scrivendo la nostra pagina di visualizzazione all’ interno di una pagina che si chiama template.twig e che solo grazie al plug-in installato ha ragione di esistere. Inutile dire che bisogna fare particolare attenzione sui percorsi e su come verranno inseriti gli script e i file CSS inclusi nel template statico di partenza offerto da Sydney. Il lavoro di impostazione partendo dalla pagina bianca lasciata al capitolo uno di questo tutorial dovrebbe impiegare un paio di ore per un web designer che sa destreggiarsi già con la particolare sintassi di questo Twig che tanto ricorda le espressioni di Vue framework per esempio (il principio di funzionamento è lo stesso, anche qui ci sono delle direttive per azionare cicli e istruzioni condizionali). Non solo da notare che grazie al ciclo for per esempio ho la possibilità di gestire facilmente le voci di menù, in particolare la rotazione degli elementi avviene dinamicamente con l’espressione:

<div class=”navbar-end”>
{% for item in menu.items %}
<a class=”navbar-item is-relative{% if item.current %} is-active{% endif %}” href=”{{ item.link }}”>
{{ item.name }}
</a>
{% endfor %}
</div>

e la visualizzazione sarà automatizzata con le classi attive che in maniera precisa si azioneranno quando l’elemento di interesse diventerà una url specifica del nostro sito e la pagina richiamata sarà al centro delle attenzioni dell’ utente. Da notare poi come si possano integrare effetti JS come il famoso tasto freccia in sù che serve a riportare la pagina in alto dopo uno scroll lungo come un lenzuolo:

<button id=”scroll-to-top” class=”button is-primary”>
<span class=”icon”>
<i class=”mdi mdi-10px mdi-arrov-up”></li>
</span>
</button>

Siamo comunque riusciti a rendere un template statico in una APPLICAZIONE DINAMICA e questo è un grande risultato per chi è a digiuno di TIMBER. Grazie al supporto performante e professionale di https://devacademy.it/ riprendiamo il discorso interrotto all’ indirizzo https://umbriawaycultura.wordpress.com/2020/05/08/analnatrac-utvasbeethod-dokiel-dienve-perche-wordpress-e-mago-merlino-vanno-daccordo-magia-di-exalibur-di-borman-parte-one/ e la seconda puntata attuale è ben lontana dall’ esaurirsi perchè tutte le sezioni richiamate dalle pagine vanno riempite non solo di contenuti ma settate con lo stesso criterio di questa vista nel tutorial per cui la strada da fare è ancora lunga e tortuosa ma non impossibile. Attenzione a non mollare la presa sul drago perchè come dice Merlino in Exalibur: il Drago è ovunque. Il Drago è in ogni cosa. Le sue squame brillano nella corteccia degli alberi. Il suo ruggire si sente nel vento. E la sua forcuta lingua colpisce come il fulmine!