Calendario eventi di WordPress Utilizzo di tipi di post personalizzati e calendario dettagliato

Usiamo il calendario degli eventi di WordPress per mostrare i post creati ogni giorno. Anche i visitatori vorrebbero conoscere i post futuri. Ho visto alcuni siti che forniscono il titolo di futuri tutorial in modo che i visitatori possano rimanere aggiornati sugli argomenti che preferiscono. Allo stesso modo possiamo usare WordPress come sistema di gestione degli eventi. Gli orari degli eventi sono molto più importanti dei post dei blog. Dobbiamo fornire agli utenti la possibilità di visualizzare gli eventi su un calendario. Anche un sito come la rete Tuts + può avere così tanti eventi come il lancio di un nuovo sito Tuts +, il lancio di un e-book, una newsletter mensile e molti altri.

Quindi in questo tutorial userò un plugin jQuery chiamato Verbose Calendar in combinazione con i Tipi di post personalizzati per creare un semplice calendario degli eventi. Il plugin Verbose Calendar è sviluppato da John Patrick Given e disponibile per il download su GitHub.

Cosa stiamo sviluppando oggi

Il plug-in Verbose Event Calendar consentirà ai proprietari del sito di creare eventi nella dashboard di amministrazione e di visualizzarli agli utenti che utilizzano un calendario.

Creazione di un tipo di messaggio personalizzato per eventi e aggiunta di eventi.
Creare uno shortcode per visualizzare il calendario dettagliato di jQuery.
Aggiungi eventi al calendario dettagliato utilizzando AJAX.

Passaggio 1 Creazione del file plugin

Inizialmente dobbiamo creare la cartella dei plugin in / Wp-content / plugins directory. Ho intenzione di creare una cartella chiamata verbose-evento-calendario come cartella del plugin e creare il index.php file con le informazioni necessarie sul plugin. Una volta creato puoi andare al menu plugin del pannello di amministrazione e attivare il plugin usando il attivare collegamento.

Passaggio 2 Informazioni sulla struttura delle cartelle

Dato che userò i plugin jQuery esterni per questo tutorial, è importante avere una buona conoscenza della struttura di cartelle e file. La seguente schermata ti mostrerà una vista grafica della struttura dei file di questo plugin.

immagini - contiene tutte le immagini utilizzate per il plugin WordPress.
javascript - File JavaScript per il plugin di calendario Verbose jQuery.
fogli di stile - File CSS per il plugin Calendar Verbose jQuery.
temi - File CSS per jQuery Date Picker.
ui - File JavaScript per jQuery Date Picker.
verboseCalAdmin.js - codice JavaScript personalizzato correlato alla sezione di amministrazione.
verboseCalCustom.js - codice JavaScript personalizzato correlato al front-end.
styles.css - stili personalizzati per il plugin.
index.php - Codice PHP del plugin.
README.md - File README per il calendario dettagliato di jQuery.

Passaggio 3 Accodare i file JavaScript e CSS

Abbiamo bisogno di file JavaScript e CSS separati per le sezioni front end e admin. Il seguente codice ti mostrerà come includerli correttamente usando il wp_enqueue_scripts azione.

Includere i file JavaScript e CSS per visualizzare il calendario dettagliato di jQuery:

  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'); ?>

Includere i file JavaScript e CSS per l'interfaccia di amministrazione:

Passaggio 4 Registrare il tipo di messaggio personalizzato per gli eventi

