Share
I denna serie arbetar vi med ett plugin för det enkla syftet att införa en jQuery-datumväljare i postredigeraren med en post-metakassa och sedan visa den på platsens främre ände.
Snarare än att göra en omfattande, detaljerad serie om ett djupt ämne i WordPress - syftet med denna serie är att fokusera på ett mycket nischämne.
I den första artikeln i serien uppnådde vi följande:
I den här artikeln återupptar vi arbetet genom att implementera jQuery Date Picker, lagra datumet i inlägget och sedan förbereda plugin för utgivande.
Vi har redan genomfört tre av de sex steg som behövs för att implementera vårt plugin. Nu handlar det om att införliva alla nödvändiga JavaScript för att visa färgplockaren och hämta data.
Men tack vare WordPress är detta verkligen inte så svårt så mycket av vad vi behöver är redan buntad med kärnanvändningen.
För att implementera datumväljaren jQuery behöver vi flera beroenden:
Lägg först följande rad till din konstruktör:
Accentsconagua
add_action ('admin_enqueue_scripts', array ($ this, 'register_admin_scripts')); Därefter måste vi faktiskt definiera funktionen som kommer att uppfylla jQuery Date Picker-biblioteket samt vår egen anpassade JavaScript-fil.
Så fortsätt och definiera register_admin_scripts och raden för att inkludera jQuery datumväljaren:
/ ** * Registrerar och kodar adminspecifik JavaScript. * * @ version 1.0 * @since 1.0 * / public function register_admin_scripts () wp_enqueue_script ('jquery-ui-datepicker'); // sluta register_admin_scripts Därefter introducera en js katalog i din plugin och lägg sedan till en admin.js filen till den katalogen.
Filen ska innehålla följande JavaScript:
(funktion ($) $ (funktion () // Kontrollera att inmatningsrutan finns om (0 < $('#datepicker').length ) $('#datepicker').datepicker(); // end if ); (jQuery)); Enkelt uttryckt kommer den här filen att utföra JavaScript för varje sida i instrumentbrädan. där är ett alternativt sätt att hantera detta, men det ligger utanför ramen för denna artikel.
I stället har vi vår JavaScript-kontroll för att elementet finns. Om det existerar, gäller det Datumväljare plugin till elementet.
Slutligen måste vi registrera jQuery Date Picker-stilarket med vårt plugin. För att göra detta lägger du till följande rad i din register_admin_styles fungera:
wp_enqueue_style ('jquery-ui-datepicker', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css'); Vid denna tidpunkt uppdatera pluginet och du bör kunna klicka på inmatning element och se något så här:
Ganska coolt eller inte? Observera att när du väljer ett datum kommer det automatiskt att applicera datumet till inmatningselementet. Om du är intresserad av att anpassa datumformatet (eller andra aspekter av datumväljaren) ännu mer, var noga med att kolla in dess API-dokument.
Vid denna tidpunkt är vi redo att visa datumet på det aktuella inlägget. För vårt plugin ska vi lägga det här till innehållet.
För att göra detta, definiera följande krok i konstruktorn för ditt plugin:
add_action ('the_content', array ($ this, 'prepend_the_date')); Därefter måste vi faktiskt definiera funktionen. Det är dock väldigt enkelt. Kolla in det, så ska jag förklara det efter kodkoden:
/ ** * Sparar projektets slutföringsdata för inkommande post-ID. * * @param int Nuvarande Post-ID. * @version 1.0 * @since 1.0 * / public function prepend_the_date ($ content) // Om postmetan inte är tom för 'the_date', gör sedan det i innehållet om (0! = ($ the_date = get_post_meta get_the_ID (), 'the_date', true))) $ content = ''. $ the_date. '
'. content $; // slut om retur $ innehåll // slutet prepend_the_date
I den här funktionen kontrollerar vi metadata för posten för det aktuella inlägget. Eftersom denna funktion brinner inom ramen för The Loop, kan vi använda den get_the_ID ().
Om datumsträngen - det vill säga posten meta som tagits in av datumet - är inte tomt, så lägger vi det i en stycketikett och lägger ut det till $ innehåll; annars kommer vi bara tillbaka $ innehåll som det är.
Vid denna tidpunkt finns det bara två saker kvar att göra:
Att skapa lokaliseringsfilen är enkel. Sedan vi definierade plugin.po filen i den första artikeln, allt vi behöver göra är att öppna filen med Poedit, klicka på "Update" och spara sedan filen. Detta kommer att generera en plugin.mo fil i lang katalog.
Därefter måste vi skapa en README fil som följer WordPress Readme-konventionerna. Även om du kan vara så kreativ som du vill, har jag delat min nedan.
=== WordPress jQuery Date Picker === Bidragsgivare: tommcfarlin Taggar: datum, inlägg Kräver åtminstone: 3.5 Testade upp till: 3.5.1 Stabil tag: 1.0 Ett propp plugin som används för att visa hur du inkluderar jQuery Date Picker i posten redaktör. == Beskrivning == WordPress jQuery Date Picker är ett enkelt plugin som används för att visa hur man utnyttjar anpassade postmeta-rutor, metadata och jQuery-plugins för att tillåta användare att välja datum som ska visas inom sina inlägg. == Installation == = Använda WordPress Dashboard = 1. Navigera till "Add New" Plugin Dashboard 2. Välj "wordpress-jquery-date-picker.zip" från din dator 3. Ladda upp 4. Aktivera plugin på WordPress Plugin Dashboard = Använda FTP = 1. Extrahera 'wordpress-jquery-date-picker.zip' till din dator 2. Ladda upp 'wordpress-jquery-date-picker'-katalogen till din' wp-content / plugins'-katalog 3. Aktivera plugin på instrumentpanelen för WordPress Plugins == Vanliga frågor == = Just nu visas datumet högst upp på posten. Kan jag ändra sin position? = Nej == Changelog == = 1.0 = * Initial release
Inget banbrytande - säger precis vad det gör.
Om du inte redan har det, se till att ta den senaste versionen av plugin-programmet från GitHub, läs kommentarerna och följ med för att du förstår allt som händer i pluginprogrammet..
Och det är allt - lätt nog, rätt?
Som vanligt, vänligen lämna kommentarer och frågor i kommentarformuläret nedan.
