WordPress Event Calendar Använda anpassade posttyper och Verbose Calendar

Vi använder WordPress Event Calendar för att visa de inlägg som skapats på varje dag. Besökare skulle också älska att veta om framtida inlägg. Jag har sett några webbplatser som ger titeln på framtida handledning så att besökarna kan hålla sig uppdaterade om de ämnen de tycker om. På samma sätt kan vi använda WordPress som ett evenemangshanteringssystem. Schemaläggningar av händelser är mycket viktigare än blogginlägg. Vi måste erbjuda användarna möjlighet att visa händelser i en kalender. Även en webbplats som Tuts + -nätverket kan ha så många händelser som lanseringen av en ny Tuts + -sida, lanseringen av en e-bok, ett månatligt nyhetsbrev och många fler.

Så i den här handledningen ska jag använda ett jQuery-plugin som heter Verbose Calendar i kombination med anpassade posttyper för att skapa en enkel händelsekalender. Verbose Calendar plugin är utvecklad av John Patrick Given och kan laddas ner på GitHub.

Vad utvecklar vi idag

Med Verbate Event Calendar-plugin kan webbplatsägare skapa händelser på adminpanelen och visa till användare som använder en kalender.

Skapa en anpassad posttyp för händelser och lägga till händelser.
Skapa en kortnummer för att visa jQuery Verbose Calendar.
Lägg till händelser i den verbala kalendern med hjälp av AJAX.

Steg 1 Skapa pluginfilen

Ursprungligen måste vi skapa pluginmappen i / Wp-content / plugins katalogen. Jag ska skapa en mapp som heter utförlig-händelse-calendar som plugin-mappen och skapa index.php filen med nödvändig information om plugin. När du har skapat kan du gå till plugin-menyn på adminpanelen och aktivera plugin med Aktivera länk.

Steg 2 Förstå mappstrukturen

Eftersom jag ska använda externa jQuery-plugins för denna handledning är det viktigt att ha en bra förståelse om mapp och filstruktur. Följande skärm visar dig en grafisk vy av filstrukturen för det här plugin.

bilder - innehåller alla bilder som används för WordPress-plugin.
javascripts - JavaScript-filer för jQuery Verbose Calendar plugin.
formatmallar - CSS-filer för jQuery Verbose Calendar plugin.
teman - CSS-filer för jQuery Date Picker.
ui - JavaScript-filer för jQuery Date Picker.
verboseCalAdmin.js - anpassad JavaScript-kod relaterad till admin-sektionen.
verboseCalCustom.js - anpassad JavaScript-kod relaterad till fronten.
styles.css - anpassade stilar för plugin.
index.php - PHP-kod för plugin.
README.md - README-filen för jQuery Verbose Calendar.

Steg 3 Ange JavaScript och CSS-filer

Vi behöver separata JavaScript och CSS-filer för fronten och admin sektionerna. Följande kod visar dig hur du ska inkludera dem ordentligt med hjälp av wp_enqueue_scripts verkan.

Inkludera JavaScript och CSS-filerna för att visa jQuery Verbose Calendar:

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

Inkludera JavaScript och CSS-filerna för admingränssnittet:

Steg 4 Registrera anpassad inläggstyp för händelser

Händelser kan ha många detaljer som datum, plats, deltagare etc. Jag ska skapa en anpassad posttyp som heter händelse med tanke på flexibiliteten och förlängningen av plugin. Den första uppgiften är att registrera en anpassad posttyp med WordPress. Låt oss gå igenom koden för att registrera anpassade inläggstyper.

  _x ('Händelser', 'händelse'), 'singular_name' => _x ('Händelse', 'händelse'), 'add_new' => _x ('Lägg till nytt', 'händelse'), 'add_new_item' => _x ('Lägg till ny händelse', 'händelse'), 'edit_item' => _x ('Redigera händelse', 'händelse'), 'new_item' => _x ('Ny händelse', 'händelse'), 'view_item' = > _x ('Visa händelse', 'händelse'), 'search_items' => _x ('Sök händelser', 'händelse'), 'not_found' => _x ('Inga händelser hittades', 'händelse'), 'not_found_in_trash '=> _x (' Inga händelser hittades i papperskorgen ',' händelse '),' parent_item_colon '=> _x (' Parent Event: ',' event '),' menu_name '=> _x ),); $ args = array ('labels' => $ etiketter, 'hierarchical' => false, 'supports' => array ('titel', 'editor'), 'public' => true, 'show_ui' => 'show_in_menu' => true, 'show_in_nav_menus' => true, 'publicly_queryable' => sant, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true ' rewrite '=> true,' capability_type '=>' post '); register_post_type ('event', $ args);  add_action ('init', 'register_custom_event_type'); ?>

