Come inserire icone nel menu di WordPress senza plugin

Come inserire icone nel menu di WordPress

  1. blog Come inserire icone nel menu di WordPress
event_available
schedule

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.

Come inserire icone nel menu di WordPress

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.

code

Come inserire icone nel menu di WordPress

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
});
check_circle

Leggi anche

Come creare sottomenu backend WordPress con add_submenu_page()
Scopri di più
Come creare pagina di amministrazione backend WordPress
Scopri di più
Cos'è il marketing mix
Scopri di più
Perché analizzare i competitor
Scopri di più
Come creare controlli personalizzati per Wp customizer
Scopri di più
Come inviare dati dei form con Ajax serialize() a php
Scopri di più
Elenco icone Google in un array in codice php
Scopri di più
Come usare le chiavi API Google
Scopri di più

Contattaci!

Preventivo sempre gratuito

perm_identity
alternate_email
phonelink_ring
message

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato.

message
perm_identity
alternate_email

keyboard_arrow_up