Creazione di eventi futuri Plugin in WordPress Introduzione

WordPress non è più solo una piattaforma di blogging, ma può essere utilizzato per sviluppare applicazioni web complesse per molti scopi. WordPress offre una varietà di API, permettendoci così di svilupparci ulteriormente sulla sua base.

Possiamo estendere WordPress per soddisfare le nostre esigenze utilizzando l'API Plugin. Con questa potente API possiamo sviluppare soluzioni che soddisfano i nostri bisogni per scenari quasi infiniti; quindi, per diventare un maestro di WordPress, una volta deve padroneggiare le sue API.

In questa serie, esamineremo l'API dei plugin WordPress e l'API Widget e come possiamo utilizzarli per sviluppare soluzioni specifiche per le nostre esigenze.

Cosa stiamo facendo

Nel corso di questa serie in tre parti, costruiremo un plugin per WordPress da zero. Questo plug-in mostrerà un elenco di eventi imminenti sul front-end per consentire agli utenti di sapere cosa accadrà dopo. L'amministratore sarà in grado di pubblicare informazioni su nuovi eventi e sarà in grado di modificarli o eliminarli.

C'è un detto:

Non riuscire a pianificare sta pianificando di fallire.

Pianificheremo ogni dettaglio e aspetto del nostro plugin prima di iniziare a scrivere il codice. In questo modo, chiariremo che cosa faremo e Come lo faremo. Ci assicureremo inoltre di disporre di tutti i beni necessari che utilizzeremo in un secondo momento prima di iniziare a scrivere il nostro codice.

Inizieremo registrando un tipo di messaggio personalizzato per i nostri eventi. Questo renderà più facile per noi gestire le cose in modo efficiente. Quel tipo di post personalizzato includerà:

• un campo titolo
• un campo descrizione
• campo per l'immagine in primo piano

Oltre a questi campi standard, includeremo anche tre metadati personalizzati per:

• data di inizio dell'evento
• data di fine dell'evento
• luogo dell'evento

Per la data di inizio dell'evento e la data di fine dell'evento, incorporeremo il selettore di date dell'interfaccia utente jQuery nella nostra dashboard dei post.

I suddetti tre campi personalizzati salveranno i loro valori in post meta e interrogeremo i nostri eventi sul front-end sulla base di questi campi personalizzati usando la meta query.

Quando si tratta di tipi di post personalizzati, WordPress mostra solo le colonne per il titolo, l'autore e la data di pubblicazione del post nella schermata di post-modifica, ma non siamo limitati a questo. Aggiungeremo colonne personalizzate per la data di inizio dell'evento, la data di fine e la sede dell'evento per una migliore accessibilità per l'utente.

Infine, per quanto riguarda il front-end, è opportuno creare un widget che visualizzi un elenco di tutti gli eventi pianificati nel prossimo futuro. Con la potente API Widget, codificheremo il nostro widget personalizzato che saremo in grado di aggiungere nella nostra area della barra laterale o del piè di pagina.

Posa della Fondazione

Iniziamo creando la directory base / struttura dei file. Vai awp-content / plugins directory e creare una nuova directory di nome Prossimi eventi. Al suo interno, crea più directory per:

• css
• js
• img

Inoltre, crea i seguenti file PHP:

• index.php
• imminente-events.php

Come avrai notato, abbiamo creato un altro imminente-events.php file oltre allo standard index.php file. Scriveremo tutto il nostro codice all'interno del imminente-events.php file. È una buona pratica abbandonare un index.php file all'interno delle directory delle risorse e bloccherà chiunque cerchi di capire il contenuto della directory nel browser.

Creeremo style.css e script.js file all'interno del css e js cartelle rispettivamente.

Dentro il index.php file, aggiungi il seguente codice:

 
Qui, stiamo semplicemente inserendo un testo segnaposto all'interno del index.php.
 
Dentro il imminente-events.php file, aggiungi la seguente dichiarazione del plugin:
 
 
Avendo finito con la struttura di base dei file, passeremo alla raccolta delle risorse necessarie di cui abbiamo bisogno nel nostro plugin. Uno di questi asset è il foglio di stile per datepicker dell'interfaccia utente jQuery. Per impostazione predefinita, WordPress utilizza jQuery e jQuery UI core su tutte le sue pagine nella dashboard. Abbiamo solo bisogno di includere gli stili per il suo widget datepicker.
 
Per farlo, naviga nel browser su http://jqueryui.com e:
 
 
Clicca su Download personalizzato pulsante a destra
 
Nella pagina successiva, deselezionare il Attiva tutto casella di controllo sotto il componenti titolo. Questo deselezionerà tutte le caselle di controllo
 
Scorri verso il basso fino a widget sezione e controllare il Date picker casella di controllo
 
Nella parte inferiore della pagina, seleziona il tema del colore desiderato Temi sezione. Useremo il default UI Leggerezza tema per il nostro tutorial
 
Fare clic sul pulsante di download per scaricare il pacchetto personalizzato
 
 
Estrai il pacchetto scaricato e copia il contenuto di css / ui-leggerezza a upcoming-events / css elenco.
 
Che succede Avanti?
 
Questo è tutto sulla pianificazione. Nella prossima puntata della serie, inizieremo a scrivere il nostro codice.
 
Noi:
 
 
registra il tipo di messaggio personalizzato per l'evento
 
aggiungi meta box alla schermata di modifica degli eventi
 
aggiungi gli stili e gli script necessari al nostro amministratore
 
incorporare il selettore di date dell'interfaccia utente jQuery per inserire le date degli eventi
 
aggiungi colonne di amministrazione personalizzate alla schermata "Tutti gli eventi"
 
 
Restate sintonizzati per il prossimo articolo della serie.



		
			
	   
	




Codice