[Gida] Sortu WordPress plugin bat
zerotik hasita: Karrusel Moldagarria

Gida honetan WordPress plugin bat zerotik eta pausoz-pauso sortzen ikasiko dugu.

Sortuko dugun pluginak Custom Post-ez osatutako karrusel moldagarri eta animatu bat edozein orri eta sarreratan sartzen ahalbideratuko du. Karrusela shortcode baten bidez txertatuko da orrian.

Bidean WordPress-en nukleoko funtzio batzuk erabiliko ditugu pluginaren eginbeharrak betetzeko:

  • Sarrera Mota Pertsonalizatuak (Custom Post Types -CPT-) sortzeko.
  • Pertsonalizatutako shortcode-ak txertatzeko.
  • Geure plugina eta hirugarrenen estiloak eta scriptak ilaran jartzeko eta erregistratzeko.

Horretaz gain, beste baliabide batzuk ere azaldu eta erabiliko ditugu:

  • Piklist erabiltzen ikasteko sarrera bat egingo dugu. Piklist WordPress-en garapena arintzeko plugina da, pertsonalizatutako eremuak (Custom Fields) sortzen eta CPT-ekin lotzen errazten duena.
  • Slick jQuery plugina erantsiko dugu gure kodean, karrusela animatzeko baliogarria izango zaiguna.

Kode guztia GitHub-eko errepositorio honetan aurkituko duzue, eskuliburu labur batekin.

 

