Share
Dette er del 3 av en serie artikler som ser på hvordan plugin eller tema kan best integreres i WordPress admin brukergrensesnitt. I denne delen skal vi se på hvordan du kan bruke WordPress "admin pointers" i pluginene dine.
Admin pointers oppstod først i 3.3, og var ment å markere bare noen få av de nye funksjonene som følger med hver større versjon (The Theme Customizer i 3.4, for eksempel).
Når de brukes riktig, kan disse være svært effektive når du legger merke til de nyeste funksjonene du har lagt til.
Ansvarsfraskrivelse: Administrasjonspoengene er fortsatt i de tidlige stadiene av deres liv - og det er mulighet for at de kan forandre seg. Hvis WordPress-kjerne noensinne utvikler en offentlig API - bør du vedta det.
Et anstendig brukergrensesnitt er ikke gimmicky verktøytips. Faktisk en ideell brukergrensesnittet ikke trenger noen. De er veldig nyttige ved å peke ut den sporadiske nye funksjonen, spesielt de som sluttbrukeren din kanskje har savnet. I dette kan de forbedre brukeropplevelsen, men hvis du bruker dem til noe annet formål, eller bare bruker for mange, gjør du det feil. I stedet for å forbedre pluginet for sluttbrukeren, vil du bare ende opp med å frustrere dem.
Så hvor mange er for mange? Husk at det vil være andre plugins installert, og hver kan også bruke (eller misbruke) disse pekene også. WordPress også (åpenbart) bruker dem. Det ville være interessant å måle folks oppfatning om dette, men jeg selv ville ikke legge til mer enn to i noen større oppdatering (ingen på mindre) og absolutt ikke mer enn en på en gitt side.
Viktig, uten API-kjerne, er det ikke en måte å administrere flere pekere på: Hvis tjue poengere legges til en side, vil tjue bli vist. Siden du ikke vet hva andre plugins gjør - vennligst bruk dem sparsomt.
Når du bruker adminpeker i et plugin eller tema, vil det være nyttig å kunne enkelt og raskt legge til ekstra pekere når plugin utvikler seg. Til dette formål skal vi skape en hjelperfunksjon som skal håndtere den interne håndtering av pekerne. Det vil gjøre bruk av WordPress 'mye elskede krok API, og utløse et filter av skjemaet:
wptuts_admin_pointers_ skjerm-id
Hvor Skjerm-id er IDen til siden vist. For å legge til en peker på postredigeringssiden, for eksempel, ville vi koble til filteret:
wptuts_admin_pointers_post
På denne måten kan vi legge til ekstra pekere, med minimal kode. Rollen til denne hjelpefunksjonen vil være å lage en rekke poeng som skal skrives ut på admin siden som en rekke JavaScript-objekter - hvert objekt som tilsvarer en peker. Hvert pekerobjekt inneholder følgende parametere:
Accentsconagua
pointer_id - en unik identifikator for pekeren. En god ide er å inkludere den versjonen som den er relevant for. Dette må bare inneholde små bokstaver, understreker og bindestreker.mål - en väljare for målet til pekeren, dvs. hva det peker på (f.eks. #some_id, eller .noen-klasse)opsjoner - Dette er en rekke alternativer. Vi kan bruke dette til å endre helt hvordan pekeren ser ut og oppfører seg, men for vårt formål trenger vi bare å vurdere følgende: innhold (teksten som vises i pekeren) og posisjon. Posisjonsegenskapen bestemmes av:
kant - hvilken kant (venstre, høyre, topp, bunn) skal være nærliggende målet.rette inn - hvordan pekeren skal justeres på denne kanten, i forhold til målet (topp, bunn, venstre, høyre, midt).Et typisk pekerobjekt kan være av formen:
pointer_id: 'xyz_v110', mål: '#some_id', alternativer: innhold: 'Ny funksjon: xyz
Lorem ipsum dolor sit amet ...
', posisjon: kant:' venstre ', juster:' toppen '
Når pekerobjektene er skrevet ut på administrasjonssiden, kan vi gjøre bruk av WordPress-pointer-widgeten som er definert her.
Som diskutert i forrige avsnitt, er det overordnede målet med vår funksjon å skrive ut noen JavaScript-objekter på siden og laste inn noen tilpassede skript. Så vår hjelperfunksjon vil bli hekta på wp_enqueue_scripts handling (selv om vi kan ringe det senere).
add_action ('admin_enqueue_scripts', 'wptuts_pointer_load'); funksjon wptuts_pointer_load ($ hook_suffix) // Hjelperfunksjonen går her Husk at hvis du bruker denne koden i et plugin eller tema, bør du omdøpe funksjonen, slik at den er unik og helst pre-fix den med plugin eller tema navn. Den første delen av denne funksjonen filtrerer en tom matrise ved hjelp av kroken wptuts_admin_pointers- screen_id. Dette gir oss mulighet til å legge til pekere i den gruppen. Hvis ingenting blir lagt til, stopper vi.
// Ikke kjør på WP < 3.3 if ( get_bloginfo( 'version' ) < '3.3' ) return; // Get the screen ID $screen = get_current_screen(); $screen_id = $screen->id; // Få poeng for denne skjermen $ pointers = apply_filters ('wptuts_admin_pointers-'. $ Screen_id, array ()); // Ingen tips? Så stopper vi. hvis (! $ pointers ||! is_array ($ pointers)) returnere; Nå kan disse pekene inkludere de som brukeren har sett før, og "avvist". Vi vil ikke at disse vises igjen for denne brukeren, så neste får vi en rekke poeng som de allerede har sett og lukket, og fjern disse fra vårt utvalg. Vi utfører også noen hygienekontroller på våre pekere:
// Få avvisede pekere $ avvist = eksplodere (',', (streng) get_user_meta (get_current_user_id (), 'dismissed_wp_pointers', true)); $ valid_pointers = array (); // Sjekk pekere og fjern de avvistene. foreach ($ pointers as $ pointer_id => $ pointer) // Sanity sjekk om (in_array ($ pointer_id, $ avvist) || tom ($ pointer) || tom ($ pointer_id) || tom ($ pointer ['target ']) || tom ($ pointer [' options '])) fortsett; $ pointer ['pointer_id'] = $ pointer_id; // Legg pekeren til $ valid_pointers array $ valid_pointers ['pointers'] [] = $ pointer; // Ingen gyldige pekere? Stopp her. hvis (tomt ($ valid_pointers)) returnere; Endelig krever vi de nødvendige skript og stiler, og skriv ut gyldige pekere til siden ved hjelp av wp_localize_script.
// Legg til peker stil til kø. wp_enqueue_style ('wp-pointer'); // Legg til pekerskript og vårt eget tilpassede skript til kø. wp_enqueue_script ('wptuts-pointer', plugins_url ('js / wptuts-pointer.js', __FILE__), array ('wp-pointer')); // Legg til pekeralternativer for skript. wp_localize_script ('wptuts-pointer', 'wptutsPointer', $ valid_pointer); add_action ('admin_enqueue_scripts', 'wptuts_pointer_load', 1000); funksjon wptuts_pointer_load ($ hook_suffix) // Ikke kjør på WP < 3.3 if ( get_bloginfo( 'version' ) < '3.3' ) return; $screen = get_current_screen(); $screen_id = $screen->id; // Få poeng for denne skjermen $ pointers = apply_filters ('wptuts_admin_pointers-'. $ Screen_id, array ()); hvis (! $ pointers ||! is_array ($ pointers)) returnere; // Få avvisede pekere $ avvist = eksplodere (',', (streng) get_user_meta (get_current_user_id (), 'dismissed_wp_pointers', true)); $ valid_pointers = array (); // Sjekk pekere og fjern de avvistene. foreach ($ pointers as $ pointer_id => $ pointer) // Sanity sjekk om (in_array ($ pointer_id, $ avvist) || tom ($ pointer) || tom ($ pointer_id) || tom ($ pointer ['target ']) || tom ($ pointer [' options '])) fortsett; $ pointer ['pointer_id'] = $ pointer_id; // Legg pekeren til $ valid_pointers array $ valid_pointers ['pointers'] [] = $ pointer; // Ingen gyldige pekere? Stopp her. hvis (tomt ($ valid_pointers)) returnere; // Legg til peker stil til kø. wp_enqueue_style ('wp-pointer'); // Legg til pekerskript i kø. Legg til tilpasset skript. wp_enqueue_script ('wptuts-pointer', plugins_url ('js / wptuts-pointer.js', __FILE__), array ('wp-pointer')); // Legg til pekeralternativer for skript. wp_localize_script ('wptuts-pointer', 'wptutsPointer', $ valid_pointers); Skriptet er veldig enkelt, siden pekermodulen gjør det meste av arbeidet. Ved denne pekeren trenger vi bare å definere hva som skjer når pekeren blir avvist. Spesielt sender vi en ajax-forespørsel med handlingen 'avvise-wp-pekeren'og pekeren for å sette til den unike identifikatoren vi angir når du legger til pekeren.
jQuery (dokument) .ready (funksjon ($) wptuts_open_pointer (0); funksjon wptuts_open_pointer (i) pointer = wptutsPointer.pointers [i]; opsjoner = $ .extend (pointer.options, close: function () $ .post (ajaxurl, pointer: pointer.pointer_id, action: 'dismiss-wp-pointer');) $ (pointer.target) .pointer (alternativer) .pointer ('open');) ; Det er all koden vi trenger å legge til siden WordPress håndterer ajax-forespørselen.
Som lovet, er det veldig enkelt å legge til pekere. For å legge til en peker på skjermbildet "post", for eksempel:
add_filter ('wptuts_admin_pointers-post', 'wptuts_register_pointer_testing'); funksjon wptuts_register_pointer_testing ($ p) $ p ['xyz140'] = array ('target' => '# endring-permalinks', 'options' => array ('content' => sprintf % s
% s
', __ (' Tittel ',' plugindomain '), __ (' Lorem ipsum dolor sit amet, consectetur adipiscing elit. ',' Plugindomain ')),' posisjon '=> array (' edge '=>' top ' 'align' => 'middle')))); returner $ p; Merk: Når du lagrer den avviste pekeren, passerer WordPress pekeren ID gjennom sanitize_key - så vær sikker på å bruke bare små bokstaver, streker og understreker.
