Integrarea caruselului owl într-un plug-in WordPress Planificarea plug-in-ului

În această serie de articole, vom studia studiul pas cu pas al dezvoltării plugin-ului WordPress.

Dacă sunteți începător care vrea să scrie primul dvs. plugin (care include atât coduri scurte, cât și widget-uri), atunci această serie este mai ales Pentru dumneavoastră.

Pentru a arăta acest proces în practică, vom dezvolta un plugin pentru integrarea caruselului Owl în WordPress.

Caruselul cu caracatiță este carusel receptiv care joacă bine pe desktop, tablete și mobil. Acesta a fost dezvoltat de Bartosz Wojciechowski și este distribuit sub licența MIT.


Conceptul Plugin

Să aruncăm o privire asupra conceptului de plugin pentru a înțelege clar ce anume vom crea.

Iată ideea:

  • Vom integra Caruselul Owl pe site-ul nostru WordPress.
  • Vom introduce imagini din anumite posturi în carusel.
  • În cele din urmă, vom expune parametrii caruselului pe tabloul de bord, astfel încât utilizatorul să poată oferi personalizarea.

Pur și simplu, căutăm să introducem integrarea profundă a caruselului Owl în WordPress cu o interfață ușor de utilizat.


Pornirea dezvoltării

În mod firesc, prima întrebare este, de unde începem?

Dat fiind că ne străduim să integrăm o singură bibliotecă (Owl Carousel) într-o aplicație existentă (WordPress), trebuie să putem descrie pașii pe care urmează să le urmăm pentru a ne dezvolta conecteaza.

Pentru a începe, vom sublinia exact ce face Owl Carousel:

Aici, vedeți cele două cuvinte cheie:

  1. Imagini
  2. Setări

Mai întâi, să aruncăm o privire mai atentă la "Setări". Setările pot fi definite ca parametrii caruselului owl pe care îi vom expune în tabloul de bord WordPress.

Pentru a face acest lucru, trebuie să dezvoltăm pagina de setări în Tabloul de bord. Ca atare, acesta va fi primul pas al dezvoltării plugin-urilor. În acest scop, o vom adăuga în diagrama noastră.

Acum, să ne îndreptăm atenția asupra imaginilor prezentate.

După cum am menționat la începutul articolului, dorim să arătăm imagini de la postările pe care le selectăm. Pentru a face acest lucru, trebuie să putem marca posturile care ar trebui să apară în carusel.

Există mai multe moduri de a face acest lucru:

  • Putem adăuga o categorie specială.
  • Putem adăuga o etichetă specială.
  • Putem adăuga un câmp personalizat.

Atât implementările pentru categorii, cât și pentru tag-uri sunt idei slabe din perspectiva SEO, deoarece ele creează pagini suplimentare pe site care în cele din urmă reproduc conținutul existent. Deși poate controla acest lucru într-o serie de moduri diferite, aceste strategii sunt în afara scopului acestui tutorial.

Pentru a evita acest lucru, vă recomandăm să utilizați câmpuri personalizate. În acest caz, marcați o postare și nu apar pagini suplimentare. Al doilea pas este să definiți ce imagini să adăugați la carusel.

Să adăugăm acest pas la diagrama noastră:

Când avem parametri și imagini, putem implementa în final funcționalitatea caruselului real. Și acesta va fi cel de-al treilea pas, așa că adăugați-l în diagrama noastră:

În acest moment, avem suficientă funcționalitate pentru a adăuga Caruselul Owl la temă ca etichetă șablon; cu toate acestea, ar fi mult mai bine să puteți adăuga caruselul la posturi și pagini.

Pentru a face acest lucru, trebuie să implementăm funcționalitatea codurilor scurte. Ca și în restul pașilor noștri, să o adăugăm în diagramă:


Îmbunătățirea utilității pluginului

Pentru a face pluginul mai util, ar trebui să adăugăm un widget pentru caruselul Owl. Widgeturile ne permit să afișăm caruselul pe mai multe pagini ca o alternativă la codurile scurte.

În cele din urmă, să adăugăm și dezvoltarea unui widget în diagrama dezvoltării noastre.

Mai sus este diagrama întregului nostru proces. Înainte de dezvoltarea funcționalității plugin-ului însuși, trebuie să pregătim spațiul de lucru pentru dezvoltare. În următorul articol, vom acoperi exact acest lucru.


Concluzie

În acest articol, am definit caracteristicile plugin-ului nostru și am planificat pașii de dezvoltare.

Scopul procesului de planificare vizează împărțirea și cucerirea. Cu alte cuvinte, ne străduim să distrugem ideea a ceea ce dorim să facem în pași gestionabili care pot fi realizați prin mai multe iterații de dezvoltare.

De acolo, ar trebui să puteți defini dependențele, pașii, API-urile și datele necesare pentru a implementa efectiv pluginul. Începând cu următorul articol, vom începe prin stabilirea spațiului nostru de lucru pentru dezvoltare, apoi avansarea cu dezvoltarea pluginului.

Cod