AURRETIKO BETEKIZUNAK

  • WordPress instalazio aktibo eta eguneratu bat.
  • Piklist plugina instalatuta eta aktibatuta (https://piklist.com/).

1.URRATSA: WORDPRESS PLUGINAREN OINARRIZKO EGITURA SORTZEA

Plugin bat WordPress-i ezaugarri, zerbitzu edota funtzionalitate pertsonalizatuak txertatzeko erabiltzen da.

Lehenik eta behin, pluginaren fitxategiak bere barne izango dituen karpeta edo direktorioa sortuko dugu wp-content/plugins/ bidean.

Gure pluginaren izena “Netireki – Carousel Custom Posts” izango da, eta karpetak “ntrk-carousel-cposts” izango du izena:

WordPress FilesystemTree
Oinarrizko direktorio-egitura

Jarraian pluginaren fitxategi nagusia sortuko dugu karpeta berriaren barruan. Fitxategi honi karpetaren izena emango diogu PHP atzizkiarerkin: ntrk-carousel-cposts.php

Fitxategi honen lehenengo lerroetan artxibo-goiburua txertatu behar da, WordPress-ek plugina antzematu eta pluginak kudeatzeko administrazio-panelean erakutsi ahal izeteko.

Gure artxibo-goiburuak itxura hau izango du:

Hau besterik ez dugu egin behar plugina WordPress-en pluginak kudeatzeko administrazio-panelean ikusi ahal izateko:

Netireki Plugin - Custom Posts Carousel
Oinarrizko plugina desaktibatuta

Gure plugina WordPress-en plugin-errepositorioan erregistratu nahi izango bagenu, WordPress-en administrazio-paneletik bilagarria eta instalagarria izan dadin, readme.txt fitxategi bat txertatu beharko genuke fitxategi nagusiarekin batera.

WordPress Codex-en fitxategi honen inguruko informazio gehiago dago (). Modu automatikoan ere sortu daiteke GenerateWP web orriari esker.

Gida honetarako readme.txt fitxategiaren bertsio oso xumea sortu dut, ziur aski WordPress-errepositorioan argitaratzeko nahikoa izango ez dena.

2.URRATSA: KARRUSELERAKO CPT-A SORTZEA

Lehenengo urratsan WordPress plugin baten oinarrizko egitura sortu dugu. Bigarren puntu honetan funtzionalitatea garatzeari ekingo diogu.

Lehenik, CPT bat sortuko dugu, ‘ntrk_carousel_cpost‘ izena izango duena eta karruselak WordPress sarrerak izango balira bezala erabiltzea posible egingo duena. Horretarako GenerateWP web orriko Custom Post-ak sortzeko laguntzailea erabili dezakegu, eta sortutako kodea ‘ntrk-carousel-cposts.php‘ fitxategi nagusian kopiatuko dugu:

Momentu honetan, plugina aktibatzen badugu jada elementu berri bat ikusiko dugu WordPress-eko alboko menuan ‘NETIREKI – Carousels’ izenarekin:

Menu ntrk-carousel-cposts
Plugin-erako lasterbidea WordPress-eko alboko menuan

Karrusel berri bat sortzen saiatzen bagara soilik “Izenburua” eremua bete ahal izango dugu, CPT-a sortzean WordPress-i hala esan diogulako ‘supports’ => array(‘title’) parametroa bidaltzean.

Karruselari diapositibak txertatu ahal izateko, pertsonalizatutako eremuen egitura bat sortu behar dugu, geure CPT berriarekin lotuko duguna.

3.URRATSA: KARRUSELAREN PERTSONALIZATUTAKO EREMUAK SORTZEA

1. eta 2. urratsetan WordPress plugin baten oinarrizko egitura eta karruselen euskarria izango den CPT-a sortu ditugu. Hirugarren urrats honetan pertsonalizatutako eremuak egingo ditugu, karruselekin lotuko ditugunak irudi eta testu bat izango duten diapositibak txertatu ahal izateko.

Piklist-ek eskaintzen dizkigun funtzioak erabiliko ditugu. Piklist doako plugin bat da. Temak eta pluginen garapena arintzen du, WordPress-eko ataza korapilatsueank errazago egiten gauza gehiago denbora gutxiagoan burutzeko.

Hasteko, gure plugina Piklist-en erregistratuko dugu. Oso erreza da: fitxategi nagusiaren goiburua aldatu behar dugu lerro bakar bat gehituz:

Segidan, Piklist-ek eskatzen duen direktorio-egitura sortuko dugu gure karpetaren barruan:

ntrk-carousel-cposts
|-parts
    |-meta-boxes
        |-ntrk-carousel-metabox.php

Karrusel bakoitzak nahi beste diapositiba izango ditu, eta diapositiba baikoitzak irudi eta testu deskribatzaile bat izango ditu. ntrk-carousel-metabox.php fitxategian kode lerro batzuk sortuko ditugu egitura hau finkatzeko Piklist-eko funtzio batzuen bidez:

Fitxategiaren goiburuan (komentatutako lerroetan), metabox-aren izenburua zehaztu dugu, bai eta metabox-a erakutsiko den sarrera mota era. Gure kasuan, 2.urratsan sortu genuen ‘ntrk_carousel_cpost‘ sarrera-motan bistaratuko da.

Metabox honek eremu-multzo bat izango du (‘type’ => ‘group’), errepikakorra izango dena (‘add_more’ => true) karrusel bakoitzari nahi beste diapositiba txertatu ahal izateko.

Beherago multzo bakoitza osatzen duten eremuak zehaztu ditugu. Alde batetik irudia (‘type’ => ‘file’), eta bestetik testu deskribatzailea (‘type’ =>’textarea’).

Piklist erabiliz idatzitako kodea irakurri eta ulertzeko oso erraza da. Framework honen ezaugarriez eta gaitasunez gehiago jakin nahi izanez gero, bere web orrian dokumentazio osoa aurkituko duzu.

Orain karrusel berri bat sortzen badugu, diapositibak txertatzeko behar diren eremu guztiak agertuko zaizkigu edizio-orrian:

Nuevo carrusel ntrk-carousel-cposts
Karrusel bateko diapositiben oizarrizko sarrera-pantaila

AURRERATUA: GitHub-en dagoen kodeak Slick plugina konfiguratzeko eremuak ere aintzat hartu ditut. Hona hedatutako eremu horietaz osatutako karrusel eredu bat:

Nuevo carrusel completo ntrk-carousel-cposts
Karruselen editorearen bertsio aurreratua

4.URRATSA: KARRUSELA ERAKUSTEKO SHORTCODE-A SORTZEA

Aurreko puntuetan pluginaren egitura konfiguratu, CPT-a sortu eta diapositiba aunitzez osatutako karruselak sortzeko pertsonalizatutako eremuekin lotu dugu. Orain arte, geure pluginak soilik informazioa gordetzen du WordPress-en jatorrizko datu-ereduan, karrusel bat eraikitzeko behar den informazio guztia hain zuzen.

Urrats honetan shortcode bat sortuko dugu, gordetako informazioa erabiliz karrusel zehatz bat bistaratuko duena edozein orri edo sarreratan.

Shortcode-ak makroak bezalakoak dira. Kode-lerro aunitz “alias” edo “lasterbide” baten barruan murgiltzen dituzte, eta parametroak ere onartu ditzakete.

Helburua [ntrk-carousel-cpost id=$id] formatua izango duen kode bat sortzea da, $id identifikatzailea duen karrusela erakutsiko duena. Hau egiteko Piklist erabil genezake, shortcode-ak sortzeko guntzikoak baititu, baina eredu honetan WordPress-eko nukleoa erabiliko dugu.

Lehenik, shortcode-aren logika izango duen funtzioa sortzea da, geroago deia egiteko orduan erabili nahi dugun kodearekin lotzeko.

Pluginaren fitxategi nagusian (ntrk-carousel-cposts.php) ntrk_carousel_shortcode() izendatutako funtzio berri bat gehituko dugu, eta “ntrk-carousel-cpost” kodearekin lotuko dugu “add_shortcode” WordPress funtzioa erabiliz:

$atts aldagaiak shortcode-aren deian bidalitako parametroan jasotako karruselaren identifikatzailea izango du.

Jarraian, funtzioaren barruan jasotako identifikatzailea duen karrusela lortzeko datu-baserako kontsulta edo query-a egingo dugu:

Lehenengo kontsulta honen bidez, karruselaren izenburua baino ez dugu lortuko. Diapositiba guztien datuak berreskuratu nahi ditugu, eta horretarako 3.urratsan sortutako eremu pertsonalizatuetatik jaso beharko ditugu:

$html aldagaiak sortzen dugun HTML kodea gordetzeko balio du, funtzioaren amaieran itzuliko duguna.

  • while‘ begizteren hasieran ‘slides‘ eremuan multzatutako karruselaren metadatuak berreskuratzen ditugu.
  • unserialize‘ bat erabiltzen dugu multzatutako datuetan.
  • Slide-n array-a iteratzen dugu eta diapositiba ($slide) bakoitzaren irudia eta testu deskribatzailea erakusten ditugu..

Shortcode honek diapositiba bakoitzaren irudiak eta testuak erakutsiko ditu, baina oraindik ez dugu karrusel animatu eta moldagarriaren portaera errepikatzea lortu.:

Carrusel incompleto ntrk-carousel-cposts
Diapositiben informazioa, Karrusel-aren formaturik gabe

Hau karrusel bihurtzeko proiektuari Slick jQuery plugina txertatu behar diogu.

5.URRATSA: SLICK PLUGINA TXERTATUZ KARRUSELA ANIMATZEKO

Urrats honetan gure WordPress pluginari Slick, jQuery plugin, txertatuko diogu, eta 4.urratsan sortutako shortcode-ak itzultzen digun HTML kodea karrusel animatu eta moldagarri bihurtzeko behar den konfigurazioa bidaliko diogu.

Slick deskargatzeko bere web orrira joango gara, eta behin deskonprimituta gure pluginaren direktorio nagusian (ntrk-carousel-cposts) sortuko dugun ‘slick‘ karpetan kopiatuko ditugu fitxategi guztiak.

assets‘ karpeta ere sortuko dugu. Bertan carousel.css eta carousel.js fitxategiak sortuko digutu, gure pluginaren estiloak eta script-ak pertsonalizatzeko erabiliko ditugunak.

Filesystem with Slick
Direktorio-egitura Slick pluginarekin

Ondoren, Slick-en CSS eta JS fitxategiak ilaran jarriko dugu geure pluginak kargatu ditzaten. ‘assets‘ bidean sortu berri ditugun CSS eta JS fitxategiak ere ilaran jarriko ditugu. Hau egiteko ‘wp_enqueue_scripts‘ nukleo-ekintza erabiliko dugu “ntrk-carousel-cposts.php” fitxategi nagusian:

Slick hasieratzeko, lerro hau gehitu behar dugu carousel.js fitxategian:

Eta karrusela konfiguratzeko gure shortcode-aren funtzioan ‘data’ atributuak txertatuko ditugu karruselak navigazio-puntuak izan, automatikoki mugitzen hasi, ikuspegi bakoitzeko 3 diapositiba bistaratu, eta banan-banan desplazatzeko:

AURRERATUA: gure CPT-ari erabiltzaileak konfigurazio-parametroak sartu ahal izateko pertsonalizatutako eremuak txertatzen badizkiogu, shortcode-aren barruan berreskuratu ahal izango ditugu geroago “data-slick” HTML atributua erabiliz Slick-i zuzenean bidaltzeko:

Amaitzeko, estiloak emango ditugu karruselari carousel.css fitxategia editatuz (‘assets‘ direktorioan):

Eta orain karrusela funtzionatzen ikusi ahal izango dugu:

Carrusel en accion ntrk-carousel-cposts
Plugina martxan

1.GEHIGARRIA: KARRUSELAREN EDIZIO-ORRIAN DAGOKION SHOTCODE-A ERAKUSTEA

Karrusel bakoitzaren edizio-orrian bere shortcode osoa erakustea oso baliagarria izan daiteke erabiltzaileak modu erraz batean kopiatu eta edozein orri edo sarreratan erabili dezan.

Hau egiteko, karruselen metabox-a definitu dugun fitxategia (ntrk-carousel-metabox.php) aldatuko dugu lerru hauek gehitzeko:

Kode zati honek HTML-eremu pertsonalizatu bat txertatzen du, karrusel bat argitaratu eta gero shortcode-aren kodea erakutsiko duena:

Shortcode en edit page ntrk-carousel-cposts
Shortcode-aren kodea Karrusel bateko edizio-orrian

2.GEHIGARRIA: MOLDAGARRITASUN PERTSONALIZATUA

Slick-ek karruselaren portaera moldagarria konfiguratzeko aukera ematen du. Horretarako, parametro batzuk konfiguratu daitezke pantailaren zabaleraren arabera balore ezberdinak emanez.

Erabiltzaileak eten-puntuak eta dagozkien baloreak ezarri ahal izateko, metabox-ari (ntrk-carousel-metabox.php) pertsonalizatutako eremu-multzo berri bat txertatuko diogu:

Ondoren, baloreak shortcode-an berreskuratuko ditugu eta “slickSetOption” metodoari esker Slick-aren opzioak eguneratuko ditugu:

3.GEHIGARRIA: DEPENDENTZIAK EGIAZTATZEN PLUGINA AKTIBATZEAN

Gure plugin berriak Piklist plugina instalatuta eta aktibatuta egotea behar du. Geure plugina menpekotasun hau konpondu gabe instalatzea eta aktibatzea ekiditeko “ Piklist Checker” tresna erabili dezakegu. Tresna hau Piklist-ek berak erabiltzaileari menpekotasun honetaz jakinarazteko eta konpontzen laguntzeko eskaintzen digun baliabidea da.

Laburbilduz, gure pluginari ‘Piklist_Checker’ klasea txertatu (‘ class-piklist-checker.php‘ fitxategia), eta fitxategi nagusiari (‘ ntrk-carousel-cposts.php‘) kode zati hau gehitu beharra dago:

BALIZKO HOBEKUNTZAK

Karrusel bat itxuratzeko plugin honen gaitasuna murritza dela argi dago. Hobekuntza batzuk egin litezke: ikuspegi bakoitzen erakusten diren diapositiba kopurua shortcode-an bertan txertatutako parametro baten bidez konfiguratzeko aukera, esate baterako.

Dena den, artikulu honen xedea pedagogikoa da batez ere: WordPress plugin bat eraikitzeko oinarriak aztertzea, WordPress-eko nukleoaren funtzio basiko batzuk ere (CPT-ak sortu, estiloak eta scriptak ilaran jarri, shortcode-ak erregistratzeko) birpasatzea, eta Piklist plugina erabiltzeko lehenengo pausoak azaltzea.

Hemendik aurrera, zure esku jartzen dudan kodea nola aprobetxatzeko erabakia zeurea da. Ikasteko, bertan dagoena aldatzeko eta hobetzeko erabil dezakezu, betiere argitaratu dudan MIT lizentziaren baldintzak errespetatuz.

Aldaketa, zuzenketa eta hobekuntza horiek proposatu ditzakezu ere artikulu honi komentario bat eginez. Ahalik eta azkerren erantzuten saiatuko naiz. Animatu eta utzi zure iruzkina!

 

 

Web GarapenaWordPress