Först ska jag ringa ett samtal på i det Åtgärd för att registrera en anpassad posttyp. register_custom_event_type kommer att kallas.
Inuti funktionen måste vi definiera etiketter för anpassad posttyp. Dessa variabler definieras i $ etiketter array kommer att användas som etiketter för evenemangsskapningsformuläret och spara posttyper i databasen. Du kan hitta mer information om anpassade posttypetiketter under register_post_type i WordPress Codex
Då måste vi definiera en lista över argument som ska skickas in i register_post_type fungera. Jag kommer att använda standardvärden för de flesta argumenten som visas i ovanstående kod.
Jag har gjort ändringar till bärare argument. Detta används för att definiera tillgängliga formulärfält och komponenter inuti bildskärmen för skapande av händelser. I det här pluginet behöver vi bara händelsetitel och beskrivning. Så jag har tagit bort de andra värdena som Miniatyr, Anpassade fält, utdrag, etc.
Slutligen passerar vi argumenten för register_post_type funktion med namnet på vår anpassade posttyp som händelse.

"Det är viktigt att du behåller ditt anpassade posttypsnamn med 20 tecken och utan stora bokstäver eller mellanslag."

Nu kan du se ett menyalternativ som heter Events i menyn till vänster på adminpanelen före menyn Utseende. När du klickar på det kommer du att omdirigeras till en bildskärm med händelsestitel och beskrivning. Nästa visar jag hur du lägger till händelsespecifika fält i formuläret.

Steg 5 Skapa anpassade händelsesfält

Händelser kan ha mycket information som jag nämnde tidigare. Du har möjlighet att skapa egna fält beroende på vilken typ av händelser du använder på webbplatsen. Så jag ska skapa fält för startdatum och slutdatum, som är gemensamma för alla händelser och låter dig skapa egna fält genom att ändra kod. Vi kan skapa egna fält inuti metakasser samt standard anpassade fält för att lagra ytterligare information. Eftersom vi redan har tagit bort anpassade fält från händelseskärmen ska jag använda fält i meta-rutorna för att skapa start- och slutdatum.

Lägg till händelseinformation Meta Box

Först måste vi lägga till en metakassa som behållaren i våra egna fält med koden nedan.

Jag har använt de nödvändiga parametrarna för add_meta_box funktion i ovanstående kod. Du måste skicka ett unikt ID, meta box display titel, funktionsnamn för att generera anpassade fält och händelse typ som nödvändiga parametrar. Du kan hitta mer information om valfria parametrar under add_meta_box i WordPress Codex.

Lägg till händelsefält

Vi ska lägga till 2 fält för startdatum och slutdatum för evenemanget i metaboxen som skapades tidigare. HTML-kod för formulärfälten genereras inuti display_event_info_box fungera.

 ID); $ eve_start_date = isset ($ värden ['_ eve_sta_date'])? esc_attr ($ values ['_ eve_sta_date'] [0]): "; $ eve_end_date = isset ($ värden ['_ eve_end_date'])? esc_attr ($ värden ['_ eve_end_date'] [0]):"; wp_nonce_field ('event_frm_nonce', 'event_frm_nonce'); $ html = "Händelse Startdatum Event Slutdatum"; echo $ html;?>

Denna HTML-kod kommer att användas i både Lägg till händelse och Redigera händelse skärmar. Så i första hand måste vi få de aktuella värdena för fälten med hjälp av get_post_custom fungera.
Därefter skapar vi det nonce-värde som ska kontrolleras i händelsebesparingsprocessen.
Sedan matar vi ut HTML-koden för de 2 textrutorna för start- och slutdatum. Om ett värde redan finns, tilldelar vi det till värdeattributet för inmatningsfält.

