Share
In dit deel van de serie zullen we beginnen met het schrijven van onze code. Om specifieker te zijn, zullen we:
Dit is een programmeerhandleiding met veel code, dus open je favoriete code-editor en pak een kop koffie!
Voordat we verder gaan met het schrijven van de code, beginnen we met het definiëren van enkele constanten voor onze paden. Dit zal ons later helpen bij het registreren van onze scripts en stylesheets.
Open eerst de aankomende-events.php bestand, voeg de volgende code toe:
Accentsconagua
define ('ROOT', plugins_url (", __FILE__)); define ('IMAGES', ROOT. '/ img /'); define ('STYLES', ROOT. '/ css /'); define ('SCRIPTS', ROOT. '/ Js /'); In de bovenstaande code hebben we gebruikt plugins_url () functie om ons root-directorypad te krijgen. Het accepteert twee parameters, d.w.z.. $ path en $ plugin.
Omdat we niet naar een bestand hoeven te verwijzen, maar naar de hoofdmap van onze plug-in, hebben we niet de $ path argument en voor de $ plugin argument, hebben we het huidige bestand verstrekt. Vervolgens hebben we eenvoudig de namen van andere mappen toegevoegd aan de WORTEL constant voor hun respectievelijke paden.
WordPress kan verschillende soorten inhoud bevatten. We kunnen zoveel inhoudstypen maken als we nodig hebben, afhankelijk van het scenario waarin we werken. Om meer inhoudstypen toe te voegen (algemeen bekend als "aangepaste berichttypen"), biedt WordPress een functie register_post_type () dat accepteert twee argumenten:
In het tweede argument, dat wil zeggen, de reeks van aanvullende argumenten, definiëren we de labels van het berichttype en andere details met betrekking tot de zichtbaarheid, mogelijkheden en taxonomieën enz..
In deaankomende-events.php bestand, voeg de volgende code toe om het aangepaste berichttype voor evenementen te registreren:
$ labels = array ('name' => __ ('Events', 'uep'), 'singular_name' => __ ('Event', 'uep'), 'add_new_item' => __ ('Voeg nieuwe gebeurtenis toe', 'uep'), 'all_items' => __ ('Alle evenementen', 'uep'), 'edit_item' => __ ('Bewerk evenement', 'uep'), 'new_item' => __ ('Nieuwe gebeurtenis' , 'uep'), 'view_item' => __ ('View Event', 'uep'), 'not_found' => __ ('Geen gevonden evenementen', 'uep'), 'not_found_in_trash' => __ ('Nee Evenementen gevonden in Prullenbak ',' uep ')); $ supports = array ('title', 'editor', 'excerpt'); $ args = array ('label' => __ ('Events', 'uep'), 'labels' => $ labels, 'description' => __ ('Een lijst met aankomende evenementen', 'uep'), ' public '=> true,' show_in_menu '=> true,' menu_icon '=> IMAGES.' event.svg ',' has_archive '=> true,' rewrite '=> true,' supports '=> $ ondersteunt); register_post_type ('event', $ args); In de bovenstaande code hebben we de labels gedefinieerd voor ons type evenement en hebben we het berichttype zichtbaar gemaakt voor publiek door het instellen van de openbaar sleutel tot waar. Voor het scherm Nieuw bericht of Na bewerken hebben we drie velden voor titel, inhoud en uittreksel toegevoegd.
Merk ook op dat we de statische tekstvelden hebben gemarkeerd voor vertaling met behulp van het tekstdomein UEP wat uniek is voor onze plug-in. Een 20x20 SVG-pictogram is ook opgenomen voor het menu Gebeurtenissen.
De register_post_type () functie moet worden opgeroepen via de in het actie om ervoor te zorgen dat het goed werkt. Wikkel het dus in een functie en haak het aan de in het actie:
function uep_custom_post_type () $ labels = array ('name' => __ ('Events', 'uep'), 'singular_name' => __ ('Event', 'uep'), 'add_new_item' => __ (' Add New Event ',' uep '),' all_items '=> __ (' All Events ',' uep '),' edit_item '=> __ (' Edit Event ',' uep '),' new_item '=> __ ('New Event', 'uep'), 'view_item' => __ ('View Event', 'uep'), 'not_found' => __ ('Geen gevonden evenementen', 'uep'), 'not_found_in_trash' = > __ ('Geen gebeurtenissen gevonden in Prullenbak', 'uep')); $ supports = array ('title', 'editor', 'excerpt'); $ args = array ('label' => __ ('Events', 'uep'), 'labels' => $ labels, 'description' => __ ('Een lijst met aankomende evenementen', 'uep'), ' public '=> true,' show_in_menu '=> true,' menu_icon '=> IMAGES.' event.svg ',' has_archive '=> true,' rewrite '=> true,' supports '=> $ ondersteunt); register_post_type ('event', $ args); add_action ('init', 'uep_custom_post_type'); We hebben nu ons event-berichttype gereed. Navigeer naar het WordPress-dashboard en u ziet een menu voor evenementen onder het opmerkingenmenu:
Nadat we ons aangepaste berichttype succesvol hebben geregistreerd voor evenementen, moeten we nu drie meta-velden toevoegen voor de gebruiker om startdatum, einddatum en evenementlocatie van het evenement toe te voegen. Deze metavelden bevinden zich in een aangepaste metabox. We kunnen gemakkelijk een aangepaste metabox toevoegen aan de WordPress-beheerder met behulp van de add_meta_box () functie.
Het accepteert zeven argumenten die hieronder worden gedefinieerd:
$ idis dat id van de metabox. Het is ook het id-attribuut voor de gerenderde metabox op het scherm.$ title is de titel van de metabox.$ callback is de naam van de functie die zal worden gebruikt om de inhoud van de metabox weer te geven.$ post_type is de naam van het berichttype waaraan we deze metabox willen toevoegen.$ context is het gedeelte van de pagina waaraan we de metabox willen toevoegen. Er zijn drie contexten: normaal, van te voren en kant. $ prioriteit van de metabox binnen de gegeven context die er één kan zijn hoog, kern, standaard of laag. $ callback_argsis een array van argumenten die kan worden doorgegeven aan de callback-functie.In de aankomende-events.php bestand voeg de volgende code toe na de uep_custom_post_type () functie:
functie uep_add_event_info_metabox () add_meta_box ('uep-event-info-metabox', __ ('Event Info', 'uep'), 'uep_render_event_info_metabox', 'event', 'side', 'core'); add_action ('add_meta_boxes', 'uep_add_event_info_metabox'); Navigeer naar de Voeg nieuw toe pagina onder de Evenementen menu en u ziet een waarschuwing voor ongedefinieerde callback-functie. Dat komt omdat we onze callback-functie nog niet hebben gedefinieerd om de inhoud van de metabox weer te geven.
Laten we dat nu doen:
function uep_render_event_info_metabox ($ post) // genereer een nonce veld wp_nonce_field (basename (__FILE__), 'uep-event-info-nonce'); // ontvang eerder opgeslagen metawaarden (indien aanwezig) $ event_start_date = get_post_meta ($ post-> ID, 'event-start-date', true); $ event_end_date = get_post_meta ($ post-> ID, 'event-end-date', true); $ event_venue = get_post_meta ($ post-> ID, 'event-locatie', waar); // als er eerder opgeslagen waarde is, haal deze dan op, stel anders de huidige tijd in $ event_start_date =! leeg ($ event_start_date)? $ event_start_date: time (); // we nemen aan dat als de einddatum niet aanwezig is, het evenement op dezelfde dag eindigt $ event_end_date =! leeg ($ event_end_date)? $ event_end_date: $ event_start_date; ?>
In de bovenstaande code hebben we eerst een WordPress-nonce-veld gegenereerd. Dit is belangrijk omdat we ervoor moeten zorgen dat niemand onze formulieraanvraag kaapt en zo de beveiliging van de site in gevaar brengt.
Vervolgens hebben we onze post-meta voor startdatum, einddatum en de locatie van het evenement opgehaald met behulp van de functie get_post_meta (). Als dit een nieuw bericht is, wordt de huidige tijdstempel gebruikt voor begin- en einddatum van het evenement. Anders als het bericht wordt bewerkt, worden eerder opgeslagen waarden weergegeven in de metavelden.
Voor de metavelden hebben we drie labels en invoervelden met plaatsaanduidingsteksten weergegeven om de gebruiker een hint te geven over het invoerformaat.
Nu is het tijd om jQuery UI datepicker-widget aan de begindatum van de gebeurtenis en het einddatum van de gebeurtenis toe te voegen om de gebruiker meer gemak te geven bij het invoeren van datums.
Terugkerende uit het laatste artikel, hebben we besproken dat de jQuery UI en de jQuery UI Datepicker-widget al is opgenomen in de WordPress JavaScript-bibliotheek. We hebben ook een aangepaste build gedownload van de officiële website van jQuery UI en het stylesheetbestand in onze css-map geplaatst. Als je het nog niet hebt gedaan, pak je een kopie van de officiële website van jQuery UI en plaats je de stylesheet in de map css.
Maak een bestand met de naam script.js in de map js. Dit is het bestand waarin we de jQuery UI Datepicker-widget zullen initialiseren voor de start- en einddatums van onze evenementen.
We zullen nu het JavaScript en de bijbehorende stylesheet in onze admin in gebruik nemen met behulp van de actie admin_enqueue_scripts:
functie uep_admin_script_style ($ hook) if ('post.php' == $ hook || 'post-new.php' == $ hook) wp_enqueue_script ('aankomende gebeurtenissen', SCRIPTS. 'script.js', array ('jQuery', 'jquery-ui-datepicker'), '1.0', true); wp_enqueue_style ('jquery-ui-calendar', STYLES. 'jquery-ui-1.10.4.custom.min.css', false, '1.10.4', 'all'); add_action ('admin_enqueue_scripts', 'uep_admin_script_style'); Het is je misschien opgevallen dat we de jQuery en de jQuery UI-datepicker niet in de wachtrij hebben geplaatst, maar eerder toegevoegd als een afhankelijkheid voor de script.js het dossier.
Door dit te doen zal WordPress ervoor zorgen dat jQuery en jQuery UI Datepicker (samen met zijn eigen afhankelijkheden) in de wacht worden gezet VOORDAT de script.js het dossier.
De callback-functie accepteert een argument voor de paginahaak, d.w.z. de huidige pagina van het dashboard. Omdat we dit JavaScript-bestand niet op elke pagina van het dashboard willen opnemen, controleren we eerst de voorwaarde of de huidige pagina is post.php of post-new.php.
Op deze manier hebben we het JavaScript beperkt om alleen te worden opgenomen in post- of nieuw berichtschermen, maar wat als iemand een reguliere post of pagina aanmaakt of bijwerkt? Het bovenstaande JavaScript-bestand wordt ook opgenomen op die pagina's, omdat de haak ook voor die twee hetzelfde is.
Daartoe zullen we verder controleren of het bericht dat wordt bewerkt, een soort evenement is:
functie uep_admin_script_style ($ hook) global $ post_type; if (('post.php' == $ hook || 'post-new.php' == $ hook) && ('event' == $ post_type)) wp_enqueue_script ('comingcoming events', SCRIPTS. 'script .js ', array (' jquery ',' jquery-ui-datepicker '),' 1.0 ', true); wp_enqueue_style ('jquery-ui-calendar', STYLES. 'jquery-ui-1.10.4.custom.min.css', false, '1.10.4', 'all'); add_action ('admin_enqueue_scripts', 'uep_admin_script_style'); Nu wordt het bovenstaande JavaScript-bestand alleen opgenomen als de paginakoppeling is post.php of post-new.php en het bericht dat wordt gemaakt of bewerkt, is van het type evenement.
Laten we de jpguery UI Datepicker initialiseren. Open de script.js bestand van de js map en voeg de volgende code toe:
(functie ($) $ ('# uep-event-start-date') .datepicker (dateFormat: 'MM dd, yy', onClose: function (selectedDate) $ ('# uep-event-einddatum ') .datepicker (' option ',' minDate ', selectedDate);); $ (' # uep-event-end-date ') .datepicker (dateFormat:' MM dd, yy ', onClose: function ( selectedDate) $ ('# uep-event-start-date') .datepicker ('option', 'maxDate', selectedDate););) (jQuery); Houd er rekening mee dat we de begindatum van de gebeurtenis hebben beperkt tot niet groter dan de einddatum van het evenement en omgekeerd.
Controleer of de initialisatie geslaagd is door naar de Voeg nieuw toe evenementpagina en klik op een van de start- of einddatums van het evenement. U zou het datapickervenster moeten zien verschijnen en u kunt de datum invoeren door door de kalender te bladeren en op de gewenste datum te klikken.
Tot dusverre hebben we behoorlijk wat code geschreven, maar onze plug-in mist nog steeds de meest fundamentele functionaliteit: het opslaan en bijwerken van de gebeurtenis-metaveldwaarden.
Nu we ons aangepaste berichttype hebben gemaakt en drie meta-velden hebben toegevoegd voor de begindatum, einddatum en evenementlocatie van de gebeurtenis, moeten we ervoor zorgen dat de waarden van deze metavelden worden opgeslagen in de database.
WordPress biedt een haak voor dit doel dat elke keer dat een bericht wordt opgeslagen wordt geactiveerd. De haak is save_post en de callback-functie accepteert een argument voor de ID van het bericht dat wordt opgeslagen. Met behulp van deze haak kunnen we de waarden van onze metavelden opslaan in de database, samen met de reguliere berichtvelden, zoals de titel en de inhoud.
functie uep_save_event_info ($ post_id) add_action ('save_post', 'uep_save_event_info'); Maar nogmaals, we moeten controleren of het bericht dat wordt opgeslagen van het type is evenement. Voor dat doel zullen we de $ _POST globale variabele:
functie uep_save_event_info ($ post_id) // controleren of het bericht dat wordt opgeslagen een 'evenement' is, // indien niet, en dan terugkeren als ('event'! = $ _POST ['post_type']) return; Nu gaan we controleren of de opslagstatus is opgeslagen, bijvoorbeeld of het bericht automatisch wordt opgeslagen of dat het een revisie is. WordPress biedt hiervoor twee voorwaardelijke tags:
wp_is_post_autosave ($ post_id)wp_is_post_revision ($ post_id)We kunnen deze twee voorwaardelijke tags als volgt gebruiken:
$ is_autosave = wp_is_post_autosave ($ post_id); $ is_revision = wp_is_post_revision ($ post_id);
Maar we moeten er ook voor zorgen dat de nonce geldig is. Vergeet niet dat we een nonce-veld hebben gedefinieerd met behulp van de wp_nonce_field () functie bij het renderen van de metabox? We zullen de waarde van dezelfde nonce controleren:
$ is_valid_nonce = (isset ($ _POST ['uep-event-info-nonce']) && (wp_verify_nonce ($ _POST ['uep-event-info-nonce'], basename (__FILE__))))? waar onwaar;
Zet al deze drie voorwaarden in één enkele verklaring en we zijn goed om te gaan:
if ($ is_autosave || $ is_revision ||! $ is_valid_nonce) return;
Nadat we de nodige bewerkingen hebben uitgevoerd voordat we de metawaarden opslaan, zijn we nu klaar om ze in de database in te voegen:
functie uep_save_event_info ($ post_id) // controleren of het bericht dat wordt opgeslagen een 'evenement' is, // indien niet, en dan terugkeren als ('event'! = $ _POST ['post_type']) return; // controleren op de status 'opslaan' $ is_autosave = wp_is_post_autosave ($ post_id); $ is_revision = wp_is_post_revision ($ post_id); $ is_valid_nonce = (isset ($ _POST ['uep-event-info-nonce']) && (wp_verify_nonce ($ _POST ['uep-event-info-nonce'], basename (__FILE__))))? waar onwaar; // exit afhankelijk van de opslagstatus of als de nonce niet geldig is als ($ is_autosave || $ is_revision ||! $ is_valid_nonce) return; // controleren op de waarden en het uitvoeren van noodzakelijke acties indien (isset ($ _POST ['uep-event-start-date'])) update_post_meta ($ post_id, 'event-start-date', strtotime ($ _POST [' uep-event-start-date '])); if (isset ($ _POST ['uep-event-end-date'])) update_post_meta ($ post_id, 'event-end-date', strtotime ($ _POST ['uep-event-end-date']) ); if (isset ($ _POST ['uep-event-venue'])) update_post_meta ($ post_id, 'event-venue', sanitize_text_field ($ _POST ['uep-event-venue'])); add_action ('save_post', 'uep_save_event_info'); Hier hebben we de metawaarden in de database opgeslagen met behulp van de functie update_post_meta () die vier argumenten aanvaardt waarvan we de eerste drie hebben doorstaan:
$ post_id is de id van de post waartoe de metawaarde behoort.$ meta_keyis de sleutel van het aangepaste metaveld.$ meta_valueis de nieuwe metawaarde.$ prev_valueis de vorige metagrootte die moet worden vervangen.Merk op dat we de datum niet opslaan in de tekstuele beschrijving, maar we converteren het eerst naar de UNIX-tijdstempel met behulp van de PHP strtotime () functie. Op deze manier wordt het veel eenvoudiger om datums met elkaar te vergelijken tijdens het uitvoeren van de meta-query aan de voorkant.
Op dit punt is het meest fundamentele deel van onze tutorial voltooid. Het is tijd om een aantal aangepaste kolommen toe te voegen aan het dashboard van het dashboard van evenementen.
Omdat de gebeurtenissen hun eigen specifieke informatie bevatten in hun aangepaste velden, is het gepast deze in de aangepaste kolommen in het berichtbeheerdersscherm weer te geven voor een betere toegankelijkheid door de gebruiker.
Standaard toont WordPress de titel en de datumkolommen voor het aangepaste berichttype, maar we voegen drie extra kolommen toe voor de startdatum van het evenement, de einddatum en de locatie.
We kunnen bepalen welke kolommen moeten worden toegevoegd en welke moeten worden verborgen door de WordPress-haak manage_edit- $ post_columns waar $ bericht is de naam van het aangepaste berichttype. De callback-functie accepteert een array voor de kolommen die al worden getoond.
function uep_custom_columns_head ($ defaults) unset ($ defaults ['date']); $ defaults ['event_start_date'] = __ ('Startdatum', 'uep'); $ defaults ['event_end_date'] = __ ('Einddatum', 'uep'); $ defaults ['event_venue'] = __ ('Venue', 'uep'); $ standaardwaarden retourneren; add_filter ('manage_edit-event_columns', 'uep_custom_columns_head', 10); In de bovenstaande code hebben we de standaarddatumkolom uitgeschakeld en in plaats daarvan hebben we onze drie aangepaste kolommen toegevoegd.
Maar de inhoud van de respectieve kolommen zal niet getoond worden totdat we het definiëren met behulp van de manage_ $ post_posts_custom_column hook waarbij $ post de naam is van het aangepaste berichttype.
functie uep_custom_columns_content ($ column_name, $ post_id) if ('event_start_date' == $ column_name) $ start_date = get_post_meta ($ post_id, 'event-start-date', true); echo datum ('F d, Y', $ start_datum); if ('event_end_date' == $ column_name) $ end_date = get_post_meta ($ post_id, 'event-end-date', true); echo datum ('F d, Y', $ end_date); if ('event_venue' == $ column_name) $ venue = get_post_meta ($ post_id, 'event-venue', true); echo $ locatie; add_action ('manage_event_posts_custom_column', 'uep_custom_columns_content', 10, 2); We hebben eerst de kolom die wordt getoond gecontroleerd en vervolgens dienovereenkomstig de inhoud herhaald. De laatste parameter in de add_action () functieaanroep is het aantal argumenten dat wordt geaccepteerd door de callback-functie - in ons geval - het zijn er twee.
In deze zelfstudie hebben we met succes een aangepast berichttype voor evenementen geregistreerd. We hebben ook geleerd om een aangepaste metabox en geïntegreerde jQuery UI datepicker-widget op te nemen in het WordPress-dashboard. Om de gebruiker meer toegankelijkheid te bieden, hebben we bovendien aangepaste kolommen toegevoegd in ons berichtbeheerderscherm.
Hoewel we het dashboard bijna hebben voltooid, is er nog steeds iets dat we moeten aanpakken - het front-end.
In de volgende aflevering van de serie maken we een aangepaste widget om de lijst met aankomende evenementen in de zijbalk weer te geven. We zullen kijken naar de WP_Query klasse dichterbij om berichten op te halen op basis van hun metawaarden.
