Càpita spesso di vedere nei siti web realizzati con Joomla! form di login o campi di ricerca nelle voci o sottovoci del menu principale.
L'articolo odierno illustra come inserire e visualizzare un modulo di ricerca in una sottovoce del menu principale di Joomla! con il plugin Modules Anywhere.
Al momento della scrittura dell'articolo è stata utilizzata la versione 3.8 di Joomla! ed il plugin Modules Anywhere arrivato alla versione 7.12.0.
Il plugin Modules Anywhere consente di posizionare un modulo in qualsiasi parte delle pagine del sito. Non solo. Permette anche di inserire un modulo all'interno di un altro modulo di Joomla!
Sintassi di Modules Anywhere
Si possono posizionare moduli attraverso il plugin Modules Anywhere utilizzando i tag direttamente nell'editor WYSIWYG di Joomla!
Il codice per ottenere quanto appena scritto è il seguente:
{ module Nome-del-Modulo }
dove Nome-del-Modulo è il nome di un ipotetico modulo presente tra quelli di default o creati da noi.
Un altro modo per inserire un modulo è quello di scrivere la sua posizione, attraverso il tag { modulepos }.
Il tag { modulepos } funziona alla stessa maniera del plugin del core di Joomla! { loadposition }.
La differenza principale è che si può usare il tag { modulepos } ovunque si possa inserire del testo e quindi non solo negli articoli.
Basta aggiungere il nome della posizione all'interno del tag { modulepos }, ad esempio:
{ modulepos position-1 }
In ultimo, un modulo inserito attraverso questo plugin, verrà visualizzato scrivendo anche il suo ID. Esempio:
{ modulepos 55 }
dove il numero 55 è L'ID univoco del modulo da visualizzare.
Fatta questa brevissima panoramica sul plugin, passiamo all'oggetto dell'articolo.
Step 1: Installare il plugin Modules Anywhere
Portarsi nella pagina del Plugin Modules Anywhere e premere il pulsante verde, in alto a destra, "Download Free".
Una volta scaricata la cartella zippata modulesanywhere-v7.12.0.zip (o superiore)
- effettuare il Login come amministratore di Joomla!
- selezionare Estensioni ⇒ Gestione ⇒ Installa
- nel tab Installa da file - pacchetto compresso trascinare e rilasciare la cartella compressa precedentemente scaricata (
modulesanywhere-v7.5.0.zip) - attendere qualche secondo che il sistema installi il plugin
- verrà visualizzato il messaggio che l'estensione è stata installata correttamente
- per accertarsi di ciò, portarsi in Estensioni ⇒ Plugin
- nel campo di ricerca, in alto a sinistra, digitare system
- nell'elenco dei plugin installati avremo System - Regular Labs - Modules Anywhere
- nell'editor di Joomla! verrà inserito un pulsante Modulo.
Step 2: Creare il modulo di ricerca
In questo passaggio verrà creato, se non già presente, il modulo di ricerca da inserire come sottovoce del menu di Joomla!
- selezionare, nel menu amministrativo, Estensioni ⇒ Moduli.
- si aprirà la pagina di amministrazione dei Moduli (Sito)
- premere il pulsante verde, in alto a sinistra, Nuovo
- la pagina successiva, Seleziona un tipo di modulo, contiene tutta la lista dei moduli che è possibile creare
- nella parte superiore individuare il modulo Cerca - Questo modulo visualizza un campo di ricerca
Il passaggio che verrà compiuto adesso sarà quello della creazione del modulo vero e proprio.
- Nel campo di testo Titolo * scrivere Cerca oppure Search (come meglio si preferisce)
- nella parte destra della pagina, dove c'è l'etichetta Mostra titolo, selezionare Nascondi
- compilare, o meno, gli altri campi ed alla fine premere il pulsante Salva e chiudi
Dopo aver creato il modulo, avremo la pagina con tutta la serie di moduli a disposizione.
Si faccia attenzione all'ID del modulo appena creato. Tale numero lo si trova all'estrema destra della riga del nome dei moduli. Nel mio caso è 93.
Step 3: Creare una voce di menu
Il modulo di ricerca appena creato è pronto per essere visualizzato come una normale voce, o sottovoce, del menu principale di Joomla!
- selezionare Menu ⇒ Menu Principale ⇒ Nuova voce di menu
- nel campo di testo Titolo voce di menu * scrivere {module 93}
- nel campo di testo Alias possiamo scrivere cerca o lasciarlo vuoto. Prenderà lo stesso nome scritto in Titolo
- come Tipo di voce di menu * fare click sul pulsante Seleziona
- nella pop-up che si apre, fare click su Voci di menu di sistema ⇒ Titolo separatore
- nella parte destra della schermata della Nuova voce di menu, selezionare in quale Menu verrà visualizzata la nuova voce. Nel mio caso Menu Principale
- se il modulo deve essere visualizzato in una sottovoce, selezionare la sua Voce principale
Per l'esempio in oggetto, possiamo lasciare tutti gli altri campi così come sono.
Step 4: Risultato finale
Dopo aver creato la voce di menu, salvare tutto e chiudere. Aggiornare la pagina da frontend ed avremo ottenuto il modulo Cerca come sottovoce di una voce di menu principale.
Modulo in sottovoce di menu Joomla! versione desktop
Modulo in sottovoce di menu Joomla! versione tablet/smartphone
Formattare la voce di menu contenente il modulo
Sicuramente la "nuova voce di menu" con all'interno il suo modulo necessiterà di una qualche formattazione via CSS.
Possiamo aprire la pagina in vista codice ed individuare l'HTML che è stato prodotto. E' molto semplice in quanto il produttore ha inserito nell'HTML commenti all'inizio ed alla fine:
<!-- START: Modules Anywhere --> <!-- END: Modules Anywhere -->
Tutto il codice che si trova tra questi due commenti, può essere tranquillamente formattato ed inserito nel file template.css del template.