WordPress Evenementenkalender Aangepaste berichttypen en uitgebreide agenda gebruiken

We gebruiken de WordPress-evenementenkalender om de berichten weer te geven die op elke dag zijn gemaakt. Ook zouden bezoekers graag willen weten over de toekomstige berichten. Ik heb een aantal sites gezien die de titel van toekomstige zelfstudies bieden, zodat bezoekers op de hoogte blijven van de onderwerpen die ze leuk vinden. Evenzo kunnen we WordPress ook als eventmanagementsysteem gebruiken. Roosters van evenementen zijn veel belangrijker dan blogposts. We moeten de mogelijkheid bieden voor gebruikers om evenementen in een agenda te bekijken. Zelfs een site zoals het Tuts + netwerk kan zoveel evenementen hebben, zoals de lancering van een nieuwe Tuts + -site, de lancering van een e-book, een maandelijkse nieuwsbrief en nog veel meer.

Dus in deze tutorial ga ik een jQuery-plug-in genaamd Verbose Calendar gebruiken in combinatie met Custom Post Types om een eenvoudige evenementenkalender te maken. Verbose Calendar plugin is ontwikkeld door John Patrick Given en beschikbaar om te downloaden op GitHub.

Wat ontwikkelen we vandaag?

Met de uitgebreide gebeurtenisagenda-invoegtoepassing kunnen site-eigenaren afspraken maken op het beheerdersdashboard en weergeven aan gebruikers die een agenda gebruiken.

Een aangepast berichttype maken voor evenementen en evenementen toevoegen.
Maak een shortcode om de uitgebreide agenda van jQuery weer te geven.
Voeg evenementen toe aan de uitgebreide agenda met AJAX.

Stap 1 Het invoegbestand maken

In eerste instantie moeten we de plugin-map maken in de / Wp-content / plugins directory. Ik ga een map aanmaken genaamd verbose-event-kalender als de plugin-map en maak de index.php bestand met de nodige informatie over de plug-in. Eenmaal gemaakt, kunt u naar het plug-insmenu van het admin-paneel gaan en de plug-in activeren met behulp van de activeren link.

Stap 2 De mapstructuur begrijpen

Omdat ik externe jQuery-plug-ins voor deze zelfstudie ga gebruiken, is het belangrijk om een goed begrip te hebben van de map- en bestandsstructuur. Het volgende scherm toont u een grafische weergave van de bestandsstructuur van deze plug-in.

afbeeldingen - bevat alle afbeeldingen die worden gebruikt voor de WordPress-plug-in.
javascripts - JavaScript-bestanden voor de plug-in jQuery Verbose Calendar.
stylesheets - CSS-bestanden voor de plug-in jQuery Verbose Calendar.
thema's - CSS-bestanden voor jQuery Date Picker.
ui - JavaScript-bestanden voor jQuery Date Picker.
verboseCalAdmin.js - aangepaste JavaScript-code gerelateerd aan de admin-sectie.
verboseCalCustom.js - aangepaste JavaScript-code gerelateerd aan de frontend.
styles.css - aangepaste stijlen voor de plug-in.
index.php - PHP-code van de plug-in.
README.md - README-bestand voor jQuery Verbose Calendar.

Stap 3 Zet JavaScript en CSS-bestanden in de wachtrij

We hebben aparte JavaScript- en CSS-bestanden nodig voor de frontend- en beheerderssecties. De volgende code zal u tonen hoe u ze correct kunt gebruiken met behulp van de wp_enqueue_scripts actie.

Neem de JavaScript- en CSS-bestanden op om de jQuery Verbose-agenda weer te geven:

  admin_url ('admin-ajax.php'), 'nonce' => wp_create_nonce ('reward-nonce')); wp_localize_script ('verboseCal', 'calendarData', $ config_array);  add_action ('wp_enqueue_scripts', 'verbose_calendar_scripts'); ?>

