whatsapp
keyboard_arrow_down Contatti

Venerdì

26

Gennaio 2024

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

Ti è piaciuto questo articolo?

favorite thumb_down
Autore articolo

Fabio

Sono un terribile realista. Pratico e determinato ma anche un grande sognatore, ecco perché do continuamente vita a nuovi progetti online e non. Nel 2019 ho fondato Eureka Web proprio per rendere possibile tutto questo. Insieme possiamo realizzare la tua idea!


Visita il sito
library_books

Leggi anche

Come fare redirect in WordPress senza plugin
Scopri
Come recuperare utenti WordPress e dati senza plugin
Scopri
Recuperare l'ultimo elemento di un array in php
Scopri

Contattami

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. I campi obbligatori sono contrassegnati *

message
perm_identity
alternate_email

keyboard_arrow_up