Menu

I menu permettono di mostrare contenuti delle pagine o categorie associate. Un menu può essere associato ad una o più posizioni definite dal designer, generalmente vengono utilizzati per mostrare una lista di titoli ed eventualmente icone delle pagine associate, ma di fatto è possibile estrarne tutti i contenuti.

Per inserire un menu nel tema, è necessario prima creare una posizione in theme.php, poi creare il menu nel pannello da Aspetto > Menu ed associarlo alla posizione creata.

Creare una posizione per il menu

Per creare una nuova posizione per i menu è necessario aggiungerla nel file theme.php all'oggetto menu_positions associando al nome scelto il riferimento all'etichetta. In questo esempio creiamo la posizione chiamata NUOVA_POSIZIONE.

'menu_positions' => [
    'NUOVA_POSIZIONE' => 'theme::common.menu_positions.NUOVA_POSIZIONE',
],

A questo punto la posizione del menu viene mostrata nel pannello, e possiamo associarne un nome in lingua aggiungendolo nel file common.php. All'oggetto menu_positions aggiungiamo l'associazione dell'etichetta di NUOVA_POSIZIONE che verrà mostrata nel pannello nella sezione Aspetto > Menu > Gestione posizioni.

'menu_positions' => [
	'NUOVA_POSIZIONE' => "Posizione del menu laterale",
],

Estrarre un menu dalla posizione

Ad ogni posizione può essere associato un menu creato da pannello. Il menu ha contenuti propri e quelli delle pagine associate. Possiamo estrarre il menu associato alla posizione attraverso la funzione menu_position(). Questa funzione ha come parametro obbligatorio position che rappresenta il nome della posizione del menu (definita nel file theme.php) e la variabile "types" per filtrare in base al tipo di pagina.

{% menu_position('NOME_POSIZIONE') %}

Questa funzione ritorna l'oggetto del menu associato a quella posizione, con i seguenti valori

nome tipo descrizione
id string Id del menu
name string Nome del menu
title string Titolo in lingua del menu, impostabile da pannello
created_at string Data di creazione del menu
updated_at string Data di aggiornamento del menu
contents array Array delle pagine associate al menu

Ogni valore dell'array contents è un oggetto contenente i seguenti attributi, e può rappresentare una pagina o un link.

nome tipo descrizione
id string Id della pagina
lang_code string Codice della lingua
parents_id array Array degli id delle pagine padre
title string Titolo della pagina
slug string Slug della pagina
url string URL della pagina
image_url string URL dell'immagine principale
alt_image_url string URL dell'immagine alternativa
level int Livello di parentela della pagina, dal più alto con valore 0, seguito dai figli con livello 1 e via discorrendo
only_parents string
is_active bool È la pagina correntemente visualizzata
has_active bool Una delle pagine figlie di questa è quella attualmente visualizzata
description string Descrizione della pagina
childrens array Array contenente i figli della pagina come oggetti con gli stessi attributi
is_page bool Indica se è una pagina
is_link bool Indica se è un link
is_home bool Indica se è il link alla home
is_evidence int Indica se la voce del menu è stata impostata come "in evidenza"

Cercare un menu tramite id

Nel caso in cui si voglia estrarre un menu di cui si conosce l'id senza doverlo associare per forza ad una posizione, è possibile utilizzare la funzione find_menu(). Questa ha per parametri menu_id che rappresenta l'id del menu da cercare ed eventualmente types per filtrare in base al tipo di pagina.

{% find_menu(123) %}

Questa funzione ritornerà come risultato un oggetto del menu come quello descritto nel paragrafo precedente.

Creare un menu mostrando i contenuti associati

In questo esempio viene spiegato come mostrare le pagine e i link associati ad un menu, estraendolo da una posizione. Un sito web può avere diverse posizioni per il menu e per questo è consigliabile, ma non obbligatorio, utilizzare una macro, che nell'esempio abbiamo chiamato menu.

La macro menu genera una i tag <ul> ed <li> per ogni voce di menu e sottomenu. Per far si che i dati del menu vengano trasmessi correttamente al file delle macro, li passiamo come parametro cercando il menu in base alla posizione top, che supponiamo definita precedentemente.

<ul>
    {{ macro.menu(menu_position('top')) }}
</ul>

menu_position('top') estrarrà così il menu impostato da pannello in quella posizione e verrà passato come parametro alla macro menu dove estrarremo i suoi contenuti. Mostriamo quindi prima il titolo del menu, e poi associamo le pagine e i link alla variabile menu_cont, se presenti.

{% macro menu(mymenu) %}
    {# genero il titolo #}
    <h2>{{ mymenu.title }}</h2>
 
    {# se ci sono contenuti, li associo alla variabile menu_cont #}
    {% if mymenu.contents %}
        {% set menu_cont = mymenu.contents %}
    {% endif %}

A questo punto eseguiamo un ciclo per estrarre ogni voce del menu, valutando però i vari casi: se una pagina associata ha delle sottopagine da estrarre, allora andrà generato un sotto-menu, altrimenti creeremo solo un nuovo elemento della lista. In quest'ultimo caso faremo in modo che se il contenuto è un link esterno al sito, questo si aprirà in una nuova scheda del browser. Infine, assoceremo la classe active se ci troviamo nella pagina di quella voce o di una sua pagina padre, in modo da poterla evidenziare tramite CSS.

	{% for menu_item in menu_cont %} {# Ciclo ogni voce del menu come menu_item #}
 
		{% if menu_item.childrens|length %} {# Se il contenuto è una pagina con figli #}
 
                        {# imposto la classe 'active' se è la pagina corrente o è il padre della pagina corrente #}
			<li class="{{ menu_item.has_active ? 'active' : '' }}">
				<a href="{{ menu_item.url }}">
					{{ menu_item.title }}<i class="caret"></b>
				</a>
 
                                {# creo il sottomenu richiamando questa stessa macro, estraendo però solo i figli di questo contenuto #}
				<ul>
					{{ _self.menu(menu_item.childrens) }}
				</ul>
			</li>
		{% else %}  {# se non ha figli #}
 
			<li class="{{ menu_item.is_active ? 'active' : '' }}">
 
                                {# controllo se è un link esterno e nel caso aggiungo la proprietà target al link #}
				{% if menu_item.is_external %}
					<a target="_blank" href="{{ menu_item.url }}">{{ menu_item.title }}</a>
				{% else %}
					<a href="{{ menu_item.url }}">{{ menu_item.title }}</a>
				{% endif %}
			</li>
		{% endif %}
	{% endfor %}
{% endmacro %}