Persisted WordPress Admin-meddelanden Del 4

Hittills i denna serie har vi täckt två separata sätt att avvisa vidhållna WordPress-administrativa meddelanden. Vi bygger vidare på den här fjärde och sista delen av handledningsserien genom att titta på två mer specifika metoder för att permanent avvisa dina administrativa meddelanden. Vi runda saker genom att visa hur du skapar dina egna anpassade meddelandetyper och lägger till dekorationer som ikoner.

Sticky Admin Meddelande

Vi vet redan hur man visar ett administrativ meddelande som kan avfärdas. Allt vi behöver göra är att lägga till är-dismissible CSS klass till det innehållande div-elementet. Detta är dock endast tillfälligt och kommer bara att avvisa meddelandet för den aktuella sidan. Så snart som sidan laddas upp visas det igen.

Att göra det permanent avvisande innebär mer kod än vad vi hittills har sett, men det är inte så svårt att genomföra. Låt oss ta en titt på vad som är inblandat, med en översikt.

Vi använder ett anpassat alternativ för att lagra visningsstatus för vårt administrativa meddelande. Vid pluginaktivering kommer detta alternativ att skapas / uppdateras och sätts till true. Adminmeddelandet kommer då bara att visas om alternativet för närvarande är sant.

Nyckeln till den här metoden är att använda Ajax så att vi kan ställa in alternativet till falskt när avvisningsknappen klickas. När den väl är inställd på fel, misslyckas den villkorliga koden som kontrollerar alternativstatusen, och adminmeddelandet visas inte längre.

Låt oss börja med att lägga till adminmeddelandet själv, vilket kommer att vara ett vanligt meddelande att börja. I Gwyer_Dismissible_Admin_Notices :: init (), lägg till en ny add_action ring upp:

add_action ('admin_notices', array ($ this, 'dismiss_admin_notice'));

Lägg sedan till dismiss_admin_notice () återuppringningsfunktion till samma klass:

allmän funktion dismiss_admin_notice () $ whitelist_admin_pages = array ('settings_page_admin-notices / plugin-options'); $ admin_page = get_current_screen (); om (in_array ($ admin_page-> bas, $ whitelist_admin_pages)):?> 

Förvisa mig, om du kan. Ha ha ha!

Detta lägger till ett administrativ meddelande som bara visas på administratörssidan för plugin och liknar det som vi har sett i tidigare handledning. Den enda obetydliga skillnaden här är att vi också har lagt till ett CSS-ID i administrativ meddelande div behållare. Detta kommer att användas för att specifikt rikta in det administrativa meddelande som vi är intresserade av.

Vi måste lägga till JavaScript-kod för att Ajax-samtalet ska fungera, så lägg till en js mapp i roten admin-meddelanden plugin mapp och inuti skapa en fil som heter admin-notices.js. Lägg till kod till den nya filen för att testa den laddas korrekt genom att skriva ut ett konsolmeddelande.

jQuery (dokument) .ready (funktion ($) console.log ('admin-notices.js loaded!'););

I Gwyer_Plugin_Options :: init (), lägg till en ny add_action Ring för att skicka in vår skriptfil:

add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_scripts'));

Vi vill bara att den här JavaScript-filen ska laddas på plugin-optionssidan, så vi behöver ett sätt att villkorligt kvittra den. Vi kan göra det genom att kolla vilken administratörssida vi är på för att se om det är vår plugin-options sida.

Vi kan få ett handtag till vår plugin options sida genom att lagra returvärdet på add_options_page () i en klassfastighet. Vi hade tidigare inte behov av det här värdet, så vi ringde bara add_options_page () utan att lagra returvärdet.

Lägg till en klassegenskap till Gwyer_Plugin_Options:

skyddad $ plugin_options_page;

Sedan i create_admin_menu_page (), använd den här nya egenskapen för att lagra handtaget till vår plugin options sida:

allmän funktion create_admin_menu_page () $ this-> plugin_options_page = add_options_page ('Admin notices', 'Admin notices', 'manage_options', __FILE__, array ($ this, 'render_options_page')); 

Vi kan äntligen skämma bort vår JavaScript-fil så att den bara laddas på pluginalternativssidan:

