Opetusohjelma: Luo mikrotietowidget yrityksellesi WordPressissä

Tässä opetusohjelmassa opimme luomaan mukautetun widgetin, joka tulostaa yrityksesi tiedot, kuten sen virallisen nimen, osoitteen, puhelinnumeron ja sähköpostiosoitteen. Mutta viemme sen askeleen pidemmälle tuomalla sen Microdata- tai skeeman merkinnän avulla, jonka avulla hakukoneet voivat ymmärtää sisältösi.

Widgetit ovat dynaamisia lohkoja, jotka voidaan sijoittaa teemasi käytettävissä oleville alueille. Yleensä teemassasi on vähintään yksi sivupalkki ja yksi tai useampi alue alatunnisteessa. Yritystietojen käyttäminen widgetissä alatunnisteessa on yleistä ja varsin älykästä – koska alatunniste näkyy kaikilla sivustosi sivuilla.

Mikrodata on HTML-lisäattribuutti, joka selittää, mitä tietty HTML-tunniste sisältää, jotta kone voi ymmärtää, mitä ne ovat (esim. yrityksen nimi, puhelinnumero, yrityksen osoite, yrityksen sähköpostiosoite jne.). Näin hakukoneet, kuten Google, voivat poimia tietoja yrityksestäsi HTML-koodistasi.

Mitä luomme

Widgetimme tulostaa tietoja Microdata-skeeman LocalBusiness avulla, joka on täydellinen organisaatiolle tai yritykselle. On täysin sinun päätettävissäsi, mitä ominaisuuksia haluat tulostaa. Napsauta yllä olevaa linkkiä lukeaksesi kaikki mahdolliset kiinteistöt LocalBusinessissa (mukaan lukien perityt). Yrityksesi tai maasi saattaa haluta toisenlaisia ​​tietoja.

Tämän opetusohjelman widget tulostaa seuraavat valinnaiset tiedot:

• Yrityksen nimi (Mikrodata-ominaisuus: legalName)
• ALV-tunnus tai organisaation numero (Mikrodata-ominaisuus: vatID)
• Postiosoite (mikrodatatunniste: PostalAddressominaisuuksilla streetAddress, postalCode, ja addressLocality)
• Yrityksen sähköpostiosoite (Mikrodata-omaisuus: email)
• Puhelinnumero (Mikrodata-ominaisuus: telephone)

Tämä opetusohjelma ei opasta sinua widgetin muotoilun läpi, koska tämän pitäisi olla melko suoraviivaista. Käyttöliittymässä widgetimme näyttää tavalliselta tekstiwidgetiltä. Mutta tietysti konepellin alla siinä on mallimerkinnät, jotka auttavat Googlea.

Mukautetun widgetin luomisen perusteet

Voit lisätä koodisi teemaasi functions.phptai luoda mukautetun laajennuksen. Muista vain, että jos pidät sen laajennuksena, menetät widgetin, kun deaktivoit laajennuksen. ja samalla tavalla pitämällä se teemassa, menetät widgetin, jos vaihdat toiseen teemaan. Tässä esimerkissä lisään koodin teeman functions.php.

Widgetin luominen tehdään oliopohjaisella PHP-koodilla. Kirjoitat PHP-luokan, joka laajentaa WordPressin widget-luokkaa, ja alustat sen soittamalla register_widget()ja antamalla luokkasi nimen. Tässä opetusohjelmassa olen nimennyt widget-luokanni LocalBusiness.

Aloitetaan kutsumalla register_widget()toimintoon kytketyn funktion sisällä widgets_init.

add_action('widgets_init', function() {
    register_widget('LocalBusiness');
});

Katsotaanpa nopeasti mukautetun widget-luokan runkoa:

class LocalBusiness extends WP_Widget {
 
    // Initialize your widget in the class constructor
    public function __construct() { }
 
    // Responsible for outputting the widget in frontend
    public function widget($args, $instance) { }
 
    // Responsible for outputting the widget settings in admin
    public function form($instance) { }
 
