Vi täcker många ämnen på den här bloggen - allt från något så enkelt som hur du inkluderar och kräver mallfiler i WordPress-projekt till något som en hel serie i Inställnings API, men jag tror att det alltid finns utrymme att täcka en enkel -Om det täcker en enda, specifik uppgift inom ramen för WordPress.
Så i den här tvådelade serien ska vi titta på hur vi introducerar en jQuery-datumväljare i vår inläggsredigerare så att vi kan associera ett datum med ett visst inlägg.
Om plugin
Vi gör allt detta inom ramen för ett plugin så att källkoden lätt kan hämtas via GitHub och kommer att ge ett fungerande exempel på handledningen.
Det första att notera är att inkorporering av jQuery-datumväljaren är inte menade att ersätta publiceringsdatumet för inlägget. Istället är det meningen att det är ett enkelt sätt att välja ett datum, spara det i postmetaddata och visa det för ett annat syfte, t.ex. när en händelse inträffar.
Planerar plugin
För alla som har läst några av mina tidigare inlägg vet du att jag är en fan av att planera projektet från början och sedan genomföra varje steg i taget för att se till att vi är klara på allt som händer.
Så låt oss göra det nu:
Vi ger skelettklassen för plugin
Vi skriver koden som är ansvarig för att generera meta-rutan för posten som gör det möjligt för användaren att välja datum
Vi implementerar datumväljaren jQuery så att användare faktiskt kan välja ett datum
Vi sparar data när inlägget publiceras och / eller uppdateras
Vi visar datumet i postens främre ände
Straight forward, eller hur? Med det sagt, låt oss börja.
Bygga plugin
I slutet av den här artikeln kommer hela plugin-programmet att finnas tillgängligt i det här GitHub-arkivet, men jag rekommenderar starkt att du följer med och skriver själva koden för att du ska följa allt som vi gör.
Koden kommer kommenteras så det borde vara lätt att följa. Om inte, var god att lämna kommentarer efter inlägget.
1. Stub ut Plugin Class
Förutsatt att du redan har skapat Wordpress-jQuery-Date-Picker katalog i din wp-content / plugins katalog, fortsätt och skapa två filer:
plugin.php
README.txt
Vi besöker README filen på lite, men låt oss fortsätta och stubba ut den klass som fungerar som vårt plugin.
Här är koden med mer förklaringar efter fragmentet:
Självklart finns det inte mycket på det ännu. Vi har helt enkelt definierat klassen, satt en tom konstruktör och instanserat pluginet utanför klassen.
Innan vi flyttar längre, låt oss fortsätta och förbereda plugin för lokalisering. För att göra detta måste vi göra flera saker:
Presentera a lang katalog
Lägg till lang / plugin.po
Ange textdomänen för plugin-enheten inom konstruktorn
Kom ihåg att lokalisering används för att vara säker på att översättarna kan göra vårt plugin kompatibelt med andra språk, och att Poedit är det valfria verktyget.
De plugin.po filen ska innehålla något som följer (ditt kommer självklart att vara annorlunda baserat på datum, tid och konfiguration av Poedit):
msgstr "" "Project-Id-Version: WordPress jQuery Date Picker 1,0 \ n" "Report-Msgid-Bugs-To: \ n" "POT-skapningsdatum: 2013-02-07 13: 36-0500 \ n "" PO-Revision-Date: 2013-02-07 13: 36-0500 \ n "" Senast översättare: Tom McFarlin \ n "" Språklag: Tom McFarlin \ n "" Språk: en_US \ n "" MIME-Version: 1.0 \ n "" Content-Type: text / plain; charset = UTF-8 \ n "" Content-Transfer-Encoding: 8bit \ n "" X-Poedit-NyckelordList: __; _ e \ n "" X-Poedit-Basepath:. \ n "" X-Generator: Poedit 1.5 .5 \ n "" X-Poedit-SearchPath-0: ... \ n "
Därefter måste vi ställa in textdomänen i konstruktören. Först, inkludera följande rad i din konstruktör:
/ ** * Laddar plugintextdomänen för översättning * * @ version 1.0 * @since 1.0 * / public function plugin_textdomain () load_plugin_textdomain ('wp-jquery-date-picker', falskt, dirname (plugin_basename (__FILE__)). '/ lang'); // end plugin_textdomän
Det viktigaste att notera här är användningen av wp-jquery-date-picker nyckeln eftersom det här är vad vi ska använda för att lokalisera strängarna under resten av plugin.
Slutligen, vi kommer att se om detta tillsammans med README fil senare i handledningen.
2. Skapa metaboxen
Vid denna tidpunkt är vi redo att definiera koden som kommer att göra metaboxen. Detta består av flera steg:
Definiera kroken i konstruktören
Registrera meta-rutan med WordPress
Definiera en funktion som används för att göra den aktuella metakassen
Lägg till följande kodrad i konstruktören. Det här är vad vi ska använda för att registrera vår post-meta box:
I funktionen ovan säger vi att WordPress letar efter vår meta-box i en funktion som heter add_date_meta_box, så vi måste definiera det nu.
Lägg till följande kod i din klass:
/ ** * Registrerar meta boxen för att visa alternativet "Datum" i postredigeraren. * * @ version 1.0 * @since 1.0 * / public function add_date_meta_box () add_meta_box ('the_date', __ ('Date'en,' wp-jquery-date-picker'en), array ($ this, 'the_date_display') , "post", "sida", "låg"); // end add_date_meta_box
Vi har täckt meta lådor på djupet i olika tutorials och WordPress Codex har en fantastisk artikel som förklarar vad varje parameter gör, så jag vill inte belabor punkten här.
Det sägs att det finns en specifik sak som vi måste märka i samtalet ovan. Observera att metaboxen letar efter att registrera sin skärm med hjälp av en funktion som heter the_date_display.
Som sådan måste vi definiera denna funktion. Lyckligtvis kan metakassen vara mycket enkel: För att utlösa datumväljaren behöver vi bara ett enda element. Eftersom vi ska göra datumet, låt oss välja att använda en enkel inmatningslåda.
Lägg sedan till följande funktion i din klass:
/ ** * Ger användargränssnittet för att slutföra projektet i dess tillhörande meta box. * * @ version 1.0 * @since 1.0 * / allmän funktion the_date_display ($ post) wp_nonce_field (plugin_basename (__FILE__), 'wp-jquery-date-picker-nonce'); eko "'; // slutdatumet_displayen
Lätt att förstå, rätt?
Vi definierar ett nonce-värde för säkerhetsändamål som ger oss de säkerhetsfunktioner vi behöver för att säkerställa att användaren har behörigheter att spara värden för detta fält och sedan gör vi ett inmatningselement på skärmen.
Observera att inmatning elementet innehåller ett ID för "datepicker" och ett namn på "datumet". Detta kommer att importeras senare, men spara nu ditt arbete.
Om du aktiverar plugin just nu bör du se något som följande:
Självklart behöver detta lite ljus styling för att få det att se lite bättre ut. Så, låt oss göra följande:
Därefter lägger du till den här funktionen i din plugin:
/ ** * Registrera och ange admin-specifika stilar. * * @ 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')); // sluta register_admin_styles
Vid denna punkt bör bredden på ingångslådan för datumväljaren sträcka sig över bredden på metakassens behållare. Gör det ser bara lite snyggare ut, enligt min åsikt.
3. Spara datumet
Innan vi faktiskt börjar implementera datumväljaren, låt oss fortsätta och se till att vår nya post-meta box kan korrekt spara information. Just nu är det inte möjligt eftersom vi inte har skrivit koden för den.
Detta särskilda steg kommer att innebära följande:
Definiera en funktion för att spara data
Se till att användaren har möjlighet att spara data
Faktiskt sparar data
Först måste vi definiera kroken för att spara data. Till detta lägger du till följande rad till din konstruktör direkt under linjen där vi definierade kroken för att skapa metaboxen:
add_action ('save_post', array ($ this, 'save_project_date')); [php] Nästa måste vi faktiskt definiera save_project_date fungera. Den här funktionen kommer att vara ansvarig för att säkerställa att användaren har behörighet att spara data och sedan lagrar faktiskt innehållet i inmatningsfältet i postmetoden för den tillhörande posten. Så lägg till följande funktion i ditt plugin: [php] / ** * Sparar projektets slutföringsdata för inkommande post-ID. * * @param int Nuvarande Post-ID. * @version 1.0 * @since 1.0 * / public function save_the_date ($ post_id) // Om användaren har behörighet att spara metadata ... om ($ this-> user_can_save ($ post_id, 'wp-jquery-date-picker -nonce)) // Radera eventuella befintliga metadata för ägaren om (get_post_meta ($ post_id, 'the_date')) delete_post_meta ($ post_id, 'the_date'); // slut om update_post_meta ($ post_id, 'the_date', strip_tags ($ _POST ['the_date']))); // slutet om // sluta spara_the_date
Den här funktionen fungerar genom att i princip kontrollera om den här användaren kan spara. Om så är fallet kommer det att radera alla befintliga postmetoder för att inte rota databasen och sedan lägga till det datum som anges för detta inlägg.
Men det finns en fångst: Vi ringer till en funktion som heter user_can_save. Denna speciella funktion är en hjälpfunktion som vi behöver definiera eftersom det förenklar mycket av kedjekortskoden som är nödvändig för att säkerställa att användaren har behörighet att spara filen.
Så i området "Hjälperfunktioner" i din klass lägger du till följande funktion:
/ ** * Bestämmer huruvida den nuvarande användaren har möjlighet att spara metadata som är associerad med detta inlägg. * * @param int $ post_id ID för posten sparas * @param bool Huruvida användaren har möjlighet att spara det här inlägget eller inte. * @version 1.0 * @since 1.0 * / privat funktion 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__)))? sant falskt; // Retur sant om användaren kan spara; annars, false. lämna tillbaka ! ($ is_autosave || $ is_revision) && $ is_valid_nonce; // slutanvändare_can_save
Observera att den här funktionen tar in det nuvarande post-ID-värdet och nonce-värdet (som vi angav tidigare i det här inlägget). Slutligen returnerar denna funktion sant om det inte är en autosave, en postrevision och att nonceen är giltig.
Om det är sant, har användaren tillstånd att spara.
Slutsats
Låt oss nu pröva vad vi har. Aktivera plugin, och du ska se meta-rutan på instrumentpanelen Post Editor. Just nu borde du kunna spara vilket värde som helst i det aktuella fältet.
Du kan ta en kopia av insticksprogrammet i sin nuvarande version för det här inlägget med den här länken.
I nästa artikel kommer vi att ta en titt på att faktiskt implementera datumväljaren. Detta inkluderar att importera de nödvändiga JavaScript-beroenden, skriva lite av vår egen JavaScript och sedan göra datumet i postens främre ände.
Slutligen förbereder vi pluginet för utgivning genom att generera lokaliseringsfilerna och sedan förbereda README.
Share
Accentsconagua