"Jag har namngett mina metatangenter för start och slut händelse som _eve_sta_date och _eve_end_date. När du använder "_"framför metatangenterna kommer det inte att visas som ett eget fält. Annars kommer vi att få dubbla fält en inom meta-rutan och en med egna fält. Var noga med att prefixa dina metatangenter med "_'om du inte vill att den ska visas som ett eget fält.'

Lägg till datumväljare till händelsefält

Trots att vi skapat 2 textfält för start- och slutdatum, kommer det att användas för att infoga faktiska datum. Så jag ska tilldela jQuery Date Picker till textfält för att tillåta användare att välja datum från en kalender utan att skriva in manuellt. Vi måste lägga till en viss JavaScript-kod till verboseCalAdmin.js fil för att tilldela datumväljare till inmatningsfält.

Steg 6 Validating Event Creation

Vi måste göra någon validering innan du sparar händelser i databasen. Så jag ska använda jQuery-validering på formuläret för skapande av händelser som visas nedan. Nedanstående kod ingår i verboseCalAdmin.js fil.

Funktionen jQuery kommer att kallas på formulärinsändning med form-ID posta.
Det finns en uppsättning dolda fält i bildskärmen. Jag använder värdet av post_type dolt fält för att kontrollera posttypen.
Titel och datum krävs. Så dessa fält valideras med jQuery.
Sedan lägger vi till anpassade fellådor som ska visas under varje fält.
Om formuläret inte valideras korrekt kommer fel att visas och händelse skapas stoppas tills alla valideringsfel fixas.

Steg 7 Spara händelser till databasen

När alla valideringsfel korrigeras och formuläret skickas med framgång, kallar vi save_event_information funktion på spara inlägget åtgärd som visas i följande kod.

Det här är standardmetoden för att spara anpassad postmeta till databasen. Först kontrollerar vi om funktionen heter inom WordPress autosave och återgår från skriptet.
Därefter validerar vi det nonce-värdet som genereras i formuläret och nonce-värdet inlämnat genom $ _POST.
Då måste vi kontrollera om användaren har nödvändig tillåtelse att skapa händelser med hjälp av current_user_can ( 'edit_post') fungera.
Slutligen sparar vi både startdatum och slutdatum till wp_postmeta tabellen i databasen.

Nu har vi avslutat processen med att skapa händelser via adminpanelen. Nästa måste vi arbeta med att inkludera jQuery Verbose Calendar i frontänden och visa händelser och inlägg till användarna.

Steg 8 Skapa kortnummer för Verbose Calendar

Först måste vi skapa en kortnummer som visar Verbose Calendar på sidan. När du har tagit med följande kod kan du skapa en ny sida i adminpanelen lägga till kortnummer som [Verbose_calendar /] till redaktören för att visa kalendern på posten.

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

Ovanstående kortnummer infogar HTML-element som behövs för kalendern. Vi måste ladda kalendern med jQuery som visas nedan. Följande kod ingår i verboseCalCustom.js fil.

Om allt är gjort korrekt bör du ha en kalender som följande bild på sidan du skapade.

Steg 9 Tilldela händelser till kalendern

Nästa uppgift med denna handledning är att fråga händelser och inlägg från databasen och visa i kalendern. Standard Verbose Calendar tillhandahåller endast kalenderlayouten. Vi måste anpassa plugin för att tilldela händelser till kalendern. Verbose Calendar använder en funktion som heter g.prototype.print för att visa kalendern. Så vi ska anpassa denna funktion för att hämta händelser och inlägg från databasen som visas nedan. Koden finns i jquery.calendar.min.js filen inuti javascripts mapp.

