it-swarm.dev

Aggiungi html nel campo del titolo del menu

Questo è il mio bisogno, voglio aggiungere un tag html al titolo del menu. Voglio aggiungere alcune icone davanti a ciascun titolo di menu nel frontend.

Voglio questo risultato:

<li class="active">
 <a href="index.html">
  <i class="fa fa-dashboard"></i>
  Dashboard
 </a>
</li>

Quando provo ad aggiungere il <i class="fa fa-dashboard"></i> nel campo del titolo del menu il filtro di Joomla lo rimuove.

Esiste un modo per memorizzarlo e visualizzarlo nel modulo menu?

Grazie.

6
lucasm107

Come ha sottolineato @Valentin, una sostituzione del menu è il modo corretto di risolverlo. Tuttavia, se non hai familiarità con le sostituzioni di Joomla e PHP, una rapida alternativa è quella di utilizzare RokCandy (o qualsiasi altro estensione snippet ). Fondamentalmente, questi plugin sostituiranno il tuo codice non HTML con codice HTML, evitando così i filtri Joomla.

Per ottenere ciò che stai cercando di fare utilizzando RokCandy, crea una nuova macro:

Macro

[fa]{icon}[/fa]

[~ ~ #] HTML [~ ~ #]

<i class="{icon}"></i>

Salva e chiudi la tua macro. Ora nella tua voce di menu, imposta il titolo su questo:

[fa]fa fa-dashboard[/fa] Dashboard

Infine, devi impostare i campi Alias e Titolo pagina browser (sotto Visualizzazione pagina) su "Dashboard" ( o quello che vuoi) o il titolo del tuo browser sarà [fa]fa fa-dashboard[/fa] Dashboard.

enter image description here

3
johanpw

Se il tuo modello lo supporta, dovresti avere ID di classe numerici per ogni voce di menu. Se ce l'hai, o se puoi aggiungerlo al tuo modello/menu, probabilmente è più sicuro usare solo CSS e dare uno stile a quelle voci di menu in quel modo.

Quindi, se la tua voce di menu dice classe 155, probabilmente apparirà nella riga li come:

<li class="active item155">

Quindi, di nuovo, seguendo la tua struttura, faresti qualcosa del genere nel tuo CSS:

li.item155 a i:before {font-family:FontAwesome;content: "\f0ce";}

Dove\f0ce è il fantastico codice del carattere per quell'icona desiderata.

Se non possiedi questi ID di menu, puoi spostarli con li: nth-child (x) dove x è la voce di menu in ordine dal primo all'ultimo. Quindi, per definire lo stile della voce di menu numero 3, devi fare questo:

li:nth-child(3) a i:before {font-family:FontAwesome;content: "\f0ce";}

Se lo usi, non sono sicuro di quanto tempo funzioni con i browser, ma significa che non devi scavalcare nulla.

6
Brian Peat

No, non è necessario aggiungere HTML a una voce di menu. A volte quando Joomla rimuove le cose per te è perché non dovresti farlo in quel modo (anche se era molto più semplice).

Ciò di cui hai bisogno è una sostituzione del modello per mod_menu.

Maggiori informazioni sulle sostituzioni dei modelli nella documentazione: Come sovrascrivere l'output dal core di Joomla!

4
Valentin Despa

Il modo corretto per raggiungere questo obiettivo è in realtà il più semplice e non richiede plug-in o sostituzioni, basta aggiungere la classe icona al collegamento nelle opzioni delle voci di menu:

enter image description here

2
Seth Warburton