We behandelen een heleboel onderwerpen op deze blog - alles variërend van iets eenvoudigs als het opnemen van en vereisen van sjabloonbestanden in WordPress-projecten tot iets als een hele serie over de Settings API, maar ik denk dat er altijd ruimte is om een eenvoudige How -Daarom dekt een enkele specifieke taak binnen de context van WordPress.
Dus, in deze tweedelige serie, gaan we kijken hoe we een jQuery-datumkiezer in onze berichteditor kunnen introduceren, zodat we een datum aan een bepaald bericht kunnen koppelen..
Over de plug-in
We zullen dit allemaal doen binnen de context van een plug-in, zodat de broncode gemakkelijk kan worden gedownload via GitHub en een werkend voorbeeld van de tutorial zal zijn.
Het eerste ding om op te merken is dat het opnemen van de jQuery datumkiezer is niet bedoeld om de publicatiedatum van het bericht te vervangen. In plaats daarvan is het bedoeld om een eenvoudige manier te bieden om een datum te selecteren, op te slaan in de metagegevens van de post en deze vervolgens weer te geven voor een ander doel, bijvoorbeeld wanneer een gebeurtenis zal plaatsvinden.
De plug-in plannen
Voor iedereen die een van mijn vorige berichten heeft gelezen, weet je dat ik een fan ben van het project van het begin af aan plannen en vervolgens elke stap tegelijk implementeren om ervoor te zorgen dat we duidelijk zijn over alles wat er gebeurt.
Dus laten we dat nu doen:
We zullen de skelet-klasse voor de plug-in leveren
We schrijven de code die verantwoordelijk is voor het genereren van de post-metabox waarmee de gebruiker de datum kan selecteren
We zullen de jQuery-datumkiezer implementeren, zodat gebruikers daadwerkelijk een datum kunnen selecteren
We bewaren de gegevens wanneer het bericht is gepubliceerd en / of bijgewerkt
We geven de datum aan de voorkant van het bericht weer
Eenvoudig, toch? Met dat gezegd, laten we aan de slag gaan.
De plug-in bouwen
Aan het einde van dit artikel is de volledige plug-in beschikbaar in deze GitHub-repository, maar ik raad u aan de code zelf te volgen en te schrijven om ervoor te zorgen dat u alles volgt wat we doen.
De code zullen worden becommentarieerd, dus het moet gemakkelijk te volgen zijn. Als dat niet het geval is, voel je altijd vrij om reacties achter te laten na het bericht.
1. Ontbind de plug-inklasse
Ervan uitgaande dat u al de WordPress-jQuery-Date-Picker map in uw wp-content / plugins map, ga je gang en maak twee bestanden:
plugin.php
README.txt
We zullen de Leesmij bestand in een beetje, maar laten we verder gaan en de klasse uitplukken die dienst doet als onze plug-in.
Hier is de code met meer uitleg na het fragment:
Vanzelfsprekend is er nog niet veel aan de hand. We hebben eenvoudig de klasse gedefinieerd, een lege constructor ingesteld en de plug-in buiten de klas geïnstantieerd.
Voordat we verder gaan, laten we doorgaan en de plug-in voorbereiden voor lokalisatie. Om dit te doen, moeten we verschillende dingen doen:
Introduceer een LANG directory
Toevoegen lang / plugin.po
Stel het tekstdomein voor de plug-in in de constructor in
Houd er rekening mee dat lokalisatie wordt gebruikt om er zeker van te zijn dat vertalers onze plug-in compatibel kunnen maken met andere talen en dat Poedit de tool bij uitstek is.
De plugin.po bestand zou iets van het volgende moeten bevatten (de uwe zal uiteraard anders zijn op basis van de datum, de tijd en de configuratie van Poedit):
msgid "" msgstr "" "Project-Id-versie: WordPress jQuery Date Picker 1.0 \ n" "Report-Msgid-Bugs-To: \ n" "POT-Creation-Date: 2013-02-07 13: 36-0500 \ n "" PO-Revisiedatum: 2013-02-07 13: 36-0500 \ n "" Laatste-Vertaler: Tom McFarlin \ n "" Taal-Team: Tom McFarlin \ n "" Taal: en_US \ n "" MIME-versie: 1.0 \ n "" Inhoudstype: tekst / gewoon; charset = UTF-8 \ n "" Content-Transfer-Encoding: 8bit \ n "" X-Poedit-KeywordsList: __; _ e \ n "" X-Poedit-Basepath:. \ n "" X-Generator: Poedit 1.5 .5 \ n "" X-Poedit-SearchPath-0: ... \ n "
Vervolgens moeten we het tekstdomein in de constructor instellen. Voeg ten eerste de volgende regel toe aan uw constructor:
Voeg vervolgens de volgende functie toe aan uw bestand:
/ ** * Laadt het plugin-tekstdomein voor vertaling * * @version 1.0 * @since 1.0 * / public function plugin_textdomain () load_plugin_textdomain ('wp-jQuery-date-picker', false, dirname (plugin_basename (__FILE__)). '/ lang'); // end plugin_textdomain
Het belangrijkste om hier op te merken is het gebruik van de wp-jquery-date-picker key omdat dit is wat we zullen gebruiken om de strings te lokaliseren gedurende de rest van de plugin.
Ten slotte zullen we dit samen met de Leesmij bestand later in de tutorial.
2. Maak de metabox
Op dit punt zijn we klaar om de code te definiëren die de metabox zal weergeven. Dit bestaat uit verschillende stappen:
De haak definiëren in de constructor
Registreer de metabox bij WordPress
Een functie definiëren die wordt gebruikt om de werkelijke metabox te maken
Voeg in de constructor de volgende regel code toe. Dit is wat we zullen gebruiken om onze post metabox te registreren:
In de bovenstaande functie vertellen we WordPress dat we moeten zoeken naar onze meta-box voor datums in een functie met de naam add_date_meta_box, dus we moeten dat nu definiëren.
Voeg binnen je klas de volgende code toe:
/ ** * Registreert de metabox voor het weergeven van de optie 'Datum' in de berichteditor. * * @version 1.0 * @since 1.0 * / public function add_date_meta_box () add_meta_box ('the_date', __ ('The Date', 'wp-jquery-date-picker'), array ($ this, 'the_date_display') , 'post', 'side', 'low'); // end add_date_meta_box
We hebben de meta-boxen in de diepte behandeld in verschillende tutorials en de WordPress Codex heeft een geweldig artikel waarin wordt uitgelegd wat elke parameter doet, dus ik wil hier niet op dit punt ingaan.
Dat gezegd hebbende, is er één specifiek ding dat we moeten opmerken in de bovenstaande oproep. Merk op dat de metabox zijn weergave wil registreren met behulp van een functie genaamd the_date_display.
Daarom moeten we deze functie definiëren. Gelukkig kan de metabox erg eenvoudig zijn: om de datumkiezer te activeren, hebben we slechts één element nodig. Omdat we de datum gaan weergeven, kunnen we een eenvoudig invoervak gebruiken.
Voeg vervolgens de volgende functie toe aan uw klas:
/ ** * Hiermee wordt de gebruikersinterface weergegeven voor het voltooien van het project in de bijbehorende metabox. * * @version 1.0 * @since 1.0 * / public function the_date_display ($ post) wp_nonce_field (plugin_basename (__FILE__), 'wp-jquery-date-picker-nonce'); echo ''; // einde the_date_display
Makkelijk te begrijpen, toch??
We definiëren een nonce-waarde voor beveiligingsdoelen die ons de beveiligingsfuncties biedt die we nodig hebben om ervoor te zorgen dat de gebruiker machtigingen heeft om waarden voor dit veld op te slaan, waarna we een invoerelement naar het scherm renderen.
Merk op dat de invoer element bevat een ID van "datepicker" en een naam van "de datum". Dit wordt later geïmporteerd, maar sla je werk nu op.
Als je nu de plug-in activeert, zou je ongeveer het volgende moeten zien:
Vanzelfsprekend heeft dit een lichte styling nodig om het er net een beetje beter uit te laten zien. Dus laten we het volgende doen:
/ ** * Registreert en brengt beheerdersspecifieke stijlen bij elkaar. * * @version 1.0 * @since 1.0 * / public function register_admin_styles () wp_enqueue_style ('wp-jQuery-date-picker', plugins_url ('WordPress-jQuery-Date-Picker / css / admin.css')); // end register_admin_styles
Op dit punt moet de breedte van het invoervak voor de datumkiezer de breedte van de container van de metabox beslaan. Maakt het naar mijn mening een beetje leuker.
3. Sla de datum op
Voordat we daadwerkelijk beginnen met de implementatie van de datumkiezer, laten we ervoor zorgen dat onze nieuwe berichten-metabox informatie op de juiste manier kan opslaan. Op dit moment is het niet mogelijk omdat we de code ervoor niet hebben geschreven.
Deze specifieke stap omvat het volgende:
Een functie definiëren voor het opslaan van de gegevens
Ervoor zorgen dat de gebruiker de mogelijkheid heeft om de gegevens op te slaan
Eigenlijk de gegevens opslaan
Eerst moeten we de haak definiëren voor het opslaan van de gegevens. Hiertoe voegt u de volgende regel toe aan uw constructor direct onder de regel waarop we de haak hebben gedefinieerd voor het maken van de metabox:
add_action ('save_post', array ($ this, 'save_project_date')); [php] Vervolgens moeten we de. definiëren save_project_date functie. Deze functie zorgt ervoor dat de gebruiker toestemming heeft om de gegevens op te slaan en slaat vervolgens de inhoud van het invoerveld op in de bericht-meta voor de bijbehorende post. Voeg dus de volgende functie toe aan uw plug-in: [php] / ** * Slaat de projectopvolgingsgegevens voor de inkomende bericht-ID op. * * @param int De huidige bericht-ID. * @version 1.0 * @since 1.0 * / public function save_the_date ($ post_id) // Als de gebruiker toestemming heeft om de metadata op te slaan ... if ($ this-> user_can_save ($ post_id, 'wp-jquery-date-picker -nonce ')) // Verwijder bestaande metadata voor de eigenaar als (get_post_meta ($ post_id,' the_date ')) delete_post_meta ($ post_id,' the_date '); // end if update_post_meta ($ post_id, 'the_date', strip_tags ($ _POST ['the_date'])); // end if // end save_the_date
Deze functie werkt door in principe te controleren of deze gebruiker kan opslaan. Als dit het geval is, worden bestaande meta-meta's verwijderd om de database niet te vervuilen en wordt de datum die aan dit bericht is opgegeven toegevoegd.
Maar er is een valstrik: we bellen naar een functie genaamd user_can_save. Deze specifieke functie is een hulpfunctie die we moeten definiëren omdat het veel van de code van de boilerplate vereenvoudigt die nodig is om ervoor te zorgen dat de gebruiker toestemming heeft om het bestand op te slaan.
Dus voeg in het gedeelte "Helperfuncties" van je klas de volgende functie toe:
/ ** * Bepaalt of de huidige gebruiker de mogelijkheid heeft om metagegevens te bewaren die aan dit bericht zijn gekoppeld. * * @param int $ post_id De ID van het bericht dat wordt opgeslagen * @param bool Of de gebruiker de mogelijkheid heeft om dit bericht op te slaan. * @version 1.0 * @since 1.0 * / private function user_can_save ($ post_id, $ nonce) $ is_autosave = wp_is_post_autosave ($ post_id); $ is_revision = wp_is_post_revision ($ post_id); $ is_valid_nonce = (isset ($ _POST [$ nonce]) && wp_verify_nonce ($ _POST [$ nonce], plugin_basename (__FILE__)))? waar onwaar; // Return true als de gebruiker kan opslaan; anders, false. terug! ($ is_autosave || $ is_revision) && $ is_valid_nonce; // end user_can_save
Merk op dat deze functie de huidige bericht-ID en de nonce-waarde (die we eerder in dit bericht hebben ingesteld) omvat. Ten slotte retourneert deze functie true als dit geen automatische opslag is, een post-herziening en dat de nonce geldig is.
Als het waar is, heeft de gebruiker toestemming om op te slaan.
Conclusie
Laten we op dit punt eens proberen wat we hebben. Activeer de plug-in en je zou de metabox in het Post Editor-dashboard moeten zien. Op dit moment zou je elke waarde die je zou willen kunnen opslaan in dat specifieke veld.
Je kunt via deze link een kopie van de plug-in in de huidige versie voor dit bericht pakken.
In het volgende artikel gaan we kijken naar het daadwerkelijk implementeren van de datumkiezer. Dit omvat het importeren van de benodigde JavaScript-afhankelijkheden, het schrijven van een beetje van onze eigen JavaScript en het renderen van de datum aan de voorkant van het bericht.
Ten slotte bereiden we de plug-in voor op release door de lokaliseringsbestanden te genereren en vervolgens de Leesmij.
Share
Accentsconagua
