Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

I messaggi di notifica permanenti nell'area admin di WordPress: Parte 4

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Persisted WordPress Admin Notices.
Persisted WordPress Admin Notices: Part 3

Italian (Italiano) translation by Cinzia Sgariglia (you can also view the original English article)

Finora in questa serie, abbiamo coperto due modi separati per ignorare gli avvisi permanenti di WordPress. Continueremo da qui in questa quarta e ultima parte della serie di esercitazioni guardando due metodi più specifici, per ignorare definitivamente le vostre notifiche. Chiuderemo il cerchio mostrando come creare il proprio tipo di avviso personalizzato e aggiungeremo delle decorazioni come le icone.

Avvisi fissi

Sappiamo già come visualizzare un avviso che può essere ignorato. Tutto quello che dobbiamo fare è aggiungere la classe CSS is-dismissible all'elemento div che la contiene. Tuttavia, questo è solo temporaneo e allontanerà solo l'avviso per la pagina corrente. Non appena la pagina viene ricaricata, riapparirà di nuovo.

Per renderlo definitivamente ignorabile richiede più codice di quello che abbiamo visto finora, ma non è troppo difficile da implementare. Diamo un'occhiata di cosa si tratta, iniziando con una panoramica.

Useremo un'opzione personalizzata per memorizzare lo stato di visualizzazione del nostro avviso. All'attivazione del plugin, questa opzione sarà creata/aggiornata e impostata su true. L'avviso allora si visualizzerà solo se l'opzione è attualmente vera.

La chiave per questo metodo è utilizzare Ajax per permetterci di impostare l'opzione su false quando viene fatto clic sul pulsante Ignora. Una volta correttamente impostato su false, il codice condizionale che controlla lo stato dell'opzione avrà esito negativo e non verrà più visualizzato l'avviso.

Iniziamo aggiungendo l'avviso stesso, che sarà un semplice avviso per iniziare. In Gwyer_Dismissible_Admin_Notices::init(), aggiungete una nuova chiamata add_action:

Quindi aggiungete la funzione di callback dismiss_admin_notice() alla stessa classe:

Questo aggiunge un avviso che viene visualizzato solo nella pagina admin del plugin ed è molto simile a quello che abbiamo visto nel precedente tutorial. L'unica leggera differenza qui è che abbiamo anche aggiunto un ID CSS al div contenitore dell'avviso. Questo servirà per indirizzare specificamente l'avviso che ci interessa.

Standard admin notice with custom CSS ID

Avremo bisogno di aggiungere del codice JavaScript per rendere la chiamata Ajax funzionante, quindi aggiungete una cartella js nella cartella del plugin principale admin-notices e create un file denominato admin-notices.js all'interno. Aggiungete il codice per il nuovo file per testare che stia caricando correttamente visualizzando un messaggio nella console.

In Gwyer_Plugin_Options::init(), aggiungete una nuova chiamata add_action per accodare il nostro file di script:

Vogliamo solo che questo file JavaScript sia caricato nella pagina opzioni del plugin, quindi abbiamo bisogno di un modo per accodarlo a esso condizionalmente. Possiamo farlo controllando quale pagina admin siamo attualmente in per vedere se è la nostra pagina di opzioni del plugin.

Possiamo ottenere un handle alla nostra pagina delle opzioni del plugin archiviando il valore restituito di add_options_page() in una proprietà di classe. Non avevamo bisogno di questo valore in precedenza, così abbiamo appena chiamato add_options_page() senza memorizzare il valore restituito.

Aggiungete una proprietà della classe a Gwyer_Plugin_Options:

Quindi, in create_admin_menu_page(), utilizzate questa nuova proprietà per archiviare l'handle nella nostra pagina di opzioni del plugin:

Possiamo infine accodare il nostro file JavaScript in modo che carichi solo nella pagina delle opzioni del plugin:

Se tutto è andato bene allora vedrete un messaggio di output admin-notices.js caricato! nella console del browser.

Admin notice JavaScript loaded

Aggiornate il codice JavaScript in admin-notices.php al seguente:

Qui, stiamo facendo attenzione per un evento click sull'ID CSS an1 che abbiamo aggiunto in precedenza al nostro avviso. Non appena questo viene selezionato, viene generata una richiesta Ajax. Gestiamo questa richiesta successiva.