public function 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'); 

Om allt gick bra så ser du en admin-notices.js laddade! meddelande utmatat till webbläsarkonsolen.

Uppdatera JavaScript-koden i admin-notices.php till det följande:

jQuery (dokument) .ready (funktion ($) $ (dokument) .on ('klicka', '# an1 .notice-dismiss', funktion (händelse) data = action: 'display_dismissible_admin_notice',; $; post (ajaxurl, data, funktion (svar) console.log (svar, 'DONE!'););););

Här lyssnar vi på ett klickhändelse på AN1 CSS ID vi lagt till i vårt administrativ meddelande tidigare. Så snart den klickas, avfyras en Ajax-förfrågan. Låt oss hantera den här förfrågan nästa.

I Gwyer_Dismissible_Admin_Notices :: init (), lägg till en ny add_action ring upp:

add_action ('wp_ajax_display_dismissible_admin_notice', array (& $ this, 'display_dismissible_admin_notice'));

Detta kommer att köra återuppringningsfunktionen en gång till display_dismissible_admin_notice Ajax-förfrågan bränder. Kom ihåg att detta ursprungligen definierades som data.action egendom i vår Ajax-förfrågan.

Lägg nu till display_dismissible_admin_notice återuppringningsfunktion till Gwyer_Dismissible_Admin_Notices:

allmän funktion display_dismissible_admin_notice () echo "Behandling av Ajax-förfrågan ..."; wp_die (); 

Spara dina ändringar, ladda om pluginalternativssidan och klicka på aviseringsknappen för administrativ meddelande för att se Ajax-förfrågan i aktion!

Om förfrågan lyckades ser du en Behandling av Ajax-förfrågan ... GJUT! meddelande som visas i webbläsarkonsolen.

Det sista stycket av pusslet är att skapa ett anpassat alternativ som ursprungligen är satt till true men som då är inställt på falskt när avvisningsknappen klickas. Då, när pluginalternativssidan laddas, visas adminmeddelandet endast om det anpassade alternativvärdet är sant.

I Gwyer_Dismissible_Admin_Notices :: init (), lägg till ett andra samtal till register_activation_hook ():

register_activation_hook (plugin_dir_path (__FILE__). 'admin-notices.php', array ($ this, 'create_custom_option'));

Och lägg till create_custom_option återuppringningsfunktion till klassen:

allmän funktion create_custom_option () update_option ("gwyer-dismiss", true); 

Nu när plugin är aktiverad kallas ett anpassat alternativ gwyer-ogilla är skapad och inställd på Sann.

Uppdatering display_dismissible_admin_notice () för att uppdatera vårt anpassade alternativ när Ajax-förfrågan brinner:

allmän funktion display_dismissible_admin_notice () update_option ('gwyer-dismiss', false); wp_die (); 

Nu är allt som är kvar att göra uppdatering dismiss_admin_notice () för att söka efter värdet av det anpassade alternativet och bara göra adminmeddelandet om det är satt till true.

allmän funktion dismiss_admin_notice () $ whitelist_admin_pages = array ('settings_page_admin-notices / plugin-options'); $ admin_page = get_current_screen (); $ display_status = get_option ('gwyer-dismiss'); om (in_array ($ admin_page-> bas, $ whitelist_admin_pages) && $ display_status):?> 

Förvisa mig, om du kan. Ha ha ha!

Inaktivera och reaktivera pluginet för att testa koden vi har lagt till. Besök pluginalternativsidan, avvisa adminmeddelandet och uppdatera sidan. Meddelandet bör inte längre vara synligt. Jippie!

Eftersom det anpassade alternativet är satt till true varje gång plugin-enheten är aktiverad kan du upprepa ovanstående steg för att testa det uppsägbara administrativa meddelandet så många gånger du vill.

För att hålla sakerna enkla, var detta ett blott ben exempel på att använda en Ajax-förfrågan för att ställa in den anpassade adminmeddelandet. I praktiken vill du använda ett nonce (number used once) värde för att validera Ajax-förfrågan som ett minimum säkerhetsåtgärd.