    // Responsible for saving settings in admin
    public function update($new_instance, $old_instance) { }
}

Kuten ylhäältä näet, tarvitset neljä toimintoa luokassasi. Käydään jokainen funktio yksitellen läpi ja täytä ne.

LocalBusiness Microdata Widgetin luominen

Loogisin paikka aloittaa on rakentaja, joka vastaa widgetin asettamisesta.

__construct()-funktio

Konstruktorin sisällä sinun on asetettava joitain muuttujia, kuten widgetin nimi, ja kutsuttava ylätason konstruktorifunktio (yläluokka on se, jota laajennat; WP_Widget). Lue lisää konstruktorin mahdollisista vaihtoehdoista täältä. Annan perustunnuksen, otsikon ja kuvauksen, kuten:

Voit tehdä enemmän __constructmenetelmässä, kuten asettaa komentosarjoja jonoon tai määrittää lisää widget-asetuksia. Mutta yllä oleva riittää yleensä useimmissa tapauksissa.

Form()-funktio

Seuraava vaihe on luoda kaikki asetukset ja syötteet, jotka widget hyväksyy järjestelmänvalvojassa. Asetusten tulostamiseen Widget adminille käytämme toimintoa, form()joka antaa sinulle yhden parametrin; taulukko, joka sisältää kaikki mahdollisesti tallennetut widget-vaihtoehdot. On tärkeää, että tulostat vastaavan tallennetun asetuksen kaikissa syötteissäsi, jotta tiedot säilyvät. (Katsomme, kuinka asetukset tallennetaan seuraavassa vaiheessa).

Lomaketoiminnossa on paljon seurattavaa, joten lisätään ensin yksi syöte viralliselle nimelle ja varmista, että ymmärrämme, mitä meidän on tehtävä:

Ensinnäkin yllä oleva koodi tulostaa joitain HTML-kääreitä ja -luokkia muodossa, jossa WordPress tulostaa widget-lomakkeensa – teemme tämän, jotta lomake näyttää hyvältä.

On kaksi toimintoa, joihin sinun on tutustuttava; get_field_id()ja get_field_name()ja molemmat ovat sisäisiä funktioita WP_Widget(siksi kutsut " $this->" edessä – kun taas $thisviittaa luokan ilmentymään). Funktiot palauttavat annetun kentän tunnuksen ja nimen, vastaavasti, käytettäväksi syötteissäsi idja namemääritteissäsi. Se on erittäin tärkeää Älä unohda lisätä namesyötteeseen attribuuttia, muuten et saa koskaan käsiksi sen arvoa tallennettaessa.

Ja lopuksi tulostamme nykyisen tallennetun arvon valuesyötteeseemme viittaamalla ohitettuun argumenttiin $instance. Jos teet tätä oman arvosi vuoksi, syötettä ei koskaan täytetä tietokantaan tallennetulla tiedolla, ja se näkyy tyhjänä joka kerta, mikä voi hämmentää käyttäjiä.

Jos haluat erilaisia ​​lomakesyöttöjä, kuten valintaruutuja tai avattavia valikoita, sinun pitäisi pystyä lisäämään ne helposti yllä mainittujen sääntöjen mukaisesti. Lisätään loput widget-asetukset. Ne ovat kaikki tekstinsyöttöjä, joten se on sama koodi kuin yllä toistettu, paitsi niiden kenttätunnukset. Menetelmämme form()näyttää tältä:

Jos lisäät widgetin käytettävissä olevaan widget-alueeseen, sen pitäisi näyttää tältä:

Update()-funktio

Toiminto update()on vastuussa syötettyjen arvojen tallentamisesta järjestelmänvalvojaan. Valitettavasti WordPress ei tee tätä automaattisesti puolestasi. Tässä funktiossa on kaksi parametria; yleensä nimeltä $new_instanceja $old_instance. Ensimmäisen parametrin $new_instancesisältä löydät kaikki lähetetyt arvot ja toisessa parametrissa $old_instancearvot, jotka on tällä hetkellä tallennettu tietokantaan. Näin voit tarvittaessa tehdä älykkäitä vertailuja.