In Gwyer_Dismissible_Admin_Notices::init(), aggiungete una nuova chiamata add_action:

Questo eseguirà la funzione di callback una volta che la richiesta Ajax display_dismissible_admin_notice è lanciata. Ricordate che questo è stato originariamente definito come la proprietà di data.action nella nostra richiesta Ajax.

Ora aggiungete la funzione di callback display_dismissible_admin_notice a Gwyer_Dismissible_Admin_Notices:

Salvate le vostre modifiche, ricaricate la pagina delle opzioni del plugin e fate clic sul pulsante ignora avviso per visualizzare la richiesta Ajax in azione!

The Ajax request in action

Se la richiesta è stata completata con successo allora vedrete un messaggio visualizzato richiesta Ajax in elaborazione... FATTO!  nella console del browser.

L'ultimo pezzo del puzzle è quello di creare un'opzione personalizzata inizialmente impostata su true ma che poi è impostata su false quando viene fatto clic sul pulsante Ignora. Quindi, quando viene caricata la pagina delle opzioni del plugin, l'avviso si visualizza solo se il valore dell'opzione personalizzata è true.

In Gwyer_Dismissible_Admin_Notices::init(), aggiungete una seconda chiamata a register_activation_hook():

E aggiungete la funzione di callback create_custom_option alla classe:

Ora, quando il plugin è attivato, un'opzione personalizzata chiamata gwyer-dismiss viene creata e impostata su true.

Aggiornate display_dismissible_admin_notice() per aggiornare la nostra opzione personalizzata quando Ajax richiede il lancio:

Ora tutto quello che resta da fare è aggiornare dismiss_admin_notice() per verificare il valore dell'opzione personalizzata e solo restituire l'avviso se è impostato su true.

Disattivate e riattivate il plugin per testare il codice che abbiamo aggiunto. Visitate la pagina delle opzioni del plugin, ignorate l'avviso e aggiornate la pagina. L'avviso dovrebbe non essere più visibile. Evviva!

Poiché l'opzione personalizzata è impostata su true ogni volta che il plugin è attivato, potete ripetere i passaggi precedenti per testare l'avviso ignorato tutte le volte che vi pare.

Per mantenere le cose semplici, questo era un esempio ridotto all'osso di utilizzo di una richiesta Ajax per impostare l'opzione di avviso personalizzato. In pratica, si consiglia di utilizzare un valore nonce (numero utilizzato una volta) per convalidare la richiesta Ajax come misura di sicurezza minima.

Questo è stato un sacco di lavoro solo per ignorare definitivamente un avviso, ma l'effetto finale funziona bene ed è qualcosa che potete utilizzare con buoni risultati nel vostro plugin.

Azione personalizzata per avviso rifiutato

È tempo di guardare a un metodo leggermente diverso per ignorare gli avvisi ora. Questo è un tipo seccante di avviso che viene visualizzato su tutte le schermate di amministrazione e non può essere chiuso fino a che un'azione è stata eseguita.

Nota: Utilizzate questo metodo con cautela o si rischia di alienarsi gli utenti del plugin molto rapidamente!

L'azione specifica su cui ci concentreremo nel nostro esempio sarà di visualizzare un avviso fino a quando un plugin richiesto o un elenco dei plugin siano stati installati e attivati.

A differenza del metodo precedente dove abbiamo dovuto saltare nei cerchi di fuoco per ottenere un avviso che fosse definitivamente ignorabile, la soluzione per questo metodo è piacevolmente semplice!

In primo luogo, commentate tutte le chiamate alla funzione in Gwyer_Dismissible_Admin_Notices::init(). Quindi, aggiungete una nuova funzione di add_action():

E definite la callback come segue:

Questo è tutto! Vi ho detto che era semplice, non è vero?

L'unica cosa che abbiamo fatto in modo diverso questa volta era di utilizzare la funzione di WordPress di is_plugin_active() per verificare se il plugin Hello Dolly è installato e attivato. In caso contrario, is_plugin_active() restituirà false, e il nostro avviso verrà visualizzato.

Example of a nag admin notice

Provate ad attivare il plugin Hello Dolly per verificare che l'avviso vada via.

