Kuinka luoda yksinkertainen FAQ-laajennus WordPressille

Olemme nähneet ennen paljon blogin kirjoittamiseen liittyviä vinkkejä ja työkaluja. No, tänään opimme luomaan hyvän työkalun blogiisi – UKK-sivun laajennuksen. Mutta tärkein asia ei ole vain itse plugin, vaan mitä voit tehdä tällä periaatteella. Opit kuinka tallentaa minkä tahansa tyyppisiä tietoja WP-sivustoosi ja kuinka integroida ne ulkoisiin kirjastoihin (kuten jQuery UI) luomalla räätälöityjä komponentteja sivustoosi. Aloitetaan!


Idea, esittely & ladata

esittely

Tavoitteenamme on tässä luoda laajennus, jota voidaan käyttää moniin asioihin, mutta sopii melko hyvin UKK-sivuille.

Mutta tärkeimpänä saavutuksemme lisäksi on ymmärtää WordPressin mukautettuja postityyppejä, lyhytkoodeja, vuorovaikutusta ulkoisen JS / jQuery-laajennuksen kanssa. Tämän idean avulla voisit luoda paljon juttuja muihin hulluihin laajennuksiin, jotka saatat löytää sieltä. Tämä on vain lähtökohta sinulle, rakas Padawan.

Joten täältä löydät käyttämämme komponentin jQuery API -demo – mutta todella hieno juttu on koodi, jota käytetään kyseisen komponentin luomiseen (PHP).

Lämmitys – Plugin-tiedosto ja mukautettu postityyppi

Ensinnäkin meidän on luotava mukautettu postityyppi tietojen tallentamiseksi.

Mukautetut postityypit ovat iso osa WP: n taikuutta. Sen avulla voit luoda uuden tietotyypin (kuten viestit, sivut, liitteet ..), jotta sitä voidaan soittaa ja manipuloida WP: n toimintojen avulla. Tämä voi tuntua yksinkertaiselta aloittelijoille, mutta vain vanhan ajan PHP-ohjelmoijat (onko se vielä asia?) Tietävät, kuinka vaikeaa oli vain yhdistää ja tallentaa tietoja tietokantaan. Puhumattakaan siitä, että luodaan dynaamisesti uusia tietotyyppejä, tämä on hieno, mutta sallii koodimme suuren joustavuuden.

Jotta meillä olisi tämä, tarvitsemme laajennuksen, mutta luultavasti tunnet tämän käsitteen jo. Plugins ovat kuin Lego-lohkot WordPressille, ne lisäävät tai muuttavat nykyiset toiminnot käyttämällä jotain koodia, joka voidaan helposti kytkeä (duh!) Tai myös kytkeä irti, jos haluat.

Jotta voit luoda laajennuksen tavalla, jonka WP tunnistaa, tarvitset 2 asiaa:

  1. Luo tiedosto wp-content / plugins /
  2. Lisää metatiedot tiedoston alkuun, jotta WP ymmärtää, mistä kyse on

Muista, että tiedostonimen on oltava yksilöivä, joten kun joku asentaa laajennuksesi (jopa itse), siitä ei tule ristiriitoja nykyisten laajennusten kanssa. Jos kyseessä on parempi organisaatio, lisäämme uuden kansion nimellä Faq-whsr ja sen sisälle tiedoston nimeltä faq-whsr.php.

Lisää nyt metadataa varten vain jotain tällaista plugins-tiedostosi alkuun (heti <?php):

meta_01

Joka tarkoittaa:

  • Plugin-nimi: Mukava nimi, joka näkyy wp-adminissa > plugins-käyttöliittymä
  • Plugin URI: Jos haluat lisätä linkin laajennuksen sivulle (asiakirjat, esimerkit, myyntisivu)
  • Kuvaus: Tämä on pieni kappale, joka näkyy wp-adminissa > plugins-käyttöliittymä. Pidä se yksinkertaisena, jotta käyttäjät muistavat, mistä se on
  • Kirjoittaja / kirjoittaja URI: Henkilö / yritys, joka loi laajennuksen ja linkin hyvityksille
  • Lisenssi: Joten käyttäjät tietävät, mitä he voivat / eivät voi tehdä laajennuksellasi

