Share
I mitt tidligere innlegg i denne serien begynte jeg å bygge en velkomstside for et WordPress-plugin. Jeg diskuterte pluginarkitekturen og hvordan den fungerer. Da skrev jeg koden for basen og initialiseringsfilene der vi la til kodeblokkene for å legge til og slette en forbigående basert på pluginaktivering og deaktivering.
I denne siste artikkelen diskuterer jeg de gjenværende pluginfilene sammen med plugins praktiske implementering. Mot slutten av denne artikkelen vil du være helt klar over prosessen med å kode din første velkomstside for et WordPress-plugin.
De velkommen-init.php fil definerer all relevant kode som initierer prosessen for vår velkomstside. Det begynte med å legge til og slette transientene via set_transient () (ved plugin aktivering) og delete_transient () funksjoner (ved deaktivering av plugin).
Når det er sagt, trenger vi en måte å omdirigere brukeren til vår velkomstside. For å administrere pluginlogikken, opprettet jeg en egen fil med navnet velkommen-logic.php.
La oss se på koden for denne filen.
Accentsconagua
'wpw_welcome_page'), admin_url ('plugins.php'))); add_action ('admin_init', 'wpw_safe_welcome_redirect');Så, som du vet nå, liker jeg å følge WordPress kodings- og dokumentasjonsstandarder, og derfor er det mye dokumentasjon der inne, mens noe av det ble lagt til for å forstå.
Det er en filoverskrift DocBlock som brukes til å gi en oversikt over hva som er inneholdt i filen. Koden starter med en ABSPATH sjekk, som stopper plugin-operasjonen hvis noen prøver å få tilgang til pluginfilen direkte. Etter det skrev jeg koden rutinen for en sikker omdirigering.
Jeg definerte da en funksjon som heter wpw_safe_welcome_redirect () å håndtere sikker omdirigering til velkomstsiden. Inne i det, utførte jeg noen få hvis sjekker som overvåker viderekoblingsmetoden. Hvis du har gått gjennom de forrige artiklene, vet du at jeg definerte _welcome_redirect_wpw forbigående og satt sin verdi til sann. Jeg bruker den samme nøkkelen til å utføre disse kontrollene. For å få bedre forståelse av koden, må du gå gjennom den forrige artikkelen i detalj.
La oss begynne med det som hopper i wpw_safe_welcome_redirect () funksjon.
Jeg sjekket om det eksisterer en aktiverings omdirigering forbigående, dvs.. _welcome_redirect_wpw forbigående, via get_transient () funksjon. Denne funksjonen brukes til å få verdien av en forbigående. Hvis transienten ikke eksisterer, ikke har en verdi, eller er utløpt, vil returverdien være feil.
Så, hvis verdien som hentes, ikke er lik ekte, da trenger vi ikke å omdirigere brukeren til en velkommen side. Hvis den hentede verdien er ekte og aktivering omdirigering forbigående er tilstede, så la oss gå videre.
Hvis forbigående _welcome_redirect_wpw avkastning ekte, det betyr to ting: først at den er til stede i databasen, og for det andre at vi ikke har omdirigert brukeren til velkomstsiden. Så la oss slette dette forbigående og omdirigere brukeren til vår velkomstside.
Deretter har vi en annen sjekkliste som bekrefter at en sikker velkomstside omadressering bare skjer for et nettsted som ikke er et nettverk eller et multi-site. Vi ønsker ikke velkomstsiden omdirigering hvis pluginet aktiveres fra et nettverk.
Til slutt, etter alle disse kontrollene, omdirigert jeg brukeren til vår velkomstside. De wp_safe_redirect ($ plassering) funksjonen utfører en lokal omdirigering og forteller serveren om $ location å omdirigere brukeren.
For å definere plasseringen, brukte jeg add_query_arg () funksjon som henter en endret URL-spørringsstreng. Det tar opp en assosiativ array som har et nøkkelverdi-par sammen med adresseringsadressen.
I dette tilfellet lager jeg en nøkkel som heter side med en verdi wpw_welcome_page og omdirigere den til plugins.php fil via admin_url () funksjon. Dette betyr at jeg omdirigerer brukeren til en tilpasset side inne i plugin-menyen, og brukeren blir omdirigert til your-domain.com/wp-admin/plugin.php?page=wpw_welcome_page URL.
Deretter heklet jeg hele wpw_safe_welcome_redirect () funksjon til admin_init.
Så langt har jeg definert prosedyren for en sikker omdirigering. Plasseringen er en side som eksisterer inne i PLUGINS Meny. Men jeg har ikke opprettet siden enda. La oss nå lage en velkommen side inne i plugins Meny.
Den resterende koden til velkommen-logic.php filen er:
/ ** * Legger til velkomstsideundermeny. * * @since 1.0.0 * / funksjon wpw_welcome_page () global $ wpw_sub_menu; $ wpw_sub_menu = add_submenu_page ('plugins.php', // Slugnavnet for hovedmenyen (eller filnavnet på en standard WordPress admin side). __ ('Velkommen side', 'wpw'), // Teksten til vises i tittelkoder på siden når menyen er valgt. __ ('Velkomstside', 'wpw'), // Teksten som skal brukes til menyen. 'les', // Kvaliteten som kreves for denne menyen for å bli vist til brukeren. 'wpw_welcome_page', // Slug navn for å referere til denne menyen av (bør være unikt for denne menyen). 'wpw_welcome_page_content' // Funksjonen som skal kalles for å utføre innholdet for denne siden.) ; add_action ('admin_menu', 'wpw_welcome_page'); / ** * Velkommen side innhold. * * @since 1.0.0 * / funksjon wpw_welcome_page_content () hvis (file_exists (WPW_DIR. '/welcome/welcome-view.php')) require_once (WPW_DIR. '/welcome/welcome-view.php'); For å legge til undermenyen, opprettet jeg en wpw_welcome_page () funksjon, innenfor som jeg ringte add_submenu_page () funksjon.
De add_submenu_page () funksjonen legger til en side i en meny. Det tar en liste over parametere:
wpw_welcome_page, Det samme som vi definerte under sikker omdirigeringsfunksjon.Jeg definerte verdiene til disse parameterne, og til slutt la jeg til wpw_welcome_page () fungere som add_action til admin_menu.
Nå må vi håndtere velkomstsiden innholdet, som jeg opprettet en wpw_welcome_page_content () funksjon (dette er tilbakeringingsfunksjonen for add_submenu_page ()) som krever velkommen-view.php fil.
Du har kanskje lagt merke til at jeg opprettet en global variabel $ wpw_sub_menu som inneholder sideskjerm ID for vår nye undermeny side. Vi vil bruke dette i neste avsnitt.
Rett etter alt dette har jeg enqueued a style.css fil for tilpasset styling av elementene på vår velkomstside. I koden ovenfor angir jeg en global variabel $ wpw_sub_menu som inneholdt undermenyenes skjerm-ID.
Vi kan sjekke denne skjerm-IDen mens du registrerer vår stilfil for å sikre at den kun er avkalket når vi surfer på velkomstsiden og ikke overalt i administrasjonen. Det er slik den følgende koden gjør.
/ ** * Enqueue Styles. * * @since 1.0.0 * / funksjon wpw_styles ($ hook) global $ wpw_sub_menu; // Legg til stil på velkomstsiden bare. hvis ($ hook! = $ wpw_sub_menu) return; // Velkommen sidestiler. wp_enqueue_style ('wpw_style', WPW_URL. '/welcome/css/style.css', array (), WPW_VERSION, 'alle'); // Enqueue stilene. add_action ('admin_enqueue_scripts', 'wpw_styles');Logikken på vår velkomstside er fullført. Du kan se hele koden for welcome-logic.php-filen på GitHub.
Nå som logikken på vår velkomstside er fullført, kan du faktisk teste pluginet du opprettet, og det vil omdirigere deg til velkomstsiden. Det eneste du må gjøre er å bygge visningen av velkomstsiden din. Dette kan være alt du vil, men jeg vil forlate deg med noen kjele av åpenbare grunner.
HTML- og CSS-delen av pluginet ligger inne i velkommen-view.php fil. Koden sin går som følger:
Filen starter som en vanlig PHP-fil med en DocBlock og deretter koden for en ABSPATH sjekk slik at ingen kan få tilgang til filen direkte. Deretter opprettet jeg en variabel for plugin-versjonen og banen for vår logo-bilde.
Jeg har lagt til en mappe som heter css og en fil som heter style.css inne i den for å lage noen tilpassede stiler for velkomstsiden. Koden ser ut som følgende. Det er koden som brukes til å endre den ekstra klassen jeg har lagt til vår logo. (Du kan legge det til som du vil, jeg har nettopp overgått WP-logoen for å holde ting enkelt for formålet med denne opplæringen.)
/ * Logo * / .svg .wp-badge.welcome__logo bakgrunn: url ('... /img/logo.png') senter 24px no-repeat # 0092f9; bakgrunnsstørrelse: inneholde; farge: #fff; / * Responsive Youtube Video * / .embed-container høyde: 0; maksimal bredde: 100%; overløp: skjult; polstring bunn: 56,25%; stilling: relativ; .embed-container iframe, .embed-beholderobjekt, .embed-container innebygd topp: 0; høyde: 100%; venstre: 0; posisjon: absolutt; bredde: 100%; Deretter er det HTML-delen av siden vår. Det er en video fra YouTube som er innebygd som en lydhør video.
HTML-delen av velkomstsiden ligner på WordPress standard velkomstsiden. Fordelen med det er at vi ikke trenger å skrive mye CSS, og brukere er allerede kjent med det innebygde formatet.
Plugins er utvidelser for WordPress. Du kan utvide WordPress ved å lage et plugin, og derfor tror jeg at du alltid må bruke standard og innebygd utseende / stiler for å holde ting mer i tråd med WordPress dashboard. Noen plugins legger til fargede ikoner og tung bakgrunn eller hva som ikke, men på slutten av dagen slutter de å forstyrre en jevn brukeropplevelse.
Jeg er sikker på at plugin-utviklere er godt kjent med HTML-programmering. Her er koden uansett.
Koden viser følgende layout:
Når du skriver, kan du bruke følgende CSS-klasser til å lage kolonner:
.funksjons seksjon sammen med .ett-col: Å opprette en enkelt kolonne..funksjons seksjon sammen med .to-col: Å opprette to kolonner..funksjons seksjon sammen med .tre-col: Å opprette tre kolonner.Dette fullfører vår pluginutvikling. La oss teste det på en demo nettsted.
For å teste plugin på en demo nettsted, kan du laste ned og installere WP-Velkommen-Side-Boilerplate-For-TutsPlusfra GitHub.
Deretter utfører du følgende trinn:
Voila! Ble omdirigert til velkomstsiden?
Når du er ferdig, gå tilbake til startsiden på dashbordet og sveip musen over plugins Meny. En ytterligere undermeny er lagt til, oppkalt som Velkomstside. For å minne deg på nytt, er dette den samme siden som jeg opprettet tidligere.
Forresten ser den siste velkomstsiden ut slik.
Her er det komplette oppsettet av velkomstskjermbildet.
Slik kan du opprette en velkomstside for WordPress-plugin. Jeg har beskrevet en veldig grunnleggende implementering. Du kan endre det i henhold til dine krav. Jeg vil anbefale å laste ned Velkommen mappe og inkludert velkommen-init.php til ditt produkt (endre de globale konstantene i velkommen - *. php-filer).
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.
