Widget-laajennuksen luominen WordPressille

WordPress on hämmästyttävä sisällönhallintajärjestelmä, jolla on monia hienoja ominaisuuksia, kuten widgetit. Tässä opetusohjelmassa aion selittää sinulle kuinka luoda omia widgettejä pieneen laajennukseen. Tämä viesti kattaa joitain ylimääräisiä kohtia, jotka sinun on ymmärrettävä ennen itse widgetin luomista. Nyt sitä mennään!


Vaihe 1: Luo widget-laajennus

Loin äskettäin laajennuksen nimeltä ”Freelancer Widgets Bundle”, ja jotkut ihmiset kysyivät minulta, kuinka tällainen laajennus luodaan, joten päätin kirjoittaa tämän viestin. Ensimmäinen askel on laajennuksen luominen. Ja kuten huomaat, se ei ole vaikein osa. Plugin lisätään ylimääräinen koodi WordPressiin, kun se on aktivoitu. WordPress luo silmukan kansion kautta hakeaksesi kaikki käytettävissä olevat laajennukset ja luetteloidaksesi ne takatoimistossa. Laajennuksen luomiseen tarvitaan editori, kuten Coda (Mac) tai Dreamweaver (PC & Mac). Suosittelen, että luot laajennuksen WordPressin paikalliseen asennukseen, sen tekeminen live-palvelimelle voi aiheuttaa ongelmia, jos teet virheen. Joten odota, että testaat laajennusta, ennen kuin laitat siihen isännöintisi.

Avaa nyt kansio wp-content / plugins. Tähän kohtaan haluat lisätä laajennuksen. Luo uusi hakemisto ja kutsu sitä “widget-plugin” (itse asiassa tämä nimi voi olla mikä tahansa). Vaikka liitännäisellämme olisi vain yksi tiedosto, on aina parempi käyttää kansiota jokaisessa laajennuksessa. Luo hakemistossasi uusi tiedosto, nimeltään widget-plugin.php (myös tämä nimi voidaan muuttaa), ja avaa se. Olemme nyt lisäämässä ensimmäisiä koodirivejämme. WordPress-laajennuksen määritelmä noudattaa joitain sääntöjä, jotka voit lukea täällä koodeksissa. WordPress määrittelee laajennuksen seuraavasti:

Joten meidän on muokattava tätä koodia, jotta se sopii tarpeisiimme:

Tallenna tiedosto. Lisäämällä vain koodin widget-plugin.php-tiedostoomme, olemme luoneet laajennuksen! No, tällä hetkellä laajennus ei tee mitään, mutta WordPress tunnistaa sen. Varmista, että näin on, mene hallintoasi ja siirry ”Plugins” -valikkoon. Jos laajennus näkyy laajennusluettelossa, olet hyvä, muussa tapauksessa muista noudattaa ohjeitasi ja yritä uudelleen. Voit nyt aktivoida laajennuksen.

Vaihe 2: Luo widget

Aiomme nyt luoda itse widgetin. Tämä widget on PHP-luokka, joka laajentaa ydin WordPress-luokkaa WP_Widget. Widget määritellään periaatteessa tällä tavoin:

// Widget-luokka
luokka My_Custom_Widget laajentaa WP_Widget {

// Päärakentaja
julkinen tehtävä __construct () {
/ * ... * /
}

// Widget-muoto (taustaohjelmalle)
julkisen toiminnan muoto ($ esiintymä) {
/ * ... * /
}

// Päivitä widget-asetukset
julkisen toiminnan päivitys ($ new_instance, $ old_instance) {
/ * ... * /
}

// Näytä widget
julkisen toiminnan widget ($ args, $ esiintymä) {
/ * ... * /
}

}

// Rekisteröi widget
toiminto my_register_custom_widget () {
register_widget ('My_Custom_Widget');
}
add_action ('widgets_init', 'my_register_custom_widget');