Neem de JavaScript- en CSS-bestanden op voor de beheerinterface:

Stap 4 Registreer Aangepast berichttype voor gebeurtenissen

Evenementen kunnen veel details bevatten, zoals datum, locatie, deelnemers, enz. Ik ga een Aangepast berichttype maken genaamd evenement rekening houdend met de flexibiliteit en uitbreidbaarheid van de plug-in. De eerste taak zou zijn om een aangepast berichttype bij WordPress te registreren. Laten we de code doornemen voor het registreren van aangepaste berichttypen.

  _x ('Events', 'event'), 'singular_name' => _x ('Event', 'event'), 'add_new' => _x ('Add New', 'event'), 'add_new_item' => _x ('Voeg nieuw evenement toe', 'evenement'), 'edit_item' => _x ('Bewerk evenement', 'evenement'), 'nieuw_item' => _x ('Nieuw evenement', 'evenement'), 'view_item' = > _x ('View Event', 'event'), 'search_items' => _x ('Search Events', 'event'), 'not_found' => _x ('Geen evenementen gevonden', 'evenement'), 'not_found_in_trash '=> _x (' Geen evenementen gevonden in Trash ',' event '),' parent_item_colon '=> _x (' Parent Event: ',' event '),' menu_name '=> _x (' Events ',' event ' ),); $ args = array ('labels' => $ labels, 'hierarchical' => false, 'supports' => array ('title', 'editor'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'publicly_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, ' herschrijven '=> waar,' capability_type '=>' post '); register_post_type ('event', $ args);  add_action ('init', 'register_custom_event_type'); ?>

Eerst ga ik een functieaanroep doen op de in het actie om een aangepast berichttype te registreren. register_custom_event_type zal gebeld worden.
Binnen de functie moeten we labels definiëren voor het aangepaste berichttype. Deze variabelen gedefinieerd in de $ labels array wordt gebruikt als de labels voor het formulier voor het maken van gebeurtenissen en voor het opslaan van berichttypen in de database. U kunt hieronder meer informatie vinden over aangepaste berichttypen register_post_type in de WordPress Codex
Vervolgens moeten we een lijst met argumenten definiëren die moeten worden doorgegeven aan de register_post_type functie. Ik ga standaardwaarden gebruiken voor de meeste argumenten zoals weergegeven in de bovenstaande code.
Ik heb wijzigingen aangebracht aan de ondersteuningen argument. Dit wordt gebruikt om de beschikbare formuliervelden en componenten in het scherm voor het maken van gebeurtenissen te definiëren. In deze plug-in hebben we alleen de gebeurtenistitel en beschrijving nodig. Dus ik heb de andere waarden zoals verwijderd thumbnail, custom-fields, uittreksel, enz.
Eindelijk geven we de argumenten voor de register_post_type functie met de naam van ons Aangepast berichttype als evenement.

"Het is belangrijk dat u de naam van uw aangepaste berichtsoort onder de 20 tekens en zonder hoofdletters of spaties houdt."

Nu kunt u een menu-item met de naam Gebeurtenissen bekijken in het linkermenu van het admin-paneel vóór het menu Uiterlijk. Zodra u erop klikt, wordt u doorgestuurd naar een scherm voor het maken van gebeurtenissen met de velden Gebeurtenisnaam en Beschrijving. Vervolgens laat ik u zien hoe u event-specifieke velden aan het formulier toevoegt.

Stap 5 Maak aangepaste gebeurtenissenvelden

Evenementen kunnen veel informatie bevatten zoals ik eerder al zei. U hebt de mogelijkheid om uw eigen velden te maken op basis van het soort gebeurtenissen dat u op de website gebruikt. Dus ik ga velden maken voor begin datum en eind datum, die voor elk type gebeurtenis hetzelfde zijn en waarmee u uw eigen velden kunt maken door de code te wijzigen. We kunnen onze eigen velden in metaboxen maken, evenals standaard aangepaste velden om extra informatie op te slaan. Aangezien we aangepaste velden al hebben verwijderd van het scherm met gebeurtenissen, ga ik velden in metaboxen gebruiken om start- en einddatums te maken.

Voeg gebeurtenisinformatie metabox toe

Eerst moeten we een metabox toevoegen als de container van onze aangepaste velden met behulp van de onderstaande code.

Ik heb de vereiste parameters gebruikt voor de add_meta_box functie in de bovenstaande code. U moet een unieke ID, meta-box weergavetitel, functienaam voor het genereren van aangepaste velden en gebeurtenistype als de vereiste parameters doorgeven. U vindt meer informatie over de optionele parameters hieronder add_meta_box in de WordPress Codex.

Voeg gebeurtenisvelden toe

We gaan twee velden toevoegen voor startdatum en einddatum van de gebeurtenis in de metabox die eerder is gemaakt. HTML-code voor de formuliervelden wordt gegenereerd binnen de display_event_info_box functie.

 ID KAART); $ eve_start_date = isset ($ values ['_ eve_sta_date'])? esc_attr ($ values ['_ eve_sta_date'] [0]): "; $ eve_end_date = isset ($ values ['_ eve_end_date'])? esc_attr ($ values ['_ eve_end_date'] [0]):"; wp_nonce_field ('event_frm_nonce', 'event_frm_nonce'); $ html = "Begindatum evenement Gebeurtenis einddatum"; echo $ html;?>

Deze HTML-code wordt gebruikt in zowel schermen voor evenement toevoegen als evenementscherm bewerken. Dus in eerste instantie moeten we de huidige waarden van de velden ophalen met behulp van de get_post_custom functie.
Vervolgens maken we de nonce-waarde die moet worden gecontroleerd in het gebeurtenisbesparingsproces.
Vervolgens voeren we de HTML-code uit voor de twee tekstvakken voor begin- en einddatum. Als er al een waarde bestaat, wijzen we deze toe aan het waardeattribuut van invoervelden.

"Ik heb mijn meta-sleutels voor begin- en eindgebeurtenissen als genoemd _eve_sta_date en _eve_end_date. Wanneer gebruik je '_'voor meta-sleutels wordt dit niet als een aangepast veld weergegeven. Anders krijgen we dubbele velden één in de metabox en één met aangepaste velden. Zorg er altijd voor dat u uw meta-sleutels invoegt met '_'voor het geval u niet wilt dat het wordt getoond als een aangepast veld.'

Datumkiezer toevoegen aan gebeurtenisvelden

Hoewel we twee tekstvelden hebben gemaakt voor start- en einddatums, worden deze gebruikt om de werkelijke datums in te voegen. Dus ik ga de jQuery-datumkiezer toewijzen aan tekstvelden zodat gebruikers data uit een kalender kunnen selecteren zonder handmatig in te voeren. We moeten een JavaScript-code toevoegen aan de verboseCalAdmin.js bestand om datumkiezers toe te wijzen om velden in te voeren.

Stap 6 Validatie van evenementcreatie

We moeten eerst een validatie uitvoeren voordat we de gebeurtenissen opslaan in de database. Dus ik ga jQuery-validatie gebruiken op het formulier voor het maken van evenementen, zoals hieronder wordt getoond. De onderstaande code is opgenomen in de verboseCalAdmin.js het dossier.

De functie jQuery wordt opgeroepen bij het verzenden van formulieren met behulp van het formulier-ID post.
Er zijn een aantal verborgen velden in het venster voor het maken van berichten. Ik gebruik de waarde van de post_type verborgen veld om het berichttype te controleren.
Titel en data zijn verplicht. Dus die velden zijn gevalideerd met behulp van jQuery.
Vervolgens voegen we aangepaste foutmeldingen toe die onder elk veld moeten worden weergegeven.
Als het formulier niet correct wordt gevalideerd, worden fouten weergegeven en wordt het maken van gebeurtenissen gestopt totdat alle validatiefouten zijn opgelost.

Stap 7 Gebeurtenissen opslaan in database

Nadat alle validatiefouten zijn gecorrigeerd en het formulier is ingediend, bellen we het save_event_information functie op de save_post actie zoals getoond in de volgende code.

Dit is de standaardmethode voor het opslaan van aangepaste post-meta in een database. Eerst controleren we of de functie wordt aangeroepen in WordPress automatisch opslaan en terugkeren uit het script.
Vervolgens valideren we de nonce-waarde die is gegenereerd in de formulier- en nonce-waarde die is doorgegeven $ _POST.
Vervolgens moeten we controleren of de gebruiker de benodigde rechten heeft om evenementen te maken met behulp van de current_user_can ( 'edit_post') functie.
Als laatste bewaren we zowel de startdatum als de einddatum voor de wp_postmeta tabel in de database.

Nu hebben we het proces voor het maken van afspraken voltooid via het beheerdersvenster. Vervolgens moeten we werken aan het opnemen van de jQuery Verbose-kalender aan de voorkant en de evenementen en berichten weergeven aan de gebruikers.

Stap 8 Shortcode maken voor uitgebreide agenda

Eerst moeten we een shortcode maken die de uitgebreide agenda op de pagina weergeeft. Nadat u de volgende code hebt toegevoegd, kunt u een nieuwe pagina maken in het beheerdersdashboard en de korte code toevoegen als [Verbose_calendar /] naar de editor om de kalender weer te geven op het bericht.

"; add_shortcode (" verbose_calendar "," verbose_calendar ");?>

De bovenstaande shortcode-code voegt HTML-elementen in die nodig zijn voor de kalender. We moeten de kalender laden met jQuery zoals hieronder getoond. De volgende code is opgenomen in de verboseCalCustom.js het dossier.

Als alles goed is gedaan, zou je een kalender moeten hebben zoals de volgende afbeelding op de pagina die je hebt gemaakt.

Stap 9 Evenementen toewijzen aan agenda

De volgende taak van deze zelfstudie is om de gebeurtenissen en berichten uit de database te vragen en in de kalender weer te geven. Standaard Verbose-agenda biedt alleen de kalenderlay-out. We moeten de plug-in aanpassen om gebeurtenissen aan de kalender toe te wijzen. Verbose Calendar gebruikt een functie genaamd g.prototype.print om de kalender weer te geven. Dus we gaan deze functie aanpassen om gebeurtenissen en berichten uit de database op te halen, zoals hieronder getoond. Code bevindt zich in de jquery.calendar.min.js bestand in de javascripts map.

Ik zal de codes uitleggen die we hebben gewijzigd en belangrijk zijn vanuit het perspectief van de plug-in. Plugin-specifieke code is hier weggelaten.
Eerst heb ik de hele code in een AJAX-verzoek geplaatst. Dit verzoek wordt gedaan telkens wanneer u het jaar wijzigt of de kalender laadt.
AJAX-aanvraag wordt ingediend bij de get_posts_for_year actie. De lijst met berichten en gebeurtenissen voor het huidige jaar wordt weergegeven bovenaan de kalender.
Vervolgens doorlopen we elk resultaat met behulp van $ jq.each methode. We geven de details van het resultaat door aan de postDetailsArr rangschikking.
We gebruiken de startdatum voor gebeurtenissen en de gepubliceerde datum voor berichten en wijst toe aan de array postArr.

Het bovenstaande codefragment bevindt zich ook in de afdrukfunctie.
We maken de datum en maand gereed door 0 toe te voegen als het voorvoegsel voor het geval het minder dan 10 is.
Vervolgens controleren we of elke datum bestaat in de postArr de ... gebruiken inArray functie.
Als datum een evenement of bericht bevat, voegen we een speciale CSS-klasse toe met de naam event_highlight.

Post- en evenementlijsten genereren

Nu moeten we de database doorzoeken en resultaten voor de AJAX-aanvraag genereren. Beschouw de volgende code voor het proces voor het genereren van aanvragen.

 posts.guid, $ wpdb-> posts.post_title, DATE_FORMAT (post_date, '% m-% d-% Y') als post_date FROM $ wpdb-> posts WHERE Year ($ wpdb-> posts.post_date) = '". $ _POST ['currentYear']. "'En post_status =" publish "en post_type =" post ""; $ allPosts = array (); $ annualPosts = $ wpdb-> get_results ($ sql, ARRAY_A); foreach ($ annualPosts als $ key => $ singlePost) $ singlePost ['type'] = 'post'; array_push ($ allEvents, $ singlePost); $ sql = "SELECT $ wpdb-> postss.ID, $ wpdb-> posts. guid, $ wpdb-> posts.post_title, DATE_FORMAT (post_date, '% m-% d-% Y') als post_date FROM $ wpdb-> posts inner join $ wpdb-> postmeta on $ wpdb-> posts.ID = $ wpdb-> postmeta.post_id WHERE $ wpdb-> postmeta.meta_key = '_ eve_sta_date' en Year (STR_TO_DATE ($ wpdb-> postmeta.meta_value, '% m /% d /% Y')) = '". $ _POST [ 'currentYear']. "'en post_status =" publish "en post_type =" event ""; $ annualEvents = $ wpdb-> get_results ($ sql, ARRAY_A); foreach ($ annualEvents as $ key => $ singleEvent) $ startDate = str_replace ("/", "-", get_post_meta ($ singleEvent ['ID'], '_eve_sta_date')); $ endD at = str_replace ("/", "-", get_post_meta ($ singleEvent ['ID'], '_eve_end_date')); $ singleEvent ['startDate'] = $ startDate [0]; $ singleEvent ['endDate'] = $ endDate [0]; $ singleEvent ['type'] = 'event'; array_push ($ allEvents, $ singleEvent);  echo json_encode ($ allEvents); Uitgang; ?>

Eerst wijzen we de actie toe aan zowel ingelogde gebruikers als normale gebruikers.
Vervolgens krijgen we alle gepubliceerde berichten voor het geselecteerde jaar en wijzen we deze toe aan de $ AllEvents rangschikking.
We kennen de gebeurtenissen voor het geselecteerde jaar toe met dezelfde procedure als hierboven en uitvoeren in JSON-formaat.

Stap 10 Evenementenlijst weergeven

Datums met evenementen of berichten worden in een blauwe kleur gemarkeerd. Zodra u op een dergelijke datum klikt, moet de evenementenlijst worden weergegeven. Verbose Calendar heeft een functie genaamd calendar_callback die we gaan gebruiken om de evenementenlijst weer te geven. De volgende JavaScript-code in de verboseCalCustom.js bestand zal voor deze functionaliteit worden gebruikt.

De datum waarop geklikt wordt, wordt automatisch doorgegeven aan deze functie. Eerst kennen we de datum toe aan een variabele met behulp van het verstreken datumobject.
Vervolgens krijgen we de evenementen en berichten voor de geselecteerde datum met postDetailsArr gegenereerd in de afdrukfunctie.
Vervolgens wijzen we gebeurtenis- en postdetails toe door de type veranderlijk.
Uiteindelijk kennen we alle HTML toe aan de event_row_panel container en geef de lijst met gebeurtenissen weer.

Conclusie

Zodra de zelfstudie is voltooid, hebt u een coole plug-in voor evenementenkalender. Dit bevat alleen basisvelden van gebeurtenissen. U kunt meer informatie over gebeurtenissen maken door meer aangepaste velden toe te voegen. Voel je vrij om de functionaliteit van deze plug-in uit te breiden en je suggesties te delen.

Code