Le icone sono affascinanti!
Hanno il potere di comunicare rapidamente con il pubblico stabilendo una forte connessione visiva.
Questo è il motivo per cui le icone sono ampiamente utilizzate ovunque, inclusi i siti Web WordPress.
Inoltre, utilizzare lo stesso tema sul tuo sito per diversi mesi può essere noioso. È comune.
E poi, sarai alla ricerca di qualcosa di più interessante, usandolo, e ti annoierai di nuovo,
E il ciclo va avanti all’infinito…
Quindi, come puoi saltare quel ciclo di noia?
I Dashicon sono un ottimo modo!
Può ravvivare l’estetica del tuo sito e aiutarti a distinguerti. Ti eviterà anche di fare sforzi extra e di affollare il tuo sito con immagini non necessarie che rallentano la velocità della pagina.
Quindi, esploriamo i Dashicon e come puoi usarli in modo efficace sul tuo sito Web WordPress.
Sommario:
Cos’è WordPress Dashicons?
I Dashicon sono i font icona ufficiali di WordPress introdotti anni fa con la sua versione 3.8. Questi caratteri sono fantastici e fantastici da guardare se li usi sul tuo sito web. Sono file SVG di alta qualità che puoi ridimensionare facilmente a qualsiasi dimensione senza pixelizzazione.
Poiché possiedono il supporto nativo di WordPress perché sono stati creati dal loro stesso team, puoi usarli direttamente senza caricare script aggiuntivi. Sono inclusi circa 350 caratteri icona, che puoi trovare all’interno del funzionario Risorse per gli sviluppatori di WordPress.
Hanno classificato queste icone in base all’argomento, inoltre potresti vedere un campo di ricerca dinamico che ti consente di filtrare le icone disponibili.
Puoi utilizzare queste icone su:
- Cruscotto WordPress
- Menu di navigazione
- Pagine e post
- Metadati
- Elementi dell’editor
- Plugin e temi personalizzati
- Pannelli di amministrazione
- Design frontale
Hai notato che dico ripetutamente “icone”?
Qui, intendo solo i caratteri delle icone.
Non immagini sotto forma di icone.
Sì, c’è una differenza tra i due.
Sveliamolo.
Differenza tra icone immagine e caratteri icona?
I caratteri delle icone e le icone delle immagini sono in qualche modo simili, ma invece degli alfabeti, i simboli vettoriali sono presenti nei caratteri delle icone.
È diventato troppo tecnico?
Permettetemi di chiarirlo.
Fondamentalmente, questi font di icone assomigliano a immagini che puoi utilizzare per aggiungere simboli sul tuo sito Web, ma non a un’immagine reale.
Ti forniscono molti vantaggi.
Come?
Scoprilo nella prossima sezione.
Perché dovresti usarli?
- Scalabili come i testi utilizzati sul tuo sito Web in quanto sono caratteri
- Leggero che non influisce sulla velocità di caricamento della pagina rispetto alle immagini
- Capace di impostare il colore dell’icona tramite CSS e aggiungere proprietà extra come colore sfumato, ombra, ecc.
- Ottimo per salvare troppe richieste HTTP consentendoti di caricare i caratteri tutti in una volta, che puoi utilizzare nelle tue pagine. Se utilizzi molte immagini sul sito, dovrai fare molte richieste per recuperarle, il che aumenta il tempo di caricamento della pagina.
- Facile da usare e regolare rispetto alle immagini. Puoi aggiungere simboli riconoscibili e creativi senza bisogno di ricrearli ogni volta che hai bisogno di un’icona per un lettore video, e-mail, musica o qualsiasi altra cosa.
- Maggiore accessibilità perché sono integrati direttamente in WordPress
Come usarli?
Usare i Dashicon non è ingegneria missilistica.
Fidati di me; Conosco entrambi :0
Basta seguire alcuni passaggi indicati di seguito per iniziare con WordPress Dashicons.
Passaggio 1: abilita i Dashicon sul tuo sito WordPress
Prima di iniziare, abilita Dashicons dove ti serve, ad esempio un tema. Per questo, è necessario aggiungere alcuni codici al file function.php.
Per farlo:
- Per prima cosa, vai all’Editor tema/aspetto dalla dashboard di WordPress.
- Apri il file function.php.
- Scorri fino alla fine del file e aggiungi alcune righe di codice per accodare gli script
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}
L’esempio sopra è per abilitare Dashicons sul frontend.
Assicurati di creare un tema figlio prima di modificare il file functions.php. È perché se modifichi direttamente il file del tema e poi arriva un aggiornamento per quel tema, sovrascriverà tutte le modifiche apportate al file.
Passaggio 2: trova i codici HTML e CSS di Dashicon
WordPress.org offre una libreria di Dashicon, che ti aiuta a trovare i codici CSS e HTML appartenenti a ciascuna icona. Qui, vai su Risorse per gli sviluppatori per trovare i Dashicon che desideri utilizzare, quindi:
- Clicca sull’icona del tuo desiderio.
- Scegli tra “Copia CSS” o “Copia HTML” facendo clic su di esso.
- Ora vedrai una finestra pop-up. Basta copiare il codice negli appunti.
- Decidi dove vuoi utilizzare l’icona, come temi, metadati, menu di navigazione, ecc.
- Incolla il codice copiato nel widget di testo o nell’editor di testo del luogo scelto.
- Modifica l’aspetto dell’icona utilizzando CSS personalizzati
Questo è tutto.
Inoltre, per impostazione predefinita, tutte le icone hanno una dimensione di 20 pixel. Puoi cambiarlo utilizzando gli elementi CSS da opzioni come Inspect Element di Google Chrome o FireBug di Firefox.
Come ottenere il massimo dai Dashicon di WordPress?
Hai visto come puoi utilizzare Dashicons sul tuo sito e ora ne vedremo l’utilizzo per scopi specifici.
1. Utilizzo del menu di navigazione
Per aggiungere icone al menu, procedi nel seguente modo:
- Vai a Menu/Aspetto dalla dashboard
- Copia i codici HTML progettati per l’icona del menu da WordPress.org
- Incollalo su “Etichetta di navigazione” sulla dashboard
- Fare clic sul pulsante “Salva” e quindi caricare la home page. Dovrebbe visualizzare l’icona fresca e nitida.
2. Utilizzo su post meta
Sarai in grado di utilizzare Dashicons proprio davanti a una data, nome dell’autore, tag o categoria in base al tema più i dati visualizzati.
Poiché hai già accodato i Dashicon, apri il file style.css. Altrimenti, puoi anche optare per un editor CSS personalizzato, che non ti consente di perdere le modifiche dopo gli aggiornamenti del tema. Successivamente, aggiungi il tuo codice CSS dopo aver trovato un selettore corrispondente.
3. Sul backend di WordPress
Se desideri che vengano incluse icone diverse per diversi titoli di post personalizzati, tipi di post o widget, è facile.
Un consiglio rapido: crea uno shortcode
Per utilizzare facilmente Dashicons, puoi creare uno shortcode per esso. È utile, soprattutto quando crei un sito Web per i tuoi clienti che troverebbero facile inserire Dashicon senza scherzare con i codici.
Conclusione
Spero che le cose siano abbastanza chiare dalla tua parte per quanto riguarda WordPress Dashicons. Non solo coprono l’estetica del tuo sito web, ma sono anche facili da usare e migliorano la velocità di caricamento della pagina.
E sai, “bellezza e cervello” è una combinazione rara.
Quindi, sbrigati, usa quei Dashicon accattivanti sul tuo sito WordPress!