Tämä koodi antaa WordPressille kaikki tiedot, joita järjestelmä tarvitsee voidakseen käyttää widgettiä:

  1. rakentaja, aloittaa widget
  2.  muoto () -toiminto luodaksesi widget-muodon hallinnossa
  3. päivitys () -toiminto, tallentaa widget-tiedot painikkeen aikana
  4. Ja widget () -toiminto widget-sisällön näyttämiseksi käyttöliittymässä

1 - rakentaja

Rakentaja on osa koodia, joka määrittelee widgetin nimen ja pääargumentit, alla on esimerkki siitä, miltä se näyttää.

// Päärakentaja
julkinen tehtävä __construct () {
vanhemman :: __-konstrukti (
'My_custom_widget',
__ ('Oma mukautettu widget', 'teksti_verkkotunnus'),
array (
'customize_selective_refresh' => totta,
)
);
}

Älä käytä __ () -työkalua widget-nimen ympärillä, WordPress käyttää tätä toimintoa käännökseen. Suosittelen, että käytät aina nämä toiminnot, jotta teemasi olisi täysin käännettävissä. Ja parametrin 'customize_selective_refresh' käyttö mahdollistaa widgetin päivittämisen alla Ulkonäkö> Mukauta kun muokataan widgettiä, joten koko sivun päivittämisen sijaan vain widget päivitetään muutoksia tehtäessä.

2 - Lomake () -toiminto

Tämä toiminto luo widget-muotoasetukset WordPressin hallinta-alueelle (joko Ulkonäkö> Widgetit tai Ulkonäkö> Mukauta> Widgetit). Tässä tapauksessa syötät tietosi verkkosivustolle näytettäväksi. Joten selitän, kuinka voit lisätä tekstikenttiä, tekstialueita, valintaruutuja ja valintaruutuja widget-muotoasetuksiin.

