Menu
Panoramica
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.
Implementazione
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.
Esempi
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 %}