Jag ska förklara de koder vi har ändrat och viktiga från pluginperspektivet. Plugin-specifik kod utelämnas här.
Först har jag lagt in hela koden i en AJAX-förfrågan. Denna förfrågan kommer att göras varje gång du byter år eller laddar kalendern.
AJAX-förfrågan kommer att göras till get_posts_for_year verkan. Det kommer att returnera lista över inlägg och händelser för det aktuella året som visas högst upp på kalendern.
Sedan gick vi igenom varje resultat med $ jq.each metod. Vi skickar detaljerna till resultatet till postDetailsArr array.
Vi använder startdatum för händelser och publicerat datum för inlägg och tilldelar postarr-array.

Ovanstående kodbit finns också inne i utskriftsfunktionen.
Vi förbereder datum och månad genom att lägga till 0 som prefix om det är mindre än 10.
Då kontrollerar vi varje datum som finns inom postArr använda inArray fungera.
Om datumet innehåller en händelse eller post lägger vi till en särskild CSS-klass som heter event_highlight.

Generera post- och händelselistor

Nu måste vi fråga databasen och skapa resultat för AJAX-förfrågan. Tänk på följande kod för begäran generationsprocessen.

 posts.guid, $ wpdb-> posts.post_title, DATE_FORMAT (post_date, '% m-% d-% Y') som post_date FROM $ wpdb-> inlägg WHERE Year ($ wpdb-> posts.post_date) = '". $ _POST ['currentYear']. "" Och post_status = "publicera" och post_type = "post" "; $ allPosts = array (); $ yearlyPosts = $ wpdb-> get_results ($ sql, ARRAY_A); som $ key => $ singlePost) $ singlePost ['typ'] = 'post'; array_push ($ allEvents, $ singlePost); $ sql = "VÄLJ $ wpdb-> inlägg.ID, $ wpdb-> inlägg. guid, $ wpdb-> posts.post_title, DATE_FORMAT (post_date, '% m-% d-% Y') som post_date FROM $ wpdb-> inlägg gå med $ wpdb-> postmeta på $ wpdb-> inlägg.ID = $ wpdb-> postmeta.post_id VAR $ wpdb-> postmeta.meta_key = '_ eve_sta_date' och år (STR_TO_DATE ($ wpdb-> postmeta.meta_value, '% m /% d /% Y')) = '". $ _POST [ 'currentYear']. "" och post_status = "publicera" och post_type = "händelse" "; $ yearlyEvents = $ wpdb-> get_results ($ sql, ARRAY_A); foreach ($ yearlyEvents as $ key => $ singleEvent) $ startDate = str_replace ("/", "-", get_post_meta ($ singleEvent ['ID'], '_eve_sta_date')); $ endD åt = str_replace ("/", "-", get_post_meta ($ singleEvent ['ID'], '_eve_end_date')); $ singleEvent ['startDate'] = $ startDate [0]; $ singleEvent ['endDate'] = $ endDate [0]; $ singleEvent ['typ'] = 'händelse'; array_push ($ allEvents, $ singleEvent);  echo json_encode ($ allEvents); utgång; ?>

Först tilldelar vi åtgärden till både inloggade användare och vanliga användare.
Då får vi alla publicerade inlägg för det valda året och tilldela det till $ allEvents array.
Vi tilldelar händelserna för det valda året med samma procedur som ovan och utdata i JSON-format.

Steg 10 Visa händelselista

Datum med händelser eller inlägg kommer att markeras i en blå färg. När du klickar på ett sådant datum ska händelselistan visas. Verbose Calendar har en funktion som heter calendar_callback som vi ska använda för att visa händelselistan. Följande JavaScript-kod inuti verboseCalCustom.js filen kommer att användas för denna funktion.

Det klickade datumet skickas automatiskt till den här funktionen. Först tilldelar vi datumet till en variabel med det överlämnade datumobjektet.
Därefter får vi evenemang och inlägg för det valda datumet med postDetailsArr genereras i utskriftsfunktionen.
Då tilldelar vi händelse och postar detaljer genom att överväga typ variabel.
Slutligen tilldelar vi all HTML till event_row_panel behållare och visa händelselistan.

Slutsats

När handledningen är klar kommer du att ha ett coolt event kalender plugin. Detta innehåller bara grundläggande fält av händelser. Du kan skapa mer information om händelser genom att lägga till fler anpassade fält. Ta gärna ut det här pluginets funktionalitet och dela med dig av dina förslag.

Koda