Plug-ins ontwikkelen met WordPress Boilerplates een plug-in bouwen

In het eerste artikel van deze serie hebben we gekeken hoe een boilerplate je ontwikkelingsinspanningen kan verbeteren door een basis te bieden waarvandaan je project kan worden gebouwd.

In het ideale geval moeten de verwarmingsplaten net voldoende van een kader bieden om van start te gaan terwijl u zich kunt concentreren op de specifieke bedrijfslogica, kernbehoefte of domeinspecifieke code die u moet schrijven.

Concreet bekeken we de WordPress Widget Boilerplates en de WordPress Plugin Boilerplate. In deze post gaan we profiteren van de Plugin Boilerplate om onze eigen plug-in te schrijven om te zien hoe Boilerplates de basis leggen voor het schrijven van goede code en hoe we het kunnen gebruiken als startpunt voor ons toekomstige werk.

Een invoegtoepassing voor berichten

In dit bericht gaan we een widget voor het melden van berichten maken waarmee de auteur een nieuw bericht vóór de inhoud op hun pagina kan toevoegen. Dit zal eigenlijk gebaseerd zijn op een plug-in die al in het wild is, dus je kunt een referentiepunt hebben zodra het project is voltooid.

Net als bij de rest van mijn tutorials, wil ik het project van tevoren plannen, dus laten we alles opmaken wat we gaan doen:

Download een kopie van de WordPress plug-in ketelplaat
Vul de TODO's in met de specifieke informatie voor uw eigen project
Implementeer de code die nodig is om informatie weer te geven en op te slaan in een bericht-metabox
Controleer op het bestaan van post-meta en geef deze vervolgens weer in de inhoud
Voltooi de README en lokalisatie

Over het algemeen is het een relatief eenvoudige plug-in, maar deze moet een goed voorbeeld zijn van hoe u met Boilerplates zich kunt concentreren op uw specifieke functionaliteit terwijl u werkt binnen de context van de best practices van WordPress.

De Widget bouwen

1. Download de WordPress plug-in ketelplaat

Om aan de slag te kunnen gaan, moet je een kopie van de WordPress plug-in ketelplaat downloaden. Je kunt dit doen door naar de GitHub-pagina te gaan en vervolgens op de 'zip'-knop te klikken die je bovenaan de pagina ziet of door hier te klikken.

Pak vervolgens de inhoud van de download uit in uw plugins directory. Het zou in eerste instantie een map moeten schrijven met de naam plugin-standaardtekst.

Hernoem dit om post-bericht. Op dit moment zijn we klaar om aan de broncode voor de boilerplate te gaan werken.

2. Vul de TODO's in de boilerplaat in

Open vervolgens de post-bericht map in uw favoriete IDE. Het eerste dat we willen doen is openen plugin.php en zoek dan alle TODO's die in de code voorkomen.

Uit de doos ziet de code er ongeveer zo uit:

Vervolgens moeten we elke TODO-plugin specifiek maken, zodat we alle exemplaren plaatsen waar nodig met een variatie op de naam van de plug-in.

Bijvoorbeeld:

Vervang de naam van de plug-in door Bericht plaatsen
Vervang de URL van de plug-in door uw URL naar keuze
Vul de naam, het e-mailadres en alle persoonlijke informatie in met wat werkt
Geef de klas een naam Post_Message
Geef locale-gerelateerde tekenreeksen, klasnamen en ID's een naam post-bericht

Vervolgens kunnen we alle JavaScript- en stijlbladoproepen verwijderen behalve de admin.css stijlen. We zullen dit bestand later gebruiken. Verwijder ook de volgende bestanden uit de Boilerplate:

views / display.php
css / plugin.css
js / admin.js
js / plugin.js

Dit zou je moeten verlaten met de volgende mapstructuur:

Merk op dat dit één ding is met betrekking tot een Boilerplate: als er iets is, zou u er iets van willen verwijderen. Als je er iets aan moet toevoegen dat je helpt om van de grond te komen - of dat is meer fundamenteel - dan is het misschien een kans om het te verbeteren.

Hoe dan ook, hoewel we nog niet klaar zijn, en hoewel wij zullen toevoegen aan de plug-in, het bestand zou er op dit punt ongeveer zo uit moeten zien:

Vervolgens moeten we daadwerkelijk aan onze kernlogica gaan werken.

3. Implementeer de code die nodig is om informatie weer te geven en op te slaan in een bericht-metabox

Ten eerste moeten we precies vaststellen hoe dit gaat werken:

