Come usare Dashicons in tema WordPress o Plugin

Insieme al rinnovato WP-Admin, WordPress 3.8 ha portato anche un set di icone nuove di zecca chiamate Dashicons. Dashicons è un'icona di carattere disegnata da Mel Choyce che è stata creata principalmente per accogliere la nuova interfaccia utente di WP-Admin, dall'editor della schermata dei contenuti al menu di amministrazione, come puoi vedere nello screenshot qui sotto.

Ora che WordPress lo usa per distribuire le icone in WP-Admin, dovresti usarlo anche nei temi e nei plugin. Utilizzando un set di icone di font, come Dashicons, puoi facilmente personalizzare l'output tramite CSS . Se sei uno sviluppatore che desidera aggiornare i tuoi plugin o temi, secondo l'ultimo design di WordPress e utilizzando le sue nuove proprietà, questo articolo è sicuramente per te.

Dashicons nel menu di amministrazione

Supponendo di incorporare il tipo di post personalizzato nel tema o nel plug-in, è possibile utilizzare Dashicons nel modo seguente. Tipo di messaggio personalizzato utilizza menu_icon per visualizzare l'icona. Prima di WordPress 3.8, è possibile aggiungere il percorso dell'icona dell'immagine al suo interno. Nella versione 3.8, questo parametro può essere utilizzato anche per dichiarare l'icona da Dashicons.

Per prima cosa, visita il sito web di Dashicons. Fare clic su una delle icone. Puoi vedere che l'icona selezionata si riflette nell'intestazione e visualizza il nome dell'icona con le opzioni per copiarla in diversi formati: CSS, HTML e Glifo.

Copia il nome dell'icona e aggiungilo nel menu_icon della tua funzione Custom Post Type, in questo modo. Tieni presente che ho rimosso il codice per mantenere questo articolo più breve. L'intera lunghezza del codice può essere trovata qui.

 $ args = array ('label' => __ ('book', 'book'), 'description' => __ ('Post Type Description', 'book'), 'labels' => $ labels, 'supports' => array (), 'taxonomies' => array ('category', 'post_tag'), 'menu_position' => 20, 'menu_icon' => 'dashicons-book', 'capability_type' => 'post', ) ; 

In questo esempio, ho creato un tipo di post personalizzato per pubblicare libri. E come puoi vedere qui sotto, l'icona del libro appare accanto ad essa.

Pagina del menu

I plugin possono anche utilizzare la funzione add_page_menu per aggiungere un menu di amministrazione. In questo caso, puoi semplicemente specificare il nome dell'icona Dashicons come sesto parametro. Nell'esempio seguente, verrà visualizzata l'icona "chiave inglese" nella nostra pagina Opzioni.

 function hkdc_custom_menu_page () {add_menu_page ('Opzioni Pagina', 'Opzioni', 'manage_options', 'myplugin / option.php', '', 'dashicons-admin-tools', 81); } add_action ('admin_menu', 'hkdc_custom_menu_page'); 

Dirigiti verso WP-Admin e dovresti vedere l'icona come mostrato.

Il fallback

Non dare per scontato che tutti gli utenti si aggiornino all'ultima versione di WordPress. In alcuni casi, non lo fanno. Potrebbero aver installato un plug-in per disattivare gli aggiornamenti automatici. Quindi, è necessario fornire un fallback che supporti la versione precedente di WordPress. Se non lo facciamo, il lato dell'icona apparirà come un'immagine spezzata (come quello che succede in questa immagine, accanto a Libri).

Prima di procedere, assicurarsi di aver inserito l'icona dell'immagine nella directory del tema o del plug-in. Quindi, possiamo specificare l'icona con una funzione condizionale, come segue:

Per prima cosa, impostiamo il valore predefinito, che utilizza i Dashicons.

 $ icon = 'dashicons-book-alt'; 

E sostituiamo il valore della variabile icona $ se è in WordPress 3.7 e sotto.

 if (version_compare ($ GLOBALS ['wp_version'], '3.8', '<')) {$ icon = get_template_directory_uri (). '/extra///hideout-lastation.com/img/book-brown.png'; } 

Sostituisci il parametro icona in Tipo di messaggio personalizzato (così come nella funzione add_menu_page ) con la variabile $icon .

 $ args = array ('label' => __ ('book', 'book'), 'description' => __ ('Post Type Description', 'book'), 'labels' => $ labels, 'supports' => array (), 'menu_position' => 20, 'menu_icon' => $ icon, ); register_post_type ('book', $ args); 

E abbiamo finito. Utilizzerà Dashicons per WordPress 3.8, mentre visualizzerà l'icona "immagine" nelle versioni precedenti.

Gboard arriverà presto ad Android

Sei mesi fa Google ha lanciato Gboard, una tastiera che viene fornita con Google Search Bar, su iOS . Lasciando fuori gli utenti Android al freddo. Questo non sarà più il caso in quanto Google sta incorporando presto Gboard per dispositivi Android .Per la maggior parte, la funzione di Gboard su Android è identica a quella di iOS. G

(Consigli tecnici e di design)

Vectr offre gratuitamente l'editor grafico per browser e desktop

Quante volte hai voluto creare un'icona vettoriale veloce o un semplice design dell'interfaccia? Questo è molto più semplice con un programma come Sketch, ma tutti i buoni software di progettazione costano anche soldi.Per fortuna c'è un nuovo bambino nel blocco di nome Vectr e sta prendendo d'assalto il mondo del design. È

(Consigli tecnici e di design)