Come inserire icone nel menu di WordPress

Come inserire icone nel menu di WordPress senza utilizzare un plugin? È molto semplice e in questa guida vedremo una semplice funzione molto leggera.

Se il tuo tema non supporta le icone nel menu non c’è bisogno di installare un plugin e caricare altro codice inutile, ti basta utilizzare questa semplice funzione in php.

Il risultato finale sarà simile a quello nella foto, puoi vederlo anche nel menu del nostro sito.

Prima di iniziare devi assicurarti di aver installato una libreria di icone personalizzate, io mi trovo molto bene con quelle fornite da Google. Ti lascio una guida per installarle correttamente a questo link.

Per prima cosa apri il file functions.php del tuo tema child e inserisci questa funzione:

add_action('init', function() {
  ?>
    <style media="screen">
    .menu-item::after {
      content: "keyboard_arrow_down";
      font-family: "Material Icons";
      font-size: 27px;
      display: flex;
    }
    </style>
  <?php
});

Se ricarichi la pagina principale vedrai che il menù ha cambiato aspetto ed è comparsa la tua icona.

Questa funzione aggiunge un elemento ::after ad ogni voce del menù che è possibile personalizzare a piacimento.

Puoi scegliere l’icona che preferisci dalla repository di Google disponibile a questo link.

Ora, con un po’ di codice CSS dovrai sistemare la dimensione, posizione e colore.

Questo codice in php serve per aggiungere icone a tutti gli oggetti del menù, vediamo ora caso per caso:

Icone solo nei menù a discesa

Per filtrare gli elementi desiderati, ad esempio solo i menù a discesa, dovrai cambiare la classe CSS a cui abbini il codice in questo modo:

add_action('init', function() {
  ?>
    <style media="screen">
    .menu-item-has-children::after {
      content: "keyboard_arrow_down";
      font-family: "Material Icons";
      font-size: 27px;
      display: flex;
    }
    </style>
  <?php
});

icone solo agli elementi dei menù a discesa

add_action('init', function() {
  ?>
    <style media="screen">
    ul.sub-menu li::after {
      content: "keyboard_arrow_down";
      font-family: "Material Icons";
      font-size: 27px;
      display: flex;
    }
    </style>
  <?php
});