Gli eventi possono avere molti dettagli come data, posizione, partecipanti, ecc. Vado a creare un tipo di messaggio personalizzato chiamato evento considerando la flessibilità e l'estensione del plugin. Il primo compito sarebbe quello di registrare un tipo di messaggio personalizzato con WordPress. Passiamo attraverso il codice per la registrazione dei tipi di messaggi personalizzati.

  _x ('Eventi', 'evento'), 'singular_name' => _x ('Event', 'event'), 'add_new' => _x ('Aggiungi Nuovo', 'evento'), 'add_new_item' => _x ('Aggiungi nuovo evento', 'evento'), 'edit_item' => _x ('Modifica evento', 'evento'), 'nuovo_item' => _x ('Nuovo evento', 'evento'), 'view_item' = > _x ('Visualizza evento', 'evento'), 'search_items' => _x ('Cerca eventi', 'evento'), 'not_found' => _x ('Nessun evento trovato', 'evento'), 'not_found_in_trash '=> _x (' Nessun evento trovato nel Cestino ',' evento '),' parent_item_colon '=> _x (' Evento genitore: ',' evento '),' menu_name '=> _x (' Eventi ',' evento ' ),); $ args = array ('labels' => $ labels, 'hierarchical' => false, 'supports' => array ('title', 'editor'), 'public' => true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'public_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, ' riscrivi '=> true,' capability_type '=>' post '); register_post_type ('evento', $ args);  add_action ('init', 'register_custom_event_type'); ?>

Per prima cosa farò una chiamata di funzione sul dentro azione per registrare un tipo di messaggio personalizzato. register_custom_event_type sarà chiamato.
All'interno della funzione dobbiamo definire le etichette per il tipo di messaggio personalizzato. Queste variabili definite nel $ etichette array verrà utilizzato come etichetta per il modulo di creazione degli eventi e salvataggio dei tipi di post nel database. Puoi trovare ulteriori informazioni sulle etichette del tipo di messaggio personalizzato sotto register_post_type nel codice WordPress
Quindi dobbiamo definire una lista di argomenti da passare nel register_post_type funzione. Userò i valori predefiniti per la maggior parte degli argomenti come mostrato nel codice precedente.
Ho fatto modifiche al supporti discussione. Questo è usato per definire i campi e i componenti del modulo disponibili all'interno della schermata di creazione dell'evento. In questo plugin abbiamo bisogno solo del titolo dell'evento e della descrizione. Quindi ho rimosso gli altri valori come miniature, Campi personalizzati, estratto, eccetera.
Alla fine passiamo gli argomenti per il register_post_type funzione con il nome del nostro tipo di messaggio personalizzato come evento.

"È importante mantenere il nome del tipo di messaggio personalizzato con meno di 20 caratteri e senza lettere maiuscole o spazi".

Ora sarai in grado di vedere una voce di menu chiamata Eventi nel menu di sinistra del pannello di amministrazione prima del menu Aspetto. Dopo aver fatto clic su di esso verrai reindirizzato a una schermata di creazione dell'evento con i campi Titolo evento e Descrizione. Successivamente ti mostrerò come aggiungere campi specifici dell'evento al modulo.

Passaggio 5 Creare campi di eventi personalizzati

Gli eventi possono avere molte informazioni come ho detto prima. Hai la possibilità di creare i tuoi campi in base al tipo di eventi che stai utilizzando nel sito web. Quindi ho intenzione di creare campi per data di inizio e data di fine, che sono comuni a qualsiasi tipo di evento e consentono di creare i propri campi modificando il codice. Siamo in grado di creare i nostri campi all'interno di metadati così come i campi personalizzati predefiniti per memorizzare ulteriori informazioni. Dato che abbiamo già rimosso i campi personalizzati dalla schermata degli eventi, userò i campi all'interno delle caselle di selezione per creare date di inizio e fine.

Aggiungi Meta Box Informazioni Evento

Per prima cosa dobbiamo aggiungere una meta-box come contenitore dei nostri campi personalizzati usando il codice qui sotto.

Ho usato i parametri richiesti per add_meta_box funzione nel codice precedente. Devi passare un ID univoco, il titolo di visualizzazione della casella meta, il nome della funzione per generare campi personalizzati e il tipo di evento come i parametri richiesti. Puoi trovare maggiori dettagli sui parametri opzionali sotto add_meta_box nel codice WordPress.

Aggiungi campi evento

Stiamo per aggiungere 2 campi per la data di inizio e la data di fine dell'evento all'interno della meta-box creata in precedenza. Il codice HTML per i campi modulo viene generato all'interno di display_event_info_box funzione.

 ID); $ 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 = "Data di inizio dell'evento Data di fine dell'evento"; echo $ html;?>

Questo codice HTML verrà utilizzato in entrambe le schermate Aggiungi evento e Modifica evento. Quindi inizialmente dobbiamo ottenere i valori correnti dei campi usando il get_post_custom funzione.
Successivamente creiamo il valore nonce da verificare nel processo di salvataggio degli eventi.
Quindi produciamo il codice HTML per le 2 caselle di testo per la data di inizio e di fine. Se esiste già un valore, lo assegniamo all'attributo value dei campi di input.

