Een welkomstpagina voor uw WordPress-product bouwen code deel 1

In de eerste twee artikelen van deze serie schreef ik over welk welkomstpagina's zijn en hoe ze producten helpen de gebruikerservaring te verbeteren door de puntjes met elkaar te verbinden, waarna ik schreef over de WordPress Transients API die ik van plan ben te gebruiken bij het maken van de welkomstpagina.

Het coderen van een welkomstpagina voor uw WordPress-plug-in kan een lastig proces zijn. Het hele concept draait om het omleiden van gebruikers naar een bepaalde pagina door transiënten in te stellen en ze uiteindelijk te verwijderen. Laten we beginnen met het bouwen van de welkomstpagina.

WP Welkom Pagina Boilerplate

Ik ga een welkomstpagina-boilerplate bouwen voor WordPress in de vorm van een plug-in die kan worden gebruikt in uw WordPress-product. De uiteindelijke vorm van deze plug-in wordt gehost op GitHub op WP-Welcome-pagina-Boilerplate-For-TutsPlus.

Op dit moment ga ik ervan uit dat je de volgende instellingen hebt:

een lokale machine of een webserver
een demo WordPress website dashboard

Plugin-architectuur

Ik ga een eenvoudige plug-in maken die een welkomstpagina weergeeft wanneer een gebruiker de plug-in installeert en activeert. Laten we de plugin-architectuur bespreken:

WP-Welcome-pagina-Boilerplate: Map met onze plug-in.
WP-Welcome-pagina-Boilerplate /Welkom: Map voor de welkomstpagina gerelateerde dingen.
WP-Welcome-pagina-Boilerplate / welkom / img: Folder voor afbeeldingen.
wp-welcome-page-boilerplate.php: Het belangrijkste plug-in bestand in de root. Dit bestand is verantwoordelijk voor het definiëren van de globale constanten en vereist het initialisatiebestand, d.w.z. welcome-init.php.
welkom-init.php: Het initialisatiebestand dat voor drie dingen verantwoordelijk is: een overgang toevoegen wanneer de plug-in wordt geactiveerd, het verwijderen wanneer de plug-in wordt gedeactiveerd en tenslotte het logica-bestand toevoegen, d.w.z. welcome-logic.php.
welkom-logic.php: Het logica-bestand dat verantwoordelijk is voor een veilige welkomstpagina-omleiding, het maken van het welkomstpagina-submenu en het toevoegen van het weergavebestand van de welkomstpagina, d.w.z. welcome-view.php.
welkom-view.php: Het weergavebestand dat verantwoordelijk is voor het weergeven van de welkomstpagina en is gebouwd met PHP en HTML.
Er zijn optionele mappen voor afbeeldingen en CSS, en ze zijn benoemd in overeenstemming met hun doel.

U kunt de volgende schermafbeelding bekijken om de architectuur te verifiëren.

Werkstroom invoegen

De plug-in werkt op de volgende manier:

Voegt een overgang toe aan activering van plug-ins.
Verwijdert een overgang van de deactivering van de plug-in.
Veilig doorverwijzen naar de welkomstpagina.

Standaard plug-in basisbestand

Laten we beginnen aan onze discussie met de inhoud van het basisbestand, dat is wp-welcome-page-boilerplate.php. Hier is de volledige code:

Het gedeelte PHPDoc-header van de plug-in vertelt WordPress dat een bestand een plug-in is. De gedefinieerde parameters vertellen hoe de gegevens worden verwerkt. Minimaal kan een header slechts een Plugin-naam bevatten, maar verschillende stukken kunnen -en moeten meestal-worden opgenomen. U kunt meer lezen over de headervereisten in het WordPress Plugin Developer Handbook.

De volgende reeks code voert een beveiligingscontrole uit. Als iemand dit bestand rechtstreeks probeert te openen, wordt de ABSPATH selectievakje, waardoor het script wordt beëindigd als het buiten WordPress wordt geopend.

Hierna ziet de code er als volgt uit:

// Plugin-versie. if (! defined ('WPW_VERSION')) define ('WPW_VERSION', '1.0.0');  // Naam map invoegen. if (! defined ('WPW_NAME')) define ('WPW_NAME', trim (dirname (plugin_basename (__FILE__)), '/'));  // Plugin-map, inclusief de map. if (! defined ('WPW_DIR')) define ('WPW_DIR', WP_PLUGIN_DIR. '/'. WPW_NAME);  // Plugin-URL, inclusief de map. if (! defined ('WPW_URL')) define ('WPW_URL', WP_PLUGIN_URL. '/'. WPW_NAME);  // Root-bestand invoegen. if (! defined ('WPW_PLUGIN_FILE')) define ('WPW_PLUGIN_FILE', __FILE__);

Ik heb een paar globale constanten gedefinieerd die details definiëren over de plug-insversie, hoofdmap, URL en het hoofdbestand van de plug-in.

Elk van deze bevat een if (! defined ()) verklaring, die helpt fouten te voorkomen als gevolg van de herdefinitie van een globale constante. Ik raad aan om de globale constanten te definiëren met uw pakketnaam als een voorvoegsel. De pakketnaam in deze plug-in is WPW, d.w.z. WordPress Welcome. Dus elke constante heeft een voorvoegsel van WPW_.