We plaatsen een bericht-metabox direct onder de inhoudeditor
Het bevat een tekstvak waarmee gebruikers hun eigen inhoud kunnen opgeven
Wanneer het bericht is bijgewerkt, moet het de inhoud van het tekstgedeelte opslaan

Dus het eerste dat we moeten doen is een haak en een functie introduceren om de gegevens in de post-metabox te vangen. Laten we in de constructor de volgende regel toevoegen:

add_action ('add_meta_boxes', array ($ this, 'add_notice_metabox'));

Vervolgens moeten we de functie definiëren add_notice_metabox zodat we de metabox kunnen weergeven, dus laten we nu die functie opgeven:

 functie add_notice_metabox () add_meta_box ('post_message', __ ('Postbericht', 'post-bericht'), array ($ this, 'post_message_display'), 'post', 'normaal', 'high');  // einde add_notice_metabox

Hierna moeten we een functie schrijven die verantwoordelijk is voor het daadwerkelijk renderen van de inhoud van het bericht:

 functie post_message_display ($ post) wp_nonce_field (plugin_basename (__FILE__), 'post_message_nonce'); // Het tekstveld en het voorbeeldgebied echo ''. esc_textarea (get_post_meta ($ post-> ID, 'post_message', true)). '';  // end post_message_display

Merk hierboven op dat we een nonce-veld hebben geïntroduceerd voor veiligheidsdoeleinden. Merk ook op dat we dit hebben gegeven textarea de ID van post-bericht zodat we het gemakkelijk kunnen stijlen met CSS, en we hebben het de naam gegeven post_message wat handig is als we de inhoud van de textarea naar de metadata van de specifieke post.

Ten slotte hebben we gebruik gemaakt van de esc_textarea functie om ervoor te zorgen dat we onze gegevens correct coderen om deze in het tekstgebied weer te geven.

Laten we op dit punt wat lichte styling toevoegen met behulp van de admin.css bestand om het bericht een enigszins ander uiterlijk te geven dan de inhoud:

 # post-bericht width: 100%;

Dit zou in iets als het volgende moeten resulteren:

Natuurlijk zijn we nog steeds niet klaar. We moeten de gegevens daadwerkelijk opslaan en ophalen wanneer de gebruiker op de knop "Publiceren" of de knop "Update" klikt. Om dit te doen, moeten we een terugbelactie instellen voor het opslaan van de postgegevens.

Dus het laatste dat we moeten doen is een introduceren save_notice functie. Eerst registreren we dit in de constructor met de volgende code:

add_action ('save_post', array ($ this, 'save_notice'));

Vervolgens definiëren we de volgende functie:

 function save_notice ($ post_id) if (isset ($ _POST ['post_message_nonce']) && isset ($ _POST ['post_type'])) // Sla niet op als de gebruiker de wijzigingen niet heeft ingediend als (gedefinieerd ('DOING_AUTOSAVE') && DOING_AUTOSAVE) retour;  // end if // Controleer of de invoer afkomstig is van het juiste formulier als (! wp_verify_nonce ($ _POST ['post_message_nonce'], plugin_basename (__FILE__))) return;  // end if // Zorg ervoor dat de gebruiker rechten heeft om te posten if ('post' == $ _POST ['post_type']) if (! current_user_can ('edit_post', $ post_id)) return;  // end if // end if / else // Lees het bericht $ post_message = isset ($ _POST ['post_message'])? $ _POST ['post_message']: "; // Als de waarde voor het bericht er is, verwijder het dan als eerste. Wilt u geen extra rijen in de tabel schrijven. If (0 == count (get_post_meta ($ post_id, ' post_message '))) delete_post_meta ($ post_id,' post_message '); // end if // Update het voor dit bericht update_post_meta ($ post_id,' post_message ', $ post_message); // end if // einde save_notice

We hebben de inhoud van post-metadata uitvoerig besproken in eerdere artikelen, dus ik wil hier niet op dit punt ingaan, maar volstaan om te zeggen dat de functie het volgende doet:

Controleert of de gebruiker toestemming heeft om deze informatie op te slaan
Verwijdert bestaande metagegevens
Slaat de gegevens op naar de bijbehorende metadata van de post

Op dit moment zijn we klaar om de plug-in te testen, dus vul de textarea, sla de gegevens op en wanneer de pagina wordt vernieuwd, zorgt u ervoor dat de gegevens ook worden weergegeven in de textarea.