"Ho chiamato le mie meta chiavi per l'evento di inizio e fine come _eve_sta_date e _eve_end_date. Quando usi '_'di fronte alle meta chiavi, non verrà mostrato come un campo personalizzato. Altrimenti otterremo i campi duplicati uno dentro la meta-scatola e uno con i campi personalizzati. Assicurati sempre di prefisso le tue meta chiavi con '_'nel caso in cui tu non vuoi che venga mostrato come un campo personalizzato. "

Aggiungi il selettore di date ai campi degli eventi

Anche se abbiamo creato 2 campi di testo per le date di inizio e fine, verrà utilizzato per inserire date effettive. Quindi assegnerò il selettore di date jQuery ai campi di testo per consentire agli utenti di selezionare date da un calendario senza inserire manualmente. Dobbiamo aggiungere qualche codice JavaScript al verboseCalAdmin.js file per assegnare i selettori di date ai campi di input.

Passaggio 6 Convalida della creazione di eventi

Dobbiamo eseguire alcune convalide prima di salvare gli eventi nel database. Quindi userò la convalida jQuery sul modulo di creazione dell'evento come mostrato di seguito. Il codice sottostante è incluso nel verboseCalAdmin.js file.

La funzione jQuery verrà richiamata sull'invio del modulo utilizzando l'ID del modulo inviare.
Ci sono una serie di campi nascosti nella schermata di creazione post. Sto usando il valore di post_type campo nascosto per controllare il tipo di messaggio.
Titolo e date sono obbligatori. Quindi quei campi sono validati usando jQuery.
Quindi aggiungiamo caselle di errore personalizzate da visualizzare sotto ciascun campo.
Se il modulo non viene validato correttamente, verranno visualizzati degli errori e la creazione degli eventi verrà interrotta fino a quando non verranno corretti tutti gli errori di convalida.

Passaggio 7 Salvataggio degli eventi nel database

Una volta che tutti gli errori di convalida sono stati corretti e il modulo è stato inviato correttamente, chiamiamo il save_event_information funzione sul save_post azione come mostrato nel seguente codice.

Questo è il metodo standard per il salvataggio di un post personalizzato in database. Per prima cosa verifichiamo se la funzione è richiamata all'interno del salvataggio automatico di WordPress e restituita dallo script.
Successivamente convalidiamo il valore nonce generato nel modulo e il valore nonce inviato attraverso $ _POST.
Quindi dobbiamo verificare se l'utente ha il permesso necessario per creare eventi usando il current_user_can ( 'edit_post') funzione.
Infine, salviamo sia la data di inizio che la data di fine su wp_postmeta tabella nel database.

Ora abbiamo completato il processo di creazione di eventi tramite il pannello di amministrazione. Successivamente, dobbiamo lavorare per includere il calendario dettagliato di jQuery nel front-end e mostrare gli eventi e i post agli utenti.

Passaggio 8 Creazione di Shortcode per il calendario dettagliato

Per prima cosa dobbiamo creare uno shortcode che mostri il calendario dettagliato sulla pagina. Una volta incluso il seguente codice, puoi creare una nuova pagina nel pannello di amministrazione aggiungere lo shortcode come [Verbose_calendar /] all'editor per visualizzare il calendario sul post.

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

Il codice shortcode sopra inserito inserisce gli elementi HTML necessari per il calendario. Dobbiamo caricare il calendario usando jQuery come mostrato di seguito. Il seguente codice è incluso nel verboseCalCustom.js file.

Se tutto è fatto correttamente, dovresti avere un calendario come la seguente immagine nella pagina che hai creato.

Passaggio 9 Assegnazione di eventi al calendario

L'attività successiva di questo tutorial è di interrogare gli eventi e i post dal database e visualizzarli sul calendario. Il calendario dettagliato predefinito fornisce solo il layout del calendario. Dobbiamo personalizzare il plug-in per assegnare eventi al calendario. Il calendario dettagliato utilizza una funzione chiamata g.prototype.print per visualizzare il calendario. Quindi stiamo andando a personalizzare questa funzione per recuperare eventi e messaggi dal database come mostrato di seguito. Il codice si trova nel jquery.calendar.min.js file all'interno del javascript cartella.

