Å bygge en velkomstside for WordPress-produktet Kode Del 1

I de to første artiklene i denne serien skrev jeg om hvilke velkomstsider som er og hvordan de hjelper produkter med å forbedre brukeropplevelsen ved å koble prikkene, hvoretter jeg skrev om WordPress Transients API som jeg skal bruke mens du bygger velkomstsiden.

Koding av en velkomstside for WordPress-pluginet kan være en vanskelig prosess. Hele konseptet dreier seg om å omdirigere brukere til en bestemt side via innstilling av transienter og endelig sletter dem. La oss begynne å bygge velkomstsiden.

WP Welcome Page Boilerplate

Jeg skal bygge en velkommen side boilerplate for WordPress i form av et plugin som kan brukes i ditt WordPress-produkt. Den endelige formen for dette pluginet er vert for GitHub på WP-Velkommen-Side-Boilerplate-For-TutsPlus.

På dette punktet antar jeg at du har følgende oppsett:

en lokal maskin eller en webserver
en demo WordPress nettsted dashboard

Plugin Architecture

Jeg skal lage en enkel plugin som viser en velkommen side når en bruker installerer og aktiverer pluginet. La oss diskutere pluginarkitekturen:

WP-Velkommen-Side-Boilerplate: Mappe som inneholder vårt plugin.
WP-Velkommen-Side-Boilerplate /Velkommen: Mappe for velkomstsiden relaterte ting.
WP-Velkommen-Side-Boilerplate / velkommen / img: Mappe for bilder.
wp-velkommen-side-boilerplate.php: Hovedpluginfilen i roten. Denne filen er ansvarlig for å definere de globale konstanter og krever initialiseringsfilen, det vil si velkommen-init.php.
velkommen-init.php: Initieringsfilen som er ansvarlig for tre ting: legger til en forbigående når plugin blir aktivert, slettet når plugin blir deaktivert, og til slutt legger til logikkfilen, det vil si welcome-logic.php.
velkommen-logic.php: Logikkfilen som er ansvarlig for velkomstsiden omdirigering, opprett velkomstsiden undermenyen, og legg til velkomstsiden visningsfilen, det vil si velkommen-view.php.
velkommen-view.php: Visningsfilen som er ansvarlig for visning av velkomstsiden og er bygget med PHP og HTML.
Det er valgfrie mapper for bilder og CSS, og de er navngitt i samsvar med deres formål.

Du kan se følgende skjermbilde for å verifisere arkitekturen.

Plugin Workflow

Pluggen fungerer på følgende måte:

Legger til en forbigående på plugin aktivering.
Sletter en forbigående på plugin deaktivering.
Sikker viderekobling til velkomstsiden.

Standard Plugin Base File

La oss starte diskusjonen med innholdet i basisfilen, som er wp-velkommen-side-boilerplate.php. Her er den komplette koden:

PHPDoc header-delen av plugin forteller WordPress at en fil er et plugin. De definerte parametrene forteller hvordan dataene håndteres. I et minimum kan en overskrift bare inneholde et pluginnavn, men flere stykker kan - og vanligvis skal inkluderes. Du kan lese om overskriftskravene i WordPress Plugin Developer Handbook.

Det neste settet med kode utfører en sikkerhetskontroll. Hvis noen prøver å få tilgang til denne filen direkte, kjører den ABSPATH sjekk, som avslutter skriptet hvis det åpnes fra utenfor WordPress.

Etter at koden ser slik ut:

// Plugin versjon. hvis (! definert ('WPW_VERSION')) define ('WPW_VERSION', '1.0.0');  // Plugin mappenavn. hvis (! definert ('WPW_NAME')) define ('WPW_NAME', trim (dirname (plugin_basename (__FILE__)) '/'));  // Plugin katalog, inkludert mappen. hvis (! definert ('WPW_DIR')) define ('WPW_DIR', WP_PLUGIN_DIR. '/'. WPW_NAME);  // Plugin-URL, inkludert mappen. hvis (! definert ('WPW_URL')) define ('WPW_URL', WP_PLUGIN_URL. '/'. WPW_NAME);  // Plugin root-fil. hvis (! definert ('WPW_PLUGIN_FILE')) define ('WPW_PLUGIN_FILE', __FILE__);

Jeg har definert noen globale globale konstanter som definerer detaljer om pluginversjonen, rotmappen, nettadressen og pluginens hovedfil.

Hver av disse inneholder en hvis (! definert ()) uttalelse, som bidrar til å unngå eventuelle feil på grunn av omdefinering av en global konstant. Jeg anbefaler å definere de globale konstantene med pakkenavnet ditt som prefiks. Pakkenavnet i denne plugin er WPW, det vil si WordPress Welcome. Så, hver konstant har et prefiks av WPW_.