Det här var mycket arbete för att bara permanent avvisa ett administrativ meddelande, men den slutgiltiga effekten fungerar bra och är något du kan använda till god effekt i dina egna plugins.

Anpassad åtgärd Admin Meddelande Avvisande

Det är dags att titta på en något annorlunda metod för att avvisa administrativa meddelanden nu. Detta är en nagtyp av adminmeddelande som visas på alla administratörsskärmar och kan inte avfärdas förrän någon åtgärd har utförts.

Obs! Använd den här metoden med försiktighet, eller riskera att du alienerar dina plugin-användare mycket snabbt!

Den specifika åtgärd vi kommer att fokusera på i vårt exempel är att visa ett administrativ meddelande tills ett obligatoriskt plugin eller en lista över plugins har installerats och aktiverats.

Till skillnad från den tidigare metoden där vi var tvungna att hoppa genom hoops för att få ett administrativt meddelande att avbrytas permanent är lösningen för denna metod uppfriskande enkel!

Först, kommentera alla funktionssamtal i Gwyer_Dismissible_Admin_Notices :: init (). Lägg sedan till en ny add_action () fungera:

add_action ('admin_notices', array ($ this, 'install_plugin_to_dismiss_admin_notice'));

Och definiera återuppringningen enligt följande:

allmän funktion install_plugin_to_dismiss_admin_notice () if (! is_plugin_active ('hello-dolly / hello.php')):?> 

Vänligen installera och aktivera Hej Dolly plugin.

Det är allt det finns! Jag sa att det var enkelt, gjorde jag inte?

Det enda vi gjorde annorlunda den här gången var att använda is_plugin_active () WordPress-funktionen för att testa om Hello Dolly-plugin är installerat och aktiverat. Om inte, is_plugin_active () kommer att returnera falskt, och vår admin meddelande kommer att visas.

Prova att aktivera Hello Dolly-plugin för att verifiera att administrativ meddelande går bort.

Det här fungerar bra för enskilda plugins, men vad händer om du vill påminna användare om att aktivera flera plugins? Istället för hårdkodning i Hello Dolly-plugininformationen kunde vi skapa en matris för att lista över våra nödvändiga plugins.

Byta ut install_plugin_to_dismiss_admin_notice () med:

allmän funktion install_plugin_to_dismiss_admin_notice () $ required_plugins = array ('Hello Dolly' => 'hej-dolly / hello.php', 'Akismet' => 'akismet / akismet.php'); $ requires_activating = array (); foreach ($ required_plugins as $ required_plugin_name => $ required_plugin_path) om (! is_plugin_active ($ required_plugin_path)) array_push ($ requires_activating, $ required_plugin_name);  om (! tomt ($ requires_activating)):?> 

Installera och aktivera följande plugins: .

De obligatoriska pluginsna lagras nu i en array som lutas över för att kontrollera om varje plugin har aktiverats. För alla plugin som inte är aktiva, läggs namnet till en $ requires_activating array som utmatas via adminmeddelandet som en kommaseparerad lista med nödvändiga plugin namn.

Anpassade administratörsmeddelanden

Innan vi avslutar, låt oss ha lite roligt genom att skapa egna anpassade typer av administrativa meddelanden. Låt oss se hur du lägger till egna anpassade administrativa meddelandetyper. Nu är du fullt bekant med de fyra inbyggda adminmeddelandena WordPress tillhandahåller som standard, men det är inte så svårt att komma med några av våra egna.

Först, men kommentera alla funktionssamtal i Gwyer_Dismissible_Admin_Notices :: init () så vi börjar på en ren skiffer.

Vi måste lägga till CSS för våra anpassade administrativ meddelandetyper, så lägg till en i mappen root plugin css mapp, och inuti skapa en fil som heter admin-notices.css. För att bekräfta det på alla administratorsidor, lägg till en ny add_action inkalla Gwyer_Plugin_Options :: init ().

add_action ('admin_enqueue_scripts', array ($ this, 'enqueue_styles'));

Då, för enqueue_styles () återuppringning, lägg till den här metoden i samma klass:

offentlig funktion enqueue_styles () wp_enqueue_style ('gwyer-admin-notice-css', plugin_dir_url (__FILE__). 'css / admin-notices.css'); 

