Share
In deze serie werken we aan een plug-in voor het eenvoudige doel van het introduceren van een jQuery-datumkiezer in de berichteditor met behulp van een post-metabox en deze vervolgens weer te geven op de voorkant van de site.
In plaats van een uitgebreide, gedetailleerde serie over een diep onderwerp in WordPress - is het doel van deze serie om je te concentreren op een heel nichekwestie.
In het eerste artikel in de serie hebben we het volgende bereikt:
In dit artikel gaan we verder met het werk door de jQuery-datumkiezer te implementeren, de datum in het bericht op te slaan en de plug-in voor te bereiden voor vrijgave.
We hebben al drie van de zes stappen voltooid die nodig zijn om onze plug-in te implementeren. Nu is het een kwestie van het opnemen van alle benodigde JavaScript om de kleurenkiezer te tonen en de gegevens op te halen.
Maar dankzij WordPress is dit echt niet zo moeilijk, omdat veel van wat we nodig hebben al is gebundeld met de kernapplicatie.
Om de datumkiezer jQuery te implementeren, hebben we verschillende afhankelijkheden nodig:
Voeg eerst de volgende regel toe aan uw constructor:
Accentsconagua
add_action ('admin_enqueue_scripts', array ($ this, 'register_admin_scripts')); Vervolgens moeten we de functie definiëren die de jQuery-datumkiezerbibliotheek en ons eigen aangepaste JavaScript-bestand in wachtrij zal plaatsen..
Dus ga je gang en definieer register_admin_scripts en de regel voor het opnemen van de datumkiezer jQuery:
/ ** * Registreert en voorziet in beheerdersspecifieke JavaScript. * * @version 1.0 * @since 1.0 * / public function register_admin_scripts () wp_enqueue_script ('jquery-ui-datepicker'); // end register_admin_scripts Introduceer vervolgens een js map in uw plug-in en voeg vervolgens een admin.js bestand naar die map.
Het bestand zou het volgende JavaScript moeten bevatten:
(functie ($) $ (function () // Controleer of het invoervak bestaat als (0 < $('#datepicker').length ) $('#datepicker').datepicker(); // end if ); (jQuery)); Simpel gezegd, dit bestand voert het JavaScript uit voor elke pagina die op het dashboard is geladen. Er is een alternatieve manier om dit aan te pakken, maar het valt buiten het bestek van dit artikel.
In plaats daarvan hebben we onze JavaScript-controle op het bestaan van het element. Als het bestaat, past het de datumkiezer plugin naar het element.
Ten slotte moeten we de stylesheet jQuery Date Picker registreren met onze plug-in. Hiertoe voegt u de volgende regel toe aan uw register_admin_styles functie:
wp_enqueue_style ('jquery-ui-datepicker', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/smoothness/jquery-ui.css'); Vernieuw op dit moment de plug-in en je zou op de kunnen klikken invoer element en zie zoiets als dit:
Best cool, toch? Merk op dat wanneer u een datum selecteert, deze de datum automatisch op het invoerelement toepast. Als u geïnteresseerd bent in het aanpassen van de datumnotatie (of andere aspecten van de datumkiezer), kijk dan eens naar de API-documenten.
Op dit moment zijn we klaar om de datum van het daadwerkelijke bericht weer te geven. Voor het doel van onze plug-in gaan we dit voorbereiden op de inhoud.
Hiertoe definieert u de volgende haak in de constructor van uw plug-in:
add_action ('the_content', array ($ this, 'prepend_the_date')); Vervolgens moeten we de functie eigenlijk definiëren. Het is echter heel eenvoudig. Bekijk het, dan zal ik het na het codefragment uitleggen:
/ ** * Slaat de projectopvolgingsgegevens voor de inkomende bericht-ID op. * * @param int De huidige bericht-ID. * @version 1.0 * @since 1.0 * / public function prepend_the_date ($ content) // Als de meta van het bericht niet leeg is voor 'the_date', render het dan in de content if (0! = ($ the_date = get_post_meta ( get_the_ID (), 'the_date', true))) $ content = ''. $ the_date. '
'. $ Inhoud; // einde als return $ inhoud; // einde prepend_the_date
In deze functie controleren we de post-metadata voor het huidige bericht. Omdat deze functie binnen de context van The Loop wordt geactiveerd, kunnen we deze gebruiken get_the_ID ().
Als de datumreeks - dat wil zeggen de berichtmeta is ingetoetst de datum - is niet leeg, dan verpakken we het in een alinealabel en voegen we het toe aan de $ inhoud; anders geven we alleen het $ inhoud zoals het is.
Op dit moment zijn er nog maar twee dingen te doen:
Het lokaliseringsbestand maken is eenvoudig. Omdat we de plugin.po bestand in het eerste artikel, alles wat we moeten doen is het bestand openen met Poedit, klik op 'Update' en sla het bestand op. Dit genereert een plugin.mo bestand in de LANG directory.
Vervolgens moeten we een maken Leesmij bestand dat de WordPress Readme-conventies volgt. Hoewel je zo creatief kunt zijn als je wilt, heb ik de mijne hieronder gedeeld.
=== WordPress jQuery Date Picker === Bijdragers: tommcfarlin Tags: datum, bericht Vereist ten minste: 3.5 Getest tot: 3.5.1 Stable-tag: 1.0 Een voorbeeldplug-in gebruikt om aan te tonen hoe de jQuery-datumkiezer in de post moet worden opgenomen editor. == Beschrijving == WordPress jQuery Date Picker is een eenvoudige plug-in die wordt gebruikt om te demonstreren hoe u kunt profiteren van aangepaste post-metaboxen, metagegevens en jQuery-plug-ins, zodat gebruikers data kunnen selecteren die in hun berichten moeten worden weergegeven. == Installatie == = Het gebruiken van het WordPress Dashboard = 1. Navigeer naar het 'Voeg nieuwe toe' Plugin Dashboard 2. Selecteer 'wordpress-jquery-date-picker.zip' op je computer 3. Upload 4. Activeer de plugin op de WordPress Plugin Dashboard = Gebruik FTP = 1. Pak 'wordpress-jquery-date-picker.zip' uit op je computer 2. Upload de map 'wordpress-jQuery-date-picker' in je map 'wp-content / plugins' 3. Activeer de plug-in op het dashboard van WordPress Plug-ins == Veelgestelde vragen == = Op dit moment verschijnt de datum alleen bovenaan het bericht. Kan ik zijn positie wijzigen? = Nr. == Changelog == = 1.0 = * Eerste release
Niks baanbrekend - zegt gewoon precies wat het doet.
Als je dat nog niet hebt gedaan, zorg er dan voor dat je de laatste versie van de plug-in van GitHub haalt, lees de opmerkingen en volg hem om er zeker van te zijn dat je begrijpt wat er allemaal in de plug-in gebeurt.
En dat is alles - gemakkelijk genoeg, toch??
Laat zoals gebruikelijk opmerkingen en vragen achter op het reactieformulier hieronder.