Ok, nyt olemme luoneet laajennuksen ja lisänneet joitain asiaankuuluvia metatietoja. Heti kun tallennat laajennustiedoston, sinun pitäisi nähdä se wp-admin-käyttöliittymässä

Aktivoidaan se ja katsotaan mitä tapahtuu.

Odota, ei mitään? No, se on hyvä asia, jos jokin oli vialla juuri nyt, näet virheen. Siirrytään nyt mukautettujen viestityyppien luomiseen.

Tapauksessamme CPT on usein kysytyt kysymykset, mutta voit luoda kirjoja, videoita, suosituksia ja niin edelleen. Tärkeä asia, joka tässä mielessä on pidettävä, on: funktioiden nimien on oltava ainutlaatuisia. Toista nyt kanssani: funktioiden nimien tulisi olla ainutlaatuisia, funktioiden nimien tulisi olla ainutlaatuisia. Sain sen? Hyvä, tämä säästää paljon vaivaa, kunnes voimme käyttää OOP: ta (ehkä seuraavassa opetusohjelmassa).

Velho tehdään tällä koodilla:

CPT

Ja tätä asiaan liittyvät osat tarkoittavat:

  • $ tags – on taulukko, jossa on wp-admin-alueen eri osien tarrat ja teksti. Joten WP tietää oikean tavan soittaa tuotteillemme
  • tukee – tämä kertoo mitä voit nähdä wp-adminissa > Ohje > uusi näyttö. Tapauksessamme meillä on otsikko, toimittaja (pääsisältöruutu), tekijä, versiot ja mukautetut kentät (jos haluat niitä).
  • taksonomiat – tässä kerrot WP: lle, mitkä taksonomiat ovat sallittuja (luokat, tunnisteet tai mukautetut taksonomiat)
  • register_post_type (‘faq_whsr’, $ args) – tämä kertoo WP: lle “Hei, luo uusi mukautettu postityyppi tunnuksella faq_whsr käyttämällä $ argsin argumentteja”.

Tallenna se ja pidä hengitystäsi. Sinun pitäisi nähdä uusi osa wp-admin-päävalikossa

Odota, siinä on? Joo. Tämä katkelma luo koko CPT-toiminnallisuuden. Jos et löydä tätä viileää, odota, että se tulee viileämmäksi seuraavassa osiossa.

Ennen kuin poistumme wp-administa, lisää joitain näennäistietoja (muutama kysely, joissa on vähintään 2 luokkaa).

Käyttöliittymä – WP x jQuery-vuorovaikutus

Nyt on vihdoin aika nähdä jokin toiminta ja käytämme siihen jQuery UI -harmonikka-elementtiä.

jQuery-käyttöliittymällä on melko samat edut kuin itse jQuery:

  • Paljon kehittäjiä työskentelee sen parissa
  • Ristiinselain ja matkapuhelimiin valmis koodi
  • Hyvin dokumentoitu
  • Pelaa mukavasti WP: n kanssa (WP itse käyttää niitä)

Kysymys on nyt: Kuinka me kutsumme sitä?

Tähän on 2 lähestymistapaa:

  1. Huono puhdas / tunnisteet wp_headissäsi
  2. Mukava wp_enqueue

Emme menetä liian paljon aikaa väärän lähestymistavan kanssa tänään, mutta hyvä sanoo periaatteessa WP: lle “hei kaveri, tarvitsemme jQuery UI: ta jossain vaiheessa koodiin, sisällytä se sivulle”. Tällä tavoin WP voi tarkistaa, onko joku muu jo sisällyttänyt sen tai sisällyttänyt siihen toisen version, ja välttää paljon ongelmia kopioitujen kirjastojen kanssa. Ok, kuinka kääntää tuo mukava keskustelu koodiksi?

Enqueque-toiminnon käyttäminen:

enqueue_02

Lyhytkoodi

Ja nyt olemme palanneet wp-adminiin. Meillä on usein kysytyt kysymykset, ja olemme saaneet kirjaston tyyliä kohteita haluamallasi tavalla. Mitä muuta puuttuu? No, meidän on soitettava esineille!

