Share
Finora in questa serie, abbiamo coperto due modi separati per ignorare le persistenti notifiche di amministrazione di WordPress. Su questa quarta ed ultima parte della serie di tutorial ci concentreremo su due metodi più specifici per eliminare definitivamente le tue notifiche di amministrazione. Completeremo le cose mostrando come creare i tuoi tipi di avviso di amministrazione personalizzati e aggiungere decorazioni come icone.
Sappiamo già come visualizzare un avviso di amministrazione che può essere eliminato. Tutto quello che dobbiamo fare è aggiungere il è-dismissible Classe CSS per l'elemento div contenente. Tuttavia, questo è solo temporaneo e rifiuterà solo l'avviso per la pagina corrente. Non appena la pagina si ricarica, riappare di nuovo.
Per renderlo definitivamente eliminabile è necessario più codice di quello che abbiamo visto finora, ma non è troppo difficile da implementare. Diamo un'occhiata a ciò che è coinvolto, iniziando con una panoramica.
Useremo un'opzione personalizzata per memorizzare lo stato di visualizzazione della nostra notifica di amministratore. All'attivazione del plug-in, questa opzione verrà creata / aggiornata e impostata su true. L'avviso di amministrazione verrà quindi visualizzato solo se l'opzione è attualmente true.
La chiave di questo metodo è l'utilizzo di Ajax per consentirci di impostare l'opzione su false quando viene fatto clic sul pulsante di annullamento. Una volta impostato correttamente su false, il codice condizionale che controlla lo stato dell'opzione fallirà e l'avviso di amministrazione non verrà più visualizzato.
Iniziamo aggiungendo l'avviso di amministrazione stesso, che sarà un semplice avviso per iniziare. Nel Gwyer_Dismissible_Admin_Notices :: init (), aggiungi un nuovo add_action chiamata:
Accentsconagua
add_action ('admin_notices', array ($ this, 'dismiss_admin_notice'));Quindi aggiungere il dismiss_admin_notice () funzione di callback per la stessa classe:
funzione pubblica dismiss_admin_notice () $ whitelist_admin_pages = array ('settings_page_admin-notice / plugin-options'); $ admin_page = get_current_screen (); if (in_array ($ admin_page-> base, $ whitelist_admin_pages)):?> Mi licenzia, se puoi. Hahaha!
Questo aggiunge un avviso di amministrazione che viene visualizzato solo nella pagina di amministrazione del plug-in ed è molto simile a quello che abbiamo visto nelle precedenti esercitazioni. L'unica piccola differenza qui è che abbiamo anche aggiunto un ID CSS alla notifica di amministrazione div contenitore. Questo verrà utilizzato per indirizzare in modo specifico l'avviso di amministratore a cui siamo interessati.
Dovremo aggiungere il codice JavaScript per far funzionare la chiamata Ajax, quindi aggiungi un js cartella nella radice admin-comunicazioni cartella di plugin e all'interno creare un file chiamato admin-notices.js. Aggiungi il codice al nuovo file per verificare che si carichi correttamente emettendo un messaggio di console.
jQuery (document) .ready (function ($) console.log ('admin-notices.js caricato!'););Nel Gwyer_Plugin_Options :: init (), aggiungi un nuovo add_action chiama per accodare il nostro file di script:
add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_scripts'));Vogliamo solo caricare questo file JavaScript nella pagina delle opzioni del plugin, quindi abbiamo bisogno di un modo per accodarlo in modo condizionale. Possiamo farlo controllando la pagina di amministrazione in cui ci troviamo attualmente per vedere se è la nostra pagina delle opzioni di plug-in.
Possiamo ottenere un handle per la nostra pagina delle opzioni del plugin memorizzando il valore restituito di add_options_page () in una proprietà di classe. Non avevamo bisogno di questo valore in precedenza, quindi abbiamo appena chiamato add_options_page () senza memorizzare il valore di ritorno.
Aggiungi una proprietà di classe a Gwyer_Plugin_Options:
protetto $ plugin_options_page;
Quindi, in create_admin_menu_page (), usa questa nuova proprietà per memorizzare l'handle nella nostra pagina delle opzioni del plugin:
funzione pubblica create_admin_menu_page () $ this-> plugin_options_page = add_options_page ('Avvisi di amministratore', 'Avvisi di amministratore', 'manage_options', __FILE__, array ($ this, 'render_options_page')); Possiamo finalmente accodare il nostro file JavaScript in modo che venga caricato solo sulla pagina delle opzioni del plugin:
funzione pubblica enqueue_scripts ($ hook) if ($ hook! = $ this-> plugin_options_page) return; wp_enqueue_script ('gwyer-admin-notice-js', plugin_dir_url (__FILE__). 'js / admin-notices.js'); Se tutto è andato bene, vedrai un admin-note.js caricato! messaggio emesso nella console del browser.
Aggiorna il codice JavaScript in admin-notices.php al seguente:
jQuery (document) .ready (function ($) $ (document) .on ('click', '# an1 .notice-dismiss', function (event) data = action: 'display_dismissible_admin_notice',; $. post (ajaxurl, data, function (response) console.log (risposta, 'DONE!'););););Qui, stiamo ascoltando un evento click sul AN1 CSS ID che abbiamo aggiunto alla nostra notifica di amministratore in precedenza. Non appena viene fatto clic, viene attivata una richiesta Ajax. Gestiamo la richiesta in seguito.
Nel Gwyer_Dismissible_Admin_Notices :: init (), aggiungi un nuovo add_action chiamata:
add_action ('wp_ajax_display_dismissible_admin_notice', array (& $ this, 'display_dismissible_admin_notice'));Questo eseguirà la funzione di callback una volta il display_dismissible_admin_notice Gli incendi della richiesta Ajax. Ricorda che questo originariamente era definito come il data.action proprietà nella nostra richiesta Ajax.
Ora aggiungi il display_dismissible_admin_notice funzione di callback a Gwyer_Dismissible_Admin_Notices:
public function display_dismissible_admin_notice () echo "Elaborazione richiesta Ajax ..."; wp_die ();
Salvare le modifiche, ricaricare la pagina delle opzioni del plug-in e fare clic sul pulsante Ignora notifica admin per visualizzare la richiesta Ajax in azione!
Se la richiesta ha avuto successo, vedrai a Elaborazione della richiesta Ajax ... FATTO! messaggio visualizzato nella console del browser.
Il pezzo finale del puzzle è creare un'opzione personalizzata inizialmente impostata su true ma che viene quindi impostata su false quando viene fatto clic sul pulsante di annullamento. Quindi, quando viene caricata la pagina delle opzioni del plug-in, l'avviso di amministrazione viene visualizzata solo se il valore dell'opzione personalizzata è true.
Nel Gwyer_Dismissible_Admin_Notices :: init (), aggiungi una seconda chiamata a register_activation_hook ():
register_activation_hook (plugin_dir_path (__FILE__). 'admin-notices.php', array ($ this, 'create_custom_option'));
E aggiungi il create_custom_option funzione di callback alla classe:
funzione pubblica create_custom_option () update_option ('gwyer-dismiss', true); Ora, quando il plugin è attivato, viene chiamata un'opzione personalizzata Gwyer-respingere viene creato e impostato su vero.
Aggiornare display_dismissible_admin_notice () per aggiornare la nostra opzione personalizzata quando viene attivata la richiesta Ajax:
public function display_dismissible_admin_notice () update_option ('gwyer-dismiss', false); wp_die (); Ora tutto ciò che resta da fare è aggiornare dismiss_admin_notice () per verificare il valore dell'opzione personalizzata e visualizzare solo l'avviso di amministratore se è impostato su true.
funzione pubblica dismiss_admin_notice () $ whitelist_admin_pages = array ('settings_page_admin-notice / plugin-options'); $ admin_page = get_current_screen (); $ display_status = get_option ('gwyer-dismiss'); if (in_array ($ admin_page-> base, $ whitelist_admin_pages) && $ display_status):?> Mi licenzia, se puoi. Hahaha!
Disattiva e riattiva il plug-in per testare il codice che abbiamo aggiunto. Visita la pagina delle opzioni del plug-in, elimina l'avviso di amministrazione e aggiorna la pagina. L'avviso non dovrebbe più essere visibile. Sìì!
Poiché l'opzione personalizzata è impostata su true ogni volta che il plug-in è attivato, puoi ripetere i passaggi precedenti per testare l'avviso amministrativo respinto tutte le volte che vuoi.
Per semplificare le cose, questo era un esempio essenziale di utilizzo di una richiesta Ajax per impostare l'opzione di notifica dell'amministratore personalizzato. In pratica, si vorrebbe usare un valore nonce (numero usato una volta) per convalidare la richiesta Ajax come misura minima di sicurezza.
Questo è stato un sacco di lavoro per eliminare definitivamente un avviso di amministrazione, ma l'effetto finale funziona bene ed è qualcosa che puoi usare con buoni risultati nei tuoi plugin.
Avviso di amministrazione azioni personalizzate Licenziamento
È ora di guardare un metodo leggermente diverso per respingere le notifiche di amministrazione ora. Questo è un tipo nag di avviso di amministrazione che viene visualizzato su tutte le schermate di amministrazione e non può essere rimosso fino a quando non è stata eseguita un'azione.
Nota: utilizzare questo metodo con cautela o rischi di alienare gli utenti del plug-in molto rapidamente!
L'azione specifica su cui ci concentreremo nel nostro esempio sarà la visualizzazione di un avviso di amministrazione fino a quando un plugin o un elenco di plug-in richiesti non saranno stati installati e attivati.
A differenza del metodo precedente in cui dovevamo saltare i cerchi per ottenere la notifica di un amministratore da poter essere permanentemente eliminabile, la soluzione per questo metodo è semplice!
Innanzitutto, commenta tutte le chiamate di funzione in Gwyer_Dismissible_Admin_Notices :: init (). Quindi, aggiungi un nuovo add_action () funzione:
add_action ('admin_notices', array ($ this, 'install_plugin_to_dismiss_admin_notice'));E definire la richiamata come segue:
public function install_plugin_to_dismiss_admin_notice () if (! is_plugin_active ('hello-dolly / hello.php')):?> Si prega di installare e attivare il Ciao Dolly collegare.
Questo è tutto ciò che c'è da fare! Te l'ho detto che era semplice, no??
L'unica cosa che abbiamo fatto diversamente stavolta era usare il is_plugin_active () Funzione WordPress per verificare se il plugin Hello Dolly è installato e attivato. Altrimenti, is_plugin_active () restituirà false e verrà visualizzata la nostra notifica di amministratore.
Prova ad attivare il plugin Hello Dolly per verificare che l'avviso di amministrazione scompaia.
Funziona bene per singoli plugin, ma cosa succede se si desidera ricordare agli utenti di attivare più plug-in? Invece di hard-coding nelle informazioni del plugin Hello Dolly, potremmo creare una matrice per autorizzare i nostri plugin richiesti.
Sostituire install_plugin_to_dismiss_admin_notice () con:
public function install_plugin_to_dismiss_admin_notice () $ required_plugins = array ('Hello Dolly' => 'hello-dolly / hello.php', 'Akismet' => 'akismet / akismet.php'); $ requires_activating = array (); foreach ($ required_plugins as $ required_plugin_name => $ required_plugin_path) if (! is_plugin_active ($ required_plugin_path)) array_push ($ require_activating, $ required_plugin_name); if (! empty ($ requires_activating)):?> Installa e attiva i seguenti plugin: .
I plug-in richiesti sono ora archiviati in una matrice che viene ripetuta per verificare se ciascun plugin è stato attivato. Per ogni plug-in non attualmente attivo, il nome viene aggiunto a $ requires_activating array che viene emesso tramite l'avviso di amministrazione come elenco separato da virgole di nomi di plug-in richiesti.
Avvisi di amministrazione personalizzati
Prima che finiamo, divertiamoci creando i nostri tipi di avviso di amministrazione personalizzati. Vediamo come aggiungere alcuni tipi di avvisi di amministrazione personalizzati. Ormai conoscerai perfettamente le quattro notifiche amministrative predefinite fornite da WordPress per impostazione predefinita, ma non è così difficile trovare alcuni dei nostri.
Innanzitutto, commenta tutte le chiamate di funzione Gwyer_Dismissible_Admin_Notices :: init () così iniziamo su una lavagna pulita.
Dovremo aggiungere CSS per i nostri tipi di avviso di amministrazione personalizzati, quindi nella cartella del root plug aggiungere a css cartella e all'interno creare un file chiamato admin-notices.css. Per accodarlo su tutte le pagine di amministrazione, aggiungi un nuovo add_action chiamare Gwyer_Plugin_Options :: init ().
add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_styles'));Quindi, per il enqueue_styles () callback, aggiungi questo metodo alla stessa classe:
public function enqueue_styles () wp_enqueue_style ('gwyer-admin-notice-css', plugin_dir_url (__FILE__). 'css / admin-notices.css'); Ora impostiamo un nuovo metodo per generare le nostre notifiche di amministrazione personalizzate. Nel Gwyer_Admin_Notices :: init (), Inserisci:
add_action ('admin_notices', array ($ this, 'custom_admin_notices'));Quindi aggiungi una richiamata per visualizzare una serie di avvisi di amministrazione personalizzati:
/ ** * Emetti avvisi di amministrazione personalizzati. * / public function custom_admin_notices () ?> Houston, sicuramente penso che abbiamo un problema!
Congratulazioni, hai vinto il premio come utente amministratore dell'anno!
Questa è una grande idea.
Connettiamoci!
Unisciti a Neo e segui il coniglio bianco. Se lo vedi dargli questa carota. Il coniglio che è, non Neo!
Infine, aggiungi CSS a admin-notices.css per personalizzare le nostre notifiche amministrative personalizzate:
.notice-big-error border: 3px rosso fisso; -webkit-transform: rotateZ (-1deg); -ms-transform: rotateZ (-1deg); transform: ruotareZ (-1deg); .notice-admin-user-award border-left: 5px solido viola; .notice-admin-user-award p: before font: normal 24px / 1 'dashicons'; contenuto: "\ f313"; colore viola; .notice-light-bulb border-right: 5px solid # e2e224; .notice-light-bulb p: before font: normal 22px / 1 'dashicons'; contenuto: "\ f339"; colore: # e6e610; .notice-social-media border-left: 5px solid # 1da25f; imbottitura-fondo: 5px; .notice-social-media p padding-bottom: 0; margin-bottom: 4px; .notice-social-media: after font: normal 22px / 1 'dashicons'; contenuto: "\ f301 \ f304 \ f462"; colore: # 888; .notice-neo border-right: 10px solid orangered; border-left: 10px solid orangered; .notice-neo p: before font: normal 22px / 1 'dashicons'; contenuto: "\ f511"; colore: in pericolo di estinzione;
Dopo aver salvato le modifiche, carica qualsiasi pagina di amministrazione per vedere le nostre notifiche di amministrazione personalizzate.
A giudicare dai risultati, è probabilmente una buona idea usare con parsimonia i messaggi di amministrazione personalizzati, altrimenti corri il rischio che sembrino sgargianti.
Non entrerò nei dettagli sul CSS personalizzato usato. È solo per un po 'di divertimento, e la maggior parte dello stile è abbastanza auto-esplicativo.
Abbiamo utilizzato le icone dei caratteri di dashicons per le nostre notifiche di amministrazione personalizzate per comodità in quanto sono disponibili nell'amministratore di WordPress per impostazione predefinita. Ma puoi importare e utilizzare qualsiasi icona che ti piace per decorazioni extra.
Prova il codice per te stesso
Tutto il codice di questa serie di tutorial è stato incluso in un plugin per WordPress da scaricare. Dai un'occhiata al codice, estendilo e implementa nuovi modi per visualizzare (e ignorare) le notifiche di amministrazione. Assicurati di farmi sapere nei commenti se crei qualcosa di interessante! Mi piacerebbe vedere cosa ti viene in mente.
Conclusione
Grazie per esserti unito a me in questa serie di tutorial in quattro parti. Si spera che ora avrete molta più fiducia nel modo in cui implementate le notifiche di amministrazione nei vostri progetti.
Abbiamo coperto molti aspetti diversi delle notifiche di amministrazione di WordPress, inclusi diversi modi per eliminarli definitivamente, cosa che non è possibile senza codice personalizzato.
Creare le tue notifiche amministrative personalizzate è abbastanza facile, ma in pratica dovresti usarle con parsimonia nei tuoi progetti. La maggior parte delle volte è meglio mantenere 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 ti aiutano a costruire il tuo sito e progetto. La natura open source della piattaforma lo rende anche un'ottima opzione da cui puoi migliorare le tue capacità di programmazione. In ogni caso, puoi vedere ciò che abbiamo a disposizione nel mercato Envato.
E non dimenticare di scaricare il plug-in e giocare con il codice. È un ottimo modo per familiarizzare con il modo in cui tutti i pezzi si incastrano. E per favore fammi sapere i tuoi pensieri sul tutorial tramite i commenti qui sotto.