Låt oss nu skapa en ny metod för att utmata våra anpassade adminmeddelanden. I Gwyer_Admin_Notices :: init (), Lägg till:

add_action ('admin_notices', array ($ this, 'custom_admin_notices'));

Lägg sedan till en återuppringning för att visa en serie anpassade adminmeddelanden:

 / ** * Utgåva anpassade administrativa meddelanden. * / allmän funktion custom_admin_notices () ?> 

Houston, jag tror definitivt att vi har ett problem!

Grattis, du har vunnit Admin-användaren av årets pris!

Nu är det här en bra idé.

Låt oss ansluta!

Gå med i Neo och följ den vita kaninen. Om du ser honom ge honom denna morot. Kaninen som är, inte Neo!

Slutligen lägg till CSS till admin-notices.css att utforma våra anpassade adminmeddelanden:

.notice-big-error border: 3px solid red; -webkit-transform: rotateZ (-1deg); -ms-transform: rotera Z (-1deg); transformera: rotateZ (-1deg);  .notice-admin-user-award border-left: 5px solid lila;  .notice-admin-user-award p: före font: normal 24px / 1 'dashicons'; innehåll: "\ f313"; färg: lila;  .notice-light-bulb border-right: 5px solid # e2e224;  .notice-light-bulb p: före font: normal 22px / 1 'dashicons'; innehåll: "\ f339"; färg: # e6e610;  .notice-social media border-left: 5px solid # 1da25f; padding-bottom: 5px;  .notice-social media p padding-bottom: 0; marginalbotten: 4px;  .notice-social media: efter font: normal 22px / 1 'dashicons'; innehåll: "\ f301 \ f304 \ f462"; färg: # 888;  .notice-neo border-right: 10px solid orangered; gränsen-vänster: 10px solid orangered;  .notice-neo p: före font: normal 22px / 1 'dashicons'; innehåll: "\ f511"; färg: orangered; 

När du har sparat ändringarna, ladda någon administratörssida för att se våra anpassade administrativa meddelanden.

Att döma av resultaten är det nog en bra idé att använda anpassade adminmeddelanden sparsamt, annars kommer du att riskera att de ser ut. 

Jag kommer inte att gå in i detaljer om den anpassade CSS som används. Det är bara lite roligt, och det mesta av styling är ganska självförklarande.

Vi använde dashicons typsnitt ikoner för våra anpassade admin meddelanden för bekvämlighet som de är tillgängliga i WordPress admin som standard. Men du kan importera och använda alla ikoner du gillar för extra dekoration.

Prova koden för dig själv

Alla koden från den här handledningsserien har blivit inslagna i ett WordPress-plugin för att ladda ner. Ta en titt på koden, förläng den och implementera nya sätt att visa (och avfärda) administrativa meddelanden. Var noga med att meddela mig i kommentarerna om du skapar något coolt! Jag skulle gärna se vad du kommer med.

Slutsats

Tack för att du gick med i den här fyrdelade handledningsserien. Förhoppningsvis får du nu mycket mer förtroende för hur du implementerar adminmeddelanden i dina egna projekt.

Vi har täckt många olika aspekter av WordPress-administrativa meddelanden, inklusive flera sätt att permanent avvisa dem, vilket inte är möjligt utan anpassad kod.

Att skapa egna anpassade adminmeddelanden är också ganska enkelt, men i praktiken vill du använda dem sparsamt i dina egna projekt. För det mesta är det bäst att behålla standard WordPress-stilar för en konsekvent användarupplevelse.

WordPress har en oerhört aktiv ekonomi. Det finns teman, plugins, bibliotek och många andra produkter som hjälper dig att bygga upp din webbplats och ditt projekt. Plattformens öppen källkod gör det också till ett bra alternativ som du kan förbättra dina programmeringsförmåga. Oavsett fall kan du se vad vi har tillgängligt på Envato Market.

Och glöm inte att ladda ner plugin och spela runt med koden. Det är ett bra sätt att bli mer bekant med hur alla bitar passar ihop. Och snälla låt mig veta dina tankar om handledningen via kommentarerna nedan.