Meillä on paljon vaihtoehtoja tähän, mutta helpoin tässä tapauksessa on luoda lyhytkoodi. Lyhytkoodi on jotain, jonka lisäät sisältökenttään (sivuille, viesteille, CPT: lle …) ja WP todella etsii funktiota sen suorittamiseksi. Lyhytkoodeja on 2 tyyppiä:

  1. [itsesulkeutuva] – kuten tunnisteet tai
    tällainen lyhytkoodi vain kutsuu toimintoa jossain vaiheessa – tämä on meidän kaverimme
  2. [kääritty] sisältö [/ kääritty] – tämä on kuin tunnisteita

    tai ja voi tosiasiallisesti muuttaa sen sisältöä tai käyttää sisältöä argumentteina.

Katsotaanpa kuinka se sitten toimii. Luo uusi sivu wp-adminiin ja lisää tämä koodi sinne:

[Faq-whsr]

Tallenna ja käy sillä sivulla ja katso mitä tapahtuu…

Vain leikkiä, se ei tee mitään oikein? No, se johtuu siitä, että emme ole vielä luoneet sille toimintoa.

Lisää tämä laajennustiedostoosi:

shortcode_02

Päivitä nyt sivu ja lupaan, että tapahtuu jotain todella hienoa.

Hienoa? Nyt voit nähdä, että se on käynnissä ja taivas on sinulle raja nyt. Se, mitä tämä koodi tekee, on vain kertoa WP: lle, että on olemassa lyhytkoodi, jota kutsutaan [faq-whsr], ja jos WP löytää sen, WP: n tulisi suorittaa toiminto sivun kyseisessä pisteessä..

Meidän tapauksessamme meidän on saavutettava tämä rakenne luotavalle jQuery-käyttöliittymäpaneelille:

api_02

Sitä varten luomme WP-kyselyn, lataamme usein kysyttyjä kysymyksiä ja niiden sisältöä. Korvaa lyhytkooditoiminto tällä:

shortcode-basic_02

Ok, nyt UKK-kohteitasi kutsutaan. Mitä olemme tehneet, on soittaa wp_query kutsuaksemme mukautetun postityyppimme ja siirtää se sitten lyhytkoodin palautukseen, jotta WP näyttää ne kaikki halutun rakenteen mukaisesti.

Se on hyvä, mutta jotain puuttuu, eikö niin? Entä jotkut vaihtoehdot siellä? No, voimme lisätä vaihtoehtoja lyhytkoodiin, katsotaan kuinka luodaan muutama WP_Query-argumentti lyhykoodiin:

shortcode-final_02

Tällä tavalla voit soittaa kohteita seuraavilla argumenteilla (voit yhdistää niin monta kuin haluat):

  • kissa – luokan tunnus (useita lisätty taulukkona) [faq-whsr cat = 1]
  • kategorian_nimi – luokan nimi [faq-whsr kategorian_nimi = ”ruoka”]
  • order – ASC tai DESC (DESC on oletus) [faq-whsr order = ”ASC”]
  • orderby – muuta esineiden tilaamisen ehtoja [faq-whsr orderby = ”title”]
  • posts_per_page – muuta ladattujen kohteiden määrää [faq-whsr posts_per_page = 5]

Mutta kuten sanoin, taivas on raja sinulle ystäväni. Tässä on muutama WP_Query-vaihtoehto, joita voit ottaa käyttöön ja käyttää:

  • kirjailija
  • Luokka (lisäysvaihtoehtojen lisääminen not_in: llä)
  • Haku (hieno, jos haluat antaa käyttäjille mahdollisuuden etsiä niitä)
  • Muokattu kenttä (koska usein kysytyillä kysymyksillä on niitä, voit ladata kohteita tietyillä mukautetuilla kentillä ja arvoilla)

Nyt on sinun vuorosi

Kuten näette, tämä on vain lähtökohta sinulle. Me kaikki voimme oppia paljon muita hienoja asioita tämän yksinkertaisen laajennuksen parantamiseksi. Tässä on muutamia ehdotuksia, joiden avulla voit kaivaa syvemmälle:

  • Vastuullinen muotoilu
  • Widget-luominen
  • Plugin aktivoi / aktivoi koukut
  • kansainvälistyminen
  • OOP
  • Kirjoittaminen vain tarvittaessa (tietyille sivuille)

Älä unohda jättää ajatuksiasi kommentteihin! Ja tässä on haaste sinulle: Voidaanko soveltaa “oletusarvoista” vaihtoehtoa lyhytkoodiin (joten kun sivu ladataan, toinen kohde on auki, se ei ole ensimmäinen)? Kuinka tekisit sen?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map