Als dat zo is, zijn we klaar om verder te gaan; Zorg er anders voor dat uw code lijkt op de bovenstaande code.

4. Geef de berichtgeving terug

Vervolgens zijn we klaar om het bericht in de inhoud weer te geven. Het proces hiervoor is als volgt:

Registreer een functie bij de de inhoud filter
Controleer op het bestaan van post-metadata
Render het boven de inhoud als deze aanwezig is

Dus laten we dat doen. Laten we eerst een functie registreren bij de inhoud filter:

add_filter ('the_content', array ($ this, 'prepend_post_message'));

Laten we daarna de eigenlijke functie instellen:

 function prepend_post_message ($ content) // Als er een melding is, voeg deze dan toe aan de inhoud if ("! = get_post_meta (get_the_ID (), 'post_message', true)) $ post_message = ''; $ post_message. = get_post_meta (get_the_ID (), 'post_message', true); $ post_message. = '
'; $ content = $ post_message. $ Inhoud;  // einde als return $ inhoud;  // end prepend_post_message

Merk op dat het bericht achter de zijn eigen is p element met een eigen klassennaam, zodat je het gemakkelijk kunt stylen zoals je zou willen, mocht je dat willen.

Op dit punt zouden we alles moeten hebben dat we nodig hebben om het bericht te zien, dus laten we het uittesten. Maak een bericht, publiceer het en bekijk het bericht vervolgens in je browser.

Verwijder vervolgens de berichtinhoud en controleer vervolgens of niets wordt weergegeven.

Makkelijk genoeg, is het niet?

5. Voltooi de README en lokalisatie

Ten slotte moeten we ervoor zorgen dat we README opruimen en de plug-in correct lokaliseren.

Ten eerste moet de README de gebruikelijke informatie bevatten. Dit is grotendeels subjectief; Ik heb hieronder echter een voorbeeld README gegeven:

 === Bericht sturen === Bijdragen: tommcfarlin Doneren link: http://tommcfarlin.com/single-post-message/ Tags: post Vereist ten minste: 3.4.1 Getest tot: 3.5 Stabiele tag: 1.0 Licentie: GPLv2 of later Licentie-URI: http://www.gnu.org/licenses/gpl-2.0.html Voeg eenvoudig korte berichten en aankondigingen toe boven berichten. Wordt weergegeven in de RSS-feed en op de blog. == Beschrijving == Bericht is een plug-in waarmee u aangepaste berichten, aankondigingen en mededelingen kunt toevoegen aan individuele berichten. Het is vormgegeven om de aandacht van de lezer te trekken en zal zowel de browser * als * in RSS-lezers weergeven. Bericht plaatsen ... * Ondersteunt het gebruik van HTML-tags in de inhoud van het bericht * Is direct beschikbaar onder de berichtcontenteditor * Is volledig gelokaliseerd en klaar voor vertaling == Installatie == = Het WordPress-dashboard gebruiken = 1. Navigeer naar de 'Nieuwe toevoegen' 'Plugin Dashboard 1. Selecteer' post-message.zip 'op uw computer 1. Uploaden 1. Activeer de plug-in op de WordPress Plugin Dashboard = Gebruik FTP = 1. Extraheer' post-mage.zip 'naar uw computer 1. Upload de 'post-messsage' directory naar uw 'wp-content / plugins' directory 1. Activeer de plug-in op het WordPress Plug-ins dashboard == Changelog == = 1.0 = * Eerste release

En tot slot zou lokalisatie een makkie moeten zijn: open gewoon de 'plugin.po'bestand in de'LANG'map in uw IDE, zorg ervoor dat u de naam van de plug-in en de auteursinformatie wijzigt en open deze in POEdit om de lokalisatiebestanden te registreren.

Sla je werk op en je bent klaar om te gaan!

Conclusie

In deze serie hebben we precies onderzocht wat er nodig is om te profiteren van WordPress Boilerplates, hoe ze een invloed kunnen hebben op onze workflow en ons kunnen helpen om ons meer op de kern van ons project te richten in plaats van het wiel opnieuw uit te vinden en op te staan en te gaan door een heleboel te herhalen wat al nodig is.

Daarnaast hebben we een plug-in gebouwd die kan worden gedownload voor verdere beoordeling.

Hopelijk heeft deze serie een reden gegeven waarom je boilerplate-code zou moeten gebruiken indien van toepassing, en heeft het geholpen om te laten zien hoe ze de pijn van het herschrijven van veel dezelfde code in elk van je projecten kunnen verlichten..

Code