De definerte plugin-konstantene er:

WPW_VERSION: Plugin Version
WPW_NAME: Plugin Folder Name
WPW_DIR: Plugin Directory
WPW_URL: Plugin URL
WPW_PLUGIN_FILE: Plugin Root File

Når alle disse konstantene er definert, begynner vi med innholdet i vår velkomstfil.

Til slutt, jeg krevde velkomstinitiatoren og velkomstlogikken.

hvis (file_exists (WPW_DIR. '/welcome/welcome-init.php')) require_once (WPW_DIR. '/welcome/welcome-init.php');  hvis (file_exists (WPW_DIR. '/welcome/welcome-logic.php')) require_once (WPW_DIR. '/welcome/welcome-logic.php');

Jeg liker å holde koden min minimal, presis og godt dokumentert. Så, i stedet for å legge til hver kodeblokk i en enkelt fil, foretrekker jeg å lage individuelle filer, hver med bare ett formål. Derfor har vi en initialiseringsfil som vil initialisere alt relatert til velkomstsiden.

De require_once () uttalelse krever velkommen-init.php fil, men før du krever en fil, sjekker jeg alltid den med Filen eksisterer() PHP-funksjon for å unngå dødelige feil hvis filen blir slettet.

De samme prinsippene gjelder for velkomstlogikken, som vi kommer til senere i neste del av serien.

Du kan sjekke den endelige koden til wp-velkommen-side-boilerplate.php fil på GitHub.

Velkommen Initializer

For å administrere alle velkomstsiden relaterte filer, opprettet jeg en egen mappe som heter Velkommen og la til en velkommen-init.php fil. Hele koden til denne filen styrer initialiseringen av velkomstsiden.

La oss studere den komplette koden til denne filen:

Koden begynner med inline dokumentasjon om filen og en ABSPATH kryss av. Nå trengte jeg en måte å legge til og slette forbigående når plugin er aktivert og deaktivert henholdsvis.

Heldigvis gir WordPress oss to kroker for dette nøyaktige formålet.

register_activation_hook (string $ fil, Callable $ funksjon): Denne kroken avfyres når pluggen blir aktivert. Det tar pluginens hoved $ fil og en callable $ -funksjon som parametere.
register_deactivation_hook (string $ fil, Callable $ funksjon): Denne kroken avfyres når pluggen blir deaktivert. Det tar plugin hoved $ filen og en callable $ funksjon som parametere.

Så, nå må vi gjøre bruk av disse krokene. Jeg opprettet en forbigående for velkomstsiden. De set_transient () funksjon kalles inne i skikken wpw_welcome_activate () funksjon. I forrige artikkel lærte vi at sett operasjonen tar a nøkkel, verdi og en utløpstid som parametere.

Derfor nøkkelen _welcome_redirect_wpw er satt til en verdi ekte til 60 sekunder. Dette definerer maksimal alder etter hvilken transienten utløper.

Neste er aktiveringskroken, og som vi vet kjører denne kroken bare når et plugin er aktivert. Det legger til forbigående til databasen. Når transienten er i databasen, betyr det at vi kan sjekke det og omdirigere brukeren til vår velkomstside. Hvordan omdirigere brukeren? Det er det vi vil studere i neste artikkel.

Etter det skrev jeg koden som kjører ved deaktivering av plugin. Vi vil ha en funksjonalitet der transienten blir slettet når en bruker deaktiverer plugin. For å gjøre det, ringte jeg delete_transient () funksjon, som tar nøkkelen _welcome_redirect_wpw som parameter. Så er det wpw_welcome_deactivate () funksjon, som legges til plugin-deaktiveringskroken.

Denne delen er valgfri, men jeg vil at brukerne mine skal se velkomstsiden når de aktiverer pluginet. Hvis du ikke gjør det, kan du absolutt ignorere sletting av forbigående.

Så langt har jeg diskutert delen av koden som er nødvendig for å opprette og slette en forbigående. Men koden for velkomstlogikk mangler fortsatt, noe som vil omdirigere brukerne til velkomstsiden. Vi skal takle det neste.

Konklusjon

Dette er det for i dag. Så, vi er halvveis gjennom. Basisfilen og initialiseringen til vår velkomstside er klare. Nå må vi lage logikken og vise filer, som er planen for neste artikkel.

Endelig kan du fange alle kursene og opplæringsprogrammene på profilen min, og du kan følge meg på bloggen min og / eller nå ut på Twitter @mrahmadawais hvor jeg skriver om utviklingsarbeid i WordPress.

Som vanlig, ikke nøl med å legge igjen noen spørsmål eller kommentarer nedenfor, og jeg vil sikte på å svare på hver av dem.

Kode