De gedefinieerde plug-ins zijn:

WPW_VERSION: Plugin-versie
WPW_NAME: Plugin Folder Name
WPW_DIR: Plugin Directory
WPW_URL: URL invoegen
WPW_PLUGIN_FILE: Plug-in rootbestand

Zodra al deze constanten zijn gedefinieerd, beginnen we met de inhoud van ons welkomstbestand.

Ten slotte vereiste ik de welkomstbeginsator en de welkomstlogica.

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

Ik vind het leuk om mijn code minimaal, nauwkeurig en goed gedocumenteerd te houden. Dus in plaats van elk codeblok in een enkel bestand toe te voegen, geef ik er de voorkeur aan individuele bestanden te maken, elk met slechts één doel. Daarom hebben we een initialisatiebestand dat alles met betrekking tot de welkomstpagina zal initialiseren.

De eenmalig benodigd() verklaring vereist de welkom-init.php bestand, maar voordat ik een bestand nodig heb, controleer ik het altijd met de Bestand bestaat() PHP-functie om eventuele fatale fouten te voorkomen in het geval het bestand wordt verwijderd.

Dezelfde principes zijn van toepassing op de welkomstlogica, die we later in het volgende deel van de serie zullen bespreken.

U kunt de definitieve code van de wp-welcome-page-boilerplate.php bestand op GitHub.

Welkom Initializer

Om alle welkomstpagina-gerelateerde bestanden te beheren, heb ik een aparte map gemaakt met de naam Welkom en voegde een toe welkom-init.php het dossier. De volledige code van dit bestand bepaalt de initialisatie van de welkomstpagina.

Laten we de volledige code van dit bestand bestuderen:

De code begint met inline documentatie over het bestand en een ABSPATH controleren. Nu had ik een manier nodig om de overgang toe te voegen en te verwijderen wanneer de plug-in respectievelijk geactiveerd en gedeactiveerd is.

Gelukkig biedt WordPress ons twee haken voor dit exacte doel.

register_activation_hook (string $ file, aflosbaar $-functie): Deze haak wordt geactiveerd wanneer de plug-in wordt geactiveerd. Het heeft het hoofdbestand $ van de plug-in en $ de functie van de opvraagbare $ als parameters.
register_deactivation_hook (string $ file, aflosbaar $-functie): Deze haak wordt geactiveerd wanneer de plug-in gedeactiveerd wordt. Hiervoor zijn de plugin main $ file en een callable $ function als parameters nodig.

Dus nu moeten we gebruik maken van deze haken. Ik heb een overgang gemaakt voor de welkomstpagina. De set_transient () functie wordt aangeroepen binnen de standaard wpw_welcome_activate () functie. In het vorige artikel hebben we geleerd dat het reeks operatie duurt een sleutel, waarde en een vervaltijd als zijn parameters.

Daarom is de sleutel _welcome_redirect_wpw is ingesteld op een waarde waar voor 60 seconden. Dit definieert de maximale leeftijd waarna de transiënt vervalt.

Vervolgens is de activeringshaak, en zoals we weten loopt deze haak alleen als een plug-in is geactiveerd. Het voegt onze transient toe aan de database. Zodra de transiënt in de database staat, betekent dit dat we deze kunnen controleren en de gebruiker kunnen omleiden naar onze welkomstpagina. Hoe de gebruiker omleiden? Dat is wat we in het volgende artikel zullen bestuderen.

Daarna schreef ik de code die draait op de deactivering van de plug-in. We willen een functionaliteit waarbij de overgang wordt verwijderd wanneer een gebruiker de plug-in deactiveert. Om dit te doen, belde ik de delete_transient () functie, die de sleutel neemt _welcome_redirect_wpw als zijn parameter. Dan is er de wpw_welcome_deactivate () functie, die wordt toegevoegd aan de deactiveringshaak voor plug-ins.

Dit onderdeel is optioneel, maar ik wil dat mijn gebruikers de welkomstpagina zien wanneer ze de plug-in activeren. Als u dat niet doet, kunt u het verwijderen van uw transient absoluut negeren.

Tot nu toe heb ik het gedeelte van de code besproken dat nodig is om een transiënt te maken en te verwijderen. Maar de code voor welkomstlogica ontbreekt nog steeds, waardoor de gebruikers naar de welkomstpagina worden omgeleid. We zullen het volgende aanpakken.

Conclusie

Dit is het voor vandaag. Dus we zijn halverwege. Het basisbestand en de initialisatie voor onze welkomstpagina zijn gereed. Nu moeten we de logica en weergavebestanden maken, wat het plan is voor het volgende artikel.

Ten slotte kun je al mijn cursussen en tutorials op mijn profielpagina verzamelen, en je kunt me volgen op mijn blog en / of contact opnemen op Twitter @mrahmadawais, waar ik schrijf over ontwikkelingsworkflows in de context van WordPress.

Zoals gebruikelijk, aarzel dan niet om eventuele vragen of opmerkingen achter te laten, en ik zal ernaar streven om op elk van hen te reageren.

Code