Yleensä sinun tarvitsee vain tehdä uusi joukko widget-asetuksista ja tallentaa kaikki, mitä sisällä on asetettu $new_instance. Hoidamme myös jonkin verran desinfiointia. Lopuksi palautamme tämän taulukon, joka kertoo WordPressille, mitä tallentaa.

// Responsible for saving settings in admin
public function update($new_instance, $old_instance) {
    $instance = [];
    $instance['legal_name'] = (!empty($new_instance['legal_name']))? strip_tags($new_instance['legal_name']): '';
    $instance['vat_id'] = (!empty($new_instance['vat_id']))? strip_tags($new_instance['vat_id']): '';
    $instance['street_address'] = (!empty($new_instance['street_address']))? strip_tags($new_instance['street_address']): '';
    $instance['postal_code'] = (!empty($new_instance['postal_code']))? strip_tags($new_instance['postal_code']): '';
    $instance['postal_city'] = (!empty($new_instance['postal_city']))? strip_tags($new_instance['postal_city']): '';
    $instance['email_address'] = (!empty($new_instance['email_address']))? strip_tags($new_instance['email_address']): '';
    $instance['phone_number'] = (!empty($new_instance['phone_number']))? strip_tags($new_instance['phone_number']): '';
    return $instance;
}

Voit nyt testata widgettiäsi, jos haluat, ja tarkistaa, että syöttämäsi arvot tallennetaan. Ja jos muistat asettaa valuemääritteen oikein :ssä form(), kun tallennat ja painat refresh, arvojen pitäisi säilyä. Loistava! Nyt viimeiseen ja kieltämättä hauskimpaan vaiheeseen – frontend-bitin tulostamiseen.

Widget()-funktio

Toiminto widget()vastaa widgetin tulostamisesta käyttöliittymään. Funktiolle saadaan kaksi argumenttia; Ensinnäkin taulukko, jossa on hyödyllistä tietoa, kuten teemalle määritetyt widget-alueen kääreet, ja toiseksi tallennetut widget-asetusarvot.

Sinun widgetin tulosteen tulee aina alkaa kaikulla $args['before_widget']ja aina päättyä kaikuun $args['after_widget']. Tämä varmistaa, että widgettisi kääritään samoihin oikeisiin widget-HTML-kääreisiin, jotka teema määrittää. Samoja raitoja pitkin voit kaikua $args['before_title']ja $args['after_title']tulostaa oikeat HTML-kääreet widgetin otsikon ympärille. Meillä ei ole varsinaista widgetin otsikkoa, mutta käärimme yrityksen virallisen nimen widgetin otsikoksi.

Muussa tapauksessa saat tallennetut arvot käsiksi viittaamalla toiseen argumenttiin, avainnimien avulla $instance, jotka on asetettu form()ja update(). On hyvä käytäntö tulostaa vain määritetyt asetukset – ja jättää tyhjät asetukset huomiotta.

Koska tuotamme myös mikrodataa, meidän on lisättävä vastaavat ominaisuudet schema.orgin sääntöjen mukaisesti.

On täysin sinun päätettävissäsi, kuinka haluat tulostaa widgetin; saatat ehkä harkita HTML-kääreiden lisäämistä muotoilun helpottamiseksi.

Mukauta tulostetta, lisää tyyliä ja se on siinä!

Tiedoksi: Widgettisi saa rivitysluokan nimen " widget_<base ID>" (perustunnus on se, jonka annoit konstruktoriin). Meidän tapauksessamme widget saa luokan " widget_local_business". Tämä saattaa auttaa sinua lisäämään kohdennettua tyyliä.

Päätös ja lopullinen koodi

Tässä opetusohjelmassa opimme luomaan mukautetun widgetin ja kuinka renderöidä Microdata-muotoiltu tulos sen asetuksista. Sinun pitäisi pystyä luomaan omia widgetejäsi noudattamalla widget-luokan perusteita!

Viitteeksi tässä on koko koodi, kaikki yhdessä.