Spiegherò i codici che abbiamo cambiato e importanti dal punto di vista del plugin. Il codice specifico per plugin è stato omesso qui.
Per prima cosa ho inserito l'intero codice all'interno di una richiesta AJAX. Questa richiesta verrà effettuata ogni volta che cambi l'anno o carichi il calendario.
La richiesta AJAX sarà fatta al get_posts_for_year azione. Restituirà un elenco di post ed eventi per l'anno corrente visualizzati nella parte superiore del calendario.
Quindi passiamo in rassegna ogni risultato usando $ jq.each metodo. Passiamo i dettagli del risultato al postDetailsArr schieramento.
Usiamo la data di inizio per gli eventi e la data di pubblicazione per i post e si assegna all'array postArr.

Lo snippet di codice sopra riportato si trova anche all'interno della funzione di stampa.
Prepariamo la data e il mese aggiungendo 0 come prefisso nel caso in cui sia inferiore a 10.
Quindi controlliamo ogni data esiste all'interno del postArr usando il inArray funzione.
Se la data contiene un evento o post, aggiungiamo una speciale classe CSS chiamata event_highlight.

Generazione di post ed elenchi di eventi

Ora dobbiamo interrogare il database e generare risultati per la richiesta AJAX. Si consideri il seguente codice per il processo di generazione delle richieste.

 posts.guid, $ wpdb-> posts.post_title, DATE_FORMAT (post_date, '% m-% d-% Y') come post_date FROM $ wpdb-> post WHERE Year ($ wpdb-> posts.post_date) = '". $ _POST ['currentYear']. "'E post_status =" publish "e post_type =" post ""; $ allPosts = array (); $ annualPosts = $ wpdb-> get_results ($ sql, ARRAY_A); foreach ($ annualPosts $ key => $ singlePost) $ singlePost ['type'] = 'post'; array_push ($ allEvents, $ singlePost); $ sql = "SELECT $ wpdb-> posts.ID, $ wpdb-> post. guid, $ wpdb-> posts.post_title, DATE_FORMAT (post_date, '% m-% d-% Y') come post_date FROM $ wpdb-> post inner join $ wpdb-> postmeta su $ wpdb-> posts.ID = $ wpdb-> postmeta.post_id WHERE $ wpdb-> postmeta.meta_key = '_ eve_sta_date' e Year (STR_TO_DATE ($ wpdb-> postmeta.meta_value, '% m /% d /% Y')) = '". $ _POST [ 'currentYear']. "'e post_status =" publish "e post_type =" event ""; $ annualEvents = $ wpdb-> get_results ($ sql, ARRAY_A); foreach ($ annualEvents come $ key => $ singleEvent) $ startDate = str_replace ("/", "-", get_post_meta ($ singleEvent ['ID'], '_eve_sta_date')); $ endD ate = 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); Uscita; ?>

Per prima cosa assegniamo l'azione sia agli utenti registrati che agli utenti normali.
Quindi riceviamo tutti i post pubblicati per l'anno selezionato e lo assegniamo al $ allEvents schieramento.
Assegniamo gli eventi per l'anno selezionato utilizzando la stessa procedura di cui sopra e l'output in formato JSON.

Passaggio 10 Visualizzazione dell'elenco degli eventi

Le date con eventi o post saranno evidenziate in un colore blu. Una volta cliccato su tale data, l'elenco degli eventi dovrebbe essere visualizzato. Il calendario dettagliato ha una funzione chiamata calendar_callback che useremo per visualizzare la lista degli eventi. Il seguente codice JavaScript all'interno del verboseCalCustom.js il file verrà utilizzato per questa funzionalità.

La data cliccata verrà passata automaticamente a questa funzione. Per prima cosa assegniamo la data a una variabile usando l'oggetto data passato.
Successivamente otteniamo gli eventi e i post per la data selezionata usando postDetailsArr generato nella funzione di stampa.
Quindi assegniamo i dettagli di eventi e post considerando il genere variabile.
Alla fine assegniamo tutto il codice HTML al event_row_panel contenitore e visualizza l'elenco degli eventi.

Conclusione

Una volta completato il tutorial avrai un fantastico plugin per il calendario degli eventi. Questo contiene solo campi base di eventi. Puoi creare più informazioni sugli eventi aggiungendo altri campi personalizzati. Sentiti libero di estendere la funzionalità di questo plugin e condividere i tuoi suggerimenti.

Codice