Share
In mijn vorige post van deze serie ben ik begonnen met het bouwen van een welkomstpagina voor een WordPress plug-in. Ik heb de plugin-architectuur besproken en hoe deze functioneert. Vervolgens heb ik de code geschreven voor de basis- en initialisatiebestanden waarin we de codeblokken hebben toegevoegd voor het toevoegen en verwijderen van een transiënt op basis van activering en deactivering van plug-ins.
In dit laatste artikel zal ik de resterende plug-inbestanden bespreken, samen met de praktische implementatie van de plug-in. Aan het einde van dit artikel bent u zich terdege bewust van het coderingsproces van uw eerste welkomstpagina voor een WordPress-plug-in.
De welkom-init.php bestand definieert alle relevante code die het proces voor onze welkomstpagina initialiseert. Het begon met het toevoegen en verwijderen van de transiënten via de set_transient () (over activering van plug-in) en delete_transient () functies (over deactiveren van plug-ins).
Dat gezegd hebbende, nu hebben we een manier nodig om de gebruiker door te sturen naar onze welkomstpagina. Om de plugin-logica te beheren, heb ik een apart bestand met de naam welkom-logic.php.
Laten we de code voor dit bestand bekijken.
Accentsconagua
'wpw_welcome_page'), admin_url ('plugins.php'))); add_action ('admin_init', 'wpw_safe_welcome_redirect');Zoals je inmiddels weet, volg ik graag de coderings- en documentatiestandaarden van WordPress. Daarom zit er veel documentatie in, terwijl een deel ervan is toegevoegd voor je begrip.
Er is een bestandsheader DocBlock die wordt gebruikt om een overzicht te geven van wat zich in het bestand bevindt. De code begint met een ABSPATH selectievakje, waarmee de plug-inbewerking wordt beëindigd als iemand rechtstreeks toegang probeert te krijgen tot het plug-insbestand. Daarna schreef ik de code-routine voor een veilige omleiding.
Ik definieerde toen een functie met de naam wpw_safe_welcome_redirect () om veilig om te leiden naar de welkomstpagina. Binnenin speelde ik er een paar als controles die de omleidingsmethode controleren. Als je de vorige artikelen hebt gelezen, weet je dat ik de. Heb gedefinieerd _welcome_redirect_wpw van voorbijgaande aard en stel de waarde ervan in op true. Ik zal dezelfde sleutel gebruiken om deze controles uit te voeren. Om een beter begrip van de code te krijgen, moet u het vorige artikel in detail doornemen.
Laten we beginnen met wat er gebeurt in de wpw_safe_welcome_redirect () functie.
Ik heb gecontroleerd of er een activeringsomleidingstransplantatie bestaat, d.w.z.. _welcome_redirect_wpw van voorbijgaande aard, via de get_transient () functie. Deze functie wordt gebruikt om de waarde van een transiënt te krijgen. Als de transient niet bestaat, geen waarde heeft of is verlopen, is de retourwaarde false.
Dus als de opgehaalde waarde niet gelijk is aan waar, dan hoeven we de gebruiker niet door te sturen naar een welkomstpagina. Als de opgehaalde waarde is waar en de activatie omleiding transient is aanwezig, laten we dan verder gaan.
Als de voorbijgaande _welcome_redirect_wpw komt terug waar, dat betekent twee dingen: ten eerste dat het aanwezig is in de database, en ten tweede dat we de gebruiker niet hebben omgeleid naar de welkomstpagina. Dus laten we deze overgang verwijderen en de gebruiker doorverwijzen naar onze welkomstpagina.
Vervolgens hebben we nog een controleverklaring die bevestigt dat een omleiding voor een veilige welkomstpagina alleen plaatsvindt voor een site die geen netwerk of een multisite is. We willen niet dat de welkomstpagina wordt omgeleid als de plug-in door een netwerk wordt geactiveerd.
Eindelijk, na al deze controles, heb ik de gebruiker doorverwezen naar onze welkomstpagina. De wp_safe_redirect ($ locatie) function voert een lokale omleiding uit en vertelt de server over de $ locatie om de gebruiker door te sturen.
Om de locatie te definiëren, gebruikte ik de add_query_arg () functie die een aangepaste URL-queryreeks ophaalt. Er wordt een associatieve array gebruikt met een sleutelwaardepaar samen met de locatie-URL.
In dit geval maak ik een sleutel genaamd pagina met een waarde wpw_welcome_page en het omleiden naar de plugins.php bestand via de admin_url () functie. Dit betekent dat ik de gebruiker doorverwijs naar een aangepaste pagina in het menu Plug-ins en dat de gebruiker wordt omgeleid naar de your-domain.com/wp-admin/plugin.php?page=wpw_welcome_page URL.
Vervolgens heb ik het geheel gehaakt wpw_safe_welcome_redirect () functie naar de admin_init.
Tot nu toe heb ik de procedure voor een veilige omleiding gedefinieerd. De locatie is a pagina die bestaat in de PLUGINS menu. Maar ik heb de pagina nog niet gemaakt. Laten we nu een welkomstpagina maken in de plugins menu.
De resterende code van de welkom-logic.php bestand is:
/ ** * Voeg submenu welkomstpagina toe. * * @since 1.0.0 * / function wpw_welcome_page () global $ wpw_sub_menu; $ wpw_sub_menu = add_submenu_page ('plugins.php', // De slug-naam voor het bovenliggende menu (of de bestandsnaam van een standaard WordPress-beheerderspagina). __ ('Welkomstpagina', 'wpw'), // De tekst naar worden weergegeven in de titellabels van de pagina wanneer het menu is geselecteerd. __ ('Welkomstpagina', 'wpw'), // De tekst die moet worden gebruikt voor het menu. 'lezen', // De vereiste functionaliteit voor dit menu worden weergegeven aan de gebruiker. 'wpw_welcome_page', // De slugnaam om naar dit menu te verwijzen door (moet uniek zijn voor dit menu). 'wpw_welcome_page_content' // De functie die moet worden aangeroepen om de inhoud voor deze pagina weer te geven.) ; add_action ('admin_menu', 'wpw_welcome_page'); / ** * Welkomstpagina-inhoud. * * @since 1.0.0 * / function wpw_welcome_page_content () if (file_exists (WPW_DIR. '/welcome/welcome-view.php')) require_once (WPW_DIR. '/welcome/welcome-view.php'); Om het submenu toe te voegen, heb ik een gemaakt wpw_welcome_page () functie, waarin ik de add_submenu_page () functie.
De add_submenu_page () functie voegt een pagina toe aan een menu. Er is een lijst met parameters nodig:
wpw_welcome_page, hetzelfde dat we hebben gedefinieerd tijdens de veilige omleidingsfunctie.Ik heb de waarden van deze parameters gedefinieerd en uiteindelijk heb ik de waarde toegevoegd wpw_welcome_page () functioneer als add_action aan de ADMIN_MENU.
Nu moeten we de inhoud van de welkomstpagina verwerken, waarvoor ik een wpw_welcome_page_content () functie (dit is de callback-functie voor add_submenu_page ()) waarvoor de welkom-view.php het dossier.
Je hebt misschien gemerkt dat ik een globale variabele heb gemaakt $ wpw_sub_menu die de pagina-scherm-ID bevat voor onze nieuwe submenu-pagina. We zullen dit in de volgende sectie gebruiken.
Meteen na dit alles heb ik een wachtrij geplaatst style.css bestand voor aangepaste styling van de elementen op onze welkomstpagina. In de bovenstaande code heb ik een globale variabele ingesteld $ wpw_sub_menu die de pagina-ID van het submenu bevatte.
We kunnen dit scherm-ID controleren terwijl ons stijlen-bestand in de wachtrij wordt geplaatst om ervoor te zorgen dat het alleen in de wachtrij wordt geplaatst wanneer we op de welkomstpagina browsen en niet overal in de beheerder. Dat is wat de volgende code aan het doen is.
/ ** * Stijlen in wachtrij plaatsen. * * @since 1.0.0 * / function wpw_styles ($ hook) global $ wpw_sub_menu; // Stijl alleen toevoegen aan de welkomstpagina. if ($ hook! = $ wpw_sub_menu) ga terug; // Welkomstpagina-stijlen. wp_enqueue_style ('wpw_style', WPW_URL. '/welcome/css/style.css', array (), WPW_VERSION, 'all'); // De stijlen inluiden. add_action ('admin_enqueue_scripts', 'wpw_styles');De logica van onze welkomstpagina is voltooid. Je kunt de complete code voor het welcome-logic.php bestand bekijken op GitHub.
Nu de logica van onze welkomstpagina is voltooid, kunt u de plug-in die u hebt gemaakt, daadwerkelijk testen en wordt u omgeleid naar de welkomstpagina. Het enige dat u hoeft te doen, is de weergave van uw welkomstpagina te maken. Dit kan alles zijn wat je wilt, maar ik wil je verlaten met wat standaardinformatie om voor de hand liggende redenen.
Het HTML- en CSS-gedeelte van de plug-in bevindt zich in de welkom-view.php het dossier. Zijn code gaat als volgt:
Het bestand begint als een normaal PHP-bestand met een DocBlock en vervolgens de code voor een ABSPATH controleer dit zodat niemand rechtstreeks toegang heeft tot het bestand. Daarna heb ik een variabele gemaakt voor de plugin-versie en het pad voor onze logo-afbeelding.
Ik heb een map toegevoegd met de naam css en een bestand genaamd style.css erin om een aantal aangepaste stijlen voor de welkomstpagina te maken. De code ziet er als volgt uit. Het is de code die wordt gebruikt om de extra klas aan te passen die ik heb toegevoegd voor ons logo. (U kunt het toevoegen zoals u wilt; ik heb zojuist het WP-logo overschreven om de dingen eenvoudig te houden voor het doel van deze zelfstudie.)
/ * Logo * / .svg .wp-badge.welcome__logo background: url ('... /img/logo.png') center 24px no-repeat # 0092f9; achtergrondformaat: bevatten; kleur: #fff; / * Responsive Youtube Video * / .embed-container hoogte: 0; max. breedte: 100%; overloop verborgen; opvulbodem: 56,25%; positie: relatief; .embed-container iframe, .embed-container-object, .embed-container embed top: 0; hoogte: 100%; links: 0; positie: absoluut; breedte: 100%; Hierna is er het HTML-gedeelte van onze pagina. Er is een video van YouTube ingesloten als een responsieve video.
Het HTML-gedeelte van de welkomstpagina is vergelijkbaar met dat van de standaard welkomstpagina van WordPress. Het voordeel hiervan is dat we niet veel CSS hoeven te schrijven en dat gebruikers al bekend zijn met het ingebouwde formaat.
Plug-ins zijn extensies voor WordPress. U kunt WordPress uitbreiden door een plug-in te maken, daarom denk ik dat u altijd de standaard en ingebouwde uiterlijken / stijlen moet gebruiken om de dingen meer in lijn te houden met het WordPress-dashboard. Sommige plug-ins voegen gekleurde pictogrammen en een zware achtergrond of wat dan ook toe, maar aan het eind van de dag verstoren ze een soepele gebruikerservaring.
Ik weet zeker dat ontwikkelaars van plug-ins goed thuis zijn in HTML-programmeren. Hier is de code hoe dan ook.
De code toont de volgende lay-out:
Op het moment van schrijven kunt u de volgende CSS-klassen gebruiken om kolommen te maken:
.feature-sectie samen met .één-col: Om een enkele kolom te maken..feature-sectie samen met .twee-col: Om twee kolommen te maken..feature-sectie samen met .drie-col: Om drie kolommen te maken.Hiermee is onze ontwikkeling van plug-ins voltooid. Laten we het testen op een demo-website.
Om de plug-in op een demowebsite te testen, kunt u het downloaden en installeren WP-Welcome-pagina-Boilerplate-For-TutsPlusvan GitHub.
Voer daarna de volgende stappen uit:
Voila! Je bent doorgestuurd naar de welkomstpagina?
Als je klaar bent, ga je terug naar de startpagina van het dashboard en beweeg je je muis over de plugins menu. Een extra submenu is toegevoegd, genoemd als de Welkomstpagina. Om u opnieuw te herinneren, dit is dezelfde pagina die ik eerder heb gemaakt.
Trouwens, de laatste welkomstpagina ziet er zo uit.
Hier is de volledige lay-out van het welkomstscherm.
Op deze manier kunt u een welkomstpagina maken voor uw WordPress-plug-in. Ik heb een zeer eenvoudige implementatie beschreven. U kunt het aanpassen aan uw vereisten. Ik zou aanraden om het te downloaden Welkom map en inclusief de welkom-init.php naar uw product (wijzig de globale constanten in de welkom-*. php-bestanden).
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.