// Widget-muoto (taustaohjelmalle)
julkisen toiminnan muoto ($ esiintymä) {

// Aseta widget-oletusasetukset
$ oletus = taulukko (
'otsikko' => '',
'text' => '',
'textarea' => '',
'valintaruutu' => '',
'valitse' => '',
);

// Jäsennä nykyiset asetukset oletusarvoilla
uute (wp_parse_args ((array) $ esiintymä, $ oletusarvot)); ?>


/>

Tämä koodi lisää vain viittä kenttää widgettiin (otsikko, teksti, tekstialue, valinta ja valintaruutu). Joten määrität ensin widgetin oletusasetukset, sitten seuraava toiminto jäsentää widgetillesi määritetyt / tallennetut nykyiset asetukset oletusarvoilla (joten kaikki asetukset, joita ei ole, palautuvat oletusasetuksiin, kuten kun lisäät widgetin ensin sivupalkistasi). Ja viimeinen on html jokaiselle kentälle. Huomaa esc_attr (): n käyttö lomakekenttiä lisättäessä, tämä tehdään turvallisuussyistä. Aina, kun kaiut käyttäjän määrittelemää muuttujaa sivustossasi, varmista, että se on ensin puhdistettu.

3 - Päivitys () -toiminto

Päivitys () -toiminto on todella yksinkertainen. Koska WordPress-ydinkehittäjät lisäsivät todella tehokkaan widget-sovellusliittymän, meidän on lisättävä tämä koodi vain päivittääksesi jokainen kenttä:

// Päivitä widget-asetukset
julkisen toiminnan päivitys ($ new_instance, $ old_instance) {
$ esiintymä = $ old_instance;
$ instanssi ['title'] = isset ($ new_instance ['title'])? wp_strip_all_tags ($ new_instance ['title']): '';
$ instanssi ['text'] = isset ($ new_instance ['text'])? wp_strip_all_tags ($ new_instance ['text']): '';
$ instanssi ['textarea'] = isset ($ new_instance ['textarea'])? wp_kses_post ($ new_instance ['textarea']): '';
$ instanssi ['valintaruutu'] = isset ($ new_instance ['valintaruutu'])? 1: väärä;
$ esiintymä ['valitse'] = isset ($ new_instance ['valitse'])? wp_strip_all_tags ($ new_instance ['valitse']): '';
palauta $ esiintymä;
}

Kuten näet, meidän on tarkistettava jokainen asetus ja jos se ei ole tyhjä, tallenna se tietokantaan. Huomaa, että wp_strip_all_tags () - ja wp_kses_post () -toiminnot ovat käytössä, joita käytetään tietojen puhdistamiseen ennen kuin ne lisätään tietokantaan. Aina, kun lisäät MITÄÄN käyttäjän lähettämää sisältöä tietokantaan, sinun on varmistettava, että siinä ei ole haitallista koodia. Ensimmäinen funktio wp_strip_all_tags poistaa kaiken paitsi perustekstin, joten voit käyttää sitä kaikissa kentissä, joissa loppuarvo on merkkijono ja toinen funktio wp_kses_post () on sama toiminto, jota käytetään viestin sisällössä, ja se poistaa kaikki tunnisteet HTML: n lisäksi, kuten linkit , välejä, divs, kuvia jne.

4 - widget () -toiminto

Widget () -toiminto on se, joka tuottaa verkkosivuston sisällön. Se on mitä vierailijat näkevät. Tämä toiminto voidaan räätälöidä sisältämään CSS-luokat ja erityiset tunnisteet, jotka sopivat täydellisesti teemanäyttöön. Tässä on koodi (älä estä sitä, että sitä voidaan muokata helposti tarpeitasi vastaavaksi):

// Näytä widget
julkisen toiminnan widget ($ args, $ esiintymä) {

ote ($ args);

// Tarkista widget-asetukset
$ title = isset ($ esiintymä ['otsikko'])? apply_filters ('widget_title', $ esiintymä ['otsikko']): '';
$ text = isset ($ esiintymä ['text'])? $ esiintymä ['teksti']: '';
$ textarea = isset ($ esiintymä ['textarea'])? $ esiintymä ['textarea']: '';
$ select = isset ($ esiintymä ['valitse'])? $ esiintymä ['valitse']: '';
$ valintaruutu =! tyhjä ($ esiintymä ['valintaruutu'])? $ esiintymä ['valintaruutu']: väärä;

// WordPress-ydin ennen_widget-koukkua (aina mukana)
echo $ before_widget;

// Näytä widget
kaiku '
'; // Näytä widgetin otsikko, jos se on määritelty if ($ otsikko) { echo $ before_title. $ otsikko. $ After_title; } // Näytä tekstikenttä if ($ text) { kaiku '

'. $ tekstiä. '

'; } // Näytä tekstialuekenttä if (textarea $) { kaiku '

'. $ textarea. '

'; } // Näytä valintakenttä if ($ select) { kaiku '

'. $ valitse. '

'; } // Näytä jotain, jos valintaruutu on totta if ($ -valintaruutu) { kaiku '

Jotain mahtavaa

'; } kaiku '
'; // WordPress-ydin jälkeen_widget-koukku (sisältää aina) echo $ after_widget; }

Tämä koodi ei ole monimutkainen, sinun on muistettava vain tarkistaa, onko muuttuja asetettu, jos et ole ja jos haluat tulostaa sen, saat virheilmoituksen.

Täydellinen widget-laajennuskoodi

Nyt jos olet seurannut oikein, laajennuksesi pitäisi nyt olla täysin toimiva ja voit muokata sitä tarpeitasi vastaavaksi. Jos et ole seurannut opasta tai haluat tarkistaa koodin uudelleen, voit käydä Github-sivulla nähdäksesi koko koodin.

Näytä koko koodi Githubissa

johtopäätös

Näimme, että widgetin luominen laajennuksen sisälle on erittäin mielenkiintoista. Nyt sinun on tiedettävä, kuinka luodaan yksinkertainen laajennus, joka sisältää widgetin, jolla on erityyppiset kenttätyypit, ja opit kuinka mennä hiukan pidemmälle edistyneiden tekniikoiden avulla widgetin mukauttamiseksi. Onnittelut, teit uskomattoman työn!

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