Share
In questa serie di articoli, studieremo il processo passo-passo dello sviluppo di plug-in di WordPress.
Se sei un principiante che cerca di scrivere il tuo primo plug-in (che include sia gli shortcode sia i widget), allora questa serie è particolarmente per te.
Per mostrare questo processo nella pratica, svilupperemo un plugin per l'integrazione di Owl Carousel in WordPress.
Owl Carousel è un carosello reattivo che funziona bene su desktop, tablet e dispositivi mobili. È stato sviluppato da Bartosz Wojciechowski ed è distribuito con licenza MIT.
Diamo un'occhiata al concetto di plugin per avere una chiara comprensione di cosa esattamente creeremo.
Ecco l'idea:
In poche parole, stiamo cercando di introdurre una profonda integrazione di Owl Carousel in WordPress con un'interfaccia user-friendly.
Naturalmente, la prima domanda è, da dove iniziare?
Dato che stiamo lavorando per integrare una libreria (cioè Owl Carousel) in un'applicazione esistente (cioè WordPress), dobbiamo essere in grado di delineare i passi che seguiremo per sviluppare effettivamente il nostro collegare.
Per iniziare, descriveremo esattamente cosa fa Owl Carousel:
Qui, vedi le nostre due parole chiave:
Per prima cosa, diamo uno sguardo più da vicino a "Impostazioni". Le impostazioni possono essere definite come i parametri di Owl Carousel che esponiamo nel dashboard di WordPress.
Per fare questo, abbiamo bisogno di sviluppare la pagina delle impostazioni nella nostra Dashboard. In quanto tale, questo sarà il primo passo dello sviluppo dei plugin. A tal fine, lo aggiungeremo al nostro diagramma.
Ora, rivolgiamo la nostra attenzione alle immagini presentate.
Come ho detto all'inizio dell'articolo, vorremmo mostrare le immagini in primo piano dai post che selezioniamo. Per fare questo, dobbiamo essere in grado di contrassegnare i post che dovrebbero apparire nel carosello.
Ci sono diversi modi per farlo:
Entrambe le implementazioni di Categoria e Tag sono idee scadenti dal punto di vista SEO perché creano pagine aggiuntive sul sito Web che in definitiva duplicano il contenuto esistente. Sebbene possa effettivamente controllarlo in un certo numero di modi diversi, queste strategie non rientrano nell'ambito di questo tutorial.
Per evitare ciò, ti consiglio di utilizzare campi personalizzati. In questo caso, contrassegni un post e non compaiono pagine aggiuntive. Il secondo passo è definire quali immagini aggiungere al carosello.
Aggiungiamo questo passaggio al nostro diagramma:
Quando disponiamo di parametri e immagini, possiamo finalmente implementare la funzionalità del carosello reale. E questo sarà il nostro terzo passo, quindi aggiungiamolo al nostro diagramma:
A questo punto, abbiamo abbastanza funzionalità per aggiungere Owl Carousel al tema come tag di un modello; tuttavia, sarebbe molto meglio poter aggiungere il carosello a post e pagine.
Per fare ciò, dobbiamo implementare la funzionalità shortcode. Come con il resto dei nostri passi, aggiungiamolo al diagramma:
Per rendere il plugin ancora più utile, dovremmo aggiungere un widget per il Gufo del carosello. I widget ci permettono di mostrare il carosello su più pagine come alternativa ai codici brevi.
Infine, aggiungiamo lo sviluppo di un widget al diagramma del nostro sviluppo.
Sopra è il diagramma del nostro intero processo. Prima di sviluppare la stessa funzionalità del plugin, dobbiamo preparare il nostro spazio di lavoro per lo sviluppo. Nel prossimo articolo, tratteremo esattamente questo.
In questo articolo abbiamo definito le funzionalità del nostro plug-in e pianificato le fasi di sviluppo.
Lo scopo del processo di pianificazione è tutto incentrato sulla divisione e sulla conquista. In altre parole, stiamo lavorando per abbattere l'idea di ciò che vogliamo fare in passi gestibili che possono essere raggiunti attraverso diverse iterazioni di sviluppo.
Da lì, dovresti essere in grado di definire le dipendenze, i passaggi, le API e i dati necessari per implementare effettivamente il plug-in. A partire dal prossimo articolo, inizieremo con l'impostazione dell'area di lavoro di sviluppo, quindi proseguendo con lo sviluppo del plug-in.
Accentsconagua