Questo funziona bene per i singoli plugin, ma cosa succede se volevate ricordare agli utenti di attivare più plugin? Invece di codificare le informazioni del plugin Hello Dolly, potremmo creare una matrice per inserire in una whitelist i nostro plugin necessari.

Sostituite install_plugin_to_dismiss_admin_notice() con:

I plugin necessari sono ora memorizzati in un array che viene eseguito ciclicamente per controllare se ogni plugin è stato attivato. Per qualsiasi plugin non attualmente attivo, il nome viene aggiunto a una matrice $requires_activating che viene emesso tramite l'avviso come un elenco delimitato da virgole dei nomi dei plugin richiesti.

List of required plugins

Avvisi personalizzati

Prima di finire, divertiamoci un po' creando il nostro tipo di avviso personalizzato. Vediamo come aggiungere alcuni tipi di avviso personalizzato dei nostri. A questo punto avrete completa familiarità con i quattro avvisi integrati che WordPress fornisce per impostazione predefinita, ma non è così difficile mettere insieme alcuni dei nostri.

Prima, però, commentate tutte le chiamate alla funzione in Gwyer_Dismissible_Admin_Notices::init() così iniziamo da zero.

Avrete bisogno di aggiungere CSS ai nostri tipi di avviso personalizzati, così nella cartella plugin principale aggiungete una cartella css e create un file denominato admin-notices.css all'interno. Per accodarlo su tutte le pagine di amministrazione, aggiungete una nuova chiamata add_action in Gwyer_Plugin_Options::init().

Quindi, per il callback enqueue_styles(), aggiungete questo metodo alla stessa classe:

Ora creiamo un nuovo metodo per inviare nostri avvisi personalizzati. In Gwyer_Admin_Notices::init(), aggiungete:

Quindi aggiungere una callback per visualizzare una serie di avvisi personalizzati:

Infine, aggiungete CSS ad admin-notices.css per dare uno stile ai nostri avvisi personalizzati:

Dopo aver salvato le modifiche, caricate qualsiasi pagina admin per vedere i nostri avvisi personalizzati.

Some examples of custom admin notices

A giudicare dai risultati, è probabilmente una buona idea usare gli avvisi personalizzati con parsimonia, altrimenti si correrà il rischio che siano pacchiani.

Non entrerò nei dettagli circa il CSS personalizzato utilizzato. È solo per un po' di divertimento, e la maggior parte dello styling è abbastanza auto-esplicativo.

Abbiamo usato le icone di carattere dashicons per i nostri avvisi personalizzati per comodità in quanto sono disponibili in WordPress per impostazione predefinita. Ma è possibile importare e utilizzare le icone che vi piacciono per una decorazione supplementare.

Provate il codice voi stessi

Tutto il codice i questa serie di tutorial è stato inserito per voi in un plugin per WordPress da scaricare. Date un'occhiata al codice, estendete e implementate nuovi modi di visualizzare (e ignorare) gli avvisi. Assicuratevi di farmelo sapere nei commenti se create qualcosa di fantastico! Mi piacerebbe vedere con cosa mettete insieme.

Conclusione

Grazie per esservi uniti a me in questa serie di tutorial in quattro parti. Se tutto va bene avrete molta più fiducia su come implementare gli avvisi nei vostri progetti.

Abbiamo coperto molti aspetti diversi degli avvisi di WordPress, tra cui molteplici modi di ignorarli definitivamente, che non è possibile senza del codice personalizzato.

Creare le proprie notifiche personalizzate è anche abbastanza facile, ma in pratica vorrete usarli con parsimonia nei vostri progetti. Il più delle volte è meglio tenere per gli stili di WordPress predefiniti per un'esperienza utente coerente.

WordPress ha un'economia incredibilmente attiva. Ci sono temi, plugin, librerie, e molti altri prodotti che consentono di costruire il vostro sito e il vostro progetto. La natura open source della piattaforma, inoltre, lo rende una grande opzione con cui poter migliorare le vostre abilità di programmazione. In ogni caso, potete vedere ciò che abbiamo a disposizione sull'Envato Market.

E non dimenticate di scaricare il plugin e giocare con il codice. È un ottimo modo per ottenere una maggiore familiarità su come si incastrano tutti i pezzi. E per favore fatemi sapere i vostri pensieri sul tutorial attraverso i commenti qui sotto.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.